From c4bad9d894377c588efb0d4418d3c99de0669830 Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 10 Feb 2026 01:34:10 +0530 Subject: [PATCH 1/2] Block Editor: Fix Columns block horizontal spacing when setting vertical gap --- packages/block-editor/src/layouts/flex.js | 18 +++++++++++++++++- packages/block-editor/src/layouts/grid.js | 22 +++++++++++----------- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index acfede83add5a8..e4eda55793fb0b 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -138,16 +138,32 @@ export default { style, blockName, hasBlockGapSupport, + globalBlockGapValue, layoutDefinitions = LAYOUT_DEFINITIONS, } ) { const { orientation = 'horizontal' } = layout; + // Determine the fallback gap value using global styles (theme.json), + // 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( ' ' ) || []; + fallbackGapValue = + gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ]; + } + // If a block's block.json skips serialization for spacing or spacing.blockGap, // don't apply the user-defined value to the styles. const blockGapValue = style?.spacing?.blockGap && ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) - ? getGapCSSValue( style?.spacing?.blockGap, '0.5em' ) + ? getGapCSSValue( style?.spacing?.blockGap, fallbackGapValue ) : undefined; const justifyContent = justifyContentMap[ layout.justifyContent ]; const flexWrap = flexWrapOptions.includes( layout.flexWrap ) diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 0fd93c6dd483ff..da8c6274f9642b 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -139,24 +139,24 @@ export default { } } - // If a block's block.json skips serialization for spacing or spacing.blockGap, - // don't apply the user-defined value to the styles. - const blockGapValue = - style?.spacing?.blockGap && - ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) - ? getGapCSSValue( style?.spacing?.blockGap, '0.5em' ) - : undefined; - - // Use the global blockGap value for grid column calculations when available - // If the gap value has both top and left (separated by space), use the left value for horizontal calculations + // Use the global blockGap value as fallback when available. + // 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 gapParts = processedGap?.split( ' ' ) || []; fallbackGapValue = gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ]; } + // If a block's block.json skips serialization for spacing or spacing.blockGap, + // don't apply the user-defined value to the styles. + const blockGapValue = + style?.spacing?.blockGap && + ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) + ? getGapCSSValue( style?.spacing?.blockGap, fallbackGapValue ) + : undefined; + let output = ''; const rules = []; From ac667fb10da4a3c6f9d8c2917e822d268d3cd5aa Mon Sep 17 00:00:00 2001 From: Mustafa Bharmal Date: Tue, 10 Feb 2026 11:18:50 +0530 Subject: [PATCH 2/2] Block Editor: Remove unnecessary null safety in layout gap calculations --- packages/block-editor/src/layouts/flex.js | 2 +- packages/block-editor/src/layouts/grid.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index e4eda55793fb0b..d29517d1531f89 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -153,7 +153,7 @@ export default { '0.5em' ); // Use the column gap value (second value if two values exist) - const gapParts = processedGlobalGap?.split( ' ' ) || []; + const gapParts = processedGlobalGap.split( ' ' ); fallbackGapValue = gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ]; } diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index da8c6274f9642b..c270ca92063cff 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -144,7 +144,7 @@ export default { let fallbackGapValue = '1.2rem'; if ( globalBlockGapValue ) { const processedGap = getGapCSSValue( globalBlockGapValue, '0.5em' ); - const gapParts = processedGap?.split( ' ' ) || []; + const gapParts = processedGap.split( ' ' ); fallbackGapValue = gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ]; }