@wordpress/block-editor 17.0.0 → 17.1.0

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

@@ -1,4 +1,11 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+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';
@@ -8,7 +15,10 @@ import URLInput from '../';
 import { store as blockEditorStore } from '../../../store';
 import { expectValidatedInputControlDeprecationIfCalled } from './fixtures/validated-input-control-deprecation';
 
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+globalThis.wpVitest.mockScrollIntoView();
+globalThis.wpVitest.mockMatchMedia();
+
+vi.mock( import( '@wordpress/a11y' ), () => ( { speak: vi.fn() } ) );
 
 const SUGGESTIONS = [
 	{
@@ -37,8 +47,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 ) ) );
 }
 
 /**
@@ -68,16 +78,16 @@ describe( 'URLInput', () => {
 	let fetchLinkSuggestions;
 
 	beforeEach( () => {
-		fetchLinkSuggestions = jest.fn().mockResolvedValue( SUGGESTIONS );
+		fetchLinkSuggestions = vi.fn().mockResolvedValue( SUGGESTIONS );
 	} );
 
 	afterEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	function renderURLInput( props = {} ) {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ControlledURLInput
@@ -471,7 +481,7 @@ describe( 'URLInput', () => {
 		} );
 
 		it( 'should select and submit the active suggestion when pressing Enter', async () => {
-			const onSubmit = jest.fn();
+			const onSubmit = vi.fn();
 			const { input, onChange } = await renderWithSuggestions( {
 				onSubmit,
 			} );
@@ -491,7 +501,7 @@ describe( 'URLInput', () => {
 		} );
 
 		it( 'should submit without a suggestion when pressing Enter with no active suggestion', async () => {
-			const onSubmit = jest.fn();
+			const onSubmit = vi.fn();
 			const { input } = await renderWithSuggestions( { onSubmit } );
 
 			fireEvent.keyDown( input, KEY_EVENTS.enter );
@@ -500,8 +510,8 @@ describe( 'URLInput', () => {
 		} );
 
 		it( 'should submit without a suggestion when pressing Enter and there are no suggestions', async () => {
-			const onSubmit = jest.fn();
-			const onKeyDown = jest.fn();
+			const onSubmit = vi.fn();
+			const onKeyDown = vi.fn();
 			const { input } = renderURLInput( {
 				value: 'hello',
 				disableSuggestions: true,
@@ -587,7 +597,7 @@ describe( 'URLInput', () => {
 
 	describe( 'custom rendering', () => {
 		it( 'should render the control via `__experimentalRenderControl`', () => {
-			const renderControl = jest
+			const renderControl = vi
 				.fn()
 				.mockReturnValue( <div>Custom control</div> );
 
@@ -608,7 +618,7 @@ describe( 'URLInput', () => {
 		} );
 
 		it( 'should render suggestions via `__experimentalRenderSuggestions`', async () => {
-			const renderSuggestions = jest.fn( ( { suggestions } ) => (
+			const renderSuggestions = vi.fn( ( { suggestions } ) => (
 				<ul>
 					{ suggestions.map( ( suggestion ) => (
 						<li key={ suggestion.id }>{ suggestion.title }</li>

package/src/components/use-block-display-information/test/{index.js → index.jsdom.test.jsx}

@@ -1,14 +1,18 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
 import useBlockDisplayInformation from '../';
 
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-jest.mock( '../../../lock-unlock', () => ( {
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
+vi.mock( import( '../../../lock-unlock' ), () => ( {
 	unlock: ( value ) => ( {
-		registerPrivateActions: jest.fn(),
-		registerPrivateSelectors: jest.fn(),
+		registerPrivateActions: vi.fn(),
+		registerPrivateSelectors: vi.fn(),
 		...value,
 	} ),
 } ) );
@@ -64,12 +68,12 @@ function setupUseSelect( {
 
 describe( 'useBlockDisplayInformation', () => {
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	it( 'displays pattern information for a pattern section that is not being edited', () => {
 		setupUseSelect();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 
@@ -85,7 +89,7 @@ describe( 'useBlockDisplayInformation', () => {
 
 	it( 'displays block information for a pattern section that is being edited', () => {
 		setupUseSelect( { isSectionBlock: false } );
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 
@@ -109,7 +113,7 @@ describe( 'useBlockDisplayInformation', () => {
 			},
 			isSectionBlock: false,
 		} );
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 
@@ -127,7 +131,7 @@ describe( 'useBlockDisplayInformation', () => {
 		setupUseSelect( {
 			isSectionBlock: false,
 		} );
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 
@@ -152,7 +156,7 @@ describe( 'useBlockDisplayInformation', () => {
 				description: 'A template part.',
 			},
 		} );
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 

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

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Warning should match snapshot 1`] = `
+exports[`Warning > should match snapshot 1`] = `
 <div>
   <div
     style="display: contents; all: initial;"

package/src/components/warning/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 userEvent from '@testing-library/user-event';
 import Warning from '../index';

package/src/components/writing-flow/{index.js → index.jsx}

@@ -7,6 +7,7 @@ import useEditableRoot from './use-editable-root';
 import useHomeEnd from './use-home-end';
 import useMultiSelection from './use-multi-selection';
 import useTabNav from './use-tab-nav';
+import useUndoAutomaticChange from './use-undo-automatic-change';
 import useArrowNav from './use-arrow-nav';
 import { usePreviewModeNav } from './use-preview-mode-nav';
 import useSelectAll from './use-select-all';
@@ -28,6 +29,10 @@ export function useWritingFlow() {
 	return [
 		before,
 		useMergeRefs( [
+			// Same-node listeners run in registration order, and the undo of
+			// an automatic change must claim Escape before the tab-nav
+			// listeners step out of the canvas.
+			useUndoAutomaticChange(),
 			ref,
 			useEditableRootEventHandlers(),
 			useClipboardHandler(),

package/src/components/writing-flow/style.scss

@@ -0,0 +1,48 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+/* The stop element is invisible, so its focus indication is drawn around the
+   canvas it stands for. For the iframed canvas it is an overlay instead of
+   an outline, because Safari paints an outline on an iframe element
+   underneath the iframe's content. */
+.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	pointer-events: none;
+	border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
+}
+
+.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
+	outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
+	outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
+}
+
+/* Looks like a tooltip. Shown at the top of the canvas while the stop is
+   focused. Sticky, because on the widgets screen the stop spans scrolling
+   content and the hint must stay in view; anywhere else there is nothing
+   to scroll and it stays at the top of the canvas. */
+.block-editor-writing-flow__canvas-stop-hint {
+	display: none;
+	position: sticky;
+	top: $grid-unit-20;
+	margin-inline: auto;
+	width: fit-content;
+	z-index: 2;
+	background: $black;
+	font-family: $default-font;
+	border-radius: $radius-medium;
+	color: $gray-100;
+	text-align: center;
+	line-height: 1.4;
+	font-size: 12px;
+	padding: $grid-unit-05 $grid-unit-10;
+	box-shadow: $elevation-small;
+	white-space: nowrap;
+	pointer-events: none;
+}
+
+.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
+	display: block;
+}

package/src/components/writing-flow/test/{index.js → index.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { beforeAll, describe, expect, it } from 'vitest';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 import { isNavigationCandidate } from '../use-arrow-nav';
 

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-input.js

@@ -47,6 +47,20 @@ export default function useInput() {
 
 	return useRefEffect( ( node ) => {
 		function onBeforeInput( event ) {
+			// Enter in an editable is handled here instead of on keydown:
+			// moving focus while the keydown is still being handled leaves
+			// the iOS keyboard's auto-capitalization stale.
+			if (
+				event.inputType === 'insertParagraph' &&
+				! event.defaultPrevented &&
+				! hasMultiSelection()
+			) {
+				onKeyDown( event );
+				if ( event.defaultPrevented ) {
+					return;
+				}
+			}
+
 			// If writing flow is editable, never allow the browser to alter
 			// the DOM outside of an editable element within a block. This
 			// will cause React errors (and the DOM should only be altered in
@@ -76,12 +90,25 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
-				if ( event.keyCode === ENTER ) {
-					if ( event.shiftKey ) {
+				if (
+					event.keyCode === ENTER ||
+					event.inputType === 'insertParagraph'
+				) {
+					if (
+						event.shiftKey ||
+						// Editables are handled on beforeinput.
+						( event.type === 'keydown' &&
+							event.target.ownerDocument.activeElement
+								.isContentEditable )
+					) {
 						return;
 					}
 
 					const clientId = getSelectedBlockClientId();
+					if ( ! clientId ) {
+						return;
+					}
+
 					const blockName = getBlockName( clientId );
 					const selectionStart = getSelectionStart();
 					const selectionEnd = getSelectionEnd();