@wordpress/block-editor 17.0.0 → 17.1.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/provider/test/{experimental-provider.js → experimental-provider.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import { useRegistry, useSelect } from '@wordpress/data';
 import { BlockEditorProvider, ExperimentalBlockEditorProvider } from '../';
@@ -63,9 +64,9 @@ describe( 'BlockEditorProvider', () => {
 		expect( settings ).toHaveProperty( 'stableSetting' );
 	} );
 	it( 'preserves deprecated getters incoming from the settings reducer', async () => {
-		const consoleWarn = jest
+		const consoleWarn = vi
 			.spyOn( global.console, 'warn' )
-			.mockImplementation();
+			.mockImplementation( () => {} );
 
 		const { container } = render(
 			<BlockEditorProvider

package/src/components/provider/test/{use-block-sync.js → use-block-sync.jsdom.test.jsx}

@@ -1,16 +1,17 @@
 import { registerBlockType } from '@wordpress/blocks';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import useBlockSync from '../use-block-sync';
 import withRegistryProvider from '../with-registry-provider';
 import * as blockEditorActions from '../../../store/actions';
 import { store as blockEditorStore } from '../../../store';
-jest.mock( '../../../store/actions', () => {
-	const actions = jest.requireActual( '../../../store/actions' );
+vi.mock( import( '../../../store/actions' ), async ( importOriginal ) => {
+	const actions = await importOriginal();
 	return {
 		...actions,
-		resetBlocks: jest.fn( actions.resetBlocks ),
-		replaceInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
-		setHasControlledInnerBlocks: jest.fn(
+		resetBlocks: vi.fn( actions.resetBlocks ),
+		replaceInnerBlocks: vi.fn( actions.replaceInnerBlocks ),
+		setHasControlledInnerBlocks: vi.fn(
 			actions.setHasControlledInnerBlocks
 		),
 	};
@@ -36,18 +37,18 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	afterEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	it( 'resets the block-editor blocks when the controlled value changes', async () => {
 		const fakeBlocks = [];
-		const resetBlocks = jest.spyOn( blockEditorActions, 'resetBlocks' );
-		const replaceInnerBlocks = jest.spyOn(
+		const resetBlocks = vi.spyOn( blockEditorActions, 'resetBlocks' );
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const { rerender, unmount } = render(
 			<TestWrapper
@@ -93,13 +94,13 @@ describe( 'useBlockSync hook', () => {
 
 	it( 'replaces the inner blocks of a block when the controlled value changes if a clientId is passed', async () => {
 		const fakeBlocks = [];
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
-		const resetBlocks = jest.spyOn( blockEditorActions, 'resetBlocks' );
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const resetBlocks = vi.spyOn( blockEditorActions, 'resetBlocks' );
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const { rerender, unmount } = render(
 			<TestWrapper
@@ -155,12 +156,12 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'does not add the controlled blocks to the block-editor store if the store already contains them', async () => {
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const value1 = [
 			{
@@ -213,7 +214,7 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'sets a block as an inner block controller if a clientId is provided', async () => {
-		const setAsController = jest.spyOn(
+		const setAsController = vi.spyOn(
 			blockEditorActions,
 			'setHasControlledInnerBlocks'
 		);
@@ -222,16 +223,16 @@ describe( 'useBlockSync hook', () => {
 			<TestWrapper
 				clientId="test"
 				value={ [] }
-				onChange={ jest.fn() }
-				onInput={ jest.fn() }
+				onChange={ vi.fn() }
+				onInput={ vi.fn() }
 			/>
 		);
 		expect( setAsController ).toHaveBeenCalledWith( 'test', true );
 	} );
 
 	it( 'calls onInput when a non-persistent block change occurs', async () => {
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 		const value1 = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
@@ -266,8 +267,8 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'passes undoIgnore when a non-persistent block change ignores history', async () => {
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 		const value1 = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
@@ -306,8 +307,8 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'calls onChange if a persistent change occurs', async () => {
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const value1 = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
@@ -340,13 +341,13 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'avoids updating the parent if there is a pending incoming change', async () => {
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
 
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const value1 = [
 			{
@@ -385,13 +386,13 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'avoids updating the block-editor store if there is a pending outgoint change', async () => {
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
 
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const value1 = [
 			{
@@ -441,8 +442,8 @@ describe( 'useBlockSync hook', () => {
 		const fakeBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
-		const onChange1 = jest.fn();
-		const onInput = jest.fn();
+		const onChange1 = vi.fn();
+		const onInput = vi.fn();
 
 		let registry;
 		const setRegistry = ( reg ) => {
@@ -478,7 +479,7 @@ describe( 'useBlockSync hook', () => {
 
 		// Reset it so that we can test that it was not called after this point.
 		onChange1.mockReset();
-		const onChange2 = jest.fn();
+		const onChange2 = vi.fn();
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
@@ -510,8 +511,8 @@ describe( 'useBlockSync hook', () => {
 		const fakeBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
-		const onChange1 = jest.fn();
-		const onInput = jest.fn();
+		const onChange1 = vi.fn();
+		const onInput = vi.fn();
 
 		let registry;
 		const setRegistry = ( reg ) => {
@@ -531,7 +532,7 @@ describe( 'useBlockSync hook', () => {
 			{ clientId: 'b', innerBlocks: [], attributes: { foo: 1 } },
 		];
 
-		const onChange2 = jest.fn();
+		const onChange2 = vi.fn();
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
@@ -562,9 +563,9 @@ describe( 'useBlockSync hook', () => {
 	it( 'preserves external client IDs in onChange callback for inner block controllers', async () => {
 		const originalClientId = 'original-external-id';
 		const innerBlockClientId = 'inner-external-id';
-		const onChange = jest.fn();
-		const onInput = jest.fn();
-		const replaceInnerBlocks = jest.spyOn(
+		const onChange = vi.fn();
+		const onInput = vi.fn();
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
@@ -630,7 +631,7 @@ describe( 'useBlockSync hook', () => {
 
 	it( 'clones blocks with new internal IDs for inner block controllers', async () => {
 		const originalClientId = 'original-external-id';
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
@@ -649,8 +650,8 @@ describe( 'useBlockSync hook', () => {
 			<TestWrapper
 				clientId="test-controller"
 				value={ controlledBlocks }
-				onChange={ jest.fn() }
-				onInput={ jest.fn() }
+				onChange={ vi.fn() }
+				onInput={ vi.fn() }
 			/>
 		);
 

package/src/components/recursion-provider/test/{index.js → index.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { useHasRecursion, RecursionProvider } from '..';
 import {

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/responsive-block-control/test/{index.js → index.jsdom.test.jsx}

@@ -1,9 +1,12 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Fragment, useState } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 import ResponsiveBlockControl from '../index';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const inputId = 'input-12345678';
 
 const sizeOptions = [
@@ -198,7 +201,7 @@ describe( 'Default and Responsive modes', () => {
 			},
 		];
 
-		const mockRenderDefaultControl = jest.fn(
+		const mockRenderDefaultControl = vi.fn(
 			renderTestDefaultControlComponent
 		);
 
@@ -285,9 +288,9 @@ describe( 'Default and Responsive modes', () => {
 	} );
 
 	it( 'should render custom responsive controls when renderResponsiveControls prop is provided and in responsive mode', () => {
-		const spyRenderDefaultControl = jest.fn();
+		const spyRenderDefaultControl = vi.fn();
 
-		const mockRenderResponsiveControls = jest.fn( ( viewports ) => {
+		const mockRenderResponsiveControls = vi.fn( ( viewports ) => {
 			return viewports.map( ( { id, label } ) => {
 				return (
 					<Fragment key={ `${ inputId }-${ id }` }>

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/enter.js

@@ -41,10 +41,10 @@ export default ( props ) => ( element ) => {
 		} else if ( onSplitAtEnd && start === end && end === text.length ) {
 			event.preventDefault();
 			onSplitAtEnd();
-		} else if ( onReplace && onSplit ) {
-			event.__deprecatedOnSplit = true;
 		} else if (
 			! supportsSplitting &&
+			// The deprecated onSplit is flagged on the beforeinput event.
+			! ( onReplace && onSplit ) &&
 			! disableLineBreaks &&
 			! event.defaultPrevented
 		) {
@@ -70,8 +70,22 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	function onDefaultKeyDown( event ) {
-		if ( event.defaultPrevented ) {
+	function onBeforeInput( event ) {
+		if ( event.inputType !== 'insertParagraph' ) {
+			return;
+		}
+		const { onReplace, onSplit } = props.current;
+		if ( onReplace && onSplit ) {
+			event.__deprecatedOnSplit = true;
+		}
+	}
+
+	function onDefaultBeforeInput( event ) {
+		if (
+			event.defaultPrevented ||
+			( event.inputType !== 'insertParagraph' &&
+				event.inputType !== 'insertLineBreak' )
+		) {
 			return;
 		}
 
@@ -82,12 +96,6 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		if ( event.keyCode !== ENTER ) {
-			return;
-		}
-
-		// On ENTER, we ALWAYS want to prevent the default browser behaviour
-		// at this last interception point.
 		event.preventDefault();
 	}
 
@@ -95,10 +103,10 @@ export default ( props ) => ( element ) => {
 
 	// Attach the listener to the window so parent elements have the chance to
 	// prevent the default behavior.
-	const unsubscribeDefaultKeyDown = subscribeDelegatedListener(
+	const unsubscribeDefaultBeforeInput = subscribeDelegatedListener(
 		defaultView,
-		'keydown',
-		onDefaultKeyDown
+		'beforeinput',
+		onDefaultBeforeInput
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listener.
@@ -108,8 +116,15 @@ export default ( props ) => ( element ) => {
 		onKeyDown,
 		true
 	);
+	const unsubscribeBeforeInput = subscribeOwnedListener(
+		element,
+		'beforeinput',
+		onBeforeInput,
+		true
+	);
 	return () => {
-		unsubscribeDefaultKeyDown();
+		unsubscribeDefaultBeforeInput();
 		unsubscribeKeyDown();
+		unsubscribeBeforeInput();
 	};
 };

package/src/components/rich-text/event-listeners/index.js

@@ -6,7 +6,6 @@ import insertReplacementText from './insert-replacement-text';
 import removeBrowserShortcuts from './remove-browser-shortcuts';
 import shortcuts from './shortcuts';
 import inputEvents from './input-events';
-import undoAutomaticChange from './undo-automatic-change';
 import pasteHandler from './paste-handler';
 import _delete from './delete';
 import enter from './enter';
@@ -19,7 +18,6 @@ const allEventListeners = [
 	removeBrowserShortcuts,
 	shortcuts,
 	inputEvents,
-	undoAutomaticChange,
 	pasteHandler,
 	_delete,
 	enter,

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/{index.js → index.jsdom.test.jsx}

@@ -19,18 +19,29 @@
  * The tests ensure that when the SpacingSizesControl is refactored to use
  * PresetInputControl, the existing user experience and behavior is preserved.
  */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useSelect } from '@wordpress/data';
 import SpacingSizesControl from '../index';
+import useSpacingSizes from '../hooks/use-spacing-sizes';
+
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockVisibleElements();
+globalThis.wpVitest.mockScrollIntoView();
 
 // Mock useSelect
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
 
 // Mock useSpacingSizes hook
-jest.mock( '../hooks/use-spacing-sizes', () => ( {
+vi.mock( import( '../hooks/use-spacing-sizes' ), () => ( {
 	__esModule: true,
-	default: jest.fn( () => [
+	default: vi.fn( () => [
 		{ name: 'None', slug: '0', size: 0 },
 		{ name: 'Small', slug: '20', size: '0.5rem' },
 		{ name: 'Medium', slug: '40', size: '1rem' },
@@ -40,8 +51,8 @@ jest.mock( '../hooks/use-spacing-sizes', () => ( {
 } ) );
 
 // Mock useSettings hook
-jest.mock( '../../use-settings', () => ( {
-	useSettings: jest.fn( ( ...keys ) => {
+vi.mock( import( '../../use-settings' ), () => ( {
+	useSettings: vi.fn( ( ...keys ) => {
 		const defaults = {
 			'spacing.units': [ 'px', 'em', 'rem' ],
 			'spacing.spacingSizes.custom': [],
@@ -54,7 +65,7 @@ jest.mock( '../../use-settings', () => ( {
 } ) );
 
 describe( 'SpacingSizesControl', () => {
-	const mockOnChange = jest.fn();
+	const mockOnChange = vi.fn();
 	const defaultProps = {
 		label: 'Padding',
 		onChange: mockOnChange,
@@ -721,15 +732,11 @@ describe( 'SpacingSizesControl', () => {
 
 		// Mock the large preset set
 		beforeEach( () => {
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValue( largeSpacingSizes );
+			useSpacingSizes.mockReturnValue( largeSpacingSizes );
 		} );
 
 		afterEach( () => {
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValue( [
+			useSpacingSizes.mockReturnValue( [
 				{ name: 'None', slug: '0', size: 0 },
 				{ name: 'Small', slug: '20', size: '0.5rem' },
 				{ name: 'Medium', slug: '40', size: '1rem' },
@@ -891,8 +898,8 @@ describe( 'SpacingSizesControl', () => {
 		} );
 
 		it( 'calls onMouseOver and onMouseOut callbacks', async () => {
-			const mockOnMouseOver = jest.fn();
-			const mockOnMouseOut = jest.fn();
+			const mockOnMouseOver = vi.fn();
+			const mockOnMouseOut = vi.fn();
 			const user = userEvent.setup();
 
 			render(
@@ -955,9 +962,7 @@ describe( 'SpacingSizesControl', () => {
 				{ name: 'Huge', slug: '100', size: '5rem' },
 			];
 
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValueOnce( customSpacingSizes );
+			useSpacingSizes.mockReturnValueOnce( customSpacingSizes );
 
 			render(
 				<SpacingSizesControl { ...defaultProps } values={ undefined } />
@@ -973,9 +978,7 @@ describe( 'SpacingSizesControl', () => {
 				{ name: 'Theme Large', slug: 'theme-lg', size: '2.25rem' },
 			];
 
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValueOnce( themeSpacingSizes );
+			useSpacingSizes.mockReturnValueOnce( themeSpacingSizes );
 
 			render(
 				<SpacingSizesControl

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/{button.js → button.jsdom.test.jsx}

@@ -1,8 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import URLInputButton from '../button';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'URLInputButton', () => {
 	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
 		render( <URLInputButton /> );
@@ -67,7 +70,7 @@ describe( 'URLInputButton', () => {
 
 	it( 'should call `onChange` function once per each value change', async () => {
 		const user = userEvent.setup();
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		render( <URLInputButton onChange={ onChangeMock } /> );
 

package/src/components/url-input/test/fixtures/validated-input-control-deprecation.js

@@ -1,3 +1,5 @@
+import { expect } from 'vitest';
+
 /**
  * Temporary test helper while `URLInput` still unlocks the deprecated private
  * `ValidatedInputControl` from `@wordpress/components`.