@wordpress/block-editor 17.0.2-next.v.202608281122.0 → 17.1.0

package/src/components/inspector-popover-header/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.jsx → 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.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.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.jsx → 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', () => {

package/src/components/link-control/test/{url-normalization.test.jsx → url-normalization.jsdom.test.jsx}

@@ -1,31 +1,32 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SlotFillProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { useReducedMotion } from '@wordpress/compose';
 import LinkControl from '../';
 import { fetchFauxEntitySuggestions } from './fixtures';
 
-const mockFetchSearchSuggestions = jest.fn();
+globalThis.wpVitest.mockMatchMedia();
 
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	const mock = jest.fn();
-	return mock;
-} );
-
-useSelect.mockImplementation( () => ( {
-	fetchSearchSuggestions: mockFetchSearchSuggestions,
-} ) );
+const mockFetchSearchSuggestions = vi.fn();
 
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useDispatch: () => ( { saveEntityRecords: vi.fn() } ),
+	useSelect: vi.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,
+	} ) );
 	mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
 } );
 
@@ -40,7 +41,7 @@ function renderWithProvider( ui ) {
 describe( 'URL normalization consistency', () => {
 	it( 'should normalize bare domain (wordpress.org) to https:// when clicking Apply', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		// Start with existing link to show Apply button
 		renderWithProvider(
@@ -78,7 +79,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should normalize www domain (www.wordpress.org) to https:// when clicking Apply', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		// Start with existing link to show Apply button
 		renderWithProvider(
@@ -116,7 +117,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should preserve explicit http:// protocol', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		renderWithProvider(
 			<LinkControl
@@ -151,7 +152,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should preserve mailto: links without normalization', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		renderWithProvider(
 			<LinkControl
@@ -185,7 +186,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should preserve relative paths without normalization', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		renderWithProvider(
 			<LinkControl
@@ -219,7 +220,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should preserve hash links without normalization', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		renderWithProvider(
 			<LinkControl

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

@@ -1,27 +1,24 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useSelect } from '@wordpress/data';
+import { useReducedMotion } from '@wordpress/compose';
 import { LinkPicker } from '../';
 
-const mockFetchSearchSuggestions = jest.fn();
+globalThis.wpVitest.mockMatchMedia();
 
-// Mock useSelect for search suggestions
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	const mock = jest.fn();
-	return mock;
-} );
-
-useSelect.mockImplementation( () => ( {
-	fetchSearchSuggestions: mockFetchSearchSuggestions,
-} ) );
+const mockFetchSearchSuggestions = vi.fn();
 
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
+// Mock useSelect for search suggestions
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useDispatch: () => ( { saveEntityRecords: vi.fn() } ),
+	useSelect: vi.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 ),
 } ) );
 
 // Helper to create mock suggestions
@@ -51,6 +48,10 @@ function createMockPreview( {
 }
 
 beforeEach( () => {
+	useReducedMotion.mockReturnValue( true );
+	useSelect.mockImplementation( () => ( {
+		fetchSearchSuggestions: mockFetchSearchSuggestions,
+	} ) );
 	mockFetchSearchSuggestions.mockImplementation( () =>
 		Promise.resolve( createMockSuggestions() )
 	);
@@ -66,7 +67,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview() }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -85,7 +86,7 @@ describe( 'LinkPicker', () => {
 						url: 'example.com',
 						badges: [],
 					} }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -104,7 +105,7 @@ describe( 'LinkPicker', () => {
 						url: 'example.com',
 						badges: [ { label: 'Page', intent: 'default' } ],
 					} }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -124,7 +125,7 @@ describe( 'LinkPicker', () => {
 						image: 'https://example.com/image.jpg',
 						badges: [ { label: 'Page', intent: 'default' } ],
 					} }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -144,7 +145,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link to"
 				/>
 			);
@@ -156,7 +157,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 					help="Synced with the selected page."
 				/>
@@ -175,7 +176,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -202,7 +203,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -226,7 +227,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -263,7 +264,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 					help="This is help text"
 				/>
@@ -284,7 +285,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -299,7 +300,7 @@ describe( 'LinkPicker', () => {
 	describe( 'Selection behavior', () => {
 		it( 'should call onSelect with suggestion data when a suggestion is selected', async () => {
 			const user = userEvent.setup();
-			const onSelect = jest.fn();
+			const onSelect = vi.fn();
 
 			render(
 				<LinkPicker
@@ -348,7 +349,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview() }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -392,7 +393,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview() }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					suggestionsQuery={ customQuery }
 					label="Link"
 				/>
@@ -423,7 +424,7 @@ describe( 'LinkPicker', () => {
 	describe( 'Integration scenarios', () => {
 		it( 'should handle changing from empty link to entity link', async () => {
 			const user = userEvent.setup();
-			const onSelect = jest.fn();
+			const onSelect = vi.fn();
 
 			render(
 				<LinkPicker

package/src/components/list-view/block-select-button.jsx

@@ -33,6 +33,7 @@ function ListViewBlockSelectButton(
 		onDragEnd,
 		draggable,
 		isExpanded,
+		isSelected,
 		ariaDescribedBy,
 		visibilityLabel,
 		isDisabled = false,
@@ -129,7 +130,11 @@ function ListViewBlockSelectButton(
 			aria-expanded={ isExpanded }
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
-			<BlockIcon icon={ icon } showColors context="list-view" />
+			<BlockIcon
+				icon={ icon }
+				showColors={ ! isSelected }
+				context="list-view"
+			/>
 			<Stack
 				align="center"
 				className="block-editor-list-view-block-select-button__label-wrapper"