@wordpress/block-editor 17.0.0 → 17.1.0

package/src/hooks/test/{cross-origin-isolation.js → cross-origin-isolation.jsdom.test.js}

@@ -1,18 +1,22 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 describe( 'cross-origin-isolation', () => {
 	let originalCrossOriginIsolated;
 	let originalBody;
 	let observeSpy;
 
 	beforeEach( () => {
+		vi.resetModules();
+
 		// Save original values
 		originalCrossOriginIsolated = window.crossOriginIsolated;
 		originalBody = document.body;
 
 		// Clear any existing filters
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 
 		// Spy on MutationObserver.observe
-		observeSpy = jest.spyOn( window.MutationObserver.prototype, 'observe' );
+		observeSpy = vi.spyOn( window.MutationObserver.prototype, 'observe' );
 	} );
 
 	afterEach( () => {
@@ -34,10 +38,9 @@ describe( 'cross-origin-isolation', () => {
 		}
 
 		observeSpy.mockRestore();
-		jest.resetModules();
 	} );
 
-	it( 'should not observe when crossOriginIsolated is false', () => {
+	it( 'should not observe when crossOriginIsolated is false', async () => {
 		Object.defineProperty( window, 'crossOriginIsolated', {
 			value: false,
 			writable: true,
@@ -45,14 +48,12 @@ describe( 'cross-origin-isolation', () => {
 		} );
 
 		// Re-import the module to trigger the side effects
-		jest.isolateModules( () => {
-			require( '../cross-origin-isolation' );
-		} );
+		await import( '../cross-origin-isolation' );
 
 		expect( observeSpy ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should observe document.body when crossOriginIsolated is true and body exists', () => {
+	it( 'should observe document.body when crossOriginIsolated is true and body exists', async () => {
 		Object.defineProperty( window, 'crossOriginIsolated', {
 			value: true,
 			writable: true,
@@ -66,9 +67,7 @@ describe( 'cross-origin-isolation', () => {
 		} );
 
 		// Re-import the module to trigger the side effects
-		jest.isolateModules( () => {
-			require( '../cross-origin-isolation' );
-		} );
+		await import( '../cross-origin-isolation' );
 
 		expect( observeSpy ).toHaveBeenCalledWith( document.body, {
 			childList: true,
@@ -77,7 +76,7 @@ describe( 'cross-origin-isolation', () => {
 		} );
 	} );
 
-	it( 'should wait for DOMContentLoaded when body is not available and document is loading', () => {
+	it( 'should wait for DOMContentLoaded when body is not available and document is loading', async () => {
 		Object.defineProperty( window, 'crossOriginIsolated', {
 			value: true,
 			writable: true,
@@ -98,12 +97,10 @@ describe( 'cross-origin-isolation', () => {
 			configurable: true,
 		} );
 
-		const addEventListenerSpy = jest.spyOn( document, 'addEventListener' );
+		const addEventListenerSpy = vi.spyOn( document, 'addEventListener' );
 
 		// Re-import the module to trigger the side effects
-		jest.isolateModules( () => {
-			require( '../cross-origin-isolation' );
-		} );
+		await import( '../cross-origin-isolation' );
 
 		// Should not observe immediately
 		expect( observeSpy ).not.toHaveBeenCalled();
@@ -117,7 +114,7 @@ describe( 'cross-origin-isolation', () => {
 		addEventListenerSpy.mockRestore();
 	} );
 
-	it( 'should not throw error when body is null and document is complete', () => {
+	it( 'should not throw error when body is null and document is complete', async () => {
 		Object.defineProperty( window, 'crossOriginIsolated', {
 			value: true,
 			writable: true,
@@ -138,11 +135,9 @@ describe( 'cross-origin-isolation', () => {
 		} );
 
 		// This should not throw an error
-		expect( () => {
-			jest.isolateModules( () => {
-				require( '../cross-origin-isolation' );
-			} );
-		} ).not.toThrow();
+		await expect(
+			import( '../cross-origin-isolation' )
+		).resolves.toBeDefined();
 
 		// Should not attempt to observe null
 		expect( observeSpy ).not.toHaveBeenCalled();
@@ -156,9 +151,7 @@ describe( 'cross-origin-isolation', () => {
 		} );
 
 		// Re-import the module to trigger the side effects
-		jest.isolateModules( () => {
-			require( '../cross-origin-isolation' );
-		} );
+		await import( '../cross-origin-isolation' );
 
 		// Create an image and add it to the DOM
 		const img = document.createElement( 'img' );

package/src/hooks/test/{custom-class-name.js → custom-class-name.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { applyFilters } from '@wordpress/hooks';
 import customClassName from '../custom-class-name';
 

package/src/hooks/test/{dimensions.js → dimensions.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import {
 	getBlockType,
 	registerBlockType,

package/src/hooks/test/{duotone.js → duotone.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getColorsFromDuotonePreset,
 	getDuotonePresetFromColors,

package/src/hooks/test/{font-size.js → font-size.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { addFilter, removeFilter } from '@wordpress/hooks';
 import {

package/src/hooks/test/gap.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getGapCSSValue,
 	getGapBoxControlValueFromStyle,

package/src/hooks/test/generate-fields-from-attributes.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { generateFieldsFromAttributes } from '../generate-fields-from-attributes';
 
 /**

package/src/hooks/test/generated-class-name.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { applyFilters } from '@wordpress/hooks';
 import '../generated-class-name';
 

package/src/hooks/test/{inherited-value-wiring.js → inherited-value-wiring.jsdom.test.jsx}

@@ -1,4 +1,12 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { render } from '@testing-library/react';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { TypographyPanel } from '../typography';
+import { ElementsEdit } from '../elements';
+import { BorderPanel } from '../border';
+import { DimensionsPanel } from '../dimensions';
+import { BackgroundImagePanel } from '../background';
 
 /**
  * Tests the wiring between inspector hook wrappers and shared
@@ -11,24 +19,31 @@ import { render } from '@testing-library/react';
  * intentionally mocked out so each test exercises only the wiring contract.
  */
 
-// Jest hoists `jest.mock` factories; proxies for spies need to satisfy
-// the `/^mock/i` naming convention.
+// Vitest hoists `vi.mock` factories, so recorder values are exposed through
+// mutable objects that the factories can close over safely.
 const mockHookRecorder = { calls: [] };
 const mockPanelRecorder = { calls: [] };
 const mockInheritedReturn = { value: {} };
 
-jest.mock( '../../components/global-styles/inherited-value-context', () => ( {
-	__esModule: true,
-	useResolvedStyle: ( blockName, className, selectedState ) => {
-		mockHookRecorder.calls.push( { blockName, className, selectedState } );
-		return {
-			value: mockInheritedReturn.value,
-			sources: {},
-		};
-	},
-} ) );
+vi.mock(
+	import( '../../components/global-styles/inherited-value-context' ),
+	() => ( {
+		__esModule: true,
+		useResolvedStyle: ( blockName, className, selectedState ) => {
+			mockHookRecorder.calls.push( {
+				blockName,
+				className,
+				selectedState,
+			} );
+			return {
+				value: mockInheritedReturn.value,
+				sources: {},
+			};
+		},
+	} )
+);
 
-jest.mock( '../../components/global-styles/typography-panel', () => ( {
+vi.mock( import( '../../components/global-styles/typography-panel' ), () => ( {
 	__esModule: true,
 	default: ( props ) => {
 		mockPanelRecorder.calls.push( [ 'typography', props ] );
@@ -36,7 +51,7 @@ jest.mock( '../../components/global-styles/typography-panel', () => ( {
 	},
 	useHasTypographyPanel: () => true,
 } ) );
-jest.mock( '../../components/global-styles/color-panel', () => ( {
+vi.mock( import( '../../components/global-styles/color-panel' ), () => ( {
 	__esModule: true,
 	default: ( { children, ...rest } ) => {
 		mockPanelRecorder.calls.push( [ 'color', rest ] );
@@ -44,7 +59,7 @@ jest.mock( '../../components/global-styles/color-panel', () => ( {
 	},
 	useHasColorPanel: () => true,
 } ) );
-jest.mock( '../../components/global-styles/border-panel', () => ( {
+vi.mock( import( '../../components/global-styles/border-panel' ), () => ( {
 	__esModule: true,
 	default: ( props ) => {
 		mockPanelRecorder.calls.push( [ 'border', props ] );
@@ -53,7 +68,7 @@ jest.mock( '../../components/global-styles/border-panel', () => ( {
 	useHasBorderPanel: () => true,
 	useHasBorderPanelControls: () => ( {} ),
 } ) );
-jest.mock( '../../components/global-styles/dimensions-panel', () => ( {
+vi.mock( import( '../../components/global-styles/dimensions-panel' ), () => ( {
 	__esModule: true,
 	default: ( props ) => {
 		mockPanelRecorder.calls.push( [ 'dimensions', props ] );
@@ -61,7 +76,7 @@ jest.mock( '../../components/global-styles/dimensions-panel', () => ( {
 	},
 	useHasDimensionsPanel: () => true,
 } ) );
-jest.mock( '../../components/global-styles/background-panel', () => ( {
+vi.mock( import( '../../components/global-styles/background-panel' ), () => ( {
 	__esModule: true,
 	default: ( props ) => {
 		mockPanelRecorder.calls.push( [ 'background', props ] );
@@ -75,7 +90,7 @@ jest.mock( '../../components/global-styles/background-panel', () => ( {
 // The Typography, Background and Elements wrappers now request a contrast
 // warning (relocated color controls). The hook pulls the data store into its
 // import graph, so stub it to a no-op for these wiring-only tests.
-jest.mock( '../contrast-checker', () => ( {
+vi.mock( import( '../contrast-checker' ), () => ( {
 	__esModule: true,
 	default: () => undefined,
 } ) );
@@ -83,9 +98,9 @@ jest.mock( '../contrast-checker', () => ( {
 // Stub the minimal `@wordpress/data` surface the wrappers call into
 // directly. The real store + persistence machinery is intentionally
 // elided. The prop plumbing is testable with the mocked selector surface.
-jest.mock( '@wordpress/data', () => ( {
+vi.mock( import( '@wordpress/data' ), () => ( {
 	__esModule: true,
-	useSelect: jest.fn(),
+	useSelect: vi.fn(),
 	useDispatch: () => ( {} ),
 	useRegistry: () => ( {} ),
 	createSelector: ( fn ) => fn,
@@ -104,12 +119,12 @@ jest.mock( '@wordpress/data', () => ( {
 	withDispatch: () => ( c ) => c,
 } ) );
 
-jest.mock( '@wordpress/blocks', () => ( {
+vi.mock( import( '@wordpress/blocks' ), () => ( {
 	__esModule: true,
-	getBlockSupport: jest.fn( () => undefined ),
-	hasBlockSupport: jest.fn( () => false ),
-	getBlockType: jest.fn( () => null ),
-	getBlockTypes: jest.fn( () => [] ),
+	getBlockSupport: vi.fn( () => undefined ),
+	hasBlockSupport: vi.fn( () => false ),
+	getBlockType: vi.fn( () => null ),
+	getBlockTypes: vi.fn( () => [] ),
 	store: { name: 'core/blocks' },
 } ) );
 
@@ -119,14 +134,14 @@ jest.mock( '@wordpress/blocks', () => ( {
 // not carry the private-API marker. Short-circuit to a passthrough so
 // these tests can exercise the wrapper wiring without threading
 // the full private-API handshake through every stub.
-jest.mock( '@wordpress/private-apis', () => ( {
+vi.mock( import( '@wordpress/private-apis' ), () => ( {
 	__esModule: true,
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules: () => ( {
 		lock: () => {},
-		unlock: ( value ) =>
-			new Proxy( value ?? {}, {
-				get: () => () => undefined,
-			} ),
+		unlock: () => ( {
+			hideBlockInterface: () => undefined,
+			showBlockInterface: () => undefined,
+		} ),
 	} ),
 } ) );
 
@@ -135,12 +150,12 @@ jest.mock( '@wordpress/private-apis', () => ( {
 // is already mocked to a Proxy-driven stub and never actually touches
 // the store. Providing a stub avoids the private-APIs unlock that
 // the real `store/index.js` performs at module load.
-jest.mock( '../../store', () => ( {
+vi.mock( import( '../../store' ), () => ( {
 	__esModule: true,
 	store: { name: 'core/block-editor' },
 } ) );
 
-jest.mock( '../../store/private-keys', () => ( {
+vi.mock( import( '../../store/private-keys' ), () => ( {
 	__esModule: true,
 	globalStylesDataKey: Symbol( 'globalStylesDataKey' ),
 	globalStylesLinksDataKey: Symbol( 'globalStylesLinksDataKey' ),
@@ -149,14 +164,11 @@ jest.mock( '../../store/private-keys', () => ( {
 
 // Short-circuit the block-editor components barrel (`../../components`),
 // which pulls the data store into its import graph transitively.
-jest.mock(
-	'../../components',
-	() => new Proxy( {}, { get: () => () => null } )
-);
+vi.mock( import( '../../components' ), () => ( {} ) );
 
 // `InspectorControls` is a slot-fill component with registry dependencies.
 // Mock it to a passthrough div.
-jest.mock( '../../components/inspector-controls', () => ( {
+vi.mock( import( '../../components/inspector-controls' ), () => ( {
 	__esModule: true,
 	default: ( { children } ) => (
 		<div data-testid="inspector-controls">{ children }</div>
@@ -171,7 +183,6 @@ beforeEach( () => {
 	mockPanelRecorder.calls = [];
 	mockInheritedReturn.value = {};
 	mockUseSelectImpl.fn = () => undefined;
-	const { useSelect } = require( '@wordpress/data' );
 	useSelect.mockImplementation( ( mapSelect ) => {
 		// Feed mapSelect a synthetic `select()` that returns an object
 		// whose methods all yield what the current test configured.
@@ -190,9 +201,6 @@ beforeEach( () => {
 
 describe( 'inspector hook wrappers thread inheritedValue into the panel', () => {
 	test( 'TypographyPanel calls useResolvedStyle with the block name and threads inheritedValue', () => {
-		// Imported inside the test so the `jest.mock` factories are
-		// applied before the wrapper's module graph is resolved.
-		const { TypographyPanel } = require( '../typography' );
 		mockUseSelectImpl.fn = () => ( {
 			style: { typography: { fontSize: '14px' } },
 			fontFamily: undefined,
@@ -230,7 +238,6 @@ describe( 'inspector hook wrappers thread inheritedValue into the panel', () =>
 	// and background color are wired through the Typography and Background
 	// wrappers and covered above/below.
 	test( 'ElementsEdit wires block-scoped Global Styles into the Color panel', () => {
-		const { ElementsEdit } = require( '../elements' );
 		mockUseSelectImpl.fn = () => ( {
 			style: undefined,
 			className: undefined,
@@ -258,7 +265,6 @@ describe( 'inspector hook wrappers thread inheritedValue into the panel', () =>
 	} );
 
 	test( 'BorderPanel threads a border-scoped inheritedValue into the panel', () => {
-		const { BorderPanel } = require( '../border' );
 		mockUseSelectImpl.fn = () => ( {
 			style: undefined,
 			borderColor: undefined,
@@ -286,7 +292,6 @@ describe( 'inspector hook wrappers thread inheritedValue into the panel', () =>
 	} );
 
 	test( 'DimensionsPanel threads spacing inheritedValue into the panel', () => {
-		const { DimensionsPanel } = require( '../dimensions' );
 		mockUseSelectImpl.fn = () => ( {
 			value: undefined,
 			className: undefined,
@@ -313,10 +318,6 @@ describe( 'inspector hook wrappers thread inheritedValue into the panel', () =>
 	} );
 
 	test( 'BackgroundImagePanel replaces its pre-feature partial wiring with a full inherited payload', () => {
-		const {
-			hasBlockSupport,
-			getBlockSupport,
-		} = require( '@wordpress/blocks' );
 		getBlockSupport.mockImplementation( ( _n, key ) => {
 			if ( key === 'background' ) {
 				return { backgroundImage: true };
@@ -325,7 +326,6 @@ describe( 'inspector hook wrappers thread inheritedValue into the panel', () =>
 		} );
 		hasBlockSupport.mockReturnValue( true );
 
-		const { BackgroundImagePanel } = require( '../background' );
 		mockUseSelectImpl.fn = () => ( {
 			style: undefined,
 			className: undefined,
@@ -352,7 +352,6 @@ describe( 'inspector hook wrappers thread inheritedValue into the panel', () =>
 	} );
 
 	test( 'wrappers forward the block className to useResolvedStyle', () => {
-		const { TypographyPanel } = require( '../typography' );
 		mockUseSelectImpl.fn = () => ( {
 			style: undefined,
 			fontFamily: undefined,
@@ -378,7 +377,6 @@ describe( 'inspector hook wrappers thread inheritedValue into the panel', () =>
 	} );
 
 	test( 'wrappers fall back to empty inheritedValue during hydration', () => {
-		const { TypographyPanel } = require( '../typography' );
 		mockUseSelectImpl.fn = () => ( {
 			style: undefined,
 			fontFamily: undefined,

package/src/hooks/test/{layout-child.js → layout-child.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getChildLayoutStyleRules,
 	getChildLayoutStyles,

package/src/hooks/test/{layout.js → layout.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getLayoutStateOverrides,
 	getResetLayout,

package/src/hooks/test/metadata.js

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import {
 	getBlockTypes,
 	registerBlockType,

package/src/hooks/test/preset-round-trip.js

@@ -6,6 +6,8 @@
  * preset references, clear the relevant reset surfaces, and treat explicit
  * empty values as non-contributing layers.
  */
+
+import { describe, expect, it } from 'vitest';
 import {
 	getValueFromVariable,
 	getPresetVariableFromValue,

package/src/hooks/test/{settings.js → settings.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { applyFilters } from '@wordpress/hooks';
 import '../settings';
 

package/src/hooks/test/state-utils.js

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import {
 	getRelativeRootSelector,

package/src/hooks/test/{style.js → style.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import _style, {
 	getCanvasStateStyleValue,

package/src/hooks/test/{text-align.js → text-align.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import {
 	getBlockTypes,
 	registerBlockType,

package/src/hooks/test/{use-typography-props.js → use-typography-props.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { getTypographyClassesAndStyles } from '../use-typography-props';
 
 describe( 'getTypographyClassesAndStyles', () => {

package/src/hooks/test/{utils.js → utils.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { cleanEmptyObject } from '../utils';
 
 describe( 'cleanEmptyObject', () => {

package/src/layouts/{flex.js → flex.jsx}

@@ -351,6 +351,13 @@ export default {
 		}
 
 		if ( orientation === 'horizontal' ) {
+			// `row` is the flex default, so the base layout never declares it.
+			// A viewport override that switches a vertical base layout to
+			// horizontal has to declare it explicitly, otherwise the base
+			// `flex-direction: column` keeps applying.
+			if ( hasViewportOverride( 'orientation' ) ) {
+				rules.push( 'flex-direction: row' );
+			}
 			if ( shouldOutputFlexAlignment && verticalAlignment ) {
 				rules.push( `align-items: ${ verticalAlignment }` );
 			}

package/src/layouts/test/{constrained.js → constrained.jsdom.test.jsx}

@@ -1,18 +1,21 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import constrained from '../constrained';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const ConstrainedLayoutInspectorControls = constrained.inspectorControls;
 const PANEL_ID = 'test-panel';
 
 function renderInspectorControls( props = {} ) {
 	return render(
-		<ToolsPanel label="Layout" resetAll={ jest.fn() } panelId={ PANEL_ID }>
+		<ToolsPanel label="Layout" resetAll={ vi.fn() } panelId={ PANEL_ID }>
 			<ConstrainedLayoutInspectorControls
 				clientId={ PANEL_ID }
 				layout={ {} }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				{ ...props }
 			/>
 		</ToolsPanel>
@@ -100,7 +103,7 @@ describe( 'ConstrainedLayoutInspectorControls', () => {
 		'preserves a cleared %s value for viewport layout overrides',
 		async ( label, layoutKey ) => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			renderInspectorControls( {
 				layout: { type: 'constrained', [ layoutKey ]: '800px' },
 				resetLayout: { type: 'constrained', [ layoutKey ]: '800px' },

package/src/layouts/test/{flex.js → flex.jsdom.test.jsx}

@@ -1,18 +1,23 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import flex from '../flex';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 const FlexLayoutInspectorControls = flex.inspectorControls;
 const PANEL_ID = 'test-panel';
 
 function renderInspectorControls( props = {} ) {
 	return render(
-		<ToolsPanel label="Layout" resetAll={ jest.fn() } panelId={ PANEL_ID }>
+		<ToolsPanel label="Layout" resetAll={ vi.fn() } panelId={ PANEL_ID }>
 			<FlexLayoutInspectorControls
 				clientId={ PANEL_ID }
 				layout={ {} }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				{ ...props }
 			/>
 		</ToolsPanel>
@@ -34,6 +39,51 @@ describe( 'getLayoutStyle', () => {
 
 		expect( result ).toBe( expected );
 	} );
+
+	it( 'should output flex-direction row when a viewport override switches a vertical layout to horizontal', () => {
+		const result = flex.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {
+				type: 'flex',
+				orientation: 'vertical',
+				flexWrap: 'nowrap',
+				justifyContent: 'center',
+			},
+			viewportOverrides: {
+				orientation: 'horizontal',
+				justifyContent: 'left',
+			},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe(
+			'.my-container {\n\t\t\t\tflex-direction: row; justify-content: flex-start;\n\t\t\t}'
+		);
+	} );
+
+	it( 'should keep flex-direction implicit when a viewport override does not change a horizontal orientation', () => {
+		const result = flex.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {
+				type: 'flex',
+				orientation: 'horizontal',
+				justifyContent: 'left',
+			},
+			viewportOverrides: {
+				justifyContent: 'right',
+			},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).not.toContain( 'flex-direction' );
+		expect( result ).toContain( 'justify-content: flex-end' );
+	} );
 } );
 
 describe( 'FlexLayoutInspectorControls', () => {

package/src/layouts/test/{flow.js → flow.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import flow from '../flow';
 
 describe( 'getLayoutStyle', () => {

package/src/layouts/test/{grid.js → grid.jsdom.test.jsx}

@@ -1,17 +1,20 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import grid from '../grid';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const GridLayoutInspectorControls = grid.inspectorControls;
 const PANEL_ID = 'test-panel';
 
 function renderInspectorControls( props = {} ) {
 	return render(
-		<ToolsPanel label="Layout" resetAll={ jest.fn() } panelId={ PANEL_ID }>
+		<ToolsPanel label="Layout" resetAll={ vi.fn() } panelId={ PANEL_ID }>
 			<GridLayoutInspectorControls
 				clientId={ PANEL_ID }
 				layout={ {} }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				{ ...props }
 			/>
 		</ToolsPanel>

package/src/layouts/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { appendSelectors, getBlockGapCSS } from '../utils';
 
 const layoutDefinitions = {