The gap control breaks theme.json block gap when using nested CSS var() fallback.

[inc2734]

Description

When styles.spacing.blockGap in theme.json uses a nested CSS variable with fallback, adjusting the column-gap or row-gap control produces invalid CSS.

Step-by-step reproduction instructions

1. Install WordPress 7.0 beta2 (or RC2)
2. Modify TT5 theme.json:

{
  "styles": {
    "spacing": {
      "blockGap": "var(--a, var(--b, 1.2rem))"
    }
  }
}

3. Ensure styles.spacing.blocks.core/columns is not set
4. Insert a Columns block
5. Confirm initial gap is correctly applied:

gap: var(--a, var(--b, 1.2rem));

6. Adjust column-gap using the block settings UI

Screenshots, screen recording, code snippet

column-gap not set:

Column gap is configured:

The resulting CSS should remain valid, e.g.:

gap: var(--a, var(--b, 1.2rem)) var(--wp--preset--spacing--40);

The generated CSS becomes invalid, for example:

gap: var(--b, var(--wp--preset--spacing--40)

• The outer var() is partially lost
• Parentheses become unbalanced
• Resulting CSS is syntactically broken

Environment info

• WordPress 7.0 RC2

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[karthikeya-io]

1. Fallback var() values in blockGap

{
  "styles": {
    "spacing": {
      "blockGap": "var(--a, var(--b, 1.2rem))"
    }
  }
}

• This configuration works correctly on the frontend.
• However, it breaks in the editor when either column gap or row gap is updated, as described in the issue.
• The root cause appears to be the following logic, which splits the CSS value using whitespace:

gutenberg/packages/block-editor/src/layouts/flex.js

Lines 155 to 160 in ac667fb

	// Use the column gap value (second value if two values exist)
	const gapParts = processedGlobalGap.split( ' ' );
	fallbackGapValue =
	gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ];
	}

Editor 🔴	Frontend 🟢

2. Shorthand two-value blockGap

"styles": {
	"spacing": {
		"blockGap": "20px 10px"
	}
},

When blockGap is defined as a shorthand string in theme.json, even for values without a var() fallback, updating only the row or column gap in the editor results in three values on the frontend.

Editor 🟠	Frontend 🔴
It works fine for values without var() fallback, but flips the values if the column gap is updated.	generated 3 values