Block Editor: Fix blockGap fallback parsing for nested var() values (#77750)

Co-authored-by: Mustafabharmal <mustafabharmal@git.wordpress.org>
Co-authored-by: karthikeya-io <karthikeya01@git.wordpress.org>
Co-authored-by: Swanand01 <swanandm@git.wordpress.org>
Co-authored-by: inc2734 <inc2734@git.wordpress.org>

Author: 5 people

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

@@ -23,7 +23,8 @@ import {
  * Internal dependencies
  */
 import { appendSelectors, getBlockGapCSS } from './utils';
-import { getGapCSSValue } from '../hooks/gap';
+import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 import {
 	BlockControls,
 	JustifyContentControl,
@@ -147,15 +148,12 @@ export default {
 		// falling back to '0.5em' for backwards compatibility.
 		let fallbackGapValue = '0.5em';
 		if ( globalBlockGapValue ) {
-			// Process the global gap value to handle preset values
-			const processedGlobalGap = getGapCSSValue(
-				globalBlockGapValue,
-				'0.5em'
-			);
-			// Use the column gap value (second value if two values exist)
-			const gapParts = processedGlobalGap.split( ' ' );
+			const gapBox =
+				getGapBoxControlValueFromStyle( globalBlockGapValue );
 			fallbackGapValue =
-				gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ];
+				getSpacingPresetCssVar( gapBox?.left ) ||
+				getSpacingPresetCssVar( gapBox?.top ) ||
+				'0.5em';
 		}
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,

packages/block-editor/src/layouts/grid.js

@@ -21,7 +21,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { appendSelectors, getBlockGapCSS } from './utils';
-import { getGapCSSValue } from '../hooks/gap';
+import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 import { shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
@@ -143,10 +144,12 @@ export default {
 		// If the gap value has both top and left (separated by space), use the left value for horizontal calculations.
 		let fallbackGapValue = '1.2rem';
 		if ( globalBlockGapValue ) {
-			const processedGap = getGapCSSValue( globalBlockGapValue, '0.5em' );
-			const gapParts = processedGap.split( ' ' );
+			const gapBox =
+				getGapBoxControlValueFromStyle( globalBlockGapValue );
 			fallbackGapValue =
-				gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ];
+				getSpacingPresetCssVar( gapBox?.left ) ||
+				getSpacingPresetCssVar( gapBox?.top ) ||
+				'1.2rem';
 		}
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,