Spacing step variables not getting generated properly with Block Spacing

[ndiego]

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

1. Use the TT3 theme or a similar theme that support spacing steps.
2. Add a Group block with two paragraphs inside of it.
3. Configure Block Spacing using the steps provided by the theme
4. 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

[ndiego]

@glendaviesnz @annezazu FYI.

[ndiego]

A quick update after additional testing. This appears related to the new layout settings on container blocks. If you set "Inner blocks use content width" on the Group block, everything then works.

Editor:

Frontend:

The Column block obviously does not have this layout setting, so the issue still exists there. I guess that there is some conditional restricting the generation of the spacing step variables when this layout setting is not set 🤔

[annezazu]

@tellthemachines might you have time to dig in here based on your work with that inner blocks width setting?

[tellthemachines]

Thanks for reporting this @ndiego! I can confirm there's a missing bit of logic that should convert the preset values into CSS custom properties, and will have a fix up soon.