Remove legacy attribs and ensure correct output.

WordPress · Feb 23, 2024 · bd4c7d2 · bd4c7d2
1 parent c0255a0
commit bd4c7d2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js
@@ -192,9 +192,15 @@ export default function ChildLayoutControl( {
 		let selectedValue;
 		if ( isFlowOrConstrained ) {
 			// Replace "full" with "fill" for full width alignments.
-			if ( currentAlignment === 'full' ) {
+			if (
+				currentAlignment === 'full' &&
+				parentLayoutType === 'constrained'
+			) {
 				selectedValue = 'fill';
-			} else if ( currentAlignment === 'wide' ) {
+			} else if (
+				currentAlignment === 'wide' &&
+				parentLayoutType === 'constrained'
+			) {
 				selectedValue = 'wide';
 			} else if ( selfAlign === 'fixedNoShrink' ) {
 				selectedValue = 'fixedNoShrink';
@@ -248,10 +254,17 @@ export default function ChildLayoutControl( {
 		const { key } = selectedItem;
 		if ( isFlowOrConstrained ) {
 			if ( key === 'fill' ) {
-				onChange( { [ widthProp ]: key } );
-				onChangeAlignment( 'full' );
+				onChange( { ...childLayout, [ widthProp ]: key } );
+				/**
+				 * Fill exists for both flow and constrained layouts but
+				 * should only change alignment for constrained layouts.
+				 * "fill" in flow layout is the default state of its children.
+				 */
+				if ( parentLayoutType === 'constrained' ) {
+					onChangeAlignment( 'full' );
+				}
 			} else if ( key === 'wide' ) {
-				onChange( { [ widthProp ]: key } );
+				onChange( { ...childLayout, [ widthProp ]: key } );
 				onChangeAlignment( 'wide' );
 			} else if ( key === 'fixedNoShrink' ) {
 				onChange( {
@@ -260,21 +273,28 @@ export default function ChildLayoutControl( {
 				} );
 				onChangeAlignment( undefined );
 			} else {
-				onChange( { [ widthProp ]: key } );
+				onChange( { ...childLayout, [ widthProp ]: key } );
 				onChangeAlignment( undefined );
 			}
 		} else if ( parentLayoutType === 'flex' ) {
+			// if the layout is horizontal, reset any flexSize when changing width.
+			const resetFlexSize =
+				orientation !== 'vertical' ? undefined : flexSize;
 			onChange( {
 				...childLayout,
 				[ widthProp ]: key,
+				flexSize: resetFlexSize,
 			} );
 		}
 	};
 
 	const onChangeHeight = ( newHeight ) => {
+		// If the layout is vertical, reset any flexSize when changing height.
+		const resetFlexSize = orientation === 'vertical' ? undefined : flexSize;
 		onChange( {
 			...childLayout,
 			[ heightProp ]: newHeight.selectedItem.key,
+			flexSize: resetFlexSize,
 		} );
 	};
 

diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
@@ -47,15 +47,13 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 
 	let css = '';
 	if ( shouldRenderChildLayoutStyles ) {
+		// Flex size should still be output for back compat.
 		if ( selfStretch === 'fixed' && flexSize ) {
 			css = `${ selector } {
 				flex-basis: ${ flexSize };
 				box-sizing: border-box;
 			}`;
-		} else if ( selfStretch === 'fill' ) {
-			css = `${ selector } {
-				flex-grow: 1;
-			}`;
+			// Grid type styles.
 		} else if ( columnSpan ) {
 			css = `${ selector } {
 				grid-column: span ${ columnSpan };
@@ -150,10 +148,14 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				css += `${ selector } {
 						height: fit-content;
 					}`;
-			} else if ( layout[ heightProp ] === 'fixedNoShrink' ) {
+			} else if ( layout[ heightProp ] === 'fixedNoShrink' && height ) {
 				css += `${ selector } {
 						height: ${ height };
 					}`;
+			} else if ( layout[ heightProp ] === 'fixed' && height ) {
+				css += `${ selector } {
+						max-height: ${ height };
+					}`;
 			}
 		}
 		/**