Always pass layout to inner blocks (#47477)

* Always pass layout to inner blocks * Fix migration eligibility rule. * Use stable fallback object. * Add deprecation fixture. * Use existing EMPTY_OBJECT pattern * Check if block has layout support before adding layout to context. * Simplify deprecation fixture markup.
WordPress · Jan 31, 2023 · fff6d81 · fff6d81 · github-actions · Jan 31, 2023
1 parent 69de091
commit fff6d81
Show file tree

Hide file tree

Showing 19 changed files with 240 additions and 97 deletions.
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
@@ -3,6 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 
+import { hasBlockSupport } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
@@ -20,11 +21,24 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {
-	const { name, isSelected, clientId, __unstableLayoutClassNames } = props;
+	const {
+		name,
+		isSelected,
+		clientId,
+		attributes = {},
+		__unstableLayoutClassNames,
+	} = props;
+	const { layout = null } = attributes;
+	const layoutSupport = hasBlockSupport(
+		name,
+		'__experimentalLayout',
+		false
+	);
 	const context = {
 		name,
 		isSelected,
 		clientId,
+		layout: layoutSupport ? layout : null,
 		__unstableLayoutClassNames,
 	};
 	return (

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -29,6 +29,9 @@ import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import useBlockDropZone from '../use-block-drop-zone';
+import useSetting from '../use-setting';
+
+const EMPTY_OBJECT = {};
 
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
@@ -53,7 +56,7 @@ function UncontrolledInnerBlocks( props ) {
 		renderAppender,
 		orientation,
 		placeholder,
-		__experimentalLayout,
+		layout,
 	} = props;
 
 	useNestedSettingsUpdate(
@@ -64,7 +67,7 @@ function UncontrolledInnerBlocks( props ) {
 		templateLock,
 		captureToolbars,
 		orientation,
-		__experimentalLayout
+		layout
 	);
 
 	useInnerBlockTemplateSync(
@@ -82,17 +85,25 @@ function UncontrolledInnerBlocks( props ) {
 		[ clientId ]
 	);
 
-	const { allowSizingOnChildren = false } =
-		getBlockSupport( name, '__experimentalLayout' ) || {};
+	const defaultLayoutBlockSupport =
+		getBlockSupport( name, '__experimentalLayout' ) || EMPTY_OBJECT;
+
+	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
+
+	const defaultLayout = useSetting( 'layout' ) || EMPTY_OBJECT;
 
-	const layout = useMemo(
+	const usedLayout = layout || defaultLayoutBlockSupport;
+
+	const memoedLayout = useMemo(
 		() => ( {
-			...__experimentalLayout,
+			// Default layout will know about any content/wide size defined by the theme.
+			...defaultLayout,
+			...usedLayout,
 			...( allowSizingOnChildren && {
 				allowSizingOnChildren: true,
 			} ),
 		} ),
-		[ __experimentalLayout, allowSizingOnChildren ]
+		[ defaultLayout, usedLayout, allowSizingOnChildren ]
 	);
 
 	// This component needs to always be synchronous as it's the one changing
@@ -103,7 +114,7 @@ function UncontrolledInnerBlocks( props ) {
 				rootClientId={ clientId }
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ layout }
+				__experimentalLayout={ memoedLayout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
 			/>
@@ -152,8 +163,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
 export function useInnerBlocksProps( props = {}, options = {} ) {
 	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
 		options;
-	const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } =
-		useBlockEditContext();
+	const {
+		clientId,
+		layout = null,
+		__unstableLayoutClassNames: layoutClassNames = '',
+	} = useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
 	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
 		( select ) => {
@@ -199,6 +213,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 
 	const innerBlocksProps = {
 		__experimentalCaptureToolbars,
+		layout,
 		...options,
 	};
 	const InnerBlocks =

diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
@@ -67,22 +67,13 @@ export default {
 				info: alignmentInfo[ alignment ],
 			} ) );
 		}
-		const { contentSize, wideSize } = layout;
 
 		const alignments = [
 			{ name: 'left' },
 			{ name: 'center' },
 			{ name: 'right' },
 		];
 
-		if ( contentSize ) {
-			alignments.unshift( { name: 'full' } );
-		}
-
-		if ( wideSize ) {
-			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
-		}
-
 		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
 
 		return alignments;

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -36,7 +36,7 @@ const DEFAULT_BLOCK = {
 };
 
 function ButtonsEdit( { attributes, className } ) {
-	const { fontSize, layout = {}, style } = attributes;
+	const { fontSize, style } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
@@ -59,7 +59,7 @@ function ButtonsEdit( { attributes, className } ) {
 				{ className: preferredStyle && `is-style-${ preferredStyle }` },
 			],
 		],
-		__experimentalLayout: layout,
+
 		templateInsertUpdatesSelection: true,
 	} );
 

diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
@@ -10,7 +10,6 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { getBlockSupport } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 
 /**
@@ -29,21 +28,11 @@ const ALLOWED_BLOCKS = [
 	'core/comments-pagination-next',
 ];
 
-const getDefaultBlockLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		'__experimentalLayout'
-	);
-	return layoutBlockSupportConfig?.default;
-};
-
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow, layout },
+	attributes: { paginationArrow },
 	setAttributes,
 	clientId,
-	name,
 } ) {
-	const usedLayout = layout || getDefaultBlockLayout( name );
 	const hasNextPreviousBlocks = useSelect( ( select ) => {
 		const { getBlocks } = select( blockEditorStore );
 		const innerBlocks = getBlocks( clientId );
@@ -64,7 +53,6 @@ export default function QueryPaginationEdit( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalLayout: usedLayout,
 	} );
 
 	// Get the Discussion settings

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -73,7 +73,6 @@ const linkOptions = [
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const allowedBlocks = [ 'core/image' ];
-const LAYOUT = { type: 'default', alignments: [] };
 
 const PLACEHOLDER_TEXT = Platform.isNative
 	? __( 'ADD MEDIA' )
@@ -531,7 +530,6 @@ function GalleryEdit( props ) {
 		allowedBlocks,
 		orientation: 'horizontal',
 		renderAppender: false,
-		__experimentalLayout: LAYOUT,
 		...nativeInnerBlockProps,
 	} );
 

diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
@@ -108,7 +108,9 @@ const deprecated = [
 			);
 		},
 		isEligible: ( { layout } ) =>
-			! layout || layout.inherit || layout.contentSize,
+			! layout ||
+			layout.inherit ||
+			( layout.contentSize && layout.type !== 'constrained' ),
 		migrate: ( attributes ) => {
 			const { layout = null } = attributes;
 			if ( ! layout ) {

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -117,7 +117,6 @@ function GroupEdit( {
 			renderAppender: hasInnerBlocks
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
 			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);

diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js
@@ -31,11 +31,6 @@ const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
 };
 
-const LAYOUT = {
-	type: 'default',
-	alignments: [],
-};
-
 export default function NavigationInnerBlocks( {
 	clientId,
 	hasCustomPlaceholder,
@@ -131,7 +126,6 @@ export default function NavigationInnerBlocks( {
 				parentOrChildHasSelection
 					? InnerBlocks.ButtonBlockAppender
 					: false,
-			__experimentalLayout: LAYOUT,
 			placeholder: showPlaceholder ? placeholder : undefined,
 		}
 	);

diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
@@ -2,14 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	useSetting,
 	__experimentalRecursionProvider as RecursionProvider,
 	__experimentalUseHasRecursion as useHasRecursion,
-	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
 import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
@@ -39,16 +36,9 @@ function ReadOnlyContent( { userCanEdit, postType, postId } ) {
 	);
 }
 
-function EditableContent( { layout, context = {} } ) {
+function EditableContent( { context = {} } ) {
 	const { postType, postId } = context;
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings()?.supportsLayout;
-	}, [] );
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		postType,
@@ -61,7 +51,6 @@ function EditableContent( { layout, context = {} } ) {
 			value: blocks,
 			onInput,
 			onChange,
-			__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
 		}
 	);
 	return <div { ...props } />;

diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js
@@ -9,7 +9,6 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { getBlockSupport } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 
 /**
@@ -28,21 +27,11 @@ const ALLOWED_BLOCKS = [
 	'core/query-pagination-next',
 ];
 
-const getDefaultBlockLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		'__experimentalLayout'
-	);
-	return layoutBlockSupportConfig?.default;
-};
-
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow, layout },
+	attributes: { paginationArrow },
 	setAttributes,
 	clientId,
-	name,
 } ) {
-	const usedLayout = layout || getDefaultBlockLayout( name );
 	const hasNextPreviousBlocks = useSelect( ( select ) => {
 		const { getBlocks } = select( blockEditorStore );
 		const innerBlocks = getBlocks( clientId );
@@ -61,7 +50,6 @@ export default function QueryPaginationEdit( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalLayout: usedLayout,
 	} );
 	return (
 		<>