From f523187b488c33c307fd11a906eff97dd3faae05 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Mon, 5 Dec 2022 10:43:58 +1100
Subject: [PATCH] Layout child fixed size should not be fixed by default and
 should always have a value set (#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 2ec5ac7876d4f550029a41e0cfe7b0b272caa026.
---
 lib/block-supports/layout.php                   |  5 ++---
 packages/block-editor/src/hooks/child-layout.js | 15 +++++++++++++++
 packages/block-editor/src/hooks/layout.js       |  1 -
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 8bda0902630372..c89a7871fdc0ba 100644
--- a/lib/block-supports/layout.php
+++ b/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'] ) {
diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js
index 89e5c345085a8b..20de7d06a2f64d 100644
--- a/packages/block-editor/src/hooks/child-layout.js
+++ b/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
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 8ee7a6615c3677..f279cc37d15163 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/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;
 			}`;