The wordPress standard Gutenberg Sidebar \”Dimensions\” panel, does not give good control over spacings, since it only allows us to set \’fixed\’ spacings (with units \”%\”,\”rem\”,\”vh\”,\”vw\”,\”px\”,\”em\”). Additionally I wanted to have options to change the spacings for different screen size and have negative values possible ( e.g. removing a block-gap (
--wp--style--block-gap) in certain scenarios).
Therefor I made this little plugin: I wanted to map the spacing set in editor to my CSS Custom Property (CSSCP) (
Hope this might be helpful for some others out there.
- Upload the plugin files to the
/wp-content/plugins/yours59-spacings-for-core-blocksdirectory, or install the plugin through the WordPress plugins screen directly.
- Activate the plugin via the \’Plugins\’ screen in WordPress
- You should see a panel in gutenberg inspector named \”Custom Spacings\”
Margins are not shown in editor?
Margins will not be shown perfectly in editor. But in frontend they are supposed to work.
I get \”This block contains unexpected or invalid content.\”. What can I do ?
Be aware that installing this plugin, playing around with it and then uninstall it, will show
\”This block contains unexpected or invalid content.\” on the blocks you changed.
No worries: Pressing Attempt Block Recovery will work.
There is no manipulation of existing classes or attributes.
Plugin only injects some inline styles.