Implement changes in site editor / global styles comparable to PHP ch…

…anges
WordPress · May 23, 2022 · 46704cf · 46704cf
1 parent aca60cf
commit 46704cf
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 13 deletions.
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
@@ -123,8 +123,11 @@ export default {
 		const blockGapValue =
 			style?.spacing?.blockGap &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? getGapCSSValue( style?.spacing?.blockGap, fallbackValue )
-				: `var( --wp--style--block-gap, ${ fallbackValue } )`;
+				? `gap: ${ getGapCSSValue(
+						style?.spacing?.blockGap,
+						fallbackValue
+				  ) };`
+				: '';
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
@@ -151,7 +154,7 @@ export default {
 				${ appendSelectors( selector ) } {
 					display: flex;
 					flex-wrap: ${ flexWrap };
-					gap: ${ hasBlockGapStylesSupport ? blockGapValue : fallbackValue };
+					${ hasBlockGapStylesSupport ? blockGapValue : 'gap: ' + fallbackValue };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 

diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
@@ -125,7 +125,7 @@ export default {
 			blockGapStyleValue?.top &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
 				? blockGapStyleValue?.top
-				: 'var( --wp--style--block-gap )';
+				: '';
 
 		let output =
 			!! contentSize || !! wideSize
@@ -165,12 +165,15 @@ export default {
 			}
 		`;
 
-		if ( hasBlockGapStylesSupport ) {
+		if ( hasBlockGapStylesSupport && blockGapValue ) {
 			output += `
 				${ appendSelectors( selector, '> *' ) } {
 					margin-block-start: 0;
 					margin-block-end: 0;
 				}
+			`;
+
+			output += `
 				${ appendSelectors( selector, '> * + *' ) } {
 					margin-block-start: ${ blockGapValue };
 				}

diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -43,13 +43,8 @@ function useHasMargin( name ) {
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ settings ] = useSetting( 'spacing.blockGap', name );
-	// Do not show the gap control panel for block-level global styles
-	// as they do not work on the frontend.
-	// See: https://github.com/WordPress/gutenberg/pull/39845.
-	// We can revert this condition when they're working again.
-	return !! name
-		? false
-		: settings && supports.includes( '--wp--style--block-gap' );
+
+	return settings && supports.includes( '--wp--style--block-gap' );
 }
 
 function filterValuesBySides( values, sides ) {

diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -29,7 +29,7 @@ import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
+import { LAYOUT_STYLES, PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
 import { GlobalStylesContext } from './context';
 import { useSetting } from './hooks';
 
@@ -388,6 +388,21 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 				`${ duotoneSelector }{${ duotoneDeclarations.join( ';' ) };}`;
 		}
 
+		// Process blockGap styles.
+		if ( styles?.spacing?.blockGap ) {
+			const gapValue = styles.spacing.blockGap;
+			delete styles.spacing.blockGap;
+			Object.entries( LAYOUT_STYLES[ '--wp--style--block-gap' ] ).forEach(
+				( [ additionalSelector, cssProperty ] ) => {
+					const combinedSelector =
+						selector === ROOT_BLOCK_SELECTOR
+							? `${ selector } ${ additionalSelector }`
+							: `${ selector }${ additionalSelector }`;
+					ruleset += `${ combinedSelector } { ${ cssProperty }: ${ gapValue }; }`;
+				}
+			);
+		}
+
 		// Process the remaning block styles (they use either normal block class or __experimentalSelector).
 		const declarations = getStylesDeclarations( styles );
 		if ( declarations.length === 0 ) {

diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
@@ -21,6 +21,13 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'padding',
 ];
 
+export const LAYOUT_STYLES = {
+	'--wp--style--block-gap': {
+		'.is-layout-flex': 'gap',
+		'.is-layout-flow > * + *': 'margin-top',
+	},
+};
+
 export const PRESET_METADATA = [
 	{
 		path: [ 'color', 'palette' ],