@wordpress/block-editor 17.0.0 → 17.1.0

package/src/components/global-styles/{border-panel.js → border-panel.jsx}

@@ -12,7 +12,6 @@ import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
-import { useBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
 import {
 	getInheritanceProps,
@@ -365,24 +364,18 @@ export default function BorderPanel( {
 	const showBorderByDefault =
 		defaultControls?.color || defaultControls?.width;
 
-	const hasBorderControl =
-		showBorderColor ||
-		showBorderStyle ||
-		showBorderWidth ||
-		showBorderRadius;
-
-	const label = useBorderPanelLabel( {
-		hasShadowControl,
-		hasBorderControl,
-	} );
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
 			value={ value }
 			onChange={ onChange }
 			panelId={ panelId }
-			label={ label }
+			// A shadow is treated as a soft border, so the panel keeps one
+			// name whichever of its controls a theme or block opts into.
+			// A stable title is what lets each control show its own label
+			// unconditionally, which in turn keeps their unlink toggles
+			// aligned.
+			label={ __( 'Borders' ) }
 		>
 			{ ( showBorderWidth || showBorderColor ) && (
 				<InheritanceToolsPanelItem
@@ -394,37 +387,23 @@ export default function BorderPanel( {
 					) }
 					hasValue={ () => isDefinedBorder( value?.border ) }
 					label={ __( 'Border' ) }
+					hasInlineEndToggle
 					onDeselect={ () => resetBorder() }
 					isShownByDefault={ showBorderByDefault }
 					panelId={ panelId }
 				>
-					{ ( showInheritanceLabelIndicators ||
-						hasShadowControl ) && (
-						// Render the visible label as `BaseControl.VisualLabel`
-						// (which produces `.components-base-control__label`)
-						// rather than passing `label` to `BorderBoxControl`,
-						// whose internal `<StyledLabel>` carries no stable
-						// className. The inheritance treatment and the
-						// local-override reset affordance both target
-						// `.components-base-control__label`, so the visible
-						// "Border" label has to be a `BaseControl` label to
-						// receive them.
-						//
-						// Render it whenever a Shadow control is also present so
-						// the two controls stay disambiguated (mirrors the
-						// Shadow label's `hasBorderControl` guard below, and
-						// trunk's `hideLabelFromVision={ ! hasShadowControl }`),
-						// even when inheritance indicators are off (e.g. in
-						// Global Styles).
-						<BaseControl.VisualLabel as="legend">
-							{ __( 'Border' ) }
-						</BaseControl.VisualLabel>
-					) }
+					{ /* The visible label is always rendered, so the control's
+					    linked/unlinked toggle sits in a label row and lines up
+					    with the Radius control's. `BorderBoxControl` renders the
+					    label as `BaseControl.VisualLabel`, which is what the
+					    inheritance treatment and the local-override reset
+					    affordance target. */ }
 					<BorderBoxControl
 						colors={ colors }
 						disableCustomColors={ ! areCustomSolidsEnabled }
 						enableAlpha
 						enableStyle={ showBorderStyle }
+						label={ __( 'Border' ) }
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
@@ -472,11 +451,9 @@ export default function BorderPanel( {
 					showLocalOverrideActionsInLabel={ false }
 					panelId={ panelId }
 				>
-					{ hasBorderControl ? (
-						<BaseControl.VisualLabel as="legend">
-							{ __( 'Shadow' ) }
-						</BaseControl.VisualLabel>
-					) : null }
+					<BaseControl.VisualLabel>
+						{ __( 'Shadow' ) }
+					</BaseControl.VisualLabel>
 
 					<ShadowPopover
 						shadow={ shadow }

package/src/components/global-styles/{image-settings-panel.js → image-settings-panel.jsx}

@@ -8,7 +8,7 @@ import { useToolsPanelDropdownMenuProps } from './utils';
 
 export function useHasImageSettingsPanel( name, value, inheritedValue ) {
 	// Note: If lightbox `value` exists, that means it was
-	// defined via the the Global Styles UI and will NOT
+	// defined via the Global Styles UI and will NOT
 	// be a boolean value or contain the `allowEditing` property,
 	// so we should show the settings panel in those cases.
 	return (

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

@@ -1,3 +1,4 @@
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { click } from '@ariakit/test';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
@@ -7,6 +8,8 @@ import {
 	InheritanceToolsPanelItem,
 } from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'InheritanceResetButton', () => {
 	test( 'renders an always-visible reset button labelled for the inherited value', () => {
 		render( <InheritanceResetButton onResetToInherited={ () => {} } /> );
@@ -18,7 +21,7 @@ describe( 'InheritanceResetButton', () => {
 	} );
 
 	test( 'invokes the reset handler when activated', async () => {
-		const onResetToInherited = jest.fn();
+		const onResetToInherited = vi.fn();
 		render(
 			<InheritanceResetButton onResetToInherited={ onResetToInherited } />
 		);
@@ -230,7 +233,7 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 	} );
 
 	test( 'the reset dot invokes the deselect handler', async () => {
-		const onDeselect = jest.fn();
+		const onDeselect = vi.fn();
 		renderItem( { hasLocalOverride: true, onDeselect } );
 		await click(
 			screen.getByRole( 'button', { name: 'Reset to inherited value' } )

package/src/components/global-styles/test/{background-panel.js → background-panel.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BackgroundPanel, {
@@ -7,6 +8,10 @@ import BackgroundPanel, {
 	hasLegacyColorGradientValue,
 } from '../background-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.
@@ -105,7 +110,7 @@ describe( 'hasBackgroundGradientValue', () => {
  *   enabled.
  *
  * - Background gradient: renders `ColorPanelDropdown` (re-used from
- *   `color-panel.js`). The inner `Dropdown` indicator shows the inherited
+ *   `color-panel.jsx`). The inner `Dropdown` indicator shows the inherited
  *   gradient at-rest, and the `ColorPanelTab.onChange` interceptor commits
  *   the inherited value when the user clicks the active swatch.
  *
@@ -165,7 +170,7 @@ describe( 'BackgroundPanel — duplicate gradient preset slug identity', () => {
 
 	it( 'commits the inherited preset slug when accepting the preselected inherited gradient', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BackgroundPanel
@@ -202,7 +207,7 @@ describe( 'BackgroundPanel — duplicate gradient preset slug identity', () => {
 				} }
 				inheritedValue={ {} }
 				settings={ duplicateGradientSettings }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				panelId="test-panel"
 			/>
 		);
@@ -256,7 +261,7 @@ describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
 						'linear-gradient(135deg, rgb(74, 0, 224) 0%, rgb(142, 45, 226) 100%)',
 				},
 			};
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<BackgroundPanel
@@ -322,7 +327,7 @@ describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
 					},
 				},
 			};
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<BackgroundPanel
@@ -365,7 +370,7 @@ describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
 					},
 				},
 			};
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<BackgroundPanel

package/src/components/global-styles/test/{border-panel.js → border-panel.jsdom.test.jsx}

@@ -1,7 +1,10 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BorderPanel from '../border-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.
@@ -53,6 +56,103 @@ const settingsAll = {
 	},
 };
 
+const shadowOnlySettings = { shadow: settingsAll.shadow };
+const borderOnlySettings = { border: settingsAll.border };
+
+describe( 'BorderPanel — panel and control labels', () => {
+	it( 'titles the panel "Borders" when border and shadow controls are available', () => {
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ settingsAll }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', { name: 'Borders' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'titles the panel "Borders" when only a shadow control is available', () => {
+		// A shadow is treated as a soft border, so the title does not change
+		// with whichever controls a theme or block opts into. A stable title
+		// is what lets each control keep its own visible label.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', { name: 'Borders' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'labels the border control, and puts its unlink toggle in that label row, when no shadow control is available', () => {
+		// The case that motivated the change: with no Shadow control to
+		// disambiguate it from, the Border label used to be hidden, which left
+		// its unlink toggle beside the inputs while the Radius one sat in a
+		// label row. Both now share the same layout.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ borderOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect( screen.getByText( 'Border' ) ).toBeInTheDocument();
+
+		// `getAllByRole` returns document order, so the toggle preceding the
+		// border color/style picker is what places it in the label row rather
+		// than alongside the inputs.
+		const buttons = screen.getAllByRole( 'button' );
+		expect(
+			buttons.indexOf( screen.getByLabelText( 'Unlink sides' ) )
+		).toBeLessThan(
+			buttons.indexOf(
+				screen.getByLabelText( /Border color( and style)* picker/ )
+			)
+		);
+	} );
+
+	it( 'labels the border control when the inheritance indicators are off', () => {
+		// Global Styles renders the panel without the inheritance treatment.
+		// That used to be the other half of the condition hiding the label, so
+		// a border-only panel showed no label there either.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ borderOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+				showInheritanceLabelIndicators={ false }
+			/>
+		);
+
+		expect( screen.getByText( 'Border' ) ).toBeInTheDocument();
+	} );
+
+	it( 'labels the shadow control even when no border control is available', () => {
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect( screen.getByText( 'Shadow' ) ).toBeInTheDocument();
+	} );
+} );
+
 describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 	describe( 'Border radius (input archetype)', () => {
 		it( 'renders an inherited string radius as the displayed value when local is empty', () => {
@@ -125,7 +225,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 		} );
 
 		it( 'does not invoke onChange on mount when only an inherited radius is present (display-without-commit)', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = { border: { radius: '8px' } };
 
 			render(
@@ -143,7 +243,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 
 		it( 'commits a typed local radius override without copying any inherited values (strip-not-copy)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				border: { radius: '8px' },
 				shadow: 'var:preset|shadow|soft',
@@ -172,7 +272,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 
 		it( 'does not bake the inherited border color/style/width into the local override when only a radius is set', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				border: {
 					color: '#000000',
@@ -252,7 +352,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 			// renders the blue dot) even though the user never
 			// customised the radius.
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				border: {
 					color: '#000000',
@@ -289,7 +389,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 		} );
 
 		it( 'does not invoke onChange on mount when only an inherited border is present', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				border: {
 					color: '#000000',
@@ -337,7 +437,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 		} );
 
 		it( 'does not invoke onChange on mount when only an inherited shadow is present', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				shadow: 'var:preset|shadow|soft',
 			};
@@ -463,7 +563,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'persists a theme preset as a preset reference when custom presets also exist', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -487,7 +587,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'persists a default preset as a preset reference when custom presets also exist', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -511,7 +611,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'persists a custom preset as a preset reference', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -535,7 +635,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'persists the unset entry as a literal value, not a preset reference', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -556,7 +656,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'does not reference default presets the theme has opted out of', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -591,7 +691,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'offers only the most specific preset when a slug is defined twice', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		// Custom preset slugs are generated as `shadow-<n>` from the custom
 		// presets alone, so they can collide with a theme preset's slug.
@@ -637,7 +737,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'references the most specific origin when two presets share a value', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		// A custom preset starts out with the same value as the `natural`
 		// default one, so this is the state right after adding one.

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

@@ -1,3 +1,4 @@
+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 ColorPanel, {
@@ -10,6 +11,10 @@ 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.

package/src/components/global-styles/test/{dimensions-panel.js → dimensions-panel.jsdom.test.jsx}

@@ -1,8 +1,11 @@
-/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expectLocalOverride", "expectPlaceholderState"] }] */
-import { render, screen, within } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useState } from '@wordpress/element';
 import DimensionsPanel from '../dimensions-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.
@@ -19,11 +22,11 @@ afterEach( () => {
 // full set of inherited and selectable ratios without spinning up a
 // store registry. Per-call resolution lets the same mock answer all
 // of the paths the tool requests on a single render.
-jest.mock( '../../use-settings', () => {
-	const actual = jest.requireActual( '../../use-settings' );
+vi.mock( import( '../../use-settings' ), async ( importOriginal ) => {
+	const actual = await importOriginal();
 	return {
 		...actual,
-		useSettings: jest.fn( ( ...paths ) =>
+		useSettings: vi.fn( ( ...paths ) =>
 			paths.map( ( path ) => {
 				switch ( path ) {
 					case 'dimensions.aspectRatios.default':
@@ -247,7 +250,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 
 		it( 'commits a local contentSize override on user input without copying any inherited value into other paths (strip-not-copy)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			renderPanel( {
 				value: {},
@@ -540,7 +543,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 		} );
 
 		it( 'does not call `onChange` on mount of an at-rest minHeight', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			renderPanel( {
 				value: {},
 				inheritedValue: { dimensions: { minHeight: '320px' } },
@@ -553,7 +556,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 
 		it( 'commits a local minHeight override on user input without copying any inherited value into other paths', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			renderPanel( {
 				value: {},
@@ -612,7 +615,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 		} );
 
 		it( 'does not call `onChange` on mount of an at-rest aspectRatio', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			renderPanel( {
 				value: {},
 				inheritedValue: { dimensions: { aspectRatio: '16/9' } },
@@ -625,7 +628,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 
 		it( 'commits a local aspectRatio override on user selection of a different option without copying any inherited value into other paths', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			renderPanel( {
 				value: {},
@@ -735,13 +738,10 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 		} );
 
 		it( '(padding) commits to local on slider activation and the displayed value follows the new local value', () => {
-			const { fireEvent } = require( '@testing-library/react' );
-
 			// Controlled wrapper so we can verify the slider follows local
 			// value updates after onChange writes through.
 			function Wrapper() {
-				const [ value, setValue ] =
-					require( '@wordpress/element' ).useState( {} );
+				const [ value, setValue ] = useState( {} );
 				return (
 					<DimensionsPanel
 						value={ value }

package/src/components/global-styles/test/{filters-panel.js → filters-panel.jsdom.test.jsx}

@@ -1,7 +1,10 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import FiltersPanel from '../filters-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.
@@ -101,7 +104,7 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 	} );
 
 	it( 'does not invoke onChange on mount when only inherited duotone is present (display-without-commit)', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const inheritedValue = {
 			filter: { duotone: [ '#000000', '#ffffff' ] },
 		};
@@ -121,7 +124,7 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 
 	it( 'commits the inherited value when the user clicks the preselected duotone preset', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const inheritedValue = {
 			filter: { duotone: [ '#000000', '#ffffff' ] },
 		};
@@ -167,7 +170,7 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 	} );
 
 	it( 'does not invoke onChange on mount when a local duotone is set (no spurious commit)', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const value = {
 			filter: { duotone: [ '#8c00b7', '#fcff41' ] },
 		};
@@ -247,7 +250,7 @@ describe( 'FiltersPanel — duplicate duotone presets', () => {
 
 	it( 'saves the slug of the preset that was picked', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<FiltersPanel

package/src/components/global-styles/test/{inherited-value-context-core.js → inherited-value-context-core.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import { useResolvedStyle } from '../inherited-value-context';
@@ -19,28 +20,28 @@ afterEach( () => {
 
 // Only `useSelect` is called by the hook. The other four are needed at import
 // time by the store modules this file pulls in transitively.
-jest.mock( '@wordpress/data', () => ( {
-	useSelect: jest.fn(),
-	register: jest.fn(),
-	createReduxStore: jest.fn(),
-	createSelector: jest.fn( ( callback ) => callback ),
-	combineReducers: jest.fn( ( reducers ) => reducers ),
+vi.mock( import( '@wordpress/data' ), () => ( {
+	useSelect: vi.fn(),
+	register: vi.fn(),
+	createReduxStore: vi.fn(),
+	createSelector: vi.fn( ( callback ) => callback ),
+	combineReducers: vi.fn( ( reducers ) => reducers ),
 } ) );
 
-jest.mock( '../../../store', () => ( {
+vi.mock( import( '../../../store' ), () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
-// `inherited-value-context.js` imports the blocks store for
+// `inherited-value-context.jsx` imports the blocks store for
 // `useVariationAndElements`. Its real import chain needs data-module exports
 // the stub above does not provide, so stub the blocks module too.
-jest.mock( '@wordpress/blocks', () => ( {
+vi.mock( import( '@wordpress/blocks' ), () => ( {
 	store: { name: 'core/blocks' },
 	getBlockType: ( blockName ) =>
 		( { 'core/heading': { title: 'Heading' } } )[ blockName ],
 } ) );
 
-jest.mock( '../../../hooks/block-style-variation', () => ( {
+vi.mock( import( '../../../hooks/block-style-variation' ), () => ( {
 	getVariationNameFromClass: ( className ) => {
 		const match = /is-style-([\w-]+)/.exec( className || '' );
 		return match ? match[ 1 ] : null;