@wordpress/block-editor 17.0.0 → 17.1.0

package/src/components/block-list/content.scss

@@ -80,13 +80,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		}
 	}
 
-	// Block highlight, and navigation mode, and focus.
+	// Block highlight, and navigation mode, and focus, and hover where the
+	// grab cursor shows what a drag would take.
 	// This piece of code has gone back and forth between using a pseudo element
 	// vs. styling the block directly. Ultimately we likely need a pseudo element
 	// (unless styles like focus and selection overlay can be rendered as separate elements),
 	// since things like border-radius need to be able to be set on the block itself.
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
+	.block-editor-block-list__block.is-hovered-draggable[draggable="true"]:not(.is-multi-selected),
+	.block-editor-block-list__block.is-hovered-draggable[data-draggable="true"]:not(.is-multi-selected),
 	.block-editor-block-list__block:not([contenteditable="true"]):focus {
 		outline: none;
 

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -22,15 +22,32 @@ export function useIsHovered( { isEnabled = true } = {} ) {
 				return;
 			}
 
+			let timeoutId;
+
 			function listener( event ) {
 				if ( event.defaultPrevented ) {
 					return;
 				}
 				event.preventDefault();
-				node.classList.toggle(
-					'is-hovered',
-					event.type === 'mouseover'
-				);
+				const isHovered = event.type === 'mouseover';
+				node.classList.toggle( 'is-hovered', isHovered );
+				clearTimeout( timeoutId );
+				if ( ! isHovered ) {
+					node.classList.remove( 'is-hovered-draggable' );
+					return;
+				}
+				// Over editable content the cursor is a text cursor, not
+				// the grab cursor, so no drag would start there. The
+				// editability check can force a style recalculation, so it
+				// runs once the pointer rests, which also keeps the
+				// outline from flashing on blocks it merely passes over.
+				const { target } = event;
+				timeoutId = setTimeout( () => {
+					node.classList.toggle(
+						'is-hovered-draggable',
+						! target.isContentEditable
+					);
+				}, 100 );
 			}
 
 			const unsubscribeOut = subscribeDelegatedListener(
@@ -48,8 +65,10 @@ export function useIsHovered( { isEnabled = true } = {} ) {
 				unsubscribeOut();
 				unsubscribeOver();
 
-				// Remove class in case it lingers.
+				// Remove classes in case they linger.
+				clearTimeout( timeoutId );
 				node.classList.remove( 'is-hovered' );
+				node.classList.remove( 'is-hovered-draggable' );
 			};
 		},
 		[ isEnabled ]

package/src/components/block-manager/style.scss

@@ -47,7 +47,9 @@
 
 	.block-editor-block-icon {
 		margin-right: 10px;
+		// Keep `fill` as a fallback for custom block icons that do not use `currentColor`.
 		fill: $gray-900;
+		color: $gray-900;
 	}
 }
 

package/src/components/block-mover/test/mover-description.js

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

package/src/components/block-preview/{index.js → index.jsx}

@@ -142,8 +142,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 		ref,
 		className: clsx(
 			props.className,
-			'block-editor-block-preview__live-content',
-			'components-disabled'
+			'block-editor-block-preview__live-content'
 		),
 		children: blocks?.length ? children : null,
 	};

package/src/components/block-preview/test/{index.js → index.jsdom.test.jsx}

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import {
 	registerBlockType,
 	unregisterBlockType,
@@ -71,12 +72,15 @@ describe( 'useBlockPreview', () => {
 
 		// Ensure the block preview class names are merged with the component's class name.
 		expect( blockPreviewComponent ).toHaveClass(
-			'block-editor-block-preview__live-content'
+			'block-editor-block-preview__live-content',
+			'test-container-classname',
+			{ exact: true }
 		);
-		expect( blockPreviewComponent ).toHaveClass(
-			'test-container-classname'
-		);
-		expect( blockPreviewComponent ).toHaveClass( 'components-disabled' );
+
+		// Ensure rendered blocks cannot be interacted with.
+		await waitFor( () => {
+			expect( previewedBlock ).toHaveAttribute( 'inert' );
+		} );
 
 		// Ensure there is no nesting between the parent component and rendered blocks.
 		expect( blockPreviewComponent ).toContainElement( previewedBlock );

package/src/components/block-selection-clearer/test/{index.js → index.jsdom.test.jsx}

@@ -1,31 +1,36 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import BlockSelectionClearer from '../';
 
 const defaultUseSelectValues = {
-	hasSelectedBlock: jest.fn().mockReturnValue( false ),
-	hasMultiSelection: jest.fn().mockReturnValue( false ),
-	getSettings: jest.fn().mockReturnValue( {
+	hasSelectedBlock: vi.fn().mockReturnValue( false ),
+	hasMultiSelection: vi.fn().mockReturnValue( false ),
+	getSettings: vi.fn().mockReturnValue( {
 		clearBlockSelection: true,
 	} ),
 };
 
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: jest.fn(),
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useDispatch: vi.fn(),
+	useSelect: vi.fn(),
 } ) );
 
-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;
-} );
-
 describe( 'BlockSelectionClearer component', () => {
+	beforeEach( () => {
+		defaultUseSelectValues.hasSelectedBlock.mockReturnValue( false );
+		defaultUseSelectValues.hasMultiSelection.mockReturnValue( false );
+		defaultUseSelectValues.getSettings.mockReturnValue( {
+			clearBlockSelection: true,
+		} );
+	} );
+
 	it( 'should clear the selected block when a selected block exists', () => {
-		const mockClearSelectedBlock = jest.fn();
+		const mockClearSelectedBlock = vi.fn();
 		useSelect.mockImplementation( () => ( {
 			...defaultUseSelectValues,
-			hasSelectedBlock: jest.fn().mockReturnValue( true ),
+			hasSelectedBlock: vi.fn().mockReturnValue( true ),
 		} ) );
 		useDispatch.mockImplementation( () => ( {
 			clearSelectedBlock: mockClearSelectedBlock,
@@ -43,10 +48,10 @@ describe( 'BlockSelectionClearer component', () => {
 	} );
 
 	it( 'should clear the selected block when multiple blocks are selected', () => {
-		const mockClearSelectedBlock = jest.fn();
+		const mockClearSelectedBlock = vi.fn();
 		useSelect.mockImplementation( () => ( {
 			...defaultUseSelectValues,
-			hasMultiSelection: jest.fn().mockReturnValue( true ),
+			hasMultiSelection: vi.fn().mockReturnValue( true ),
 		} ) );
 		useDispatch.mockImplementation( () => ( {
 			clearSelectedBlock: mockClearSelectedBlock,
@@ -64,7 +69,7 @@ describe( 'BlockSelectionClearer component', () => {
 	} );
 
 	it( 'should not clear the block selection when no blocks are selected', () => {
-		const mockClearSelectedBlock = jest.fn();
+		const mockClearSelectedBlock = vi.fn();
 		useSelect.mockImplementation( () => defaultUseSelectValues );
 		useDispatch.mockImplementation( () => ( {
 			clearSelectedBlock: mockClearSelectedBlock,
@@ -82,11 +87,11 @@ describe( 'BlockSelectionClearer component', () => {
 	} );
 
 	it( 'should not clear the block selection when the feature is disabled', () => {
-		const mockClearSelectedBlock = jest.fn();
+		const mockClearSelectedBlock = vi.fn();
 		useSelect.mockImplementation( () => ( {
 			...defaultUseSelectValues,
-			hasSelectedBlock: jest.fn().mockReturnValue( true ),
-			getSettings: jest.fn().mockReturnValue( {
+			hasSelectedBlock: vi.fn().mockReturnValue( true ),
+			getSettings: vi.fn().mockReturnValue( {
 				clearBlockSelection: false,
 			} ),
 		} ) );

package/src/components/block-settings-menu/test/{block-mode-toggle.js → block-mode-toggle.jsdom.test.jsx}

@@ -1,8 +1,12 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import BlockModeToggle from '../block-mode-toggle';
 
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
 
 function setupUseSelectMock( mode, blockType, codeEditingEnabled = true ) {
 	useSelect.mockImplementation( () => {

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

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

package/src/components/block-switcher/{index.js → index.jsx}

@@ -1,9 +1,9 @@
 import { __, _n, sprintf, _x } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
 import {
 	DropdownMenu,
 	ToolbarGroup,
 	ToolbarItem,
-	__experimentalText as WCText,
 	MenuGroup,
 } from '@wordpress/components';
 import {
@@ -177,9 +177,9 @@ function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 			) }
 			{ isUsingBindings && (
 				<MenuGroup>
-					<WCText className="block-editor-block-switcher__binding-indicator">
+					<Text className="block-editor-block-switcher__binding-indicator">
 						{ connectedBlockDescription }
-					</WCText>
+					</Text>
 				</MenuGroup>
 			) }
 		</div>

package/src/components/block-switcher/test/{index.js → index.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, test, vi } from 'vitest';
 import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useSelect } from '@wordpress/data';
@@ -5,10 +6,13 @@ import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { copy } from '@wordpress/icons';
 import { BlockSwitcher } from '../';
 
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-jest.mock( '../../block-title/use-block-display-title', () =>
-	jest.fn().mockReturnValue( 'Block Name' )
-);
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
+vi.mock( import( '../../block-title/use-block-display-title' ), () => ( {
+	default: vi.fn().mockReturnValue( 'Block Name' ),
+} ) );
 
 describe( 'BlockSwitcher', () => {
 	const headingBlock1 = {

package/src/components/block-switcher/test/use-transformed.patterns.js

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 import { unregisterBlockType, registerBlockType } from '@wordpress/blocks';
 import {
 	transformMatchingBlock,

package/src/components/block-switcher/test/utils.js

@@ -1,3 +1,4 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 import { unregisterBlockType, registerBlockType } from '@wordpress/blocks';
 import { getMatchingBlockByName, getRetainedBlockAttributes } from '../utils';
 

package/src/components/block-title/test/{index.js → index.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import BlockTitle from '../';
@@ -19,8 +20,8 @@ const blockLabelMap = {
 	'Reusable Block': 'Reuse me!',
 };
 
-jest.mock( '@wordpress/blocks', () => {
-	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
+vi.mock( import( '@wordpress/blocks' ), async ( importOriginal ) => {
+	const actualImplementation = await importOriginal();
 	return {
 		...actualImplementation,
 		isReusableBlock( { title } ) {
@@ -33,7 +34,10 @@ jest.mock( '@wordpress/blocks', () => {
 } );
 
 // This allows us to tweak the returned value on each test.
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
 
 describe( 'BlockTitle', () => {
 	it( 'renders nothing if name is falsey', () => {

package/src/components/block-toolbar/{pattern-overrides-dropdown.js → pattern-overrides-dropdown.jsx}

@@ -1,8 +1,5 @@
-import {
-	Popover,
-	ToolbarButton,
-	__experimentalText as WCText,
-} from '@wordpress/components';
+import { Popover, ToolbarButton } from '@wordpress/components';
+import { Text } from '@wordpress/ui';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -41,7 +38,7 @@ function PatternOverridesPopoverContent( { clientIds, blockTitle } ) {
 		description = __( 'These blocks are editable using overrides.' );
 	}
 
-	return <WCText>{ description }</WCText>;
+	return <Text>{ description }</Text>;
 }
 
 /**

package/src/components/block-toolbar/style.scss

@@ -295,7 +295,7 @@
 	.block-editor-block-patterns-list {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
-		grid-gap: $grid-unit-15;
+		gap: $grid-unit-15;
 		.block-editor-block-patterns-list__list-item {
 			margin-bottom: 0;
 		}

package/src/components/block-toolbar/test/{block-toolbar-icon.js → block-toolbar-icon.jsdom.test.jsx}

@@ -1,10 +1,11 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import { paragraph } from '@wordpress/icons';
 import BlockToolbarIcon from '../block-toolbar-icon';
 
-jest.mock( '@wordpress/blocks', () => {
-	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
+vi.mock( import( '@wordpress/blocks' ), async ( importOriginal ) => {
+	const actualImplementation = await importOriginal();
 	return {
 		...actualImplementation,
 		getBlockType: ( name ) => ( {
@@ -14,34 +15,37 @@ jest.mock( '@wordpress/blocks', () => {
 		} ),
 	};
 } );
-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,
 	} ),
 } ) );
-jest.mock( '../../block-title/use-block-display-title', () =>
-	jest.fn().mockReturnValue( 'Block Name' )
-);
-jest.mock( '../../block-icon', () =>
-	jest.fn( ( { icon } ) => <span data-testid="block-icon">{ icon }</span> )
-);
-jest.mock( '../../block-switcher', () =>
-	jest.fn( ( { children } ) => (
+vi.mock( import( '../../block-title/use-block-display-title' ), () => ( {
+	default: () => 'Block Name',
+} ) );
+vi.mock( import( '../../block-icon' ), () => ( {
+	default: ( { icon } ) => <span data-testid="block-icon">{ icon }</span>,
+} ) );
+vi.mock( import( '../../block-switcher' ), () => ( {
+	default: ( { children } ) => (
 		<div data-testid="block-switcher">{ children }</div>
-	) )
-);
-jest.mock( '../pattern-overrides-dropdown', () =>
-	jest.fn( ( { clientIds } ) => (
+	),
+} ) );
+vi.mock( import( '../pattern-overrides-dropdown' ), () => ( {
+	default: ( { clientIds } ) => (
 		<div data-testid="pattern-overrides-dropdown">
 			{ clientIds.length === 1
 				? 'Block Name'
 				: 'Multiple blocks selected' }
 		</div>
-	) )
-);
+	),
+} ) );
 
 describe( 'BlockToolbarIcon', () => {
 	const defaultProps = {
@@ -76,7 +80,7 @@ describe( 'BlockToolbarIcon', () => {
 	};
 
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	describe( 'when variant is "switcher"', () => {

package/src/components/block-variation-picker/content.scss

@@ -16,7 +16,9 @@
 	font-size: $helptext-font-size;
 
 	svg {
-		fill: $gray-600 !important;
+		// Keep `fill` as a fallback for custom variation icons that do not use `currentColor`.
+		fill: $gray-600;
+		color: $gray-600 !important;
 	}
 
 	.components-button {
@@ -28,7 +30,8 @@
 	}
 
 	.components-button:hover svg {
-		fill: var(--wp-admin-theme-color) !important;
+		fill: var(--wp-admin-theme-color);
+		color: var(--wp-admin-theme-color) !important;
 	}
 
 	& > li {
@@ -39,4 +42,3 @@
 		gap: $grid-unit-05;
 	}
 }
-

package/src/components/block-vertical-alignment-control/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[`BlockVerticalAlignmentUI should match snapshot when controls are hidden 1`] = `
+exports[`BlockVerticalAlignmentUI > should match snapshot when controls are hidden 1`] = `
 <div>
   <div
     class="components-dropdown components-dropdown-menu components-toolbar"
@@ -16,15 +16,26 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
+        <rect
+          fill="currentColor"
+          height="11"
+          stroke="none"
+          width="6"
+          x="9"
+          y="9"
+        />
         <path
-          d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
+          d="M4 4.75H20"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </button>
@@ -32,7 +43,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
 </div>
 `;
 
-exports[`BlockVerticalAlignmentUI should match snapshot when controls are visible 1`] = `
+exports[`BlockVerticalAlignmentUI > should match snapshot when controls are visible 1`] = `
 <div>
   <div
     class="components-toolbar"
@@ -49,15 +60,26 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
+          <rect
+            fill="currentColor"
+            height="11"
+            stroke="none"
+            width="6"
+            x="9"
+            y="9"
+          />
           <path
-            d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
+            d="M4 4.75H20"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -72,15 +94,26 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z"
+            d="M4 12H20"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="16"
+            stroke="none"
+            width="6"
+            x="9"
+            y="4"
           />
         </svg>
       </button>
@@ -95,15 +128,26 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z"
+            d="M4 19.25H20"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="11"
+            stroke="none"
+            width="6"
+            x="9"
+            y="4"
           />
         </svg>
       </button>

package/src/components/block-vertical-alignment-control/test/{index.js → index.jsdom.test.jsx}

@@ -1,10 +1,11 @@
+import { afterEach, describe, expect, it, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BlockVerticalAlignmentUI from '../ui';
 
 describe( 'BlockVerticalAlignmentUI', () => {
 	const alignment = 'top';
-	const onChange = jest.fn();
+	const onChange = vi.fn();
 
 	afterEach( () => {
 		onChange.mockClear();

package/src/components/block-visibility/constants.ts

@@ -10,7 +10,7 @@ export type BlockVisibilityViewport = 'desktop' | 'tablet' | 'mobile';
 /**
  * The choices for the block visibility.
  *
- * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices
+ * Duplicated in packages/editor/src/components/preview-dropdown/index.jsx (choices
  * array), packages/edit-site/src/components/block-editor/viewport.js and
  * packages/boot/src/components/canvas/viewport.ts (VALID_VIEWPORTS). Update all
  * four when adding new viewport types.

package/src/components/block-visibility/test/{use-block-visibility.js → use-block-visibility.jsdom.test.js}

@@ -1,11 +1,12 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useMediaQuery } from '@wordpress/compose';
+import useBlockVisibility from '../use-block-visibility';
 // Mock WordPress dependencies before importing the hook
-jest.mock( '@wordpress/compose', () => ( {
-	...jest.requireActual( '@wordpress/compose' ),
-	useMediaQuery: jest.fn(),
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useMediaQuery: vi.fn(),
 } ) );
-import useBlockVisibility from '../use-block-visibility';
 
 describe( 'useBlockVisibility', () => {
 	// Helper function to set up viewport matches
@@ -26,7 +27,7 @@ describe( 'useBlockVisibility', () => {
 
 	beforeEach( () => {
 		// Reset all mocks before each test
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	describe( 'Device type overrides', () => {

package/src/components/block-visibility/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import {
 	getBlockVisibilityViewportEntries,
 	getViewportCheckboxState,
@@ -76,7 +77,7 @@ describe( 'block-visibility utils', () => {
 
 		it( 'should return null when some blocks are hidden for viewport', () => {
 			// Suppress console.log from getViewportCheckboxState
-			const consoleSpy = jest
+			const consoleSpy = vi
 				.spyOn( console, 'log' )
 				.mockImplementation( () => {} );