wip

WordPress · Feb 24, 2023 · b812d46 · b812d46
1 parent fd9c5de
commit b812d46
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 35 deletions.
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
@@ -212,8 +212,8 @@ export const withDataAlign = createHigherOrderComponent(
 
 		return (
 			<BlockListBlockWithAlign
-				{ ...props }
 				BlockListBlock={ BlockListBlock }
+				{ ...props }
 			/>
 		);
 	}

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -435,6 +435,50 @@ export const withLayoutStyles = createHigherOrderComponent(
 	}
 );
 
+function BlockListBlockWithChildLayout( { BlockListBlock, ...props } ) {
+	const { attributes } = props;
+	const { style: { layout = {} } = {} } = attributes;
+	const { selfStretch, flexSize } = layout;
+	const disableLayoutStyles = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return !! getSettings().disableLayoutStyles;
+	} );
+	const shouldRenderChildLayoutStyles = ! disableLayoutStyles;
+
+	const element = useContext( BlockList.__unstableElementContext );
+	const id = useInstanceId( BlockListBlock );
+	const selector = `.wp-container-content-${ id }`;
+
+	let css = '';
+
+	if ( selfStretch === 'fixed' && flexSize ) {
+		css += `${ selector } {
+				flex-basis: ${ flexSize };
+				box-sizing: border-box;
+			}`;
+	} else if ( selfStretch === 'fill' ) {
+		css += `${ selector } {
+				flex-grow: 1;
+			}`;
+	}
+
+	// Attach a `wp-container-content` id-based classname.
+	const className = classnames( props?.className, {
+		[ `wp-container-content-${ id }` ]:
+			shouldRenderChildLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+	} );
+
+	return (
+		<>
+			{ shouldRenderChildLayoutStyles &&
+				element &&
+				!! css &&
+				createPortal( <style>{ css }</style>, element ) }
+			<BlockListBlock { ...props } className={ className } />
+		</>
+	);
+}
+
 /**
  * Override the default block element to add the child layout styles.
  *
@@ -448,44 +492,16 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 		const { style: { layout = {} } = {} } = attributes;
 		const { selfStretch, flexSize } = layout;
 		const hasChildLayout = selfStretch || flexSize;
-		const disableLayoutStyles = useSelect( ( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return !! getSettings().disableLayoutStyles;
-		} );
-		const shouldRenderChildLayoutStyles =
-			hasChildLayout && ! disableLayoutStyles;
-
-		const element = useContext( BlockList.__unstableElementContext );
-		const id = useInstanceId( BlockListBlock );
-		const selector = `.wp-container-content-${ id }`;
 
-		let css = '';
-
-		if ( selfStretch === 'fixed' && flexSize ) {
-			css += `${ selector } {
-				flex-basis: ${ flexSize };
-				box-sizing: border-box;
-			}`;
-		} else if ( selfStretch === 'fill' ) {
-			css += `${ selector } {
-				flex-grow: 1;
-			}`;
+		if ( ! hasChildLayout ) {
+			return <BlockListBlock { ...props } />;
 		}
 
-		// Attach a `wp-container-content` id-based classname.
-		const className = classnames( props?.className, {
-			[ `wp-container-content-${ id }` ]:
-				shouldRenderChildLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
-		} );
-
 		return (
-			<>
-				{ shouldRenderChildLayoutStyles &&
-					element &&
-					!! css &&
-					createPortal( <style>{ css }</style>, element ) }
-				<BlockListBlock { ...props } className={ className } />
-			</>
+			<BlockListBlockWithChildLayout
+				BlockListBlock={ BlockListBlock }
+				{ ...props }
+			/>
 		);
 	}
 );