@wordpress/block-editor 15.21.1 → 15.22.0

package/src/hooks/grid-visualizer.js

@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import useBlockVisibility from '../components/block-visibility/use-block-visibility';
 import { deviceTypeKey } from '../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
@@ -20,60 +21,73 @@ function GridLayoutSync( props ) {
 }
 
 function GridTools( { clientId, layout } ) {
-	const { isVisible, blockVisibility, deviceType, isAnyAncestorHidden } =
-		useSelect(
-			( select ) => {
-				const {
-					isBlockSelected,
-					hasSelectedInnerBlock,
-					isDraggingBlocks,
-					getTemplateLock,
-					getBlockEditingMode,
-					getBlockAttributes,
-					getSettings,
-				} = select( blockEditorStore );
+	const { isVisible, blockVisibility, deviceType } = useSelect(
+		( select ) => {
+			const {
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				isDraggingBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+				getBlockAttributes,
+				getSettings,
+			} = select( blockEditorStore );
 
-				// These calls are purposely ordered from least expensive to most expensive.
-				// Hides the visualizer in cases where the user is not or cannot interact with it.
-				// Also hide if a child block is selected, because layout-child.js will render
-				// the visualizer in that case (with proper childGridClientId handling).
-				if (
-					( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
-					getTemplateLock( clientId ) ||
-					getBlockEditingMode( clientId ) !== 'default' ||
-					hasSelectedInnerBlock( clientId )
-				) {
-					return { isVisible: false };
-				}
+			// These calls are purposely ordered from least expensive to most expensive.
+			// Hides the visualizer in cases where the user is not or cannot interact with it.
+			// Also hide if a child block is selected, because layout-child.js will render
+			// the visualizer in that case (with proper childGridClientId handling).
+			if (
+				( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
+				getTemplateLock( clientId ) ||
+				getBlockEditingMode( clientId ) !== 'default' ||
+				hasSelectedInnerBlock( clientId )
+			) {
+				return { isVisible: false };
+			}
 
-				const { isBlockParentHiddenAtViewport } = unlock(
-					select( blockEditorStore )
-				);
+			const attributes = getBlockAttributes( clientId );
+			const settings = getSettings();
+			const currentDeviceType =
+				settings?.[ deviceTypeKey ]?.toLowerCase() ||
+				BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
-				const attributes = getBlockAttributes( clientId );
-				const settings = getSettings();
-				const currentDeviceType =
-					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
+			return {
+				isVisible: true,
+				blockVisibility: attributes?.metadata?.blockVisibility,
+				deviceType: currentDeviceType,
+			};
+		},
+		[ clientId ]
+	);
 
-				return {
-					isVisible: true,
-					blockVisibility: attributes?.metadata?.blockVisibility,
-					deviceType: currentDeviceType,
-					isAnyAncestorHidden: isBlockParentHiddenAtViewport(
-						clientId,
-						currentDeviceType
-					),
-				};
-			},
-			[ clientId ]
-		);
+	// Get the block's DOM element to derive the canvas iframe window,
+	// so viewport detection matches the actual block rendering context
+	const blockElement = useBlockElement( clientId );
+	const rawCanvasView = blockElement?.ownerDocument?.defaultView;
+	const canvasView = rawCanvasView === null ? undefined : rawCanvasView;
 
-	const { isBlockCurrentlyHidden } = useBlockVisibility( {
+	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
 		blockVisibility,
 		deviceType,
+		view: canvasView,
 	} );
 
+	// Check whether any ancestor is hidden at the viewport actually detected
+	// from the canvas, so it stays consistent with how blocks are hidden.
+	const isAnyAncestorHidden = useSelect(
+		( select ) => {
+			if ( ! isVisible ) {
+				return false;
+			}
+			const { isBlockParentHiddenAtViewport } = unlock(
+				select( blockEditorStore )
+			);
+			return isBlockParentHiddenAtViewport( clientId, currentViewport );
+		},
+		[ clientId, currentViewport, isVisible ]
+	);
+
 	return (
 		<>
 			<GridLayoutSync clientId={ clientId } />

package/src/hooks/layout-child.js

@@ -9,6 +9,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 import { useStyleOverride } from './utils';
 import { useLayout } from '../components/block-list/layout';
 import {
@@ -16,18 +17,41 @@ import {
 	GridItemResizer,
 	GridItemMovers,
 } from '../components/grid';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import useBlockVisibility from '../components/block-visibility/use-block-visibility';
 import { deviceTypeKey } from '../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
+import {
+	DEFAULT_BLOCK_STYLE_STATE,
+	getStyleForState,
+} from './block-style-state';
 
 // Used for generating the instance ID
 const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
 // Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS.
 const RESPONSIVE_BREAKPOINTS = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
+};
+
+// 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',
 };
 
+const FLEX_SIZE_VALUES = [
+	FLEX_CHILD_LAYOUT_VALUES.max,
+	FLEX_CHILD_LAYOUT_VALUES.fixed,
+];
+
+function isFlexSizeValue( value ) {
+	return FLEX_SIZE_VALUES.includes( value );
+}
+
 function serializeRule( { selector, declarations } ) {
 	return `${ selector } {
 		${ Object.entries( declarations )
@@ -60,6 +84,7 @@ export function getChildLayoutStyleRules( {
 		columnSpan,
 		rowSpan,
 	} = effectiveLayout;
+	const baseSelfStretch = layout.selfStretch;
 	const { columnCount, minimumColumnWidth } = parentLayout;
 	const rules = [];
 
@@ -69,10 +94,30 @@ export function getChildLayoutStyleRules( {
 		hasViewportOverride( 'selfStretch' ) ||
 		hasViewportOverride( 'flexSize' )
 	) {
-		if ( selfStretch === 'fixed' && flexSize ) {
+		if (
+			hasViewportOverrides &&
+			( selfStretch === FLEX_CHILD_LAYOUT_VALUES.fit ||
+				selfStretch === FLEX_CHILD_LAYOUT_VALUES.grow ) &&
+			isFlexSizeValue( baseSelfStretch ) &&
+			layout.flexSize
+		) {
+			declarations[ 'flex-basis' ] = 'unset';
+			if ( baseSelfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed ) {
+				declarations[ 'flex-shrink' ] = 'unset';
+			}
+		}
+		if ( isFlexSizeValue( selfStretch ) && flexSize ) {
 			declarations[ 'flex-basis' ] = flexSize;
+			if ( selfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed ) {
+				declarations[ 'flex-shrink' ] = '0';
+			} else if (
+				hasViewportOverrides &&
+				baseSelfStretch === FLEX_CHILD_LAYOUT_VALUES.fixed
+			) {
+				declarations[ 'flex-shrink' ] = 'unset';
+			}
 			declarations[ 'box-sizing' ] = 'border-box';
-		} else if ( selfStretch === 'fill' ) {
+		} else if ( selfStretch === FLEX_CHILD_LAYOUT_VALUES.grow ) {
 			declarations[ 'flex-grow' ] = '1';
 		}
 	}
@@ -213,7 +258,10 @@ export function getResponsiveChildLayoutStyles( {
 
 	return Object.entries( RESPONSIVE_BREAKPOINTS )
 		.map( ( [ viewport, mediaQuery ] ) => {
-			const viewportLayout = style?.[ viewport ]?.layout;
+			const viewportLayout = getStyleForState( style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} )?.layout;
 			if ( ! viewportLayout || ! Object.keys( viewportLayout ).length ) {
 				return '';
 			}
@@ -351,6 +399,9 @@ function GridTools( {
 			const parentAttributes = getBlockAttributes( _rootClientId );
 			const blockAttributes = getBlockAttributes( clientId );
 			const settings = getSettings();
+			const currentDeviceType =
+				settings?.[ deviceTypeKey ]?.toLowerCase() ||
+				BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
 			return {
 				rootClientId: _rootClientId,
@@ -359,9 +410,7 @@ function GridTools( {
 					parentAttributes?.metadata?.blockVisibility,
 				blockBlockVisibility:
 					blockAttributes?.metadata?.blockVisibility,
-				deviceType:
-					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+				deviceType: currentDeviceType,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};
@@ -369,16 +418,45 @@ function GridTools( {
 		[ clientId ]
 	);
 
-	const { isBlockCurrentlyHidden: isParentBlockCurrentlyHidden } =
-		useBlockVisibility( {
-			blockVisibility: parentBlockVisibility,
-			deviceType,
-		} );
+	// Get the block's DOM element to derive the canvas iframe window,
+	// so viewport detection matches the actual block rendering context
+	const blockElement = useBlockElement( clientId );
+	const rawCanvasView = blockElement?.ownerDocument?.defaultView;
+	const canvasView = rawCanvasView === null ? undefined : rawCanvasView;
+
+	const {
+		isBlockCurrentlyHidden: isParentBlockCurrentlyHidden,
+		currentViewport,
+	} = useBlockVisibility( {
+		blockVisibility: parentBlockVisibility,
+		deviceType,
+		view: canvasView,
+	} );
+
+	// Check whether any ancestor of the parent grid is hidden at the viewport
+	// actually detected from the canvas, so it stays consistent with how
+	// blocks are hidden.
+	const isAnyAncestorHidden = useSelect(
+		( select ) => {
+			if ( ! rootClientId ) {
+				return false;
+			}
+			const { isBlockParentHiddenAtViewport } = unlock(
+				select( blockEditorStore )
+			);
+			return isBlockParentHiddenAtViewport(
+				rootClientId,
+				currentViewport
+			);
+		},
+		[ rootClientId, currentViewport ]
+	);
 
 	const { isBlockCurrentlyHidden: isBlockItselfCurrentlyHidden } =
 		useBlockVisibility( {
 			blockVisibility: blockBlockVisibility,
 			deviceType,
+			view: canvasView,
 		} );
 
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
@@ -386,7 +464,7 @@ function GridTools( {
 
 	const childGridClientId = isChildBlockAGrid ? clientId : undefined;
 
-	if ( ! isVisible || isParentBlockCurrentlyHidden ) {
+	if ( ! isVisible || isParentBlockCurrentlyHidden || isAnyAncestorHidden ) {
 		return null;
 	}
 

package/src/hooks/layout.js

@@ -52,8 +52,8 @@ const layoutBlockSupportKey = 'layout';
 // Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
 // packages/global-styles-engine/src/core/render.tsx.
 const RESPONSIVE_BREAKPOINTS = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 const CHILD_LAYOUT_KEYS = [
 	'selfStretch',
@@ -252,7 +252,10 @@ export function getResponsiveLayoutStyles( {
 } ) {
 	return Object.entries( RESPONSIVE_BREAKPOINTS )
 		.map( ( [ viewport, mediaQuery ] ) => {
-			const viewportStyle = attributes?.style?.[ viewport ];
+			const viewportStyle = getStyleForState( attributes?.style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} );
 			const viewportLayout = getLayoutContainerValues(
 				viewportStyle?.layout
 			);

package/src/hooks/list-view.js

@@ -50,26 +50,25 @@ export function ListViewPanel( { clientId, name } ) {
 		useDispatch( blockEditorStore )
 	);
 
-	const isEnabled = hasListViewSupport( name );
-	const { hasChildren, isNestedListView } = useSelect(
+	const { isEnabled, hasChildren, isNestedListView } = useSelect(
 		( select ) => {
-			const { getBlockCount, getBlockParents, getBlockName } =
-				select( blockEditorStore );
+			const {
+				getBlockCount,
+				getBlockParents,
+				shouldRenderBlockListView,
+			} = unlock( select( blockEditorStore ) );
 
 			// Avoid showing List Views for both parent and child blocks that have support.
 			// In this situation the parent will show the child in its list already.
 			// Search parents to see if there's one that also has support, and if so skip rendering.
 			// This matches closely the logic in the `BlockCard` component.
 			const parents = getBlockParents( clientId, false );
-			const _isNestedListView = parents.find( ( parentId ) => {
-				const parentName = getBlockName( parentId );
-				return (
-					parentName === 'core/navigation' ||
-					hasBlockSupport( parentName, 'listView' )
-				);
-			} );
+			const _isNestedListView = parents.find( ( parentId ) =>
+				shouldRenderBlockListView( parentId )
+			);
 
 			return {
+				isEnabled: shouldRenderBlockListView( clientId ),
 				hasChildren: !! getBlockCount( clientId ),
 				isNestedListView: _isNestedListView,
 			};

package/src/hooks/states.js

@@ -19,8 +19,8 @@ export const PSEUDO_STATE_LABELS = {
 };
 
 export const RESPONSIVE_STATE_LABELS = {
-	tablet: __( 'Tablet' ),
-	mobile: __( 'Mobile' ),
+	'@tablet': __( 'Tablet' ),
+	'@mobile': __( 'Mobile' ),
 };
 
 // Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS

package/src/hooks/style.js

@@ -19,7 +19,8 @@ import { getCSSRules, compileCSS } from '@wordpress/style-engine';
  */
 import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
 import { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';
-import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
+import { COLOR_SUPPORT_KEY } from './color';
+import { ElementsEdit } from './elements';
 import {
 	TypographyPanel,
 	TYPOGRAPHY_SUPPORT_KEY,
@@ -29,6 +30,7 @@ import {
 	DIMENSIONS_SUPPORT_KEY,
 	SPACING_SUPPORT_KEY,
 	DimensionsPanel,
+	isExplicitAspectRatio,
 } from './dimensions';
 import {
 	cleanEmptyObject,
@@ -56,8 +58,8 @@ const BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];
 // Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
 // packages/global-styles-engine/src/core/render.tsx.
 const RESPONSIVE_BREAKPOINTS = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 
 const styleSupportKeys = [
@@ -134,6 +136,72 @@ function getStateFallbackBorderStyles( stateStyles ) {
 	return cleanEmptyObject( { border: cleanEmptyObject( fallbackBorder ) } );
 }
 
+/**
+ * Returns background reset CSS for a state that sets a solid background color.
+ *
+ * When a state sets `color.background` (a solid color) without also setting a
+ * gradient (`color.gradient` or `background.gradient`), any gradient applied to
+ * the default state via an inline `background` shorthand or `background-image`
+ * declaration must be explicitly cleared. Without this, the gradient image layer
+ * remains visible even though the solid hover color wins `background-color`.
+ *
+ * @param {Object} stateStyles State style object.
+ * @param {string} selector    CSS selector for the generated style.
+ * @return {string|undefined} CSS string with background-image reset, or undefined.
+ */
+function getStateBackgroundResetCSS( stateStyles, selector ) {
+	const hasSolidBackground = !! stateStyles?.color?.background;
+
+	if ( ! hasSolidBackground ) {
+		return undefined;
+	}
+
+	const hasColorGradient = !! stateStyles?.color?.gradient;
+	const hasBackgroundGradient =
+		!! stateStyles?.background?.gradient ||
+		!! stateStyles?.background?.backgroundImage;
+
+	if ( hasColorGradient || hasBackgroundGradient ) {
+		return undefined;
+	}
+
+	const declaration = 'background-image: unset !important';
+	return selector
+		? `${ selector } { ${ declaration }; }`
+		: `${ declaration };`;
+}
+
+/**
+ * Returns fallback dimension styles that keep state styles aligned with the
+ * default dimensions block-support output.
+ *
+ * @param {Object} stateStyles State style object.
+ * @return {Object|undefined} Style object containing fallback dimension styles.
+ */
+function getStateFallbackDimensionStyles( stateStyles ) {
+	const dimensions = stateStyles?.dimensions;
+	if ( ! dimensions ) {
+		return undefined;
+	}
+
+	if ( isExplicitAspectRatio( dimensions.aspectRatio ) ) {
+		return {
+			dimensions: {
+				minHeight: 'unset',
+				height: 'unset',
+			},
+		};
+	}
+
+	if ( dimensions.minHeight || dimensions.height ) {
+		return {
+			dimensions: {
+				aspectRatio: 'unset',
+			},
+		};
+	}
+}
+
 /**
  * Generates CSS for a block instance state style object.
  *
@@ -146,14 +214,25 @@ function getStateFallbackBorderStyles( stateStyles ) {
  * @return {string} Generated stylesheet.
  */
 export function getStateStylesCSS( stateStyles, selector ) {
-	const css = compileCSS( stateStyles, { selector } );
+	const fallbackDimensionStyles =
+		getStateFallbackDimensionStyles( stateStyles );
+	const stylesWithDimensionFallbacks = fallbackDimensionStyles
+		? mergeStyleObjects( stateStyles, fallbackDimensionStyles )
+		: stateStyles;
+	const css = compileCSS( stylesWithDimensionFallbacks, { selector } );
 	const importantCSS = css ? css.replace( /;/g, ' !important;' ) : undefined;
 	const fallbackBorderStyles = getStateFallbackBorderStyles( stateStyles );
 	const fallbackCSS = fallbackBorderStyles
 		? compileCSS( fallbackBorderStyles, { selector } )
 		: undefined;
+	const backgroundResetCSS = getStateBackgroundResetCSS(
+		stateStyles,
+		selector
+	);
 
-	return [ importantCSS, fallbackCSS ].filter( Boolean ).join( '\n' );
+	return [ importantCSS, fallbackCSS, backgroundResetCSS ]
+		.filter( Boolean )
+		.join( '\n' );
 }
 
 function isPlainObject( value ) {
@@ -341,7 +420,10 @@ export function getResponsiveStateCSSRules( style, name, baseSelector ) {
 
 	Object.entries( RESPONSIVE_BREAKPOINTS ).forEach(
 		( [ viewport, mediaQuery ] ) => {
-			const viewportStyles = style?.[ viewport ];
+			const viewportStyles = getStyleForState( style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} );
 			if ( ! viewportStyles ) {
 				return;
 			}
@@ -386,8 +468,8 @@ export function getResponsiveStateCSSRules( style, name, baseSelector ) {
  * Returns the style value used to force-preview a selected state on canvas.
  *
  * Responsive pseudo states inherit from their default-viewport pseudo state.
- * For example, selecting `mobile + :hover` should preview styles from
- * `:hover`, with `mobile.:hover` values layered on top when present.
+ * For example, selecting `@mobile + :hover` should preview styles from
+ * `:hover`, with `@mobile.:hover` values layered on top when present.
  *
  * @param {Object} style         Block style object.
  * @param {Object} selectedState Selected block style state.
@@ -770,7 +852,7 @@ function BlockStyleControls( {
 
 	return (
 		<BlockStyleStateProvider value={ selectedState }>
-			<ColorEdit { ...passedProps } />
+			<ElementsEdit { ...passedProps } />
 			<BackgroundImagePanel { ...passedProps } />
 			<TypographyPanel { ...passedProps } />
 			<BorderPanel { ...passedProps } />

package/src/hooks/test/background.js

@@ -3,10 +3,69 @@
  */
 import {
 	setBackgroundStyleDefaults,
+	backgroundResetAllFilter,
 	BACKGROUND_BLOCK_DEFAULT_VALUES,
 } from '../background';
 
 describe( 'background', () => {
+	describe( 'backgroundResetAllFilter', () => {
+		it( 'clears every background-owned value, including a custom legacy color.gradient', () => {
+			const result = backgroundResetAllFilter( {
+				backgroundColor: 'primary',
+				gradient: 'vivid-cyan-blue',
+				className: 'is-style-fancy has-background',
+				style: {
+					color: {
+						text: 'var:preset|color|contrast',
+						background: 'var:preset|color|base',
+						gradient:
+							'linear-gradient(135deg,rgb(100,100,200) 0%,rgb(200,100,100) 100%)',
+					},
+					spacing: { padding: '10px' },
+					background: { backgroundImage: { url: 'image.png' } },
+				},
+			} );
+
+			// Background color and gradient attributes are cleared.
+			expect( result.backgroundColor ).toBeUndefined();
+			expect( result.gradient ).toBeUndefined();
+
+			// The legacy `color.gradient` (a raw/custom value) is cleared. This
+			// is the regression guard: it was previously kept for blocks
+			// without `background.gradient` support.
+			expect( result.style?.color?.gradient ).toBeUndefined();
+			expect( result.style?.color?.background ).toBeUndefined();
+			expect( result.style?.background ).toBeUndefined();
+
+			// Unrelated styles are preserved.
+			expect( result.style?.color?.text ).toBe(
+				'var:preset|color|contrast'
+			);
+			expect( result.style?.spacing ).toEqual( { padding: '10px' } );
+
+			// The `has-background` class is removed, other classes remain.
+			expect( result.className ).toBe( 'is-style-fancy' );
+		} );
+
+		it( 'drops className entirely when has-background was its only value', () => {
+			const result = backgroundResetAllFilter( {
+				className: 'has-background',
+				style: {
+					color: { gradient: 'linear-gradient(0deg,#000,#fff)' },
+				},
+			} );
+			expect( result.className ).toBeUndefined();
+		} );
+
+		it( 'leaves className untouched when has-background is not present', () => {
+			const result = backgroundResetAllFilter( {
+				className: 'is-style-fancy',
+				style: {},
+			} );
+			expect( result.className ).toBe( 'is-style-fancy' );
+		} );
+	} );
+
 	describe( 'setBackgroundStyleDefaults', () => {
 		const backgroundStyles = {
 			backgroundImage: { id: 123, url: 'image.png' },