## theme development – How to set the margin on an innerBlock in a block variation?

Question

If we create a paragraph and give it a margin of 2 ( default settings no custom scales or theme.json ) then we get this:

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);margin-right:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30)">stuff</p>
<!-- /wp:paragraph -->


It sounds reasonable to extract var(--wp--preset--spacing--30) from the style attribute but this wouldn’t be right, as that’s generated HTML.

Instead we need to extract it from the block attributes, specifically the style attribute:

{
"style": {
"spacing": {
"margin": {
"top": "var:preset|spacing|30",
"right": "var:preset|spacing|30",
"bottom": "var:preset|spacing|30",
"left": "var:preset|spacing|30"
}
}
}
}


In this case, the real value is var:preset|spacing|30, which is converted into the CSS variable at runtime/on save.

Note that this value may not work for all themes as not every theme will have the same presets, and even if it is, it may cause problems with themes by overriding their defaults.

Instead, it may make more sense to click on the toggles to use a numeric value in a generic unit such as px or rem, e.g.:

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
<p style="margin-top:30px;margin-right:30px;margin-bottom:30px;margin-left:30px">stuff</p>
<!-- /wp:paragraph -->


0
3 weeks 2023-03-10T14:45:24-05:00 0 Answers 0 views 0