How to set the margin on an innerBlock in a block variation?

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 -->

Related Posts:

  1. Proper, exhaustive documentation for wp.editor etc
  2. Edit srcset and sizes attributes in Gutenberg image, cover and gallery – blocks
  3. Add colors to existing color palette without replacing it
  4. Can you filter posts by meta key with the getEntitityRecords selector?
  5. WP Gutenberg custom block – generate theme colors from SASS and use them in the inspector and php callback
  6. create blocks programmtically on theme activation
  7. Can I customize any WordPress parent block-based theme template files by child theme like a parent classic theme?
  8. How to support Lazy Loading Assets in a WordPress Theme?
  9. WordPress Gutenberg Theme: Structure, Hierarchy and Custom Templates
  10. Gutenberg Reusable Block as part of WordPress Theme page
  11. Custom button block doesn’t work
  12. How to float an image in Gutenberg
  13. Gutenberg – editor-font-sizes in functions not working
  14. Can’t select my block by clicking on it
  15. Which file handles the block latest posts, I want to examine excerpt handling
  16. create-guten-block in wordpress theme?
  17. What VSCode extensions are there for working with block themes? [closed]
  18. What is the “correct” way to add hooks or similar PHP behavior to a blocktheme?
  19. Not able to select width of blocks inside of cover block
  20. How to check if a WordPress core block is active in sidebar
  21. gutenberg add classes to list items
  22. How do you replace content generated by custom fields with custom blocks in Block Editor?
  23. Custom Blocks as part of a theme
  24. How to wrap all titles generated by Gutenberg “Heading” block with tag
  25. How to add InnerBlock multiple times in the same block
  26. Moving post title down the page / Removing a block from a post
  27. HTML block gutenberg templates
  28. Gutenberg theme development: how to add “headers” option under styles > colors > elements?
  29. Change default rel attributes for Image Block & Button Block
  30. How to update mark-up of a gallery block in a custom theme?
  31. Auto focus RichText field
  32. How to create nested array attribute
  33. Show popover with url and option to open in new window
  34. How to Modify WP_Includes/blocks/latest_posts.php
  35. How to render block editor in wp-admin custom pages programmatically
  36. Social-Link block not loading html on page with custom theme
  37. How to diagnose wp-env environment problem
  38. Attribute form NumberControl doesn’t update when I update page before it lose its focus
  39. WP Gutenberg custom block – generate theme colors from SASS and use them in the inspector and php callback
  40. Posts Page shows Classic Editor interface not Gutenberg
  41. How can I include custom Gutenberg Blocks in a theme?
  42. Block validation failed for `core/pullquote` after adding theme support for editor-color-palette
  43. Is there a way to add classes to a page when using a Gutenberg reusable block as page layout?
  44. Correct way to make a custom block theme responsive
  45. Multiple content areas with Gutenberg – Transparent areas mid content
  46. Insert gutenberg blocks into template
  47. Template for posts of category in block theme?
  48. Can’t select my block by clicking on it on apiVersion – but using blockProps
  49. How can I use pre declared blocks in a php file?
  50. Is there any filter or action hook to remove layout classes from appearing in my templates?
  51. Full site editing templates folder vs block-templates
  52. Align images to the left of the content
  53. Image and font support missing in editor when deploying theme remotely
  54. Why is my Toggle field not showing in Gutenberg?
  55. When trying to run build script with gutenberg (with SVG import) – Error: Plugin name should be specified
  56. Block to show posts from same category
  57. Making update notification functionality for my themes
  58. How to disable 3.1 “Admin Bar” via script for the admin user?
  59. Where do I find the functions triggered within a hook?
  60. How to Change CSS Variable value in Theme Customizer Live Preview
  61. Easy WordPress theme creation tutorial? [closed]
  62. How do I add a post to a menu
  63. Where is definied the theme location for the main menu in a WordPress template?
  64. How to handle custom form submission?
  65. menu behavior is not as expected
  66. Disable front-page.php template
  67. Same ACF on two different pages
  68. Default string not appearing want to translate
  69. How to make a local cache of mshots images
  70. Using a page as home, how do I prevent nav from setting both home and page links active?
  71. Child Theme’s style.css not loading in mobile browser
  72. Broken theme, template is missing
  73. WordPress page/blog incorporated into static website
  74. Premium theme licensing of php called through AJAX
  75. Issue on Accessing To Ajax Enqeued File to Pass to URL for Ajax Call
  76. pass wordpress template directory into ajax url call
  77. Custom jquery not code not working in wordpress
  78. Customize Option Framework
  79. Under theme folder, what’s sequence of action for index.php, page.php, single.php?
  80. Register a custom post type as public = false, but have content appear in search engines?
  81. Theme author.php transfer
  82. How to display only author’s name for the current post?
  83. WordPress displaying two different headers, one at top and one below footer
  84. Mix it up & WordPress
  85. two col layout bootstrap 4 with one fixed col and fade in effect on image
  86. Styling the website via the customizer – do the changes stay after theme update?
  87. How to submit a guest post with rich text editor?
  88. Theme Development : License help
  89. show posts in different styling
  90. Infinite scroll loads new posts several times
  91. How to reduce repetitive code
  92. How to filter content by language with WPGlobus
  93. Enqueue script/style with multiple GET parameters
  94. Is it possible to create more than one design in a WordPress theme? [closed]
  95. Next Post Link not working with parameters to restrict to same term
  96. How to install Woocommerce without plugin?
  97. Correct way to make a title a link
  98. Is there a WordPress theme or plugin with built-in user management
  99. Dynamic nav menu with icons [closed]
  100. WordPress administration is gone after creating base theme