Section Styles not rendering "spacing.blockGap" values

[bacoords]

Description

When registering a block style variation (i.e. section style), the "blockGap" value isn't being output in the editor or on the front end. Other spacing values are working ("spacing.padding", "spacing.margin").

This is particularly useful in a number of blocks with flex layout options (column, group, navigation) and works when added as a value to the block in theme.json (styles.blocks) but not when added to a section style.

Step-by-step reproduction instructions

Add a new section style JSON file to your theme's /styles/ directory:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Footer Nav 1",
	"slug": "navigation-footer-1",
	"blockTypes": ["core/navigation"],
	"styles": {
		"spacing": {
			"blockGap": "var:preset|spacing|60"
		}
	}
}

This doesn't work.

However, adding this to your theme.json:

	"core/navigation": {
		"spacing": {
			"blockGap": "var:preset|spacing|80"
		}
	}

works fine.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.6-RC2
• Gutenberg 18.7.1

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

[ramonjd]

I think maybe the styles need to be added in toStyles where variations rulesets are built.

Example diff

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index dba86b1db7..3cac006419 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -1077,6 +1077,22 @@ export const toStyles = (
 										`:root :where(${ styleVariationSelector })`
 									);
 								}
+
+								if ( options.blockGap && hasBlockGapSupport ) {
+									const gapValue =
+										getGapCSSValue(
+											styleVariations?.spacing?.blockGap
+										) || '0.5em';
+									ruleset =
+										ruleset +
+										`:root :where(${ styleVariationSelector }) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
+									ruleset =
+										ruleset +
+										`:root :where(${ styleVariationSelector }) > :first-child { margin-block-start: 0; }`;
+									ruleset =
+										ruleset +
+										`:root :where(${ styleVariationSelector }) > :last-child { margin-block-end: 0; }`;
+								}
 							}
 						}
 					);
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index f302cf2aa3..6df023de75 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -327,7 +327,7 @@ function useBlockProps( { name, className, clientId } ) {
 			getBlockStyles,
 			clientId
 		);
-		const hasBlockGapSupport = false;
+		const hasBlockGapSupport = true;
 		const hasFallbackGapSupport = true;
 		const disableLayoutStyles = true;
 		const disableRootPadding = true;
@@ -340,7 +340,7 @@ function useBlockProps( { name, className, clientId } ) {
 			disableLayoutStyles,
 			disableRootPadding,
 			{
-				blockGap: false,
+				blockGap: true,
 				blockStyles: true,
 				layoutStyles: false,
 				marginReset: false,

Which leads me to another question: do variations support layout styles? Or, in other words, does getLayoutStyles() need to be called inside the loop as well?

cc @aaronrobertshaw for tips

[aaronrobertshaw]

Which leads me to another question: do variations support layout styles? Or, in other words, does getLayoutStyles() need to be called inside the loop as well?

To date they don't. The general direction was to focus on the more common color/typography styling. Then expand out to things like spacing, border etc.

This one is on my list to look at today. Appreciate the diff and head start @ramonjd 👍