Initial prototype of simplified layout panel

docs/reference-guides/core-blocks.md

@@ -302,7 +302,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/group
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren, allowSwitching), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** allowedBlocks, tagName, templateLock
 
 ## Heading

packages/block-editor/src/components/block-edit/index.js

@@ -26,17 +26,23 @@ export default function BlockEdit( props ) {
 		isSelected,
 		clientId,
 		attributes = {},
+		setAttributes,
 		__unstableLayoutClassNames,
 	} = props;
+
 	const { layout = null } = attributes;
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
+	const updateLayoutType = ( newLayout ) => {
+		setAttributes( { layout: { ...layout, type: newLayout } } );
+	};
 	const context = {
 		name,
 		isSelected,
 		clientId,
 		layout: layoutSupport ? layout : null,
+		updateLayoutType,
 		__unstableLayoutClassNames,
 	};
 	return (

packages/block-editor/src/components/block-list/block.js

@@ -91,6 +91,7 @@ function BlockListBlock( {
 	onInsertBlocksAfter,
 	onMerge,
 	toggleSelection,
+	updateLayoutType,
 } ) {
 	const {
 		themeSupportsLayout,
@@ -138,6 +139,7 @@ function BlockListBlock( {
 			__unstableParentLayout={
 				Object.keys( parentLayout ).length ? parentLayout : undefined
 			}
+			updateParentLayoutType={ updateLayoutType }
 		/>
 	);
 

packages/block-editor/src/components/block-list/index.js

@@ -140,6 +140,7 @@ function Items( {
 	renderAppender,
 	__experimentalAppenderTagName,
 	layout = defaultLayout,
+	updateLayoutType,
 } ) {
 	const { order, selectedBlocks, visibleBlocks } = useSelect(
 		( select ) => {
@@ -172,6 +173,7 @@ function Items( {
 					<BlockListBlock
 						rootClientId={ rootClientId }
 						clientId={ clientId }
+						updateLayoutType={ updateLayoutType }
 					/>
 				</AsyncModeProvider>
 			) ) }

packages/block-editor/src/components/child-layout-control/index.js

@@ -26,17 +26,18 @@ function helpText( selfStretch, parentLayout ) {
 /**
  * Form to edit the child layout value.
  *
- * @param {Object}   props              Props.
- * @param {Object}   props.value        The child layout value.
- * @param {Function} props.onChange     Function to update the child layout value.
- * @param {Object}   props.parentLayout The parent layout value.
- *
+ * @param {Object}   props                        Props.
+ * @param {Object}   props.value                  The child layout value.
+ * @param {Function} props.onChange               Function to update the child layout value.
+ * @param {Object}   props.parentLayout           The parent layout value.
+ * @param {Function} props.updateParentLayoutType Function to update the parent layout type.
  * @return {WPElement} child layout edit element.
  */
 export default function ChildLayoutControl( {
 	value: childLayout = {},
 	onChange,
 	parentLayout,
+	updateParentLayoutType,
 } ) {
 	const { selfStretch, flexSize } = childLayout;
 
@@ -59,6 +60,9 @@ export default function ChildLayoutControl( {
 				help={ helpText( selfStretch, parentLayout ) }
 				onChange={ ( value ) => {
 					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					if ( value === 'fill' ) {
+						updateParentLayoutType( 'flex' );
+					}
 					onChange( {
 						...childLayout,
 						selfStretch: value,

packages/block-editor/src/components/global-styles/dimensions-panel.js

@@ -85,7 +85,7 @@ function useHasChildLayout( settings ) {
 	} = settings?.parentLayout ?? {};
 
 	const support =
-		( defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' ) &&
+		( defaultParentLayoutType || parentLayoutType ) &&
 		allowSizingOnChildren;
 
 	return !! settings?.layout && support;
@@ -206,6 +206,7 @@ export default function DimensionsPanel( {
 	// Special case because the layout controls are not part of the dimensions panel
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
+	updateParentLayoutType,
 } ) {
 	const { dimensions, spacing } = settings;
 
@@ -633,6 +634,7 @@ export default function DimensionsPanel( {
 						value={ childLayout }
 						onChange={ setChildLayout }
 						parentLayout={ settings?.parentLayout }
+						updateParentLayoutType={ updateParentLayoutType }
 					/>
 				</VStack>
 			) }

packages/block-editor/src/components/inner-blocks/index.js

@@ -60,6 +60,7 @@ function UncontrolledInnerBlocks( props ) {
 		orientation,
 		placeholder,
 		layout,
+		updateLayoutType,
 	} = props;
 
 	useNestedSettingsUpdate(
@@ -125,6 +126,7 @@ function UncontrolledInnerBlocks( props ) {
 				layout={ memoedLayout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
+				updateLayoutType={ updateLayoutType }
 			/>
 		</BlockContextProvider>
 	);
@@ -175,6 +177,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		clientId,
 		layout = null,
 		__unstableLayoutClassNames: layoutClassNames = '',
+		updateLayoutType,
 	} = useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
 	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
@@ -222,6 +225,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	const innerBlocksProps = {
 		__experimentalCaptureToolbars,
 		layout,
+		updateLayoutType,
 		...options,
 	};
 	const InnerBlocks =

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

@@ -72,6 +72,7 @@ export function DimensionsPanel( props ) {
 		attributes,
 		setAttributes,
 		__unstableParentLayout,
+		updateParentLayoutType,
 	} = props;
 	const settings = useBlockSettings( name, __unstableParentLayout );
 	const isEnabled = useHasDimensionsPanel( settings );
@@ -110,6 +111,7 @@ export function DimensionsPanel( props ) {
 				onChange={ onChange }
 				defaultControls={ defaultControls }
 				onVisualize={ setVisualizedProperty }
+				updateParentLayoutType={ updateParentLayoutType }
 			/>
 			{ !! settings?.spacing?.padding && (
 				<PaddingVisualizer