Spacing step variables not getting generated properly with Block Spacing #44435
Description
Description
When applying Block Spacing to various blocks using the new spacing steps, often the variable is not generated correctly. Switching to manual spacing works as expected. This was tested using 6.1 and Gutenberg trunk. The same issue occurs without Gutenberg active.
Step-by-step reproduction instructions
- Use the TT3 theme or a similar theme that support spacing steps.
- Add a Group block with two paragraphs inside of it.
- Configure Block Spacing using the steps provided by the theme
- Editor looks fine, but view on the frontend and see that the step variable is not generated correctly.
Sample code for replicating (using TT3):
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"backgroundColor":"primary"} -->
<div class="wp-block-group has-primary-background-color has-background"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|80"}},"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Screenshots, screen recording, code snippet
Editor View:
Frontend View:
Error:
Environment info
- WordPress 6.1 Beta
- Gutenberg Trunk
- Twenty Twenty-Three
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