Layout child fixed size should not be fixed by default and should alw…

…ays have a value set (WordPress#46139)

* Change behaviour of fixed child size to not be fixed by default

* Fix boo-boo

* Remove unshrink control

* Determine fixed size automatically

* Revert "Determine fixed size automatically"

This reverts commit 2ec5ac7.

lib/block-supports/layout.php

@@ -337,9 +337,8 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 			$child_layout_styles[] = array(
 				'selector'     => ".$container_content_class",
 				'declarations' => array(
-					'flex-shrink' => '0',
-					'flex-basis'  => $block['attrs']['style']['layout']['flexSize'],
-					'box-sizing'  => 'border-box',
+					'flex-basis' => $block['attrs']['style']['layout']['flexSize'],
+					'box-sizing' => 'border-box',
 				),
 			);
 		} elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) {

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

@@ -7,6 +7,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -43,6 +44,20 @@ export function ChildLayoutEdit( {
 	const { layout: childLayout = {} } = style;
 	const { selfStretch, flexSize } = childLayout;
 
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			setAttributes( {
+				style: {
+					...style,
+					layout: {
+						...childLayout,
+						selfStretch: 'fit',
+					},
+				},
+			} );
+		}
+	}, [] );
+
 	return (
 		<>
 			<ToggleGroupControl

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

@@ -444,7 +444,6 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 
 		if ( selfStretch === 'fixed' && flexSize ) {
 			css += `${ selector } {
-				flex-shrink: 0;
 				flex-basis: ${ flexSize };
 				box-sizing: border-box;
 			}`;