Try implementing partially in editor

WordPress · May 9, 2022 · 69893f5 · 69893f5
1 parent e2d969d
commit 69893f5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -106,7 +106,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
 				$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
 			}
-			$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
+			$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';  // TODO: If there's a value set at the block level in theme.json, how do we ensure this value doesn't override that?
 			$style    .= "gap: $gap_style;";
 		} else {
 			$style .= 'gap: 0.5em;';

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -212,8 +212,10 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const usedLayout = layout?.inherit
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
+		const layoutType = usedLayout?.type || 'flow';
 		const className = classnames( props?.className, {
 			[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
+			[ `is-layout-${ layoutType }` ]: true,
 		} );
 
 		return (
@@ -223,7 +225,9 @@ export const withLayoutStyles = createHigherOrderComponent(
 					createPortal(
 						<LayoutStyle
 							blockName={ name }
-							selector={ `.wp-container-${ id }` }
+							selector={ `${
+								props?.className || '' // TODO: It seems the block className isn't really available here.
+							}.wp-container-${ id }` }
 							layout={ usedLayout }
 							style={ attributes?.style }
 						/>,

diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
@@ -116,7 +116,7 @@ export default {
 			style?.spacing?.blockGap &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
 				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
-				: 'var( --wp--style--block-gap, 0.5em )';
+				: 'var( --wp--style--block-gap, 0.5em )'; // TODO: If there's a value set at the block level in theme.json, how do we ensure this value doesn't override that?
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;