@wordpress/block-editor 17.1.0 → 17.2.1-next.v.202609171837.0

package/src/components/block-variation-transforms/test/index.jsdom.test.jsx

@@ -0,0 +1,93 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useDispatch, useSelect } from '@wordpress/data';
+import BlockVariationTransforms from '../';
+
+globalThis.wpVitest.mockPointerEvent();
+globalThis.wpVitest.mockScrollIntoView();
+
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useDispatch: vi.fn(),
+	useSelect: vi.fn(),
+} ) );
+
+const updateBlockAttributes = vi.fn();
+const variations = [
+	{
+		name: 'plain',
+		title: 'Plain',
+		attributes: { className: 'is-style-plain' },
+	},
+	{
+		name: 'decorated',
+		title: 'Decorated',
+		attributes: { className: 'is-style-decorated' },
+	},
+];
+
+describe( 'BlockVariationTransforms', () => {
+	beforeEach( () => {
+		updateBlockAttributes.mockReset();
+		useDispatch.mockReturnValue( { updateBlockAttributes } );
+		useSelect.mockReturnValue( {
+			activeBlockVariation: variations[ 0 ],
+			variations,
+			canEdit: true,
+			isContentOnly: false,
+			isSection: false,
+		} );
+	} );
+
+	it( 'selects a variation', async () => {
+		const user = userEvent.setup();
+		render( <BlockVariationTransforms blockClientId="client-id" /> );
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Transform to variation' } )
+		);
+
+		const decoratedVariation = await screen.findByRole( 'menuitemradio', {
+			name: 'Decorated',
+		} );
+		await user.click( decoratedVariation );
+
+		expect( updateBlockAttributes ).toHaveBeenCalledWith( 'client-id', {
+			className: 'is-style-decorated',
+		} );
+	} );
+
+	it( 'reflects a variation that becomes active after the first render', async () => {
+		const user = userEvent.setup();
+		useSelect.mockReturnValue( {
+			activeBlockVariation: undefined,
+			variations,
+			canEdit: true,
+			isContentOnly: false,
+			isSection: false,
+		} );
+		const { rerender } = render(
+			<BlockVariationTransforms blockClientId="client-id" />
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Transform to variation' } )
+		);
+		const plainVariation = await screen.findByRole( 'menuitemradio', {
+			name: 'Plain',
+		} );
+		expect( plainVariation ).not.toBeChecked();
+
+		useSelect.mockReturnValue( {
+			activeBlockVariation: variations[ 0 ],
+			variations,
+			canEdit: true,
+			isContentOnly: false,
+			isSection: false,
+		} );
+		rerender( <BlockVariationTransforms blockClientId="client-id" /> );
+
+		await waitFor( () => expect( plainVariation ).toBeChecked() );
+	} );
+} );

package/src/components/block-visibility/modal.jsx

@@ -123,13 +123,13 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 		const message =
 			blocks?.length > 1
 				? // translators: %s: The shortcut key to access the List View.
-				  __(
+					__(
 						'Blocks hidden. You can access them via the List View (%s).'
-				  )
+					)
 				: // translators: %s: The shortcut key to access the List View.
-				  __(
+					__(
 						'Block hidden. You can access it via the List View (%s).'
-				  );
+					);
 
 		return sprintf( message, listViewShortcut );
 	}, [ hideEverywhere, blocks?.length, listViewShortcut ] );
@@ -185,7 +185,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 							},
 							{}
 						),
-				  };
+					};
 			const attributesByClientId = Object.fromEntries(
 				blocks.map( ( { clientId, attributes } ) => [
 					clientId,
@@ -239,10 +239,10 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 						{ hasMultipleBlocks
 							? __(
 									'Select the viewport sizes for which you want to hide the blocks. Changes will apply to all selected blocks.'
-							  )
+								)
 							: __(
 									'Select the viewport size for which you want to hide the block.'
-							  ) }
+								) }
 					</legend>
 					<ul className="block-editor-block-visibility-modal__options">
 						<li className="block-editor-block-visibility-modal__options-item block-editor-block-visibility-modal__options-item--everywhere">

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

@@ -33,7 +33,7 @@
 		}
 
 		&-icon--checked {
-			fill: $gray-300;
+			color: $gray-300;
 		}
 	}
 

package/src/components/block-visibility/viewport-visibility-info.jsx

@@ -82,13 +82,11 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 		[ clientId, currentViewport ]
 	);
 
-	if (
-		! (
-			isBlockCurrentlyHidden ||
-			hasParentHiddenEverywhere ||
-			isBlockParentHiddenAtViewport
-		)
-	) {
+	if ( ! (
+		isBlockCurrentlyHidden ||
+		hasParentHiddenEverywhere ||
+		isBlockParentHiddenAtViewport
+	) ) {
 		return null;
 	}
 

package/src/components/border-radius-control/index.jsx

@@ -40,7 +40,7 @@ function useBorderRadiusSizes( presets ) {
 						size: undefined,
 					},
 					...sizes,
-			  ]
+				]
 			: sizes;
 	}, [ customSizes, themeSizes, defaultSizes ] );
 }
@@ -110,7 +110,7 @@ function createCornerChangeHandler( corner, values, onChange ) {
 							topRight: values,
 							bottomLeft: values,
 							bottomRight: values,
-					  };
+						};
 
 			onChange( {
 				...currentValues,

package/src/components/border-radius-control/test/index.jsdom.test.jsx

@@ -25,7 +25,6 @@ import BorderRadiusControl from '../index';
 
 globalThis.wpVitest.mockMatchMedia();
 
-globalThis.wpVitest.mockVisibleElements();
 globalThis.wpVitest.mockScrollIntoView();
 
 describe( 'BorderRadiusControl', () => {
@@ -483,27 +482,6 @@ describe( 'BorderRadiusControl', () => {
 				expect( combobox ).toHaveTextContent( 'Default' );
 			} );
 		} );
-
-		it( 'can interact with select dropdown options', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<BorderRadiusControl
-					onChange={ mockOnChange }
-					values={ undefined }
-					presets={ largePresetSet }
-				/>
-			);
-
-			// Click on the combobox to open dropdown
-			const combobox = screen.getByRole( 'combobox' );
-			await user.click( combobox );
-
-			// Should show preset options in the dropdown
-			await waitFor( () => {
-				expect( screen.getByText( 'Size 1' ) ).toBeInTheDocument();
-			} );
-		} );
 	} );
 
 	describe( 'Edge Cases and Error Handling', () => {

package/src/components/border-radius-control/test/select.browser.test.js

@@ -0,0 +1,30 @@
+import { describe, expect, it, vi } from 'vitest';
+import { page, userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+import { createElement } from '@wordpress/element';
+import BorderRadiusControl from '../index';
+
+describe( 'BorderRadiusControl large preset sets', () => {
+	it( 'can interact with select dropdown options', async () => {
+		const user = userEvent.setup();
+		const presets = {
+			default: Array.from( { length: 15 }, ( _, index ) => ( {
+				name: `Size ${ index }`,
+				slug: `size-${ index }`,
+				size: `${ index * 2 }px`,
+			} ) ),
+		};
+
+		await render(
+			createElement( BorderRadiusControl, {
+				onChange: vi.fn(),
+				values: undefined,
+				presets,
+			} )
+		);
+
+		await user.click( page.getByRole( 'combobox' ) );
+
+		await expect.element( page.getByText( 'Size 1' ) ).toBeVisible();
+	} );
+} );

package/src/components/color-palette/with-color-context.jsx

@@ -23,7 +23,7 @@ export default createHigherOrderComponent( ( WrappedComponent ) => {
 					...( themeColors || [] ),
 					...( defaultColors || [] ),
 					...( customColors || [] ),
-			  ]
+				]
 			: [ ...( themeColors || [] ), ...( customColors || [] ) ];
 
 		const { colors = _colors, disableCustomColors = ! enableCustomColors } =

package/src/components/colors/with-colors.jsx

@@ -123,7 +123,7 @@ function createColorHOC( colorTypes, withColorPalette ) {
 													colorContext,
 													colorObject.slug
 												),
-										  };
+											};
 
 								const setter = ( newColorValue ) => {
 									const resolvedColorObject =

package/src/components/colors-gradients/control.jsx

@@ -56,7 +56,7 @@ function ColorGradientControlInner( {
 		? ( newColor, _index, newSlug ) => {
 				onColorChange( newColor, newSlug );
 				onGradientChange();
-		  }
+			}
 		: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );
 
 	const colorPalette = (
@@ -98,7 +98,7 @@ function ColorGradientControlInner( {
 						? ( newGradient, _index, newSlug ) => {
 								onGradientChange( newGradient, newSlug );
 								onColorChange();
-						  }
+							}
 						: ( newGradient, _index, newSlug ) =>
 								onGradientChange( newGradient, newSlug )
 				}

package/src/components/colors-gradients/test/{control.jsdom.test.jsx → control.browser.test.jsx}

@@ -1,12 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { screen } from '@testing-library/react';
-import { click, render } from '@ariakit/test/react';
+import { render } from 'vitest-browser-react';
 import ColorGradientControl from '../control';
 
-globalThis.wpVitest.mockMatchMedia();
-
-globalThis.wpVitest.mockResizeObserver();
-
 const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
@@ -53,7 +50,7 @@ describe( 'ColorPaletteControl', () => {
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
-		render(
+		await render(
 			<ColorGradientControl
 				label="Test Color Gradient"
 				colorValue="#f00"
@@ -82,7 +79,7 @@ describe( 'ColorPaletteControl', () => {
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
-		render(
+		await render(
 			<ColorGradientControl
 				label="Test Color Gradient"
 				colorValue="#f00"
@@ -182,7 +179,7 @@ describe( 'ColorPaletteControl', () => {
 
 			const options = screen.getAllByRole( 'option' );
 			// Click the second swatch: color='#000', slug='dark-text'.
-			await click( options[ 1 ] );
+			await userEvent.click( options[ 1 ] );
 
 			expect( onColorChange ).toHaveBeenCalledWith( '#000', 'dark-text' );
 		} );
@@ -214,7 +211,7 @@ describe( 'ColorPaletteControl', () => {
 			// When both colors and gradients are available the color tab is shown
 			// by default (no gradientValue). Click the first color swatch.
 			const options = screen.getAllByRole( 'option' );
-			await click( options[ 0 ] );
+			await userEvent.click( options[ 0 ] );
 
 			// First entry: color='#000', slug='dark-background'.
 			expect( onColorChange ).toHaveBeenCalledWith(

package/src/components/contrast-checker/index.jsx

@@ -111,14 +111,14 @@ export function getContrastWarning( {
 								'This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'
 							),
 							item.description
-					  )
+						)
 					: sprintf(
 							// translators: %s is a type of text color, e.g., "text color" or "link color".
 							__(
 								'This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'
 							),
 							item.description
-					  );
+						);
 			speakMessage = __(
 				'This color combination may be hard for people to read.'
 			);

package/src/components/date-format-picker/index.jsx

@@ -125,9 +125,9 @@ function NonDefaultControls( { format, onChange } ) {
 				value={
 					isCustom
 						? customOption
-						: suggestedOptions.find(
+						: ( suggestedOptions.find(
 								( option ) => option.format === format
-						  ) ?? customOption
+							) ?? customOption )
 				}
 				onChange={ ( { selectedItem } ) => {
 					if ( selectedItem === customOption ) {

package/src/components/dimensions-tool/aspect-ratio-tool.jsx

@@ -1,4 +1,4 @@
-import { SelectControl } from '@wordpress/components';
+import { SelectControl as WCSelectControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 import { InheritanceToolsPanelItem } from '../global-styles/inheritance';
@@ -84,8 +84,8 @@ export default function AspectRatioTool( {
 	const displayValue =
 		value === undefined || value === null || value === 'auto'
 			? 'auto'
-			: findAspectRatioOption( value, resolvedOptions )?.value ??
-			  'custom';
+			: ( findAspectRatioOption( value, resolvedOptions )?.value ??
+				'custom' );
 
 	return (
 		<InheritanceToolsPanelItem
@@ -100,7 +100,7 @@ export default function AspectRatioTool( {
 			isShownByDefault={ isShownByDefault }
 			panelId={ panelId }
 		>
-			<SelectControl
+			<WCSelectControl
 				label={ __( 'Aspect ratio' ) }
 				value={ displayValue }
 				options={ resolvedOptions }

package/src/components/dimensions-tool/test/index.jsdom.test.jsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
@@ -135,7 +135,7 @@ describe( 'DimensionsTool', () => {
 			expect( aspectRatioSelect ).toHaveValue( 'auto' );
 		} );
 
-		it( 'displays an aspect ratio that is written differently to the option with the same ratio', () => {
+		it( 'displays an aspect ratio that is written differently to the option with the same ratio', async () => {
 			const onChange = vi.fn();
 			const { rerender } = render(
 				<ControlledExample
@@ -155,10 +155,12 @@ describe( 'DimensionsTool', () => {
 					onChange={ onChange }
 				/>
 			);
-			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+			await waitFor( () =>
+				expect( aspectRatioSelect ).toHaveValue( '16/9' )
+			);
 		} );
 
-		it( 'displays an aspect ratio without a matching option as custom', () => {
+		it( 'displays an aspect ratio without a matching option as custom', async () => {
 			const onChange = vi.fn();
 			render(
 				<ControlledExample
@@ -167,12 +169,14 @@ describe( 'DimensionsTool', () => {
 				/>
 			);
 
-			expect(
-				screen.getByRole( 'combobox', { name: 'Aspect ratio' } )
-			).toHaveValue( 'custom' );
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'combobox', { name: 'Aspect ratio' } )
+				).toHaveValue( 'custom' )
+			);
 		} );
 
-		it( 'updates the scale control when the value prop changes', () => {
+		it( 'updates the scale control when the value prop changes', async () => {
 			const onChange = vi.fn();
 			const { rerender } = render(
 				<ControlledExample
@@ -192,9 +196,11 @@ describe( 'DimensionsTool', () => {
 				/>
 			);
 
-			expect(
-				screen.getByRole( 'radio', { name: 'Contain' } )
-			).toBeChecked();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'radio', { name: 'Contain' } )
+				).toBeChecked()
+			);
 		} );
 	} );
 

package/src/components/dimensions-tool/width-height-tool.jsx

@@ -44,8 +44,8 @@ export default function WidthHeightTool( {
 	isShownByDefault = true,
 } ) {
 	// null, undefined, and 'auto' all represent the default value.
-	const width = value.width === 'auto' ? '' : value.width ?? '';
-	const height = value.height === 'auto' ? '' : value.height ?? '';
+	const width = value.width === 'auto' ? '' : ( value.width ?? '' );
+	const height = value.height === 'auto' ? '' : ( value.height ?? '' );
 
 	const onDimensionChange = ( dimension ) => ( nextDimension ) => {
 		const nextValue = { ...value };

package/src/components/font-sizes/with-font-sizes.jsx

@@ -33,9 +33,8 @@ export default ( ...fontSizeNames ) => {
 	 */
 	const fontSizeAttributeNames = fontSizeNames.reduce(
 		( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {
-			fontSizeAttributeNamesAccumulator[
-				fontSizeAttributeName
-			] = `custom${ upperFirst( fontSizeAttributeName ) }`;
+			fontSizeAttributeNamesAccumulator[ fontSizeAttributeName ] =
+				`custom${ upperFirst( fontSizeAttributeName ) }`;
 			return fontSizeAttributeNamesAccumulator;
 		},
 		{}

package/src/components/global-styles/background-panel.jsx

@@ -14,7 +14,7 @@ import {
 import {
 	getInheritanceProps,
 	InheritanceToolsPanelItem,
-	isGlobalStylesInheritanceEnabled,
+	isGlobalStylesInheritanceIndicatorUIEnabled,
 } from './inheritance';
 
 const DEFAULT_CONTROLS = {
@@ -163,7 +163,7 @@ export default function BackgroundImagePanel( {
 	defaultValues = {},
 	headerLabel = __( 'Background' ),
 	contrastWarning,
-	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
 } ) {
 	const {
 		colors,

package/src/components/global-styles/border-panel.jsx

@@ -16,7 +16,7 @@ import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
 import {
 	getInheritanceProps,
 	InheritanceToolsPanelItem,
-	isGlobalStylesInheritanceEnabled,
+	isGlobalStylesInheritanceIndicatorUIEnabled,
 } from './inheritance';
 
 export function useHasBorderPanel( settings ) {
@@ -98,7 +98,7 @@ export default function BorderPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
-	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
 } ) {
 	const colors = useColorsPerOrigin( settings );
 	const areCustomSolidsEnabled = settings?.color?.custom;

package/src/components/global-styles/color-gradient-dropdown-item.jsx

@@ -19,7 +19,7 @@ import {
 	getInheritanceProps,
 	InheritanceResetButton,
 	InheritanceToolsPanelItem,
-	isGlobalStylesInheritanceEnabled,
+	isGlobalStylesInheritanceIndicatorUIEnabled,
 } from './inheritance';
 
 const { Tabs } = unlock( componentsPrivateApis );
@@ -180,7 +180,7 @@ function ColorGradientTab( {
 							spokenMessage: null,
 							className:
 								'block-editor-panel-color-gradient-settings__contrast-notice',
-					  }
+						}
 					: undefined
 			}
 		/>
@@ -203,7 +203,7 @@ export default function ColorGradientDropdownItem( {
 	className = 'block-editor-tools-panel-color-gradient-settings__item',
 	isPlaceholder = false,
 	hasInheritedValue = false,
-	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
 } ) {
 	const colorGradientDropdownButtonRef = useRef( undefined );
 	const itemClassName = clsx( 'block-editor-color-gradient-item', className );

package/src/components/global-styles/color-panel.jsx

@@ -14,7 +14,7 @@ import {
 	extractPresetSlug,
 	encodeColorValueWithPalette,
 } from '../../utils/color-values';
-import { isGlobalStylesInheritanceEnabled } from './inheritance';
+import { isGlobalStylesInheritanceIndicatorUIEnabled } from './inheritance';
 
 // Despite the "ColorPanel" name, this gates only the element-level color
 // controls (link, heading, button, caption, h1–h6) — surfaced as the
@@ -143,7 +143,7 @@ export default function ColorPanel( {
 	children,
 	contrastWarning,
 	additionalElements,
-	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
 } ) {
 	const {
 		colors,
@@ -477,7 +477,7 @@ export default function ColorPanel( {
 							elementGradient ??
 							elementBackgroundUserColor ??
 							elementBackgroundColor,
-				  ]
+					]
 				: [ elementTextUserColor ?? elementTextColor ],
 			isPlaceholder: isElementPlaceholder,
 			hasInheritedValue: hasElementInheritedValue,

package/src/components/global-styles/dimensions-panel.jsx

@@ -25,7 +25,7 @@ import {
 import {
 	getInheritanceProps,
 	InheritanceToolsPanelItem,
-	isGlobalStylesInheritanceEnabled,
+	isGlobalStylesInheritanceIndicatorUIEnabled,
 } from './inheritance';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
@@ -349,7 +349,7 @@ export default function DimensionsPanel( {
 	includeLayoutControls = false,
 	allowAxialBlockGap = true,
 	styleState = DEFAULT_BLOCK_STYLE_STATE,
-	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
 } ) {
 	const { dimensions, spacing } = settings;
 
@@ -789,7 +789,7 @@ export default function DimensionsPanel( {
 							isContentSizePlaceholder
 								? getNumericPlaceholder(
 										inheritedContentSizeValue
-								  )
+									)
 								: undefined
 						}
 						onChange={ ( nextContentSize ) => {
@@ -832,7 +832,7 @@ export default function DimensionsPanel( {
 							isWideSizePlaceholder
 								? getNumericPlaceholder(
 										inheritedWideSizeValue
-								  )
+									)
 								: undefined
 						}
 						onChange={ ( nextWideSize ) => {
@@ -1069,7 +1069,7 @@ export default function DimensionsPanel( {
 							isMinHeightPlaceholder
 								? getNumericPlaceholder(
 										inheritedMinHeightValue
-								  )
+									)
 								: undefined
 						}
 						dimensionSizes={ dimensions?.dimensionSizes }
@@ -1103,7 +1103,7 @@ export default function DimensionsPanel( {
 							isMinWidthPlaceholder
 								? getNumericPlaceholder(
 										inheritedMinWidthValue
-								  )
+									)
 								: undefined
 						}
 						dimensionSizes={ dimensions?.dimensionSizes }

package/src/components/global-styles/filters-panel.jsx

@@ -26,7 +26,7 @@ import {
 	getInheritanceProps,
 	InheritanceToolsPanelItem,
 	InheritanceResetButton,
-	isGlobalStylesInheritanceEnabled,
+	isGlobalStylesInheritanceIndicatorUIEnabled,
 } from './inheritance';
 
 const EMPTY_ARRAY = [];
@@ -179,7 +179,7 @@ export default function FiltersPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
-	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );

package/src/components/global-styles/hooks.js

@@ -99,6 +99,7 @@ export function useSettingsForBlockElement(
 			'textTransform',
 			'textDecoration',
 			'textIndent',
+			'textShadow',
 			'writingMode',
 		].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {