1

I am trying to define a block variation that has an innerblock with a margin. I was able to set the color of the innerBlock just fine, but for the life of me, I can't make the margin work.

Here's what I currently have:

registerBlockVariation("core/group", {
  // ...
  innerBlocks: [
    [
      "core/heading",
      {
        textColor: "white", // this works fine
        spacing: {
          margin: {
            top: "var(--wp--preset--spacing--50)",     // does not work
            bottom: "var(--wp--preset--spacing--50)",
          },
        },
      },
      [],
    ],
  ],
});

This has no effect in the editor, and I don't see a style being overridden in the browser.

I've tried as many variations of this as I can think of, but the margin isn't getting picked up. Based on the docs, this seems like the correct way to do this, but I haven't found a resource that officially goes into how to style innerBlocks like this.

1
  • you can't assume that a spacing of 50 has been set in the current theme in a block. You might know purely because you wrote both that this is true, but the system you're working with cannot. theme.json can because both are defined in the same file. You're probably going to have to put in a number. What does it say if you choose that value on a block then look at the HTML comment with the attributes?
    – Tom J Nowell
    Mar 10, 2023 at 20:28

1 Answer 1

2

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 -->
1
  • The issue I had was that the spacing key needed to be nested in a style. I assumed that since textColor worked, styling attributes went at the same level. Mar 13, 2023 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.