Add layout

Author: ellatrix

packages/block-editor/src/hooks/index.js

@@ -18,6 +18,7 @@ import fontSize from './font-size';
 import border from './border';
 import position from './position';
 import layout from './layout';
+import childLayout from './layout-child';
 import './content-lock-ui';
 import './metadata';
 import customFields from './custom-fields';
@@ -45,6 +46,7 @@ createBlockListBlockFilter( [
 	fontSize,
 	border,
 	position,
+	childLayout,
 ] );
 
 export { useCustomSides } from './dimensions';

packages/block-editor/src/hooks/layout-child.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useStyleOverride } from './utils';
+
+function useBlockPropsChildLayoutStyles( { style } ) {
+	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
+		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
+	} );
+	const layout = style?.layout ?? {};
+	const { selfStretch, flexSize } = layout;
+	const id = useInstanceId( useBlockPropsChildLayoutStyles );
+	const selector = `.wp-container-content-${ id }`;
+
+	let css = '';
+	if ( shouldRenderChildLayoutStyles ) {
+		if ( selfStretch === 'fixed' && flexSize ) {
+			css = `${ selector } {
+				flex-basis: ${ flexSize };
+				box-sizing: border-box;
+			}`;
+		} else if ( selfStretch === 'fill' ) {
+			css = `${ selector } {
+				flex-grow: 1;
+			}`;
+		}
+	}
+
+	useStyleOverride( { css } );
+
+	// Only attach a container class if there is generated CSS to be attached.
+	if ( ! css ) {
+		return;
+	}
+
+	// Attach a `wp-container-content` id-based classname.
+	return { className: `wp-container-content-${ id }` };
+}
+
+export default {
+	useBlockProps: useBlockPropsChildLayoutStyles,
+	attributeKeys: [ 'style' ],
+	hasSupport() {
+		return true;
+	},
+};

packages/block-editor/src/hooks/layout.js

@@ -417,63 +417,6 @@ export const withLayoutStyles = createHigherOrderComponent(
 	'withLayoutStyles'
 );
 
-function BlockWithChildLayoutStyles( { block: BlockListBlock, props } ) {
-	const layout = props.attributes.style?.layout ?? {};
-	const { selfStretch, flexSize } = layout;
-
-	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 }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
-	} );
-
-	useStyleOverride( { css } );
-
-	return <BlockListBlock { ...props } className={ className } />;
-}
-
-/**
- * Override the default block element to add the child layout styles.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withChildLayoutStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
-			return ! select( blockEditorStore ).getSettings()
-				.disableLayoutStyles;
-		} );
-
-		if ( ! shouldRenderChildLayoutStyles ) {
-			return <BlockListBlock { ...props } />;
-		}
-
-		return (
-			<BlockWithChildLayoutStyles
-				block={ BlockListBlock }
-				props={ props }
-			/>
-		);
-	},
-	'withChildLayoutStyles'
-);
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/layout/addAttribute',
@@ -484,8 +427,3 @@ addFilter(
 	'core/editor/layout/with-layout-styles',
 	withLayoutStyles
 );
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/layout/with-child-layout-styles',
-	withChildLayoutStyles
-);