We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
If the serialisation of supports.spacing is skipped, getSpacingClassesAndStyles() can be used to obtain the spacing styles.
supports.spacing
getSpacingClassesAndStyles()
In this case, padding and margins are correctly retrieved, but blockGap is not.
padding
margins
blockGap
block.json
supports.spacing.__experimentalSkipSerialisation
import { __experimentalGetSpacingClassesAndStyles as useSpacingProps } from '@wordpress/block-editor';
const spacingProps = useSpacingProps( attributes );
"supports": { "spacing": { "__experimentalSkipSerialization": true, "padding": true, "blockGap": true } }
import { __experimentalGetSpacingClassesAndStyles as useSpacingProps, } from '@wordpress/block-editor'; export default function ( { attributes } ) { const spacingProps = useSpacingProps( attributes ); console.log( spacingProps ); }
{ "style":{ "spacing":{ "blockGap":"var:preset|spacing|40", "padding":{ "top":"var:preset|spacing|20", "bottom":"var:preset|spacing|20", "left":"var:preset|spacing|20", "right":"var:preset|spacing|20" } } } }
style: { paddingTop: 'var(--wp--preset--spacing--20)', paddingRight: 'var(--wp--preset--spacing--20)', paddingBottom: 'var(--wp--preset--spacing--20)', paddingLeft: 'var(--wp--preset--spacing--20)', gap: 'var(--wp--preset--spacing--40)', }
style: { paddingTop: 'var(--wp--preset--spacing--20)', paddingRight: 'var(--wp--preset--spacing--20)', paddingBottom: 'var(--wp--preset--spacing--20)', paddingLeft: 'var(--wp--preset--spacing--20)', }
Following the code, only padding and margin were imported below.
margin
https://github.com/WordPress/gutenberg/blob/trunk/packages/style-engine/src/styles/spacing/index.ts
Yes
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Description
If the serialisation of
supports.spacing
is skipped,getSpacingClassesAndStyles()
can be used to obtain the spacing styles.In this case,
padding
andmargins
are correctly retrieved, butblockGap
is not.Step-by-step reproduction instructions
block.json
, setsupports.spacing.__experimentalSkipSerialisation
to true.import { __experimentalGetSpacingClassesAndStyles as useSpacingProps } from '@wordpress/block-editor';
.const spacingProps = useSpacingProps( attributes );
Screenshots, screen recording, code snippet
block.json
Edit
Input attributes
Ideal
Actual
Following the code, only
padding
andmargin
were imported below.https://github.com/WordPress/gutenberg/blob/trunk/packages/style-engine/src/styles/spacing/index.ts
Environment info
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: