@wordpress/block-editor 15.21.0 → 15.22.1-next.v.202606191442.0

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-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-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/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' );
 }
 

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

@@ -14,6 +14,10 @@ import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
  */
 import ChildLayoutControl from '../';
 
+jest.mock( '../../use-settings', () => ( {
+	useSettings: () => [ undefined ],
+} ) );
+
 jest.mock( '@wordpress/data/src/components/use-select', () =>
 	jest.fn( ( mapSelect ) => {
 		if ( typeof mapSelect === 'function' ) {
@@ -123,4 +127,64 @@ describe( 'ChildLayoutControl', () => {
 			columnSpan: 1,
 		} );
 	} );
+
+	it( 'shows legacy fixed flex sizing as max', () => {
+		renderControl( {
+			parentLayout: {
+				type: 'flex',
+				orientation: 'horizontal',
+			},
+			value: {
+				selfStretch: 'fixed',
+				flexSize: '320px',
+			},
+		} );
+
+		expect( screen.getByRole( 'radio', { name: 'Max' } ) ).toBeChecked();
+	} );
+
+	it( 'sets fixedNoShrink when selecting fixed flex sizing', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		renderControl( {
+			parentLayout: {
+				type: 'flex',
+				orientation: 'horizontal',
+			},
+			value: {},
+			onChange,
+		} );
+
+		await user.click( screen.getByRole( 'radio', { name: 'Fixed' } ) );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			selfStretch: 'fixedNoShrink',
+			flexSize: undefined,
+		} );
+	} );
+
+	it( 'sets legacy fixed when selecting max sizing', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		renderControl( {
+			parentLayout: {
+				type: 'flex',
+				orientation: 'horizontal',
+			},
+			value: {
+				selfStretch: 'fixedNoShrink',
+				flexSize: '320px',
+			},
+			onChange,
+		} );
+
+		await user.click( screen.getByRole( 'radio', { name: 'Max' } ) );
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			selfStretch: 'fixed',
+			flexSize: '320px',
+		} );
+	} );
 } );

package/src/components/dimensions-tool/index.js

@@ -56,7 +56,7 @@ function DimensionsTool( {
 	aspectRatioOptions, // Default options handled by AspectRatioTool.
 	defaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.
 	scaleOptions, // Default options handled by ScaleTool.
-	defaultScale = 'fill', // Match CSS default value for object-fit.
+	defaultScale = 'cover',
 	unitsOptions, // Default options handled by UnitControl.
 	tools = [ 'aspectRatio', 'widthHeight', 'scale' ],
 } ) {
@@ -73,21 +73,19 @@ function DimensionsTool( {
 		value.aspectRatio === undefined || value.aspectRatio === 'auto'
 			? null
 			: value.aspectRatio;
-	const scale =
-		value.scale === undefined || value.scale === 'fill'
-			? null
-			: value.scale;
+	const scale = value.scale === undefined ? null : value.scale;
 
 	// Keep track of state internally, so when the value is cleared by means
 	// other than directly editing that field, it's easier to restore the
 	// previous value.
 	const [ lastScale, setLastScale ] = useState( scale );
 	const [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );
+	const hasCustomAspectRatio = !! ( width && height );
 
 	// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the
 	// dropdown to indicate that setting both the width and height is the same
 	// as a custom aspect ratio.
-	const aspectRatioValue = width && height ? 'custom' : lastAspectRatio;
+	const aspectRatioValue = hasCustomAspectRatio ? 'custom' : aspectRatio;
 
 	const showScaleControl = aspectRatio || ( width && height );
 
@@ -197,9 +195,6 @@ function DimensionsTool( {
 					onChange={ ( nextScale ) => {
 						const nextValue = { ...value };
 
-						// 'fill' is CSS default, so it gets treated as null.
-						nextScale = nextScale === 'fill' ? null : nextScale;
-
 						setLastScale( nextScale );
 
 						// Update scale.

package/src/components/dimensions-tool/scale-tool.js

@@ -86,8 +86,7 @@ export default function ScaleTool( {
 	defaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,
 	isShownByDefault = true,
 } ) {
-	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
-	const displayValue = value ?? 'fill';
+	const displayValue = value ?? defaultValue;
 
 	const scaleHelp = useMemo( () => {
 		return options.reduce( ( acc, option ) => {

package/src/components/dimensions-tool/test/index.js

@@ -16,6 +16,17 @@ import { useState } from '@wordpress/element';
 import DimensionsTool from '../';
 
 const EMPTY_OBJECT = {};
+const ASPECT_RATIO_OPTIONS = [
+	{ label: 'Original', value: 'auto' },
+	{ label: '16/9', value: '16/9' },
+	{ label: '4/3', value: '4/3' },
+	{
+		label: 'Custom',
+		value: 'custom',
+		disabled: true,
+		hidden: true,
+	},
+];
 
 function Example( { initialValue, onChange, ...props } ) {
 	const [ value, setValue ] = useState( initialValue );
@@ -33,16 +44,27 @@ function Example( { initialValue, onChange, ...props } ) {
 				} }
 				defaultScale="cover"
 				defaultAspectRatio="auto"
-				aspectRatioOptions={ [
-					{ label: 'Original', value: 'auto' },
-					{ label: '16/9', value: '16/9' },
-					{
-						label: 'Custom',
-						value: 'custom',
-						disabled: true,
-						hidden: true,
-					},
-				] }
+				aspectRatioOptions={ ASPECT_RATIO_OPTIONS }
+				value={ value }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
+
+function ControlledExample( { value, onChange, ...props } ) {
+	return (
+		<ToolsPanel
+			label="Dimensions"
+			panelId="panel-id"
+			resetAll={ () => onChange( EMPTY_OBJECT ) }
+		>
+			<DimensionsTool
+				panelId="panel-id"
+				onChange={ onChange }
+				defaultScale="cover"
+				defaultAspectRatio="auto"
+				aspectRatioOptions={ ASPECT_RATIO_OPTIONS }
 				value={ value }
 				{ ...props }
 			/>
@@ -60,6 +82,39 @@ function Example( { initialValue, onChange, ...props } ) {
 // properties are treated differently from missing properties.
 
 describe( 'DimensionsTool', () => {
+	describe( 'controlled values', () => {
+		it( 'updates the aspect ratio control when the value prop changes', () => {
+			const onChange = jest.fn();
+			const { rerender } = render(
+				<ControlledExample
+					value={ { aspectRatio: '16/9' } }
+					onChange={ onChange }
+				/>
+			);
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			rerender(
+				<ControlledExample
+					value={ { aspectRatio: '4/3' } }
+					onChange={ onChange }
+				/>
+			);
+			expect( aspectRatioSelect ).toHaveValue( '4/3' );
+
+			rerender(
+				<ControlledExample
+					value={ EMPTY_OBJECT }
+					onChange={ onChange }
+				/>
+			);
+			expect( aspectRatioSelect ).toHaveValue( 'auto' );
+		} );
+	} );
+
 	describe( 'updating aspectRatio', () => {
 		it( 'when starting with empty initial state, setting aspectRatio also sets scale (0000) -> (1100)', async () => {
 			const user = userEvent.setup();
@@ -323,7 +378,30 @@ describe( 'DimensionsTool', () => {
 	} );
 
 	describe( 'updating scale', () => {
-		// No custom interactions here. Things should just update normally.
+		it( 'when default scale is cover, setting scale to fill preserves the fill value', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const scaleFillRadio = screen.getByRole( 'radio', {
+				name: 'Fill',
+			} );
+
+			await user.click( scaleFillRadio );
+			expect( scaleFillRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'fill' } ],
+			] );
+		} );
 	} );
 
 	describe( 'updating dimensions', () => {

package/src/components/global-styles/advanced-panel.js

@@ -85,7 +85,11 @@ export default function AdvancedPanel( {
 	}
 
 	return (
-		<Stack direction="column" gap="md">
+		<Stack
+			direction="column"
+			gap="md"
+			className="block-editor-global-styles-advanced-panel"
+		>
 			{ cssError && (
 				<Notice status="error" onRemove={ () => setCSSError( null ) }>
 					{ cssError }