@wordpress/block-editor 17.0.0 → 17.1.0

package/src/components/inserter/test/get-appender-label.js

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { getAppenderLabel } from '../get-appender-label';
 
 describe( 'getAppenderLabel', () => {
@@ -14,7 +15,7 @@ describe( 'getAppenderLabel', () => {
 	it( 'should return null when defaultBlock.attributes is missing', () => {
 		const defaultBlock = { name: 'core/test' };
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn(),
+			__experimentalLabel: vi.fn(),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -52,7 +53,7 @@ describe( 'getAppenderLabel', () => {
 			attributes: { type: 'page', kind: 'post-type' },
 		};
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => 'Add page' ),
+			__experimentalLabel: vi.fn( () => 'Add page' ),
 		};
 
 		getAppenderLabel( defaultBlock, defaultBlockType );
@@ -70,7 +71,7 @@ describe( 'getAppenderLabel', () => {
 		};
 		const fullLabel = 'Add page';
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => fullLabel ),
+			__experimentalLabel: vi.fn( () => fullLabel ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -84,7 +85,7 @@ describe( 'getAppenderLabel', () => {
 			attributes: { foo: 'bar' },
 		};
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => 'This is a test' ),
+			__experimentalLabel: vi.fn( () => 'This is a test' ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -98,7 +99,7 @@ describe( 'getAppenderLabel', () => {
 			attributes: { type: 'page' },
 		};
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => null ),
+			__experimentalLabel: vi.fn( () => null ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -112,7 +113,7 @@ describe( 'getAppenderLabel', () => {
 			attributes: { type: 'page' },
 		};
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => undefined ),
+			__experimentalLabel: vi.fn( () => undefined ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -126,7 +127,7 @@ describe( 'getAppenderLabel', () => {
 			attributes: { type: 'page' },
 		};
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => 123 ),
+			__experimentalLabel: vi.fn( () => 123 ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -140,7 +141,7 @@ describe( 'getAppenderLabel', () => {
 			attributes: { type: 'page' },
 		};
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => ( { label: 'page' } ) ),
+			__experimentalLabel: vi.fn( () => ( { label: 'page' } ) ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -155,7 +156,7 @@ describe( 'getAppenderLabel', () => {
 		};
 		const longLabel = 'a'.repeat( 50 );
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => longLabel ),
+			__experimentalLabel: vi.fn( () => longLabel ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -170,7 +171,7 @@ describe( 'getAppenderLabel', () => {
 		};
 		const label49chars = 'a'.repeat( 49 );
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => label49chars ),
+			__experimentalLabel: vi.fn( () => label49chars ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );
@@ -184,7 +185,7 @@ describe( 'getAppenderLabel', () => {
 			attributes: { type: 'page' },
 		};
 		const defaultBlockType = {
-			__experimentalLabel: jest.fn( () => '' ),
+			__experimentalLabel: vi.fn( () => '' ),
 		};
 
 		const result = getAppenderLabel( defaultBlock, defaultBlockType );

package/src/components/inserter/test/search-items.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import items, {
 	categories,
 	collections,

package/src/components/inserter-draggable-blocks/{index.js → index.jsx}

@@ -62,7 +62,7 @@ const InserterDraggableBlocks = ( {
 						/*
 						 * This will fill in the dataTransfer.types array so that
 						 * the drop zone can check if the draggable is eligible.
-						 * Unfortuantely, on drag start, we don't have access to the
+						 * Unfortunately, on drag start, we don't have access to the
 						 * actual data, only the data keys/types.
 						 */
 						event.dataTransfer.items.add( '', type );

package/src/components/inserter-list-item/style.scss

@@ -44,6 +44,7 @@
 	justify-content: center;
 	cursor: var(--wpds-cursor-control);
 	background: transparent;
+	// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
 	word-break: break-word;
 	@media not ( prefers-reduced-motion ) {
 		transition: all 0.05s ease-in-out;

package/src/components/inspector-controls/groups.js

@@ -18,6 +18,7 @@ const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
+const InspectorControlsViewport = createSlotFill( 'InspectorControlsViewport' );
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' );
@@ -41,6 +42,7 @@ const groups = {
 	settings: InspectorControlsDefault, // Alias for default.
 	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
+	viewport: InspectorControlsViewport,
 };
 
 export default groups;

package/src/components/inspector-controls-tabs/{content-tab.js → content-tab.jsx}

@@ -11,21 +11,14 @@ const ContentTab = ( {
 		return null;
 	}
 
-	const shouldShowBlockFields =
-		window?.__experimentalContentOnlyInspectorFields;
-
 	return (
-		<>
-			{ ! shouldShowBlockFields && (
-				<PanelBody title={ __( 'Content' ) }>
-					<BlockQuickNavigation
-						clientIds={ contentClientIds }
-						onSwitchToListView={ onSwitchToListView }
-						hasListViewTab={ hasListViewTab }
-					/>
-				</PanelBody>
-			) }
-		</>
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation
+				clientIds={ contentClientIds }
+				onSwitchToListView={ onSwitchToListView }
+				hasListViewTab={ hasListViewTab }
+			/>
+		</PanelBody>
 	);
 };
 

package/src/components/inspector-controls-tabs/{styles-tab.js → styles-tab.jsx}

@@ -4,7 +4,6 @@ import { useMemo } from '@wordpress/element';
 import BlockStyles from '../block-styles';
 import InspectorControls from '../inspector-controls';
 import PositionControls from './position-controls-panel';
-import { useBorderPanelLabel } from '../../hooks/border';
 import { useBlockSettings } from '../../hooks/utils';
 import { store as blockEditorStore } from '../../store';
 import { ElementsEdit } from '../../hooks/elements';
@@ -103,8 +102,6 @@ const StylesTab = ( {
 	isSectionBlock,
 	contentClientIds,
 } ) => {
-	const borderPanelLabel = useBorderPanelLabel( { clientId } );
-
 	return (
 		<>
 			{ hasBlockStyles && <BlockStyles clientId={ clientId } /> }
@@ -148,7 +145,7 @@ const StylesTab = ( {
 					/>
 					<InspectorControls.Slot
 						group="border"
-						label={ borderPanelLabel }
+						label={ __( 'Borders' ) }
 					/>
 					<InspectorControls.Slot
 						group="elements"

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -79,14 +79,7 @@ export default function useInspectorControlsTabs(
 		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 
-	// When the block fields experiment is active, only rely on `hasContentFills`
-	// to determine whether the content tab to be shown. The tab purely uses slot
-	// fills in this situation.
-	const shouldShowBlockFields =
-		window?.__experimentalContentOnlyInspectorFields;
-	const hasContentTab =
-		hasContentFills ||
-		( ! shouldShowBlockFields && contentClientIds?.length );
+	const hasContentTab = hasContentFills || contentClientIds?.length;
 
 	if ( hasContentTab ) {
 		tabs.push( TAB_CONTENT );

package/src/components/inspector-popover-header/{index.js → index.jsx}

@@ -1,13 +1,12 @@
 import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
-	__experimentalHeading as Heading,
 	__experimentalSpacer as Spacer,
 	Button,
-	__experimentalText as WCText,
 } from '@wordpress/components';
 import { closeSmall } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
 
 export default function InspectorPopoverHeader( {
 	title,
@@ -18,13 +17,13 @@ export default function InspectorPopoverHeader( {
 	return (
 		<VStack className="block-editor-inspector-popover-header" spacing={ 4 }>
 			<HStack alignment="center">
-				<Heading
+				<Text
+					variant="heading-md"
+					render={ <h2 /> }
 					className="block-editor-inspector-popover-header__heading"
-					level={ 2 }
-					size={ 13 }
 				>
 					{ title }
-				</Heading>
+				</Text>
 				<Spacer />
 				{ actions.map( ( { label, icon, onClick } ) => (
 					<Button
@@ -49,7 +48,7 @@ export default function InspectorPopoverHeader( {
 					/>
 				) }
 			</HStack>
-			{ help && <WCText>{ help }</WCText> }
+			{ help && <Text>{ help }</Text> }
 		</VStack>
 	);
 }

package/src/components/line-height-control/test/{index.js → index.jsdom.test.jsx}

@@ -1,9 +1,12 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import LineHeightControl from '../';
 import { BASE_DEFAULT_VALUE, SPIN_FACTOR, STEP } from '../utils';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {

package/src/components/link-control/{index.js → index.jsx}

@@ -88,11 +88,14 @@ import normalizeUrl from './normalize-url';
  * @property {boolean=}                   forceIsEditingLink         If passed as either `true` or `false`, controls the
  *                                                                   internal editing state of the component to respective
  *                                                                   show or not show the URL input field.
+ * @property {string=}                    searchInputPlaceholder     Placeholder text for the search input.
  * @property {WPLinkControlValue=}        value                      Current link value.
  * @property {WPLinkControlOnChangeProp=} onChange                   Value change handler, called with the updated value if
  *                                                                   the user selects a new link or updates settings.
  * @property {Function=}                  onInputChange              Callback fired when the search input value changes.
  *                                                                   Use this for observation only (e.g., to track search state).
+ * @property {Function=}                  onRemove                   Callback invoked when the link is removed.
+ * @property {Function=}                  onCancel                   Callback invoked when editing is cancelled.
  * @property {string=}                    inputValue                 Initial value for the search input (uncontrolled).
  * @property {boolean=}                   noDirectEntry              Whether to allow turning a URL-like search query directly into a link.
  * @property {boolean=}                   showSuggestions            Whether to present suggestions when typing the URL.

package/src/components/link-control/{search-input.js → search-input.jsx}

@@ -104,7 +104,7 @@ const LinkControlSearchInput = forwardRef(
 				// entity metadata from persisting when switching to a different link type.
 				// For example, when changing from an entity link (kind: 'post-type', type: 'page')
 				// to a custom URL (type: 'link', no kind), we need to ensure the old 'kind'
-				// doesn't carry over. We do want to preserve other properites like title, though.
+				// doesn't carry over. We do want to preserve other properties like title, though.
 				const { id, url, kind, type, ...restLinkProps } =
 					currentLink ?? {};
 				onSelect(

package/src/components/link-control/style.scss

@@ -243,7 +243,7 @@ $block-editor-link-control-number-of-actions: 1;
 			padding: 0;
 			margin: -1px;
 			overflow: hidden;
-			clip: rect(0, 0, 0, 0); // specifically requested to be removed visually as well.
+			clip-path: inset(50%);
 			border: 0;
 		}
 	}

package/src/components/link-control/test/{index.js → index.jsdom.test.jsx}

@@ -1,3 +1,13 @@
+import {
+	afterAll,
+	afterEach,
+	beforeAll,
+	beforeEach,
+	describe,
+	expect,
+	it,
+	vi,
+} from 'vitest';
 import {
 	fireEvent,
 	render as baseRender,
@@ -9,6 +19,7 @@ import userEvent from '@testing-library/user-event';
 import { SlotFillProvider } from '@wordpress/components';
 import { useState, createElement } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { useReducedMotion } from '@wordpress/compose';
 import LinkControl from '../';
 import {
 	fauxEntitySuggestions,
@@ -17,7 +28,12 @@ import {
 } from './fixtures';
 import { expectValidatedInputControlDeprecationIfCalled } from '../../url-input/test/fixtures/validated-input-control-deprecation';
 
-const mockFetchSearchSuggestions = jest.fn();
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockScrollIntoView();
+globalThis.wpVitest.mockVisibleElements();
+
+const mockFetchSearchSuggestions = vi.fn();
 
 function getExpectedVisualTypeName( type ) {
 	const builtInLabels = {
@@ -40,26 +56,22 @@ function getExpectedVisualTypeName( type ) {
  */
 let mockFetchRichUrlData;
 
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
-useSelect.mockImplementation( () => ( {
-	fetchSearchSuggestions: mockFetchSearchSuggestions,
-	fetchRichUrlData: mockFetchRichUrlData,
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useDispatch: () => ( { saveEntityRecords: vi.fn() } ),
+	useSelect: vi.fn(),
 } ) );
-
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
-} ) );
-
-jest.mock( '@wordpress/compose', () => ( {
-	...jest.requireActual( '@wordpress/compose' ),
-	useReducedMotion: jest.fn( () => true ),
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useReducedMotion: vi.fn( () => true ),
 } ) );
 
 beforeEach( () => {
+	useReducedMotion.mockReturnValue( true );
+	useSelect.mockImplementation( () => ( {
+		fetchSearchSuggestions: mockFetchSearchSuggestions,
+		fetchRichUrlData: mockFetchRichUrlData,
+	} ) );
 	// Setup a DOM element as a render target.
 	mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
 } );
@@ -404,7 +416,7 @@ describe( 'Basic rendering', () => {
 
 		it( 'should show "Unlink" button if a onRemove handler is provided', async () => {
 			const user = userEvent.setup();
-			const mockOnRemove = jest.fn();
+			const mockOnRemove = vi.fn();
 
 			render(
 				<LinkControl
@@ -425,7 +437,7 @@ describe( 'Basic rendering', () => {
 
 		it( 'should revert to "editing" mode when onRemove is triggered', async () => {
 			const user = userEvent.setup();
-			const mockOnRemove = jest.fn();
+			const mockOnRemove = vi.fn();
 
 			render(
 				<LinkControl
@@ -812,7 +824,7 @@ describe( 'Manual link entry', () => {
 
 	describe( 'Handling cancellation', () => {
 		it( 'should not show cancellation button during link creation', async () => {
-			const mockOnRemove = jest.fn();
+			const mockOnRemove = vi.fn();
 
 			render( <LinkControl onRemove={ mockOnRemove } /> );
 
@@ -910,7 +922,7 @@ describe( 'Manual link entry', () => {
 
 		it( 'should call onCancel callback when cancelling if provided', async () => {
 			const user = userEvent.setup();
-			const mockOnCancel = jest.fn();
+			const mockOnCancel = vi.fn();
 
 			render(
 				<LinkControl
@@ -1054,7 +1066,7 @@ describe( 'Link submission', () => {
 
 	it( 'should disable Apply button when URL is cleared', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		const existingLink = { url: 'https://example.com', title: 'Example' };
 		render(
@@ -1457,7 +1469,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			render(
 				<LinkControl
 					showInitialSuggestions // Should show even if we're not showing initial suggestions.
-					createSuggestion={ jest.fn() }
+					createSuggestion={ vi.fn() }
 				/>
 			);
 
@@ -1483,7 +1495,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			'should not show option to "Create Page" when text is a form of direct entry (eg: %s)',
 			async ( inputText ) => {
 				const user = userEvent.setup();
-				render( <LinkControl createSuggestion={ jest.fn() } /> );
+				render( <LinkControl createSuggestion={ vi.fn() } /> );
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
@@ -1763,7 +1775,6 @@ describe( 'Selecting links', () => {
 					} );
 
 					// We should have highlighted the first item using the keyboard
-					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toBe(
 						secondSearchSuggestion
 					);
@@ -1776,7 +1787,6 @@ describe( 'Selecting links', () => {
 					} );
 
 					// We should be back to highlighting the first search result again
-					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toBe(
 						firstSearchSuggestion
 					);
@@ -2032,7 +2042,7 @@ describe( 'Addition Settings UI', () => {
 	it( 'should require settings changes to be submitted/applied', async () => {
 		const user = userEvent.setup();
 
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		const selectedLink = {
 			...fauxEntitySuggestions[ 0 ],
@@ -2160,11 +2170,11 @@ describe( 'Rich link previews', () => {
 	beforeAll( () => {
 		/**
 		 * These tests require that we exercise the `fetchRichUrlData` function.
-		 * We are therefore overwriting the mock "placeholder" with a true jest mock
+		 * We are therefore overwriting the mock "placeholder" with a true vi mock
 		 * which will cause the code under test to execute the code which fetches
 		 * rich previews.
 		 */
-		mockFetchRichUrlData = jest.fn();
+		mockFetchRichUrlData = vi.fn();
 	} );
 
 	it( 'should not fetch or display rich previews by default', async () => {
@@ -2487,7 +2497,7 @@ describe( 'Controlling link title text', () => {
 
 	it( "should ensure title value matching the text input's current value is included in onChange handler value on submit", async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 		const textValue = 'My new text value';
 
 		render(
@@ -2524,7 +2534,7 @@ describe( 'Controlling link title text', () => {
 	it( 'should allow `ENTER` keypress within the text field to trigger submission of value', async () => {
 		const user = userEvent.setup();
 		const newTextValue = 'My new text value';
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		render(
 			<LinkControl
@@ -2563,7 +2573,7 @@ describe( 'Controlling link title text', () => {
 	it( 'should reset state upon controlled value change', async () => {
 		const user = userEvent.setup();
 		const textValue = 'My new text value';
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		const { rerender } = render(
 			<LinkControl
@@ -2719,7 +2729,7 @@ describe( 'Entity handling', () => {
 			type: 'page',
 		};
 
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<LinkControl
@@ -2778,7 +2788,7 @@ describe( 'Entity handling', () => {
 			kind: 'post-type',
 		};
 
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<LinkControl
@@ -2842,7 +2852,7 @@ describe( 'Entity handling', () => {
 			kind: 'post-type',
 		};
 
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		// Mock search suggestions to return a custom URL
 		// URL suggestions have an id and type but no 'kind' (which indicates entity metadata)
@@ -2912,7 +2922,7 @@ describe( 'Entity handling', () => {
 
 	it( 'should clear entity metadata when pressing Enter for direct entry (without clicking suggestion)', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		const pageLink = {
 			id: 123,
@@ -3063,7 +3073,7 @@ describe( 'Entity handling', () => {
 describe( 'Custom settings rendering', () => {
 	it( 'renders custom settings with valid render functions', async () => {
 		const user = userEvent.setup();
-		const mockRender = jest.fn(
+		const mockRender = vi.fn(
 			// eslint-disable-next-line no-unused-vars
 			( setting, value, onChange ) =>
 				createElement(
@@ -3106,7 +3116,7 @@ describe( 'Custom settings rendering', () => {
 
 	it( 'renders only valid settings when mixed with invalid ones', async () => {
 		const user = userEvent.setup();
-		const validRender = jest.fn(
+		const validRender = vi.fn(
 			// eslint-disable-next-line no-unused-vars
 			( setting, value, onChange ) =>
 				createElement(
@@ -3184,9 +3194,9 @@ describe( 'Custom settings rendering', () => {
 
 	it( 'allows custom render functions to call onChange in LinkControl', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
-		const mockRender = jest.fn( ( setting, value, onChange ) => {
+		const mockRender = vi.fn( ( setting, value, onChange ) => {
 			return createElement(
 				'button',
 				{
@@ -3250,7 +3260,7 @@ describe( 'Custom settings rendering', () => {
 
 describe( 'URL validation', () => {
 	const user = userEvent.setup();
-	const mockOnChange = jest.fn();
+	const mockOnChange = vi.fn();
 
 	beforeEach( () => {
 		mockOnChange.mockClear();
@@ -3581,7 +3591,7 @@ describe( 'inputValue prop', () => {
 
 	it( 'should call onInputChange when user types, with observable pattern', async () => {
 		const user = userEvent.setup();
-		const onInputChange = jest.fn();
+		const onInputChange = vi.fn();
 
 		render(
 			<LinkControl

package/src/components/link-control/test/is-url-like.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import isURLLike, { isHashLink, isRelativePath } from '../is-url-like';
 
 describe( 'isURLLike', () => {