@wordpress/block-editor 17.0.0 → 17.1.1-next.v.202609031004.0

package/src/components/provider/{index.js → index.jsx}

@@ -1,6 +1,7 @@
 import { useDispatch } from '@wordpress/data';
 import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import {
 	MediaUploadProvider,
 	store as uploadStore,
@@ -44,6 +45,30 @@ let isHeicCanvasEnabledCache = null;
  */
 const HEIC_MIME_TYPES = [ 'image/heic', 'image/heif' ];
 
+/**
+ * Refuses a batch of more than one file on behalf of a caller that only takes
+ * one - a Cover block's placeholder, say.
+ *
+ * `uploadMedia()` in `@wordpress/media-utils` refuses such a batch with the
+ * same wording, but the `@wordpress/upload-media` pipeline below is a separate
+ * transport that never reaches that function. Without this check every dropped
+ * file uploads and the caller keeps whichever one lands last (gutenberg#82041).
+ *
+ * @param {Array<File>} filesList List of files.
+ * @param {boolean}     multiple  Whether the caller accepts more than one file.
+ * @param {Function}    onError   Function called when an error happens.
+ *
+ * @return {boolean} Whether the batch was refused.
+ */
+function refuseExtraFiles( filesList, multiple, onError ) {
+	if ( ! multiple && filesList.length > 1 ) {
+		onError( __( 'Only one file can be used here.' ) );
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * Checks if client-side media processing should be enabled.
  *
@@ -143,6 +168,7 @@ function shouldEnableHeicCanvasProcessing() {
  * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
  * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
  * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ * @param {boolean}        $3.multiple       Whether the caller accepts more than one file.
  */
 function mediaUpload(
 	registry,
@@ -155,8 +181,13 @@ function mediaUpload(
 		onFileChange,
 		onSuccess,
 		onBatchSuccess,
+		multiple = true,
 	}
 ) {
+	if ( refuseExtraFiles( filesList, multiple, onError ) ) {
+		return;
+	}
+
 	void registry.dispatch( uploadStore ).addItems( {
 		files: Array.from( filesList ),
 		onChange: onFileChange,
@@ -189,6 +220,7 @@ function mediaUpload(
  * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
  * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
  * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ * @param {boolean}        $3.multiple       Whether the caller accepts more than one file.
  */
 function heicMediaUpload(
 	registry,
@@ -201,8 +233,13 @@ function heicMediaUpload(
 		onFileChange,
 		onSuccess,
 		onBatchSuccess,
+		multiple = true,
 	}
 ) {
+	if ( refuseExtraFiles( filesList, multiple, onError ) ) {
+		return;
+	}
+
 	const files = Array.from( filesList );
 	const heicFiles = files.filter( ( file ) =>
 		HEIC_MIME_TYPES.includes( file.type )
@@ -254,6 +291,7 @@ function heicMediaUpload(
 			onFileChange,
 			onSuccess,
 			onBatchSuccess: coordinatedBatchSuccess,
+			multiple,
 		} );
 	}
 }

package/src/components/responsive-block-control/style.scss

@@ -10,6 +10,7 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	// stylelint-disable-next-line property-no-deprecated -- Pending review of overflow-wrap alternative.
 	word-wrap: normal !important;
 	word-break: normal !important;
 }

package/src/components/rich-text/content.scss

@@ -54,3 +54,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .rich-text [contenteditable="false"]::selection {
 	background-color: transparent;
 }
+
+.is-selected .non-breaking-space {
+	outline: 1px solid currentColor;
+	outline-offset: -1px;
+	opacity: 0.8;
+}

package/src/components/rich-text/event-listeners/input-rules.js

@@ -84,8 +84,13 @@ export default ( props ) => ( element ) => {
 		} );
 		const block = transformation.transform( content );
 
-		selectionChange( ...findSelection( [ block ] ) );
-		onReplace( [ block ] );
+		// Batch so the undo history records the pre-transform selection,
+		// instead of the selection change here overwriting it first.
+		registry.batch( () => {
+			selectionChange( ...findSelection( [ block ] ) );
+			onReplace( [ block ] );
+		} );
+
 		registry.dispatch( blockEditorStore ).__unstableMarkAutomaticChange();
 
 		return true;

package/src/components/spacing-sizes-control/test/utils.js

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

package/src/components/url-input/test/{index.js → index.jsdom.test.jsx}

@@ -1,4 +1,10 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { speak } from '@wordpress/a11y';
 import { useState } from '@wordpress/element';
@@ -37,8 +43,8 @@ const KEY_EVENTS = {
  * Waits long enough for the suggestions request debounce to elapse, so that
  * assertions about a request _not_ being made are meaningful.
  */
-function flushDebounce() {
-	return new Promise( ( resolve ) => setTimeout( resolve, 250 ) );
+async function flushDebounce() {
+	await act( () => new Promise( ( resolve ) => setTimeout( resolve, 250 ) ) );
 }
 
 /**

package/src/components/use-block-drop-zone/index.js

@@ -151,7 +151,7 @@ export function getDropTargetPosition(
 				rect,
 				allowedEdges
 			);
-			// If the the point is close to a side, prioritize that side.
+			// If the point is close to a side, prioritize that side.
 			const [ sideDistance, sideEdge ] = getDistanceToNearestEdge(
 				position,
 				rect,
@@ -572,7 +572,7 @@ export default function useBlockDropZone( {
 		onDrop: onBlockDrop,
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being
-			// handled, so get it now and pass it to the thottled function.
+			// handled, so get it now and pass it to the throttled function.
 			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
 			throttled( event, event.currentTarget.ownerDocument );
 		},

package/src/components/use-block-drop-zone/test/index.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { getDropTargetPosition } from '..';
 
 const elementData = [

package/src/components/use-on-block-drop/test/index.js

@@ -1,15 +1,14 @@
+import { describe, expect, it, vi } from 'vitest';
 import { findTransform, pasteHandler } from '@wordpress/blocks';
 import { parseDropEvent, onFilesDrop, onHTMLDrop, onBlockDrop } from '..';
 
 const noop = () => {};
 
-jest.mock( '@wordpress/blocks/src/api/factory', () => ( {
-	findTransform: jest.fn(),
-	getBlockTransforms: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/blocks/src/api/raw-handling', () => ( {
-	pasteHandler: jest.fn(),
+vi.mock( import( '@wordpress/blocks' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	findTransform: vi.fn(),
+	getBlockTransforms: vi.fn(),
+	pasteHandler: vi.fn(),
 } ) );
 
 describe( 'parseDropEvent', () => {
@@ -92,7 +91,7 @@ describe( 'onBlockDrop', () => {
 		const targetBlockIndex = 0;
 		const getBlockIndex = noop;
 		const getClientIdsOfDescendants = noop;
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -120,9 +119,9 @@ describe( 'onBlockDrop', () => {
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
 		// Target and source block index is the same.
-		const getBlockIndex = jest.fn( () => targetBlockIndex );
+		const getBlockIndex = vi.fn( () => targetBlockIndex );
 		const getClientIdsOfDescendants = noop;
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -152,9 +151,9 @@ describe( 'onBlockDrop', () => {
 	it( 'does nothing if the block is dropped as a child of itself', () => {
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const getBlockIndex = jest.fn( () => 6 );
+		const getBlockIndex = vi.fn( () => 6 );
 		const getClientIdsOfDescendants = noop;
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -184,12 +183,10 @@ describe( 'onBlockDrop', () => {
 	it( 'does nothing if the block is dropped as a descendant of itself', () => {
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const getBlockIndex = jest.fn( () => 1 );
+		const getBlockIndex = vi.fn( () => 1 );
 		// Dragged block is being dropped as a descendant of itself.
-		const getClientIdsOfDescendants = jest.fn( () => [
-			targetRootClientId,
-		] );
-		const moveBlocks = jest.fn();
+		const getClientIdsOfDescendants = vi.fn( () => [ targetRootClientId ] );
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -220,9 +217,9 @@ describe( 'onBlockDrop', () => {
 		const sourceRootClientId = '0';
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const getBlockIndex = jest.fn( () => 1 );
+		const getBlockIndex = vi.fn( () => 1 );
 		const getClientIdsOfDescendants = () => [];
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -257,10 +254,10 @@ describe( 'onBlockDrop', () => {
 		const sourceRootClientId = '0';
 		const targetRootClientId = sourceRootClientId;
 		const targetBlockIndex = 5;
-		const getBlockIndex = jest.fn( () => 1 );
+		const getBlockIndex = vi.fn( () => 1 );
 		// Dragged block is being dropped as a descendant of itself.
 		const getClientIdsOfDescendants = () => [];
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -296,11 +293,11 @@ describe( 'onBlockDrop', () => {
 
 describe( 'onFilesDrop', () => {
 	it( 'does nothing if hasUploadPermissions is false', () => {
-		const updateBlockAttributes = jest.fn();
+		const updateBlockAttributes = vi.fn();
 		const canInsertBlockType = noop;
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 		const targetRootClientId = '1';
-		const getSettings = jest.fn( () => ( {} ) );
+		const getSettings = vi.fn( () => ( {} ) );
 
 		const onFileDropHandler = onFilesDrop(
 			targetRootClientId,
@@ -320,10 +317,10 @@ describe( 'onFilesDrop', () => {
 		// to have no return value.
 		findTransform.mockImplementation( noop );
 		const updateBlockAttributes = noop;
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 		const canInsertBlockType = noop;
 		const targetRootClientId = '1';
-		const getSettings = jest.fn( () => ( {
+		const getSettings = vi.fn( () => ( {
 			mediaUpload: true,
 		} ) );
 
@@ -345,13 +342,13 @@ describe( 'onFilesDrop', () => {
 		// of the transform isn't important just that there is a callable 'transform'
 		// function that returns a value.
 		const blocks = 'blocks';
-		const transformation = { transform: jest.fn( () => blocks ) };
+		const transformation = { transform: vi.fn( () => blocks ) };
 		findTransform.mockImplementation( () => transformation );
 		const updateBlockAttributes = noop;
 		const canInsertBlockType = noop;
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 		const targetRootClientId = '1';
-		const getSettings = jest.fn( () => ( {
+		const getSettings = vi.fn( () => ( {
 			mediaUpload: true,
 		} ) );
 
@@ -377,7 +374,7 @@ describe( 'onFilesDrop', () => {
 describe( 'onHTMLDrop', () => {
 	it( 'does nothing if the HTML cannot be converted into blocks', () => {
 		pasteHandler.mockImplementation( () => [] );
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 
 		const eventHandler = onHTMLDrop( insertOrReplaceBlocks );
 		eventHandler();
@@ -388,7 +385,7 @@ describe( 'onHTMLDrop', () => {
 	it( 'inserts blocks if the HTML can be converted into blocks', () => {
 		const blocks = [ 'blocks' ];
 		pasteHandler.mockImplementation( () => blocks );
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 
 		const eventHandler = onHTMLDrop( insertOrReplaceBlocks );
 		eventHandler();

package/src/components/writing-flow/use-arrow-nav.js

@@ -327,9 +327,9 @@ export default function useArrowNav() {
 				return;
 			}
 
-			// When presing any key other than up or down, the initial vertical
+			// When pressing any key other than up or down, the initial vertical
 			// position must ALWAYS be reset. The vertical position is saved so
-			// it can be restored as well as possible on sebsequent vertical
+			// it can be restored as well as possible on subsequent vertical
 			// arrow key presses. It may not always be possible to restore the
 			// exact same position (such as at an empty line), so it wouldn't be
 			// good to compute the position right before any vertical arrow key

package/src/components/writing-flow/{use-tab-nav.js → use-tab-nav.jsx}

@@ -7,6 +7,18 @@ import { store as blockEditorStore } from '../../store';
 import { isInSameBlock, isInsideRootBlock } from '../../utils/dom';
 import { unlock } from '../../lock-unlock';
 
+/**
+ * Spans the element over the canvas, so it is always at least partially in
+ * view and focussing it never scrolls the content. Fixed positioning would
+ * achieve that too, but makes Safari composite the scrollable canvas on a
+ * layer sized to the whole document instead of the visible pane.
+ */
+const PREVENT_SCROLL_ON_FOCUS = {
+	position: 'absolute',
+	inset: 0,
+	pointerEvents: 'none',
+};
+
 export default function useTabNav() {
 	const containerRef = /** @type {typeof useRef<HTMLElement>} */ ( useRef )();
 	const focusCaptureBeforeRef = useRef();
@@ -90,6 +102,7 @@ export default function useTabNav() {
 			ref={ focusCaptureBeforeRef }
 			tabIndex="0"
 			onFocus={ onFocusCapture }
+			style={ PREVENT_SCROLL_ON_FOCUS }
 		/>
 	);
 
@@ -98,6 +111,7 @@ export default function useTabNav() {
 			ref={ focusCaptureAfterRef }
 			tabIndex="0"
 			onFocus={ onFocusCapture }
+			style={ PREVENT_SCROLL_ON_FOCUS }
 		/>
 	);
 
@@ -162,10 +176,7 @@ export default function useTabNav() {
 			// (moving focus to the next tabbable element).
 			noCaptureRef.current = true;
 
-			// Focusing the focus capture element, which is located above and
-			// below the editor, should not scroll the page all the way up or
-			// down.
-			next.current.focus( { preventScroll: true } );
+			next.current.focus();
 		}
 
 		function onFocusOut( event ) {
@@ -191,47 +202,9 @@ export default function useTabNav() {
 			}
 		}
 
-		// When tabbing back to an element in block list, this event handler prevents scrolling if the
-		// focus capture divs (before/after) are outside of the viewport. (For example shift+tab back to a paragraph
-		// when focus is on a sidebar element. This prevents the scrollable writing area from jumping either to the
-		// top or bottom of the document.
-		//
-		// Note that it isn't possible to disable scrolling in the onFocus event. We need to intercept this
-		// earlier in the keypress handler, and call focus( { preventScroll: true } ) instead.
-		// https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#parameters
-		function preventScrollOnTab( event ) {
-			if ( event.keyCode !== TAB ) {
-				return;
-			}
-
-			if ( event.target?.getAttribute( 'role' ) === 'region' ) {
-				return;
-			}
-
-			if ( containerRef.current === event.target ) {
-				return;
-			}
-
-			const isShift = event.shiftKey;
-			const direction = isShift ? 'findPrevious' : 'findNext';
-			const target = focus.tabbable[ direction ]( event.target );
-			// Only do something when the next tabbable is a focus capture div (before/after)
-			if (
-				target === focusCaptureBeforeRef.current ||
-				target === focusCaptureAfterRef.current
-			) {
-				event.preventDefault();
-				target.focus( { preventScroll: true } );
-			}
-		}
-
-		const { ownerDocument } = node;
-		const { defaultView } = ownerDocument;
-		defaultView.addEventListener( 'keydown', preventScrollOnTab );
 		node.addEventListener( 'keydown', onKeyDown );
 		node.addEventListener( 'focusout', onFocusOut );
 		return () => {
-			defaultView.removeEventListener( 'keydown', preventScrollOnTab );
 			node.removeEventListener( 'keydown', onKeyDown );
 			node.removeEventListener( 'focusout', onFocusOut );
 		};

package/src/hooks/block-hooks.scss

@@ -17,15 +17,6 @@
 	}
 }
 
-.block-editor-hooks__position-control-item {
-
-	/**
-	 * Try to make items match the width of the anchor, subtract any margin on
-	 * items to calculate the correct inner width.
-	 */
-	max-inline-size: max(calc(var(--anchor-width) - (2 * var(--wp-ui-popup-padding))), 223px);
-}
-
 .block-editor-hooks__position-control-item-hint {
 	color: var(--wpds-color-foreground-content-neutral-weak);
 	margin-block-start: $grid-unit-05;

package/src/hooks/{border.js → border.jsx}

@@ -4,14 +4,12 @@ import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/com
 import { useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 import {
 	useHasBorderPanel,
-	useHasBorderPanelControls,
 	BorderPanel as StylesBorderPanel,
 } from '../components/global-styles';
 import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
@@ -22,13 +20,10 @@ import {
 	setStyleForState,
 	useBlockStyleState,
 } from './block-style-state';
-import { unlock } from '../lock-unlock';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 export const SHADOW_SUPPORT_KEY = 'shadow';
 
-const EMPTY_ARRAY = [];
-
 const getColorByProperty = ( colors, property, value ) => {
 	let matchedColor;
 
@@ -249,54 +244,6 @@ export function hasShadowSupport( blockName ) {
 	return hasBlockSupport( blockName, SHADOW_SUPPORT_KEY );
 }
 
-export function useBorderPanelLabel( {
-	clientId,
-	hasBorderControl,
-	hasShadowControl,
-} = {} ) {
-	const [ color, radius, style, width, shadow ] = useSelect(
-		( select ) => {
-			if ( ! clientId ) {
-				return EMPTY_ARRAY;
-			}
-			const { getBlockSettings } = unlock( select( blockEditorStore ) );
-			return getBlockSettings(
-				clientId,
-				'border.color',
-				'border.radius',
-				'border.style',
-				'border.width',
-				'shadow'
-			);
-		},
-		[ clientId ]
-	);
-	const settings = useMemo(
-		() => ( { border: { color, radius, style, width }, shadow } ),
-		[ color, radius, style, width, shadow ]
-	);
-	const controls = useHasBorderPanelControls( settings );
-
-	if ( ! hasBorderControl && ! hasShadowControl && clientId ) {
-		hasBorderControl =
-			controls?.hasBorderColor ||
-			controls?.hasBorderStyle ||
-			controls?.hasBorderWidth ||
-			controls?.hasBorderRadius;
-		hasShadowControl = controls?.hasShadow;
-	}
-
-	if ( hasBorderControl && hasShadowControl ) {
-		return __( 'Border & Shadow' );
-	}
-
-	if ( hasShadowControl ) {
-		return __( 'Shadow' );
-	}
-
-	return __( 'Border' );
-}
-
 /**
  * Returns a new style object where the specified border attribute has been
  * removed.

package/src/hooks/{grid-visualizer.js → grid-visualizer.jsx}

@@ -29,7 +29,7 @@ function GridTools( { clientId, layout } ) {
 
 				// These calls are purposely ordered from least expensive to most expensive.
 				// Hides the visualizer in cases where the user is not or cannot interact with it.
-				// Also hide if a child block is selected, because layout-child.js will render
+				// Also hide if a child block is selected, because layout-child.jsx will render
 				// the visualizer in that case (with proper childGridClientId handling).
 				if (
 					( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||

package/src/hooks/{position.js → position.jsx}

@@ -261,6 +261,7 @@ export function PositionPanelPure( {
 				label={ __( 'Position' ) }
 				hideLabelFromVision
 				description={ stickyHelpText }
+				popupWidth="anchor"
 				items={ options }
 				value={ selectedOption }
 				onValueChange={ ( selectedItem ) => {
@@ -277,7 +278,6 @@ export function PositionPanelPure( {
 							key={ option.key }
 							value={ option }
 							label={ option.label }
-							className="block-editor-hooks__position-control-item"
 							aria-describedby={ hintId }
 						>
 							<div>{ option.label }</div>

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

@@ -36,6 +36,7 @@ import {
 	cleanEmptyObject,
 	shouldSkipSerialization,
 	useStyleOverride,
+	usePrivateStyleOverride,
 	useBlockSettings,
 } from './utils';
 import {
@@ -993,7 +994,7 @@ function getElementCSSRules( blockElementStyles, blockName, baseSelector ) {
 	return rules.length > 0 ? rules.join( '' ) : undefined;
 }
 
-function useBlockProps( { name, style } ) {
+function useBlockProps( { clientId, name, style } ) {
 	const blockElementsContainerIdentifier = useInstanceId(
 		STYLE_BLOCK_PROPS_REFERENCE,
 		'wp-elements'
@@ -1037,7 +1038,7 @@ function useBlockProps( { name, style } ) {
 		viewportSettings,
 	] );
 
-	useStyleOverride( { css: styles } );
+	usePrivateStyleOverride( { css: styles, clientId } );
 
 	return addSaveProps(
 		{ className: blockElementsContainerIdentifier },

package/src/hooks/test/allowed-blocks.js

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

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/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/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 }` );
 			}