@wordpress/block-editor 11.3.6 → 11.5.0

package/src/components/block-draggable/test/__snapshots__/index.native.js.snap

@@ -5,28 +5,28 @@ exports[`BlockDraggable moves blocks: Initial order 1`] = `
 <p>This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`BlockDraggable moves blocks: Paragraph block moved from first to second position 1`] = `
-"<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+"<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
@@ -34,40 +34,40 @@ exports[`BlockDraggable moves blocks: Paragraph block moved from first to second
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`BlockDraggable moves blocks: Spacer block moved from third to first position 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
 <p>This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;

package/src/components/block-lock/modal.js

@@ -187,6 +187,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					</ul>
 					{ hasTemplateLock && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							className="block-editor-block-lock-modal__template-lock"
 							label={ __( 'Apply to all blocks inside' ) }
 							checked={ applyTemplateLock }

package/src/components/block-lock/style.scss

@@ -18,11 +18,6 @@
 	.components-checkbox-control__label {
 		font-weight: 600;
 	}
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-	}
 }
 .block-editor-block-lock-modal__checklist-item {
 	display: flex;
@@ -48,10 +43,6 @@
 	border-top: $border-width solid $gray-300;
 	margin-top: $grid-unit-20;
 	padding: $grid-unit-15 0;
-
-	.components-base-control__field {
-		margin: 0;
-	}
 }
 
 .block-editor-block-lock-modal__actions {

package/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap

@@ -6,25 +6,25 @@ exports[`Block Actions Menu block options copies and pastes a block 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Block Actions Menu block options cuts and pastes a block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -38,15 +38,15 @@ exports[`Block Actions Menu block options does not replace a non empty Paragraph
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
@@ -56,29 +56,29 @@ exports[`Block Actions Menu block options duplicates a block 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Block Actions Menu block options transforms a Paragraph block into a Pullquote block 1`] = `
 "<!-- wp:pullquote -->
-<figure class=\\"wp-block-pullquote\\"><blockquote><p>Hello!</p></blockquote></figure>
+<figure class="wp-block-pullquote"><blockquote><p>Hello!</p></blockquote></figure>
 <!-- /wp:pullquote -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
@@ -88,11 +88,11 @@ exports[`Block Actions Menu moving blocks disables the Move Down button for the
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
@@ -102,17 +102,17 @@ exports[`Block Actions Menu moving blocks disables the Move Up button for the fi
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Block Actions Menu moving blocks moves blocks up and down 1`] = `
 "<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -120,6 +120,6 @@ exports[`Block Actions Menu moving blocks moves blocks up and down 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -6,11 +6,11 @@ exports[`Block Mover Picker moving blocks disables the Move Down button for the
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
@@ -20,17 +20,17 @@ exports[`Block Mover Picker moving blocks disables the Move Up button for the fi
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 "<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -38,19 +38,19 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Block Mover Picker should match snapshot 1`] = `
-Array [
+[
   <View>
     <View
       accessibilityHint="Double tap to move the block to the left"
       accessibilityLabel="Move block left from position 2 to position 1"
       accessibilityRole="button"
       accessibilityState={
-        Object {
+        {
           "disabled": false,
         }
       }
@@ -65,7 +65,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "flex": 1,
           "justifyContent": "center",
@@ -81,7 +81,7 @@ Array [
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={
-          Object {
+          {
             "alignItems": "center",
             "aspectRatio": 1,
             "flex": 1,
@@ -93,7 +93,7 @@ Array [
       >
         <View
           style={
-            Object {
+            {
               "flexDirection": "row",
             }
           }
@@ -109,7 +109,7 @@ Array [
       accessibilityLabel="Move block right"
       accessibilityRole="button"
       accessibilityState={
-        Object {
+        {
           "disabled": true,
         }
       }
@@ -124,7 +124,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "flex": 1,
           "justifyContent": "center",
@@ -140,7 +140,7 @@ Array [
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={
-          Object {
+          {
             "alignItems": "center",
             "aspectRatio": 1,
             "flex": 1,
@@ -152,7 +152,7 @@ Array [
       >
         <View
           style={
-            Object {
+            {
               "flexDirection": "row",
             }
           }

package/src/components/block-popover/inbetween.js

@@ -68,53 +68,6 @@ function BlockPopoverInbetween( {
 	const previousElement = useBlockElement( previousClientId );
 	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
-	const style = useMemo( () => {
-		if (
-			// popoverRecomputeCounter is by definition always equal or greater than 0.
-			// This check is only there to satisfy the correctness of the
-			// exhaustive-deps rule for the `useMemo` hook.
-			popoverRecomputeCounter < 0 ||
-			( ! previousElement && ! nextElement ) ||
-			! isVisible
-		) {
-			return {};
-		}
-
-		const previousRect = previousElement
-			? previousElement.getBoundingClientRect()
-			: null;
-		const nextRect = nextElement
-			? nextElement.getBoundingClientRect()
-			: null;
-
-		if ( isVertical ) {
-			return {
-				width: previousRect ? previousRect.width : nextRect.width,
-				height:
-					nextRect && previousRect
-						? nextRect.top - previousRect.bottom
-						: 0,
-			};
-		}
-
-		let width = 0;
-		if ( previousRect && nextRect ) {
-			width = isRTL()
-				? previousRect.left - nextRect.right
-				: nextRect.left - previousRect.right;
-		}
-
-		return {
-			width,
-			height: previousRect ? previousRect.height : nextRect.height,
-		};
-	}, [
-		previousElement,
-		nextElement,
-		isVertical,
-		popoverRecomputeCounter,
-		isVisible,
-	] );
 
 	const popoverAnchor = useMemo( () => {
 		if (
@@ -142,10 +95,17 @@ function BlockPopoverInbetween( {
 
 				let left = 0;
 				let top = 0;
+				let width = 0;
+				let height = 0;
 
 				if ( isVertical ) {
 					// vertical
 					top = previousRect ? previousRect.bottom : nextRect.top;
+					width = previousRect ? previousRect.width : nextRect.width;
+					height =
+						nextRect && previousRect
+							? nextRect.top - previousRect.bottom
+							: 0;
 
 					if ( isRTL() ) {
 						// vertical, rtl
@@ -158,21 +118,32 @@ function BlockPopoverInbetween( {
 					}
 				} else {
 					top = previousRect ? previousRect.top : nextRect.top;
+					height = previousRect
+						? previousRect.height
+						: nextRect.height;
 
 					if ( isRTL() ) {
 						// non vertical, rtl
 						left = previousRect
 							? previousRect.left
 							: nextRect.right;
+						width =
+							previousRect && nextRect
+								? previousRect.left - nextRect.right
+								: 0;
 					} else {
 						// non vertical, ltr
 						left = previousRect
 							? previousRect.right
 							: nextRect.left;
+						width =
+							previousRect && nextRect
+								? nextRect.left - previousRect.right
+								: 0;
 					}
 				}
 
-				return new window.DOMRect( left, top, 0, 0 );
+				return new window.DOMRect( left, top, width, height );
 			},
 		};
 	}, [
@@ -267,13 +238,10 @@ function BlockPopoverInbetween( {
 			) }
 			resize={ false }
 			flip={ false }
-			placement="bottom-start"
+			placement="overlay"
 			variant="unstyled"
 		>
-			<div
-				className="block-editor-block-popover__inbetween-container"
-				style={ style }
-			>
+			<div className="block-editor-block-popover__inbetween-container">
 				{ children }
 			</div>
 		</Popover>

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -147,7 +147,9 @@ export function BlockSettingsDropdown( {
 		__experimentalSelectBlock
 			? () => {
 					const blockToSelect =
-						previousBlockClientId || nextBlockClientId;
+						previousBlockClientId ||
+						nextBlockClientId ||
+						firstParentClientId;
 
 					if (
 						blockToSelect &&
@@ -166,6 +168,7 @@ export function BlockSettingsDropdown( {
 			__experimentalSelectBlock,
 			previousBlockClientId,
 			nextBlockClientId,
+			firstParentClientId,
 			selectedBlockClientIds,
 		]
 	);

package/src/components/block-styles/index.js

@@ -99,7 +99,11 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 				} ) }
 			</div>
 			{ hoveredStyle && ! isMobileViewport && (
-				<Popover placement="left-start" offset={ 20 }>
+				<Popover
+					placement="left-start"
+					offset={ 20 }
+					focusOnMount={ false }
+				>
 					<div
 						className="block-editor-block-styles__preview-panel"
 						onMouseLeave={ () => styleItemHandler( null ) }

package/src/components/block-types-list/index.native.js

@@ -32,6 +32,7 @@ export default function BlockTypesList( {
 	name,
 	sections,
 	onSelect,
+	label,
 	listProps,
 	initialNumToRender = 3,
 } ) {
@@ -154,6 +155,7 @@ export default function BlockTypesList( {
 		<SectionList
 			onLayout={ onLayout }
 			testID={ `InserterUI-${ name }` }
+			accessibilityLabel={ label }
 			keyboardShouldPersistTaps="always"
 			sections={ sections }
 			initialNumToRender={ initialNumToRender }

package/src/components/child-layout-control/index.js

@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+function helpText( selfStretch, parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	if ( selfStretch === 'fill' ) {
+		return __( 'Stretch to fill available space.' );
+	}
+	if ( selfStretch === 'fixed' && orientation === 'horizontal' ) {
+		return __( 'Specify a fixed width.' );
+	} else if ( selfStretch === 'fixed' ) {
+		return __( 'Specify a fixed height.' );
+	}
+	return __( 'Fit contents.' );
+}
+
+/**
+ * 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.
+ *
+ * @return {WPElement} child layout edit element.
+ */
+export default function ChildLayoutControl( {
+	value: childLayout = {},
+	onChange,
+	parentLayout,
+} ) {
+	const { selfStretch, flexSize } = childLayout;
+
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			onChange( {
+				...childLayout,
+				selfStretch: 'fit',
+			} );
+		}
+	}, [] );
+
+	return (
+		<>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				size={ '__unstable-large' }
+				label={ childLayoutOrientation( parentLayout ) }
+				value={ selfStretch || 'fit' }
+				help={ helpText( selfStretch, parentLayout ) }
+				onChange={ ( value ) => {
+					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					onChange( {
+						...childLayout,
+						selfStretch: value,
+						flexSize: newFlexSize,
+					} );
+				} }
+				isBlock={ true }
+			>
+				<ToggleGroupControlOption
+					key={ 'fit' }
+					value={ 'fit' }
+					label={ __( 'Fit' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fill' }
+					value={ 'fill' }
+					label={ __( 'Fill' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fixed' }
+					value={ 'fixed' }
+					label={ __( 'Fixed' ) }
+				/>
+			</ToggleGroupControl>
+			{ selfStretch === 'fixed' && (
+				<UnitControl
+					size={ '__unstable-large' }
+					onChange={ ( value ) => {
+						onChange( {
+							...childLayout,
+							flexSize: value,
+						} );
+					} }
+					value={ flexSize }
+				/>
+			) }
+		</>
+	);
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -158,7 +158,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="true"
-                  aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+                  aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
                   class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
                   data-wp-c16t="true"
                   data-wp-component="Flex"