Columns block: changing the vertical block spacing also wrongly changes the horizontal block spacing

[dianeco]

Description

Changing the vertical block spacing of the columns block also changes the horizontal block spacing, which isn't the expected behavior. The horizontal block spacing should keep its default value.

Step-by-step reproduction instructions

1. Using the Twenty Twenty-Three theme, insert two columns by pasting the following code.

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut leo nibh, placerat eget nisi non, sagittis convallis purus.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>Morbi in iaculis ligula. Mauris in libero suscipit, pulvinar erat a, rutrum purus.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

By default, the horizontal spacing is set by the theme.json file with a value of 1.5rem.

2. Select the columns block. In the settings sidebar, change only the vertical block spacing. Inside the editor, observe that the horizontal spacing has changed to 0.5em.

.editor-styles-wrapper .wp-block-columns.wp-container-1 {
    gap: var(--wp--preset--spacing--60) 0.5em;
}

3. On the front end, the horizontal spacing has changed to 2em.

.wp-block-columns.wp-container-1 {
    flex-wrap: nowrap;
    gap: var(--wp--preset--spacing--60) 2em;
}

I expect the horizontal spacing to keep the default value (1.5rem for Twenty Twenty-Three).

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.1 RC2 with/without Gutenberg 14.3.1
• Twenty Twenty-Three theme

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]

This issue was reviewed in today's Editor Bug Scrub. We have been able to replicate using the latest versions of Gutenberg and WordPress.

The issue can be "fixed" by manually specifying horizontal spacing in addition the custom vertical spacing, but at @dianeco indicates, you would expect the default theme blockGap value to be used instead of the hardcoded values in the Editor and Frontend.

[carolinan]

Ran into this today, it is still an issue.

[tp-cast-ai]

This is still broken. Even the manual "fix" won't always work. Only a single gap value is generated on the frontend. I'm not sure why the UI is even in the Editor if it's completely broken 🤔

[richtabor]

@carolinan Is this still occurring? I've not noticed it lately.

[t-hamano]

Tested with Gutenberg version 17.6.0, WordPress version 6.4.3, and the TT3 theme. This problem still appears to be unresolved.

On the editor side, the default gap value is 1.5rem:

Screenshot


The same goes for the front end:

Screenshot


Change the vertical spacing to 4 on the slider. The gap value becomes var(--wp--preset--spacing--60) 0.5em and the horizontal space changes unintentionally.

Screenshot


On the front end, the gap value is var(--wp--preset--spacing--60) 2em and the horizontal gap value is different from the default 1.5rem.

Screenshot