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

package/src/components/font-sizes/test/utils.js

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { logged } from '@wordpress/deprecated';
 import { getFontSizeClass } from '../utils';
 

package/src/components/global-styles/{background-panel.js → background-panel.jsx}

@@ -305,7 +305,7 @@ export default function BackgroundImagePanel( {
 	// Get current gradient value, decoding preset slug references.
 	// Fall back to color.gradient for legacy blocks that haven't migrated
 	// to background.gradient yet (mirrors block inspector fallback in
-	// packages/block-editor/src/hooks/background.js).
+	// packages/block-editor/src/hooks/background.jsx).
 	const currentGradient = decodeValue(
 		value?.background?.gradient ?? value?.color?.gradient
 	);
@@ -315,7 +315,7 @@ export default function BackgroundImagePanel( {
 
 	// Set gradient value, encoding preset matches as slug references.
 	// Also clear color.gradient to migrate from the legacy location,
-	// matching the block inspector behavior in hooks/background.js.
+	// matching the block inspector behavior in hooks/background.jsx.
 	const setGradient = ( newGradient, newSlug ) => {
 		let newValue = setImmutably(
 			value,

package/src/components/global-styles/{border-panel.js → border-panel.jsx}

@@ -12,7 +12,6 @@ import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
-import { useBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
 import {
 	getInheritanceProps,
@@ -365,24 +364,18 @@ export default function BorderPanel( {
 	const showBorderByDefault =
 		defaultControls?.color || defaultControls?.width;
 
-	const hasBorderControl =
-		showBorderColor ||
-		showBorderStyle ||
-		showBorderWidth ||
-		showBorderRadius;
-
-	const label = useBorderPanelLabel( {
-		hasShadowControl,
-		hasBorderControl,
-	} );
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
 			value={ value }
 			onChange={ onChange }
 			panelId={ panelId }
-			label={ label }
+			// A shadow is treated as a soft border, so the panel keeps one
+			// name whichever of its controls a theme or block opts into.
+			// A stable title is what lets each control show its own label
+			// unconditionally, which in turn keeps their unlink toggles
+			// aligned.
+			label={ __( 'Borders' ) }
 		>
 			{ ( showBorderWidth || showBorderColor ) && (
 				<InheritanceToolsPanelItem
@@ -394,37 +387,23 @@ export default function BorderPanel( {
 					) }
 					hasValue={ () => isDefinedBorder( value?.border ) }
 					label={ __( 'Border' ) }
+					hasInlineEndToggle
 					onDeselect={ () => resetBorder() }
 					isShownByDefault={ showBorderByDefault }
 					panelId={ panelId }
 				>
-					{ ( showInheritanceLabelIndicators ||
-						hasShadowControl ) && (
-						// Render the visible label as `BaseControl.VisualLabel`
-						// (which produces `.components-base-control__label`)
-						// rather than passing `label` to `BorderBoxControl`,
-						// whose internal `<StyledLabel>` carries no stable
-						// className. The inheritance treatment and the
-						// local-override reset affordance both target
-						// `.components-base-control__label`, so the visible
-						// "Border" label has to be a `BaseControl` label to
-						// receive them.
-						//
-						// Render it whenever a Shadow control is also present so
-						// the two controls stay disambiguated (mirrors the
-						// Shadow label's `hasBorderControl` guard below, and
-						// trunk's `hideLabelFromVision={ ! hasShadowControl }`),
-						// even when inheritance indicators are off (e.g. in
-						// Global Styles).
-						<BaseControl.VisualLabel as="legend">
-							{ __( 'Border' ) }
-						</BaseControl.VisualLabel>
-					) }
+					{ /* The visible label is always rendered, so the control's
+					    linked/unlinked toggle sits in a label row and lines up
+					    with the Radius control's. `BorderBoxControl` renders the
+					    label as `BaseControl.VisualLabel`, which is what the
+					    inheritance treatment and the local-override reset
+					    affordance target. */ }
 					<BorderBoxControl
 						colors={ colors }
 						disableCustomColors={ ! areCustomSolidsEnabled }
 						enableAlpha
 						enableStyle={ showBorderStyle }
+						label={ __( 'Border' ) }
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
@@ -472,11 +451,9 @@ export default function BorderPanel( {
 					showLocalOverrideActionsInLabel={ false }
 					panelId={ panelId }
 				>
-					{ hasBorderControl ? (
-						<BaseControl.VisualLabel as="legend">
-							{ __( 'Shadow' ) }
-						</BaseControl.VisualLabel>
-					) : null }
+					<BaseControl.VisualLabel>
+						{ __( 'Shadow' ) }
+					</BaseControl.VisualLabel>
 
 					<ShadowPopover
 						shadow={ shadow }

package/src/components/global-styles/{image-settings-panel.js → image-settings-panel.jsx}

@@ -8,7 +8,7 @@ import { useToolsPanelDropdownMenuProps } from './utils';
 
 export function useHasImageSettingsPanel( name, value, inheritedValue ) {
 	// Note: If lightbox `value` exists, that means it was
-	// defined via the the Global Styles UI and will NOT
+	// defined via the Global Styles UI and will NOT
 	// be a boolean value or contain the `allowEditing` property,
 	// so we should show the settings panel in those cases.
 	return (

package/src/components/global-styles/test/{background-panel.js → background-panel.jsdom.test.jsx}

@@ -105,7 +105,7 @@ describe( 'hasBackgroundGradientValue', () => {
  *   enabled.
  *
  * - Background gradient: renders `ColorPanelDropdown` (re-used from
- *   `color-panel.js`). The inner `Dropdown` indicator shows the inherited
+ *   `color-panel.jsx`). The inner `Dropdown` indicator shows the inherited
  *   gradient at-rest, and the `ColorPanelTab.onChange` interceptor commits
  *   the inherited value when the user clicks the active swatch.
  *

package/src/components/global-styles/test/{border-panel.js → border-panel.jsdom.test.jsx}

@@ -53,6 +53,103 @@ const settingsAll = {
 	},
 };
 
+const shadowOnlySettings = { shadow: settingsAll.shadow };
+const borderOnlySettings = { border: settingsAll.border };
+
+describe( 'BorderPanel — panel and control labels', () => {
+	it( 'titles the panel "Borders" when border and shadow controls are available', () => {
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ settingsAll }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', { name: 'Borders' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'titles the panel "Borders" when only a shadow control is available', () => {
+		// A shadow is treated as a soft border, so the title does not change
+		// with whichever controls a theme or block opts into. A stable title
+		// is what lets each control keep its own visible label.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', { name: 'Borders' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'labels the border control, and puts its unlink toggle in that label row, when no shadow control is available', () => {
+		// The case that motivated the change: with no Shadow control to
+		// disambiguate it from, the Border label used to be hidden, which left
+		// its unlink toggle beside the inputs while the Radius one sat in a
+		// label row. Both now share the same layout.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ borderOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect( screen.getByText( 'Border' ) ).toBeInTheDocument();
+
+		// `getAllByRole` returns document order, so the toggle preceding the
+		// border color/style picker is what places it in the label row rather
+		// than alongside the inputs.
+		const buttons = screen.getAllByRole( 'button' );
+		expect(
+			buttons.indexOf( screen.getByLabelText( 'Unlink sides' ) )
+		).toBeLessThan(
+			buttons.indexOf(
+				screen.getByLabelText( /Border color( and style)* picker/ )
+			)
+		);
+	} );
+
+	it( 'labels the border control when the inheritance indicators are off', () => {
+		// Global Styles renders the panel without the inheritance treatment.
+		// That used to be the other half of the condition hiding the label, so
+		// a border-only panel showed no label there either.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ borderOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+				showInheritanceLabelIndicators={ false }
+			/>
+		);
+
+		expect( screen.getByText( 'Border' ) ).toBeInTheDocument();
+	} );
+
+	it( 'labels the shadow control even when no border control is available', () => {
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect( screen.getByText( 'Shadow' ) ).toBeInTheDocument();
+	} );
+} );
+
 describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 	describe( 'Border radius (input archetype)', () => {
 		it( 'renders an inherited string radius as the displayed value when local is empty', () => {

package/src/components/global-styles/test/{inherited-value-context-core.js → inherited-value-context-core.jsdom.test.js}

@@ -31,7 +31,7 @@ jest.mock( '../../../store', () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
-// `inherited-value-context.js` imports the blocks store for
+// `inherited-value-context.jsx` imports the blocks store for
 // `useVariationAndElements`. Its real import chain needs data-module exports
 // the stub above does not provide, so stub the blocks module too.
 jest.mock( '@wordpress/blocks', () => ( {

package/src/components/global-styles/test/{inherited-value-context.js → inherited-value-context.jsdom.test.jsx}

@@ -46,7 +46,7 @@ jest.mock( '../../../store', () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
-// `inherited-value-context.js` imports `store as blocksStore` from
+// `inherited-value-context.jsx` imports `store as blocksStore` from
 // `@wordpress/blocks` for `useVariationAndElements`. The blocks store's
 // transitive import chain fails under this file's `@wordpress/data` mock
 // (missing `createSelector`), so stub the blocks module with just the shape

package/src/components/global-styles/test/{typography-panel.js → typography-panel.jsdom.test.jsx}

@@ -6,7 +6,7 @@ import TypographyPanel, { useHasTypographyPanel } from '../typography-panel';
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path. The off path lives in
-// `typography-panel-core.js`.
+// `typography-panel-core.jsx`.
 beforeEach( () => {
 	window.__experimentalGlobalStylesInheritanceUI = true;
 } );

package/src/components/global-styles/test/typography-utils.js

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

package/src/components/global-styles/test/utils.js

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

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

@@ -318,7 +318,7 @@ function Iframe( {
 					}
 					// If the event originates from inside the iframe, it means
 					// it bubbled through the portal, but only with React
-					// events. We need to to bubble native events as well,
+					// events. We need to bubble native events as well,
 					// though by doing so we also trigger another React event,
 					// so we need to stop the propagation of this event to avoid
 					// duplication.
@@ -389,9 +389,9 @@ function IframeIfReady( props, ref ) {
 		[]
 	);
 
-	// We shouldn't render the iframe until the editor settings are initialised.
+	// We shouldn't render the iframe until the editor settings are initialized.
 	// The initial settings are needed to get the styles for the srcDoc, which
-	// cannot be changed after the iframe is mounted. srcDoc is used to to set
+	// cannot be changed after the iframe is mounted. srcDoc is used to set
 	// the initial iframe HTML, which is required to avoid a flash of unstyled
 	// content.
 	if ( ! isInitialised ) {

package/src/components/image-editor/test/index.js

@@ -1,3 +1,4 @@
+import { expect, test } from 'vitest';
 import { ratioToNumber } from '../aspect-ratio-dropdown';
 
 test( 'ratioToNumber', () => {

package/src/components/inserter/hooks/use-patterns-paging.js

@@ -9,7 +9,7 @@ const PAGE_SIZE = 20;
  *
  * @param {Array}  currentCategoryPatterns An array of the current patterns to display.
  * @param {string} currentCategory         The currently selected category.
- * @param {Object} scrollContainerRef      Ref of container to to find scroll container for when moving between pages.
+ * @param {Object} scrollContainerRef      Ref of container to find scroll container for when moving between pages.
  * @param {string} currentFilter           The currently search filter.
  *
  * @return {Object} Returns the relevant paging values. (totalItems, categoryPatternsList, numPages, changePage, currentPage)

package/src/components/inserter/{menu.js → menu.jsx}

@@ -415,7 +415,7 @@ function InserterMenu(
 				<Popover
 					className="block-editor-inserter__preview-container__popover"
 					placement="right-start"
-					offset={ 16 }
+					offset={ { mainAxis: 16, crossAxis: 16 } }
 					focusOnMount={ false }
 					animate={ false }
 				>

package/src/components/inserter/style.scss

@@ -203,10 +203,6 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__preview-container__popover {
-	top: $grid-unit-20 !important;
-}
-
 .block-editor-inserter__preview-container {
 	display: none;
 	width: $sidebar-width;
@@ -351,7 +347,7 @@ $block-inserter-tabs-height: 44px;
 	.block-editor-block-patterns-list {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
-		grid-gap: $grid-unit-10;
+		gap: $grid-unit-10;
 		.block-editor-block-patterns-list__list-item {
 			margin-bottom: 0;
 		}
@@ -414,7 +410,7 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
 	display: grid;
-	grid-gap: $grid-unit-40;
+	gap: $grid-unit-40;
 	grid-template-columns: repeat(1, 1fr);
 	margin-bottom: $grid-unit-20;
 

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/{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/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/is-url-like.js

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

package/src/components/list-view/{block.js → block.jsx}

@@ -431,11 +431,12 @@ function ListViewBlock( {
 	const selectEditorBlock = useCallback(
 		( event ) => {
 			// For keyboard activation (Enter/Space on a link), transfer focus
-			// to the canvas with the caret at the end of the block.
-			// For mouse clicks, keep focus in the list view so that subsequent
-			// keyboard operations (arrow navigation, copy/paste) still work.
+			// to the canvas at the default initial position (start of the first
+			// field). For mouse clicks, keep focus in the list view so that
+			// subsequent keyboard operations (arrow navigation, copy/paste)
+			// still work.
 			const isKeyboardActivation = event?.detail === 0;
-			selectBlock( event, clientId, isKeyboardActivation ? -1 : null );
+			selectBlock( event, clientId, isKeyboardActivation ? 0 : null );
 			event.preventDefault();
 		},
 		[ clientId, selectBlock ]

package/src/components/list-view/test/use-list-view-drop-zone.js

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

package/src/components/list-view/test/utils.js

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

package/src/components/list-view/use-list-view-drop-zone.js

@@ -557,7 +557,7 @@ export default function useListViewDropZone( {
 		},
 		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 );
 		},

package/src/components/media-placeholder/test/get-computed-accept-attribute.js

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

package/src/components/preset-input-control/test/utils.js

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