@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/block-patterns-list/index.js

@@ -12,7 +12,6 @@ import {
 	Composite,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { VisuallyHidden, Text, Tooltip } from '@wordpress/ui';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -195,8 +194,8 @@ function BlockPatternsList(
 		onHover,
 		onClickPattern,
 		orientation,
-		label = __( 'Block patterns' ),
 		category,
+		label = __( 'Patterns' ),
 		showTitlesAsTooltip,
 		pagingProps,
 	},

package/src/components/block-preview/README.md

@@ -26,7 +26,7 @@ A block instance (object) or a blocks array you would like to render a preview.
 
 Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview.
 
-`viewportWidth` can be used to simulate how blocks look on different device sizes or to make sure make sure multiple previews will be rendered with the same scale, regardless of their content.
+`viewportWidth` can be used to simulate how blocks look on different device sizes or to make sure multiple previews will be rendered with the same scale, regardless of their content.
 
 Set `viewportWidth` to `0` to make the viewport the same width as the container.
 

package/src/components/block-quick-navigation/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport, getBlockType } from '@wordpress/blocks';
+import { getBlockType } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -20,6 +20,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { unlock } from '../../lock-unlock';
 
 export default function BlockQuickNavigation( {
 	clientIds,
@@ -52,7 +53,7 @@ function BlockQuickNavigationItem( {
 	hasListViewTab,
 } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { isSelected, childBlocks, hasListViewSupport, blockName } =
+	const { isSelected, childBlocks, shouldRenderListView, blockName } =
 		useSelect(
 			( select ) => {
 				const {
@@ -60,7 +61,8 @@ function BlockQuickNavigationItem( {
 					hasSelectedInnerBlock,
 					getBlockOrder,
 					getBlockName,
-				} = select( blockEditorStore );
+					shouldRenderBlockListView,
+				} = unlock( select( blockEditorStore ) );
 
 				const _blockName = getBlockName( clientId );
 
@@ -69,9 +71,7 @@ function BlockQuickNavigationItem( {
 						isBlockSelected( clientId ) ||
 						hasSelectedInnerBlock( clientId, /* deep: */ true ),
 					childBlocks: getBlockOrder( clientId ),
-					hasListViewSupport:
-						_blockName === 'core/navigation' ||
-						hasBlockSupport( _blockName, 'listView' ),
+					shouldRenderListView: shouldRenderBlockListView( clientId ),
 					blockName: _blockName,
 				};
 			},
@@ -88,7 +88,7 @@ function BlockQuickNavigationItem( {
 
 	const hasChildren = childBlocks && childBlocks.length > 0;
 	const canNavigateToListView =
-		hasChildren && hasListViewTab && hasListViewSupport;
+		hasChildren && hasListViewTab && shouldRenderListView;
 
 	return (
 		<Button

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

@@ -107,7 +107,6 @@ export default function BlockRenameModal( { clientId, onClose } ) {
 			>
 				<VStack spacing="3">
 					<TextControl
-						__next40pxDefaultSize
 						value={ editedBlockName ?? blockName }
 						label={ __( 'Name' ) }
 						help={

package/src/components/block-switcher/block-transformations-menu.js

@@ -88,8 +88,7 @@ const BlockTransformationsMenu = ( {
 	onSelectVariation,
 	blocks,
 } ) => {
-	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
-		useState();
+	const [ hoveredTransformItem, setHoveredTransformItem ] = useState();
 
 	const { priorityTextTransformations, restTransformations } =
 		useGroupedTransforms( possibleBlockTransformations );
@@ -101,17 +100,18 @@ const BlockTransformationsMenu = ( {
 		<RestTransformationItems
 			restTransformations={ restTransformations }
 			onSelect={ onSelect }
-			setHoveredTransformItemName={ setHoveredTransformItemName }
+			setHoveredTransformItem={ setHoveredTransformItem }
 		/>
 	);
 	return (
 		<>
 			<MenuGroup label={ __( 'Transform to' ) } className={ className }>
-				{ hoveredTransformItemName && (
+				{ hoveredTransformItem && (
 					<PreviewBlockPopover
 						blocks={ switchToBlockType(
 							blocks,
-							hoveredTransformItemName
+							hoveredTransformItem.name,
+							hoveredTransformItem.variationName
 						) }
 					/>
 				) }
@@ -126,12 +126,10 @@ const BlockTransformationsMenu = ( {
 				) }
 				{ priorityTextTransformations.map( ( item ) => (
 					<BlockTransformationItem
-						key={ item.name }
+						key={ item.id || item.name }
 						item={ item }
 						onSelect={ onSelect }
-						setHoveredTransformItemName={
-							setHoveredTransformItemName
-						}
+						setHoveredTransformItem={ setHoveredTransformItem }
 					/>
 				) ) }
 				{ ! hasBothContentTransformations && restTransformItems }
@@ -148,14 +146,14 @@ const BlockTransformationsMenu = ( {
 function RestTransformationItems( {
 	restTransformations,
 	onSelect,
-	setHoveredTransformItemName,
+	setHoveredTransformItem,
 } ) {
 	return restTransformations.map( ( item ) => (
 		<BlockTransformationItem
-			key={ item.name }
+			key={ item.id || item.name }
 			item={ item }
 			onSelect={ onSelect }
-			setHoveredTransformItemName={ setHoveredTransformItemName }
+			setHoveredTransformItem={ setHoveredTransformItem }
 		/>
 	) );
 }
@@ -163,7 +161,7 @@ function RestTransformationItems( {
 function BlockTransformationItem( {
 	item,
 	onSelect,
-	setHoveredTransformItemName,
+	setHoveredTransformItem,
 } ) {
 	const { name, icon, title, isDisabled } = item;
 	return (
@@ -171,13 +169,13 @@ function BlockTransformationItem( {
 			className={ getBlockMenuDefaultClassName( name ) }
 			onClick={ ( event ) => {
 				event.preventDefault();
-				onSelect( name );
+				onSelect( name, item.variationName );
 			} }
 			disabled={ isDisabled }
-			onMouseLeave={ () => setHoveredTransformItemName( null ) }
-			onMouseEnter={ () => setHoveredTransformItemName( name ) }
-			onFocus={ () => setHoveredTransformItemName( name ) }
-			onBlur={ () => setHoveredTransformItemName( null ) }
+			onMouseLeave={ () => setHoveredTransformItem( null ) }
+			onMouseEnter={ () => setHoveredTransformItem( item ) }
+			onFocus={ () => setHoveredTransformItem( item ) }
+			onBlur={ () => setHoveredTransformItem( null ) }
 		>
 			<BlockIcon icon={ icon } showColors />
 			{ title }

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

@@ -87,8 +87,8 @@ function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 		}
 	}
 	// Simple block transformation based on the `Block Transforms` API.
-	function onBlockTransform( name ) {
-		const newBlocks = switchToBlockType( blocks, name );
+	function onBlockTransform( name, variationName ) {
+		const newBlocks = switchToBlockType( blocks, name, variationName );
 		replaceBlocks( clientIds, newBlocks );
 		selectForMultipleBlocks( newBlocks );
 	}
@@ -166,8 +166,8 @@ function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 						blockVariationTransformations
 					}
 					blocks={ blocks }
-					onSelect={ ( name ) => {
-						onBlockTransform( name );
+					onSelect={ ( name, variationName ) => {
+						onBlockTransform( name, variationName );
 						onClose();
 					} }
 					onSelectVariation={ ( name ) => {

package/src/components/block-toolbar/block-toolbar-icon.js

@@ -19,6 +19,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { store as blockEditorStore } from '../../store';
 import { hasPatternOverridesDefaultBinding } from '../../utils/block-bindings';
 import { unlock } from '../../lock-unlock';
+import { isIsolatedEditorKey } from '../../store/private-keys';
 
 function getBlockIconVariant( { select, clientIds } ) {
 	const {
@@ -29,8 +30,11 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getTemplateLock,
 		getBlockEditingMode,
 		canEditBlock,
+		isWithinEditedContentOnlySection,
+		getSettings,
 	} = unlock( select( blockEditorStore ) );
 	const { getBlockStyles } = select( blocksStore );
+	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 	const hasTemplateLock = clientIds.some(
 		( id ) => getTemplateLock( id ) === 'contentOnly'
@@ -42,7 +46,10 @@ function getBlockIconVariant( { select, clientIds } ) {
 	const hasBlockStyles =
 		isSingleBlock && !! getBlockStyles( blockName )?.length;
 	const hasPatternNameInSelection = clientIds.some(
-		( id ) => !! getBlockAttributes( id )?.metadata?.patternName
+		( id ) =>
+			!! getBlockAttributes( id )?.metadata?.patternName &&
+			! isWithinEditedContentOnlySection( id ) &&
+			! isIsolatedEditor
 	);
 	const hasPatternOverrides = clientIds.every( ( clientId ) =>
 		hasPatternOverridesDefaultBinding(
@@ -86,20 +93,29 @@ function getBlockIconVariant( { select, clientIds } ) {
 }
 
 function getBlockIcon( { select, clientIds } ) {
-	const { getBlockName, getBlockAttributes } = unlock(
-		select( blockEditorStore )
-	);
+	const {
+		getBlockName,
+		getBlockAttributes,
+		isWithinEditedContentOnlySection,
+		getSettings,
+	} = unlock( select( blockEditorStore ) );
+	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
+
 	const blockAttributes = getBlockAttributes( firstClientId );
-	if ( _isSingleBlock && blockAttributes?.metadata?.patternName ) {
+	if (
+		_isSingleBlock &&
+		blockAttributes?.metadata?.patternName &&
+		! isWithinEditedContentOnlySection( firstClientId ) &&
+		! isIsolatedEditor
+	) {
 		return symbol;
 	}
 
 	const blockName = getBlockName( firstClientId );
 	const blockType = getBlockType( blockName );
-
 	if ( _isSingleBlock ) {
 		const { getActiveBlockVariation } = select( blocksStore );
 		const match = getActiveBlockVariation( blockName, blockAttributes );

package/src/components/block-toolbar/test/block-toolbar-icon.js

@@ -13,11 +13,33 @@ import { paragraph } from '@wordpress/icons';
  * Internal dependencies
  */
 import BlockToolbarIcon from '../block-toolbar-icon';
+import { isIsolatedEditorKey } from '../../../store/private-keys';
 
+jest.mock( '@wordpress/blocks', () => {
+	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
+	return {
+		...actualImplementation,
+		getBlockType: ( name ) => ( {
+			name,
+			title: name === 'core/template-part' ? 'Template Part' : 'Group',
+			icon: `${ name }-icon`,
+		} ),
+	};
+} );
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: ( value ) => ( {
+		registerPrivateActions: jest.fn(),
+		registerPrivateSelectors: jest.fn(),
+		...value,
+	} ),
+} ) );
 jest.mock( '../../block-title/use-block-display-title', () =>
 	jest.fn().mockReturnValue( 'Block Name' )
 );
+jest.mock( '../../block-icon', () =>
+	jest.fn( ( { icon } ) => <span data-testid="block-icon">{ icon }</span> )
+);
 jest.mock( '../../block-switcher', () =>
 	jest.fn( ( { children } ) => (
 		<div data-testid="block-switcher">{ children }</div>
@@ -38,6 +60,34 @@ describe( 'BlockToolbarIcon', () => {
 		clientIds: [ 'test-client-id' ],
 		isSynced: false,
 	};
+	const setupToolbarSelectors = ( {
+		attributes = {
+			metadata: {
+				patternName: 'theme/hero',
+			},
+		},
+		blockName = 'core/group',
+		getActiveBlockVariation = () => null,
+		settings = {},
+		isWithinEditedSection = false,
+	} = {} ) => {
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				get: () => false,
+				getBlockName: () => blockName,
+				getBlockAttributes: () => attributes,
+				getSettings: () => settings,
+				getBlockParentsByBlockName: () => [],
+				canRemoveBlocks: () => true,
+				getTemplateLock: () => undefined,
+				getBlockEditingMode: () => 'default',
+				canEditBlock: () => true,
+				getBlockStyles: () => [ {} ],
+				getActiveBlockVariation,
+				isWithinEditedContentOnlySection: () => isWithinEditedSection,
+			} ) )
+		);
+	};
 
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -144,6 +194,55 @@ describe( 'BlockToolbarIcon', () => {
 		} );
 	} );
 
+	describe( 'pattern sections', () => {
+		it( 'should not show the block switcher before the section is being edited', () => {
+			setupToolbarSelectors();
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.queryByTestId( 'block-switcher' )
+			).not.toBeInTheDocument();
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-disabled',
+				'true'
+			);
+		} );
+
+		it( 'should show the block switcher when the section is being edited', () => {
+			setupToolbarSelectors( { isWithinEditedSection: true } );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should show the block icon for pattern wrappers in isolated editors', () => {
+			setupToolbarSelectors( {
+				attributes: {
+					metadata: {
+						name: 'Header',
+						patternName: 'theme/header-wrapper',
+					},
+				},
+				settings: {
+					[ isIsolatedEditorKey ]: true,
+				},
+			} );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+			expect( screen.getByTestId( 'block-icon' ) ).toHaveTextContent(
+				'core/group-icon'
+			);
+		} );
+	} );
+
 	describe( 'label calculation', () => {
 		it( 'should use block title for single block', () => {
 			useSelect.mockImplementation( () => ( {

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -157,7 +157,13 @@ export default function useBlockToolbarPopoverProps( {
 					isSticky
 				)
 			),
-		[ contentElement, selectedBlockElement, scrollContainer, toolbarHeight ]
+		[
+			contentElement,
+			selectedBlockElement,
+			scrollContainer,
+			toolbarHeight,
+			isSticky,
+		]
 	);
 
 	// Update props when the block is moved. This also ensures the props are
@@ -173,18 +179,18 @@ export default function useBlockToolbarPopoverProps( {
 
 		// Update the toolbar props on viewport resize.
 		const contentView = contentElement?.ownerDocument?.defaultView;
-		contentView?.addEventHandler?.( 'resize', updateProps );
+		contentView?.addEventListener?.( 'resize', updateProps );
 
 		// Update the toolbar props on block resize.
 		let resizeObserver;
 		const blockView = selectedBlockElement?.ownerDocument?.defaultView;
-		if ( blockView.ResizeObserver ) {
+		if ( blockView?.ResizeObserver ) {
 			resizeObserver = new blockView.ResizeObserver( updateProps );
 			resizeObserver.observe( selectedBlockElement );
 		}
 
 		return () => {
-			contentView?.removeEventHandler?.( 'resize', updateProps );
+			contentView?.removeEventListener?.( 'resize', updateProps );
 
 			if ( resizeObserver ) {
 				resizeObserver.disconnect();

package/src/components/block-types-list/README.md

@@ -30,25 +30,6 @@ The blocks that will be displayed in the block list.
 
 -   Type: `Array<Block>`
 -   Required: Yes
--   Platform: Web | Mobile
-
-#### name
-
-Name of the list to be used as part of component's key.
-
--   Type: `String`
--   Required: Yes
--   Platform: Mobile
-
-#### listProps
-
-Extra `FlatList` props for customizing the list.
-
-On Mobile usually this component is rendered inside `BottomSheet` component, which already [generates these props](<(https://github.com/WordPress/gutenberg/blob/1ca1fe0c64dfe1a385221399fc94b0fb14f34199/packages/components/src/mobile/bottom-sheet/index.native.js#L355-L372)>) for this component.
-
--   Type: `String`
--   Required: No
--   Platform: Mobile
 
 ## Related components
 

package/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap

@@ -16,6 +16,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     >
       <svg
         aria-hidden="true"
+        fill="currentColor"
         focusable="false"
         height="24"
         viewBox="0 0 24 24"
@@ -48,6 +49,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -70,6 +72,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"
@@ -92,6 +95,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="24"
           viewBox="0 0 24 24"

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

@@ -23,15 +23,51 @@ import { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks
 import { store as blockEditorStore } from '../../store';
 import { useSettings } from '../use-settings';
 
-function helpText( selfStretch, parentLayout ) {
-	const { orientation = 'horizontal' } = parentLayout;
+// These are the serialized `selfStretch` values. `max` used to be called
+// "Fixed" in the UI, but was renamed and replaced by `fixedNoShrink`.
+const FLEX_CHILD_LAYOUT_VALUES = {
+	fit: 'fit',
+	grow: 'fill',
+	max: 'fixed',
+	fixed: 'fixedNoShrink',
+};
 
-	if ( selfStretch === 'fill' ) {
+const FLEX_SIZE_VALUES = [
+	FLEX_CHILD_LAYOUT_VALUES.max,
+	FLEX_CHILD_LAYOUT_VALUES.fixed,
+];
+
+function isFlexSizeValue( value ) {
+	return FLEX_SIZE_VALUES.includes( value );
+}
+
+function maxSizeLabel( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout ?? {};
+	return orientation === 'horizontal'
+		? _x( 'Max', 'Block with maximum width in flex layout' )
+		: _x( 'Max', 'Block with maximum height in flex layout' );
+}
+
+function helpText( flexControlValue, parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout ?? {};
+
+	if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.grow ) {
 		return __( 'Stretch to fill available space.' );
 	}
-	if ( selfStretch === 'fixed' && orientation === 'horizontal' ) {
+	if (
+		flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max &&
+		orientation === 'horizontal'
+	) {
+		return __( 'Specify a maximum width.' );
+	} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max ) {
+		return __( 'Specify a maximum height.' );
+	}
+	if (
+		flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed &&
+		orientation === 'horizontal'
+	) {
 		return __( 'Specify a fixed width.' );
-	} else if ( selfStretch === 'fixed' ) {
+	} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed ) {
 		return __( 'Specify a fixed height.' );
 	}
 	return __( 'Fit contents.' );
@@ -99,6 +135,8 @@ function FlexControls( {
 } ) {
 	const { selfStretch, flexSize } = childLayout;
 	const { orientation = 'horizontal' } = parentLayout ?? {};
+	const flexControlValue = selfStretch || FLEX_CHILD_LAYOUT_VALUES.fit;
+	const hasFlexSizeValue = isFlexSizeValue( flexControlValue );
 	const hasFlexValue = () => !! selfStretch;
 	const flexResetLabel =
 		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
@@ -121,13 +159,13 @@ function FlexControls( {
 	};
 
 	useEffect( () => {
-		if ( selfStretch === 'fixed' && ! flexSize ) {
+		if ( isFlexSizeValue( selfStretch ) && ! flexSize ) {
 			onChange( {
 				...childLayout,
-				selfStretch: 'fit',
+				selfStretch: FLEX_CHILD_LAYOUT_VALUES.fit,
 			} );
 		}
-	}, [] );
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
 		<VStack
@@ -142,10 +180,12 @@ function FlexControls( {
 			<ToggleGroupControl
 				size="__unstable-large"
 				label={ childLayoutOrientation( parentLayout ) }
-				value={ selfStretch || 'fit' }
-				help={ helpText( selfStretch, parentLayout ) }
+				value={ flexControlValue }
+				help={ helpText( flexControlValue, parentLayout ) }
 				onChange={ ( value ) => {
-					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					const newFlexSize = isFlexSizeValue( value )
+						? flexSize
+						: null;
 					onChange( {
 						selfStretch: value,
 						flexSize: newFlexSize,
@@ -154,37 +194,42 @@ function FlexControls( {
 				isBlock
 			>
 				<ToggleGroupControlOption
-					key="fit"
-					value="fit"
+					key={ FLEX_CHILD_LAYOUT_VALUES.fit }
+					value={ FLEX_CHILD_LAYOUT_VALUES.fit }
 					label={ _x(
 						'Fit',
 						'Intrinsic block width in flex layout'
 					) }
 				/>
 				<ToggleGroupControlOption
-					key="fill"
-					value="fill"
+					key={ FLEX_CHILD_LAYOUT_VALUES.grow }
+					value={ FLEX_CHILD_LAYOUT_VALUES.grow }
 					label={ _x(
 						'Grow',
 						'Block with expanding width in flex layout'
 					) }
 				/>
 				<ToggleGroupControlOption
-					key="fixed"
-					value="fixed"
+					key={ FLEX_CHILD_LAYOUT_VALUES.max }
+					value={ FLEX_CHILD_LAYOUT_VALUES.max }
+					label={ maxSizeLabel( parentLayout ) }
+				/>
+				<ToggleGroupControlOption
+					key={ FLEX_CHILD_LAYOUT_VALUES.fixed }
+					value={ FLEX_CHILD_LAYOUT_VALUES.fixed }
 					label={ _x(
 						'Fixed',
 						'Block with fixed width in flex layout'
 					) }
 				/>
 			</ToggleGroupControl>
-			{ selfStretch === 'fixed' && (
+			{ hasFlexSizeValue && (
 				<UnitControl
 					size="__unstable-large"
 					units={ units }
 					onChange={ ( value ) => {
 						onChange( {
-							selfStretch,
+							selfStretch: flexControlValue,
 							flexSize: value,
 						} );
 					} }
@@ -199,7 +244,7 @@ function FlexControls( {
 }
 
 export function childLayoutOrientation( parentLayout ) {
-	const { orientation = 'horizontal' } = parentLayout;
+	const { orientation = 'horizontal' } = parentLayout ?? {};
 	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
 }