Layout Styles: Adding block gap global styles does not work for Columns block

[aaronrobertshaw]

Description

The application of block gap styles globally for Columns blocks works in the site editor but not the frontend or post editor. It does appear to be working for other blocks such as the Cover block.

Step-by-step reproduction instructions

1. Navigate to Appearance > Editor
2. Add Columns and Cover blocks to a page and give them some content
3. Navigate to Global Styles > Blocks > Columns and give it some block gap
4. Confirm the Cover block displays the block gap in the editor
5. Save and view on the frontend. Notice the lack of block gap
6. Back in the site editor, adjust the global block gap style for the Cover block
7. Save the page and confirm it is rendered correctly in both the editor and frontend

Screenshots, screen recording, code snippet

Screen.Recording.2024-05-22.at.5.53.43.PM.mp4

Environment info

No response

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

[ltrihan]

Hi 👋🏻

I also have the same issue.

Using WordPress 6.5.5
If I try the same gap on Twenty Twenty Four, it works. So I guess the problem is coming from my hybrid custom theme.

I will try to dig the issue and will tell you if I found any fix.

[ltrihan]

Hi 👋🏻

Still haven't found any fix for this issue 😬

What about you ?

[aaronrobertshaw]

Sorry for the delay in replying @ltrihan 🙇

I've been digging into this issue and it appears to have been around for a long time. I need a little more time to prove some of the hunches/explanations I have aren't just red herrings. For the time being though this is what (I think) I have found:

• Simple string gap values for blocks that support "axial gaps" (horizontal and vertical) were broken when support for spacing presets were added in Block Spacing: using spacing controls for block gap values to support presets in the UI #43466
• The way a simple string value is handled currently means it gets mapped to a single "side" within the global styles object defining block gaps
• The "side" that is set for that object maps to row-gap or vertical spacing
• If a theme sets a simple string value for a block's spacing (i.e. for blockGap):
  • the UI will display a single slider for the block spacing control
  • that string value is mapped incorrectly so the style generated assigns the gap value to the row-gap and 0 for column-gap
  • this is why the gap appears to collapse as soon as the block spacing control in Global Styles is adjusted
• Hacking the splitGapValue function to accept a new param flagging that we need split axial values back, then making the return in that case map the value to both axes, makes things work for the Columns and Buttons blocks (Found when testing with TT5 Buttons is also broken)
  • The downside to this quick hack is that the Block Spacing control gets expanded to show to sliders (one for each axis). Small price to pay for it to work but there's probably a cleaner solution to be had
• Another issue I found is that string values for blockGap in theme.json could make full use of the CSS shorthand for gap and define two values separated by a space. This scenario hasn't been handled by block gap support to date.
• The theme.json schema might be incorrect as well
  • When testing what would happen if defining a split block gap value within theme.json there's a linting error stating the value should be a single string

Again, take this with a grain of salt. It's a complex area of the codebase and it's entirely possible I might have dropped the thread I was following and accidentally picked up an unrelated thread instead 😅

---

While we work on a solution, the following might be a workaround for you:

1. Avoid defining blockGap as a simple string for any block that supports axial spacing.
2. Instead define the blockGap style in theme.json using an object:

			"core/columns": {
				"spacing": {
					"blockGap": {
						"top": "var:preset|spacing|50",
						"right": "var:preset|spacing|80",
						"bottom": "var:preset|spacing|50",
						"left": "var:preset|spacing|80"
					}
				}
			},

3. This should allow using the Global Styles UI without it generating an incorrect gap style.

Using the above config in TT5, it makes the Columns block work again for me. Same for the Buttons block.

---

Depending on how much code needs tweaking, there's a small chance we can land a fix in 6.7 as it impacts TT5. Otherwise, it might go in a point release or the workaround in the TT5 theme for its initial launch.

[ndiego]

Given the discussion here, I am punting this to 6.7.1.