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

package/src/components/global-styles/inheritance/index.jsx

@@ -8,11 +8,14 @@ import { reset as resetIcon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
- * Whether the inspector surfaces inherited Global Styles values.
+ * Whether the inspector marks up which controls are showing an inherited
+ * Global Styles value.
  *
- * Behind the `gutenberg-global-styles-inheritance-ui` Gutenberg experiment,
- * so the treatment is off unless someone opts in on the Experiments screen.
- * With it off, the panels show locally-set values alone.
+ * This gates the indicators only: the dotted underline on an inherited label
+ * and the blue dot that resets a local override. The inherited values
+ * themselves reach the controls either way. Behind the
+ * `gutenberg-global-styles-inheritance-ui` Gutenberg experiment, so the
+ * indicators are off unless someone opts in on the Experiments screen.
  *
  * Evaluated per call rather than once at module scope, so tests can toggle
  * the experiment and so a later move to a store-backed setting only has to
@@ -20,9 +23,9 @@ import { __ } from '@wordpress/i18n';
  * down as a prop, and `undefined` would trigger a receiving component's own
  * default parameter.
  *
- * @return {boolean} Whether the inherited-value treatment is enabled.
+ * @return {boolean} Whether the indicator treatment is enabled.
  */
-export const isGlobalStylesInheritanceEnabled = () =>
+export const isGlobalStylesInheritanceIndicatorUIEnabled = () =>
 	!! window.__experimentalGlobalStylesInheritanceUI;
 
 /**

package/src/components/global-styles/inheritance/test/{index.jsdom.test.jsx → index.browser.test.jsx}

@@ -1,6 +1,7 @@
 import { describe, expect, test, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { click } from '@ariakit/test';
+import { userEvent } from 'vitest/browser';
+import { screen } from '@testing-library/react';
+import { render } from 'vitest-browser-react';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import {
 	getInheritanceProps,
@@ -8,11 +9,11 @@ import {
 	InheritanceToolsPanelItem,
 } from '../';
 
-globalThis.wpVitest.mockMatchMedia();
-
 describe( 'InheritanceResetButton', () => {
-	test( 'renders an always-visible reset button labelled for the inherited value', () => {
-		render( <InheritanceResetButton onResetToInherited={ () => {} } /> );
+	test( 'renders an always-visible reset button labelled for the inherited value', async () => {
+		await render(
+			<InheritanceResetButton onResetToInherited={ () => {} } />
+		);
 		expect(
 			screen.getByRole( 'button', {
 				name: 'Reset to inherited value',
@@ -22,17 +23,19 @@ describe( 'InheritanceResetButton', () => {
 
 	test( 'invokes the reset handler when activated', async () => {
 		const onResetToInherited = vi.fn();
-		render(
+		await render(
 			<InheritanceResetButton onResetToInherited={ onResetToInherited } />
 		);
-		await click(
+		await userEvent.click(
 			screen.getByRole( 'button', { name: 'Reset to inherited value' } )
 		);
 		expect( onResetToInherited ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	test( 'does not expose a menu or a push-to-Global-Styles action', () => {
-		render( <InheritanceResetButton onResetToInherited={ () => {} } /> );
+	test( 'does not expose a menu or a push-to-Global-Styles action', async () => {
+		await render(
+			<InheritanceResetButton onResetToInherited={ () => {} } />
+		);
 		expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'menuitem', { name: /Make default/ } )
@@ -135,8 +138,8 @@ describe( 'getInheritanceProps', () => {
 } );
 
 describe( 'InheritanceToolsPanelItem inherited state', () => {
-	function renderInheritedItem( label, labelClassName ) {
-		return render(
+	async function renderInheritedItem( label, labelClassName ) {
+		return await render(
 			<ToolsPanel label="Panel" panelId="panel">
 				<InheritanceToolsPanelItem
 					{ ...getInheritanceProps( true, false ) }
@@ -159,8 +162,8 @@ describe( 'InheritanceToolsPanelItem inherited state', () => {
 		[ 'input-control', 'components-input-control__label' ],
 	] )(
 		'nests the %s label inside the inherited-from-global-styles item',
-		( _name, labelClassName ) => {
-			renderInheritedItem( 'Line height', labelClassName );
+		async ( _name, labelClassName ) => {
+			await renderInheritedItem( 'Line height', labelClassName );
 			const label = screen.getByText( 'Line height' );
 			expect( label ).toHaveClass( labelClassName );
 			expect(
@@ -170,8 +173,11 @@ describe( 'InheritanceToolsPanelItem inherited state', () => {
 		}
 	);
 
-	test( 'does not render a reset dot in the inherited state', () => {
-		renderInheritedItem( 'Line height', 'components-base-control__label' );
+	test( 'does not render a reset dot in the inherited state', async () => {
+		await renderInheritedItem(
+			'Line height',
+			'components-base-control__label'
+		);
 		expect(
 			screen.queryByRole( 'button', {
 				name: 'Reset to inherited value',
@@ -181,8 +187,8 @@ describe( 'InheritanceToolsPanelItem inherited state', () => {
 } );
 
 describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
-	function renderItem( props ) {
-		return render(
+	async function renderItem( props ) {
+		return await render(
 			<ToolsPanel label="Panel" panelId="panel">
 				<InheritanceToolsPanelItem
 					label="Line height"
@@ -199,8 +205,8 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 		);
 	}
 
-	test( 'renders the reset dot as a sibling of the control, not inside the label', () => {
-		renderItem( {
+	test( 'renders the reset dot as a sibling of the control, not inside the label', async () => {
+		await renderItem( {
 			hasLocalOverride: true,
 			onDeselect: () => {},
 		} );
@@ -217,10 +223,10 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 		).toBeNull();
 	} );
 
-	test( 'does not render the item reset dot when showLocalOverrideActionsInLabel is false', () => {
+	test( 'does not render the item reset dot when showLocalOverrideActionsInLabel is false', async () => {
 		// Color/background render their own reset control next to a custom
 		// toggle, so the item must not render a second one.
-		renderItem( {
+		await renderItem( {
 			hasLocalOverride: true,
 			showLocalOverrideActionsInLabel: false,
 			onDeselect: () => {},
@@ -234,15 +240,15 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 
 	test( 'the reset dot invokes the deselect handler', async () => {
 		const onDeselect = vi.fn();
-		renderItem( { hasLocalOverride: true, onDeselect } );
-		await click(
+		await renderItem( { hasLocalOverride: true, onDeselect } );
+		await userEvent.click(
 			screen.getByRole( 'button', { name: 'Reset to inherited value' } )
 		);
 		expect( onDeselect ).toHaveBeenCalled();
 	} );
 
-	test( 'does not offset the reset dot by default', () => {
-		renderItem( { hasLocalOverride: true, onDeselect: () => {} } );
+	test( 'does not offset the reset dot by default', async () => {
+		await renderItem( { hasLocalOverride: true, onDeselect: () => {} } );
 		const resetButton = screen.getByRole( 'button', {
 			name: 'Reset to inherited value',
 		} );
@@ -254,8 +260,8 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 		);
 	} );
 
-	test( 'offsets the reset dot when the control has an inline-end toggle', () => {
-		renderItem( {
+	test( 'offsets the reset dot when the control has an inline-end toggle', async () => {
+		await renderItem( {
 			hasLocalOverride: true,
 			hasInlineEndToggle: true,
 			onDeselect: () => {},

package/src/components/global-styles/inherited-value-context.js

@@ -11,13 +11,9 @@ import { getVariationNameFromClass } from '../../hooks/block-style-variation';
 import { useBlockEditContext } from '../block-edit/context';
 import BlockContext from '../block-context';
 import { unlock } from '../../lock-unlock';
-import { isGlobalStylesInheritanceEnabled } from './inheritance';
 
 const { resolveStyle } = unlock( globalStylesEnginePrivateApis );
 
-// Undefined so the panels fall back to their `inheritedValue = value` default.
-const NO_RESOLVED_STYLE = { value: undefined, sources: undefined };
-
 /**
  * Reads the Global Styles payload and returns it as a `GlobalStylesConfig`
  * (`{ styles, _links }`), the shape `resolveStyle` expects. `_links` carries
@@ -225,7 +221,7 @@ function useVariationAndElements( blockName, className ) {
  *
  * Before the `globalStylesDataKey` payload settles (hydration) or when
  * `blockName` is missing, the hook returns empty value and source objects, so
- * each panel's `inheritedValue = value` default preserves pre-feature behavior.
+ * each panel reads no inherited value and renders its local value alone.
  *
  * @param {?string} blockName       Selected block name (e.g. `core/heading`).
  * @param {?string} className       Block `className` used to detect an applied variation.
@@ -240,10 +236,6 @@ export function useResolvedStyle( blockName, className, selectedState = null ) {
 	const globalStyles = useRawGlobalStyles();
 
 	return useMemo( () => {
-		// Skip the cascade merge entirely when the experiment is off.
-		if ( ! isGlobalStylesInheritanceEnabled() ) {
-			return NO_RESOLVED_STYLE;
-		}
 		if ( ! blockName ) {
 			return { value: {}, sources: {} };
 		}

package/src/components/global-styles/state-control-badges.jsx

@@ -57,7 +57,6 @@ export default function StateControlBadges( {
 					<WCBadge
 						key={ state.key }
 						className="block-editor-global-styles-state-control__badge"
-						intent="info"
 					>
 						{ state.label }
 						{ !! state.tooltipText && (

package/src/components/global-styles/state-control.jsx

@@ -16,6 +16,7 @@ import { Stack } from '@wordpress/ui';
  * @param {Function} props.onChangePseudoState Callback when pseudo state selection changes.
  * @param {boolean}  props.showText            Whether to show text label on the toggle. Default true.
  * @param {Object}   props.popoverProps        Popover props for the dropdown menu.
+ * @param {Element}  props.children            Optional menu content rendered after the state groups.
  * @return {Element|null} State control component.
  */
 export default function StateControl( {
@@ -27,6 +28,7 @@ export default function StateControl( {
 	onChangePseudoState,
 	showText = true,
 	popoverProps = {},
+	children,
 } ) {
 	if ( ! viewportStates.length && ! pseudoStates.length ) {
 		return null;
@@ -102,7 +104,7 @@ export default function StateControl( {
 								/* translators: %s: Current state (e.g. "Hover", "Focus") */
 								__( 'State: %s' ),
 								currentStateLabel
-						  )
+							)
 				}
 				popoverProps={ {
 					placement: 'right-start',
@@ -120,7 +122,10 @@ export default function StateControl( {
 										key={ `viewport-${ option.value }` }
 										onClick={ () => {
 											onChangeViewport?.( option.value );
-											if ( ! hasPseudoStateOptions ) {
+											if (
+												! hasPseudoStateOptions &&
+												! children
+											) {
 												onClose();
 											}
 										} }
@@ -144,7 +149,10 @@ export default function StateControl( {
 											onChangePseudoState?.(
 												option.value
 											);
-											if ( ! hasViewportOptions ) {
+											if (
+												! hasViewportOptions &&
+												! children
+											) {
 												onClose();
 											}
 										} }
@@ -159,6 +167,7 @@ export default function StateControl( {
 								) ) }
 							</MenuGroup>
 						) }
+						{ children }
 					</>
 				) }
 			</DropdownMenu>

package/src/components/global-styles/style.scss

@@ -1,5 +1,6 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins";
 
 .block-editor-global-styles__toggle-icon {
 	fill: currentColor;
@@ -146,3 +147,70 @@
 		opacity: 1;
 	}
 }
+
+.block-editor-global-styles__text-shadow {
+	width: 260px;
+	padding: $grid-unit-10;
+}
+
+.block-editor-global-styles__text-shadow-preview {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 80px;
+	border: $gray-300 1px solid;
+	border-radius: $radius-small;
+	font-size: 24px;
+	margin-bottom: $grid-unit-20;
+	@include mixins.checkerboard-background( 8px );
+}
+
+.block-editor-global-styles__text-shadow-list-item {
+	justify-content: space-between;
+	gap: $grid-unit-10;
+	width: 100%;
+	// The checkmark is always rendered so that its height is reserved and the
+	// list doesn't shift when the selection changes.
+	&:not(.is-active) svg {
+		opacity: 0;
+	}
+}
+
+.block-editor-global-styles__text-shadow-dropdown {
+	display: block;
+	padding: 0;
+	position: relative;
+	border: 1px solid $gray-300;
+	border-radius: $radius-small;
+}
+
+.block-editor-global-styles__text-shadow-dropdown-toggle {
+	width: 100%;
+	padding: $grid-unit-10;
+
+	&.is-open {
+		background-color: $gray-100;
+	}
+}
+
+.block-editor-global-styles__text-shadow-remove-button {
+	position: absolute;
+	right: $grid-unit;
+	top: $grid-unit;
+	opacity: 0;
+
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-in-out;
+	}
+
+	.block-editor-global-styles__text-shadow-dropdown:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}

package/src/components/global-styles/test/{color-panel.jsdom.test.jsx → color-panel.browser.test.jsx}

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { render, renderHook, screen } from '@testing-library/react';
-import { click, render as renderAriakit } from '@ariakit/test/react';
+import { userEvent } from 'vitest/browser';
+import { screen } from '@testing-library/react';
+import { render, renderHook } from 'vitest-browser-react';
 import ColorPanel, {
 	useHasColorPanel,
 	useHasTextPanel,
@@ -11,10 +12,6 @@ import ColorPanel, {
 	useHasCaptionPanel,
 } from '../color-panel';
 
-globalThis.wpVitest.mockMatchMedia();
-
-globalThis.wpVitest.mockResizeObserver();
-
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.
@@ -39,22 +36,22 @@ describe( 'useHasColorPanel', () => {
 	// After moving top-level text color to TypographyPanel and top-level
 	// background color to BackgroundPanel, the Color panel only aggregates
 	// link and element controls (heading, button, caption).
-	it( 'should be false when only text color is enabled', () => {
-		const { result } = renderHook( () =>
+	it( 'should be false when only text color is enabled', async () => {
+		const { result } = await renderHook( () =>
 			useHasColorPanel( settingsWithColors( { text: true } ) )
 		);
 		expect( result.current ).toBeFalsy();
 	} );
 
-	it( 'should be false when only background color is enabled', () => {
-		const { result } = renderHook( () =>
+	it( 'should be false when only background color is enabled', async () => {
+		const { result } = await renderHook( () =>
 			useHasColorPanel( settingsWithColors( { background: true } ) )
 		);
 		expect( result.current ).toBeFalsy();
 	} );
 
-	it( 'should be false when both text and background are enabled but no element controls are', () => {
-		const { result } = renderHook( () =>
+	it( 'should be false when both text and background are enabled but no element controls are', async () => {
+		const { result } = await renderHook( () =>
 			useHasColorPanel(
 				settingsWithColors( { text: true, background: true } )
 			)
@@ -62,65 +59,65 @@ describe( 'useHasColorPanel', () => {
 		expect( result.current ).toBeFalsy();
 	} );
 
-	it( 'should be true when link color is enabled', () => {
-		const { result } = renderHook( () =>
+	it( 'should be true when link color is enabled', async () => {
+		const { result } = await renderHook( () =>
 			useHasColorPanel( settingsWithColors( { link: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'should be true when heading element is enabled', () => {
-		const { result } = renderHook( () =>
+	it( 'should be true when heading element is enabled', async () => {
+		const { result } = await renderHook( () =>
 			useHasColorPanel( settingsWithColors( { heading: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'should be true when button element is enabled', () => {
-		const { result } = renderHook( () =>
+	it( 'should be true when button element is enabled', async () => {
+		const { result } = await renderHook( () =>
 			useHasColorPanel( settingsWithColors( { button: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'should be true when caption element is enabled', () => {
-		const { result } = renderHook( () =>
+	it( 'should be true when caption element is enabled', async () => {
+		const { result } = await renderHook( () =>
 			useHasColorPanel( settingsWithColors( { caption: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'should be false when no color controls are enabled', () => {
-		const { result } = renderHook( () => useHasColorPanel( {} ) );
+	it( 'should be false when no color controls are enabled', async () => {
+		const { result } = await renderHook( () => useHasColorPanel( {} ) );
 		expect( result.current ).toBeFalsy();
 	} );
 } );
 
 describe( 'useHasTextPanel', () => {
 	// Still exported for TypographyPanel to consume as its text color gate.
-	it( 'should be true when text color is enabled and colors exist', () => {
-		const { result } = renderHook( () =>
+	it( 'should be true when text color is enabled and colors exist', async () => {
+		const { result } = await renderHook( () =>
 			useHasTextPanel( settingsWithColors( { text: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'should be true when text color is enabled with custom colors support', () => {
-		const { result } = renderHook( () =>
+	it( 'should be true when text color is enabled with custom colors support', async () => {
+		const { result } = await renderHook( () =>
 			useHasTextPanel( { color: { text: true, custom: true } } )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'should be false when text color is disabled', () => {
-		const { result } = renderHook( () =>
+	it( 'should be false when text color is disabled', async () => {
+		const { result } = await renderHook( () =>
 			useHasTextPanel( settingsWithColors( { text: false } ) )
 		);
 		expect( result.current ).toBeFalsy();
 	} );
 
-	it( 'should be false when no colors or custom support exist', () => {
-		const { result } = renderHook( () =>
+	it( 'should be false when no colors or custom support exist', async () => {
+		const { result } = await renderHook( () =>
 			useHasTextPanel( { color: { text: true } } )
 		);
 		expect( result.current ).toBeFalsy();
@@ -129,8 +126,8 @@ describe( 'useHasTextPanel', () => {
 
 describe( 'useHasBackgroundColorPanel', () => {
 	// Still exported for BackgroundPanel to consume as its background color gate.
-	it( 'should be true when background is enabled and colors exist', () => {
-		const { result } = renderHook( () =>
+	it( 'should be true when background is enabled and colors exist', async () => {
+		const { result } = await renderHook( () =>
 			useHasBackgroundColorPanel(
 				settingsWithColors( { background: true } )
 			)
@@ -138,8 +135,8 @@ describe( 'useHasBackgroundColorPanel', () => {
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'should be true when only gradients are available', () => {
-		const { result } = renderHook( () =>
+	it( 'should be true when only gradients are available', async () => {
+		const { result } = await renderHook( () =>
 			useHasBackgroundColorPanel( {
 				color: {
 					background: true,
@@ -158,8 +155,8 @@ describe( 'useHasBackgroundColorPanel', () => {
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'should be false when background color is disabled', () => {
-		const { result } = renderHook( () =>
+	it( 'should be false when background color is disabled', async () => {
+		const { result } = await renderHook( () =>
 			useHasBackgroundColorPanel(
 				settingsWithColors( { background: false } )
 			)
@@ -169,29 +166,29 @@ describe( 'useHasBackgroundColorPanel', () => {
 } );
 
 describe( 'element color hooks', () => {
-	it( 'useHasLinkPanel is truthy when link is enabled with colors', () => {
-		const { result } = renderHook( () =>
+	it( 'useHasLinkPanel is truthy when link is enabled with colors', async () => {
+		const { result } = await renderHook( () =>
 			useHasLinkPanel( settingsWithColors( { link: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'useHasHeadingPanel is truthy when heading is enabled with colors', () => {
-		const { result } = renderHook( () =>
+	it( 'useHasHeadingPanel is truthy when heading is enabled with colors', async () => {
+		const { result } = await renderHook( () =>
 			useHasHeadingPanel( settingsWithColors( { heading: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'useHasButtonPanel is truthy when button is enabled with colors', () => {
-		const { result } = renderHook( () =>
+	it( 'useHasButtonPanel is truthy when button is enabled with colors', async () => {
+		const { result } = await renderHook( () =>
 			useHasButtonPanel( settingsWithColors( { button: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
 	} );
 
-	it( 'useHasCaptionPanel is truthy when caption is enabled with colors', () => {
-		const { result } = renderHook( () =>
+	it( 'useHasCaptionPanel is truthy when caption is enabled with colors', async () => {
+		const { result } = await renderHook( () =>
 			useHasCaptionPanel( settingsWithColors( { caption: true } ) )
 		);
 		expect( result.current ).toBeTruthy();
@@ -238,7 +235,7 @@ describe( 'ColorPanel — duplicate-hex preset slug identity', () => {
 	};
 
 	it( 'marks only the local link preset as selected when another preset shares its hex', async () => {
-		await renderAriakit(
+		await render(
 			<ColorPanel
 				value={ {
 					elements: {
@@ -253,7 +250,9 @@ describe( 'ColorPanel — duplicate-hex preset slug identity', () => {
 			/>
 		);
 
-		await click( screen.getByRole( 'button', { name: /^Link/ } ) );
+		await userEvent.click(
+			screen.getByRole( 'button', { name: /^Link/ } )
+		);
 		const swatches = await screen.findAllByRole( 'option' );
 
 		// swatch[0] = 'Dark background', swatch[1] = 'Dark text'. Selection
@@ -264,8 +263,8 @@ describe( 'ColorPanel — duplicate-hex preset slug identity', () => {
 } );
 
 describe( 'ColorPanel — additional elements', () => {
-	it( 'renders additional element color controls', () => {
-		render(
+	it( 'renders additional element color controls', async () => {
+		await render(
 			<ColorPanel
 				value={ {} }
 				settings={ settingsWithColors( {
@@ -289,7 +288,7 @@ describe( 'ColorPanel — additional elements', () => {
 
 describe( 'ColorPanel — inherited Global Styles label treatment', () => {
 	describe( 'Link color', () => {
-		it( 'exposes an accessible reset when local link.text overrides the inherited value', () => {
+		it( 'exposes an accessible reset when local link.text overrides the inherited value', async () => {
 			const inheritedValue = {
 				elements: { link: { color: { text: '#0000ff' } } },
 			};
@@ -297,7 +296,7 @@ describe( 'ColorPanel — inherited Global Styles label treatment', () => {
 				elements: { link: { color: { text: '#aaaaaa' } } },
 			};
 
-			render(
+			await render(
 				<ColorPanel
 					value={ value }
 					inheritedValue={ inheritedValue }
@@ -338,8 +337,8 @@ describe( 'ColorPanel — inherited Global Styles label treatment', () => {
 			},
 		};
 
-		it( 'paints an inherited link preset via its CSS custom property', () => {
-			const { container } = render(
+		it( 'paints an inherited link preset via its CSS custom property', async () => {
+			const { container } = await render(
 				<ColorPanel
 					value={ {} }
 					inheritedValue={ {
@@ -363,8 +362,8 @@ describe( 'ColorPanel — inherited Global Styles label treatment', () => {
 			).toBe( true );
 		} );
 
-		it( 'paints an inherited element (heading) preset via its CSS custom property', () => {
-			const { container } = render(
+		it( 'paints an inherited element (heading) preset via its CSS custom property', async () => {
+			const { container } = await render(
 				<ColorPanel
 					value={ {} }
 					inheritedValue={ {