@wordpress/block-editor 15.10.1-next.79a2f3cdd.0 → 15.10.1-next.v.0

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

@@ -0,0 +1,316 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
+// Mock WordPress dependencies before importing the hook
+jest.mock( '@wordpress/compose', () => ( {
+	useViewportMatch: jest.fn(),
+} ) );
+
+/**
+ * Internal dependencies
+ */
+import useBlockVisibility from '../use-block-visibility';
+
+describe( 'useBlockVisibility', () => {
+	// Helper function to set up viewport matches
+	const setupViewport = ( { isMobileOrLarger, isMediumOrLarger } ) => {
+		if (
+			isMobileOrLarger !== undefined &&
+			isMediumOrLarger !== undefined
+		) {
+			useViewportMatch
+				.mockReturnValueOnce( isMobileOrLarger )
+				.mockReturnValueOnce( isMediumOrLarger );
+		} else {
+			useViewportMatch.mockReturnValue(
+				isMobileOrLarger ?? isMediumOrLarger ?? true
+			);
+		}
+	};
+
+	beforeEach( () => {
+		// Reset all mocks before each test
+		jest.clearAllMocks();
+		// Enable experimental flag
+		window.__experimentalHideBlocksBasedOnScreenSize = true;
+	} );
+
+	afterEach( () => {
+		delete window.__experimentalHideBlocksBasedOnScreenSize;
+	} );
+
+	describe( 'Device type overrides', () => {
+		it( 'should return true when deviceType is Mobile and block is hidden on mobile', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { mobile: false },
+					deviceType: 'mobile',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should return false when deviceType is Mobile and block is visible on mobile', () => {
+			setupViewport( { isMobileOrLarger: false } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: {
+						mobile: true,
+						tablet: false,
+						desktop: false,
+					},
+					deviceType: 'mobile',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should return true when deviceType is Tablet and block is hidden on tablet', () => {
+			setupViewport( { isMobileOrLarger: false } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { tablet: false },
+					deviceType: 'tablet',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should use actual viewport detection when deviceType is Desktop', () => {
+			setupViewport( {
+				isMobileOrLarger: true,
+				isMediumOrLarger: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { desktop: false },
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+	} );
+
+	describe( 'Viewport detection with Desktop deviceType', () => {
+		it( 'should return true when on mobile viewport and block is hidden on mobile', () => {
+			setupViewport( {
+				isMobileOrLarger: false,
+				isMediumOrLarger: false,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { mobile: false },
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should return false when on mobile viewport and block is visible on mobile', () => {
+			setupViewport( {
+				isMobileOrLarger: false,
+				isMediumOrLarger: false,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: {
+						mobile: true,
+						tablet: false,
+						desktop: false,
+					},
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should return true when on tablet viewport and block is hidden on tablet', () => {
+			setupViewport( {
+				isMobileOrLarger: true,
+				isMediumOrLarger: false,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { tablet: false },
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should return false when on tablet viewport and block is visible on tablet', () => {
+			setupViewport( {
+				isMobileOrLarger: true,
+				isMediumOrLarger: false,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: {
+						mobile: false,
+						tablet: true,
+						desktop: false,
+					},
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should return true when on desktop viewport and block is hidden on desktop', () => {
+			setupViewport( {
+				isMobileOrLarger: true,
+				isMediumOrLarger: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { desktop: false },
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should return false when on desktop viewport and block is visible on desktop', () => {
+			setupViewport( {
+				isMobileOrLarger: true,
+				isMediumOrLarger: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: {
+						mobile: false,
+						tablet: false,
+						desktop: true,
+					},
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+	} );
+
+	describe( 'Block visibility (hidden everywhere)', () => {
+		it( 'should return true when blockVisibility is false', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: false,
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should return false when blockVisibility is true and no viewport restrictions', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: true,
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should return false when blockVisibility is undefined', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: undefined,
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should return true when blockVisibility is false regardless of viewport settings', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: false,
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+	} );
+
+	describe( 'Edge cases', () => {
+		it( 'should return false when no visibility settings are defined', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: true,
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should return false when blockVisibility is undefined', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: undefined,
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should default to desktop deviceType when not provided', () => {
+			setupViewport( {
+				isMobileOrLarger: true,
+				isMediumOrLarger: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { desktop: false },
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+	} );
+} );

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

@@ -0,0 +1,266 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getViewportCheckboxState,
+	getHideEverywhereCheckboxState,
+} from '../utils';
+
+describe( 'block-visibility utils', () => {
+	describe( 'getViewportCheckboxState', () => {
+		it( 'should return false for empty or invalid input', () => {
+			expect( getViewportCheckboxState( [], 'mobile' ) ).toBe( false );
+			expect( getViewportCheckboxState( null, 'mobile' ) ).toBe( false );
+			expect( getViewportCheckboxState( undefined, 'mobile' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'should return false when no blocks are hidden for viewport', () => {
+			const blocks = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: {},
+						},
+					},
+				},
+				{
+					attributes: {},
+				},
+			];
+			expect( getViewportCheckboxState( blocks, 'mobile' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'should return false when all blocks are hidden everywhere (blockVisibility=false not handled)', () => {
+			const blocks = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: false,
+						},
+					},
+				},
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: false,
+						},
+					},
+				},
+			];
+			// Note: isBlockHiddenForViewport doesn't check for blockVisibility === false,
+			// so it treats false as a non-object and returns false (not hidden)
+			expect( getViewportCheckboxState( blocks, 'mobile' ) ).toBe(
+				false
+			);
+			expect( getViewportCheckboxState( blocks, 'tablet' ) ).toBe(
+				false
+			);
+			expect( getViewportCheckboxState( blocks, 'desktop' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'should return null when some blocks are hidden for viewport', () => {
+			// Suppress console.log from getViewportCheckboxState
+			const consoleSpy = jest
+				.spyOn( console, 'log' )
+				.mockImplementation( () => {} );
+
+			const blocks = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: {
+								mobile: false,
+							},
+						},
+					},
+				},
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: {},
+						},
+					},
+				},
+			];
+			expect( getViewportCheckboxState( blocks, 'mobile' ) ).toBe( null );
+
+			consoleSpy.mockRestore();
+		} );
+
+		it( 'should return false when some blocks have blockVisibility=false (not handled)', () => {
+			const blocks = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: false,
+						},
+					},
+				},
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: {},
+						},
+					},
+				},
+			];
+			// Note: isBlockHiddenForViewport doesn't check for blockVisibility === false,
+			// so both blocks are treated as not hidden, resulting in false
+			expect( getViewportCheckboxState( blocks, 'mobile' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'should return false for invalid viewport', () => {
+			const block = {
+				attributes: {
+					metadata: {
+						blockVisibility: {
+							mobile: false,
+						},
+					},
+				},
+			};
+			expect( getViewportCheckboxState( [ block ], 'invalid' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'should return false when blockVisibility === true exists', () => {
+			// Test with blockVisibility=false (not handled by isBlockHiddenForViewport)
+			const blocks1 = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: true,
+						},
+					},
+				},
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: false,
+						},
+					},
+				},
+			];
+			// First block is explicitly visible (true), second has blockVisibility=false
+			// which is not handled, so both are treated as not hidden
+			expect( getViewportCheckboxState( blocks1, 'mobile' ) ).toBe(
+				false
+			);
+
+			// Test with no metadata
+			const blocks2 = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: true,
+						},
+					},
+				},
+				{
+					attributes: {},
+				},
+			];
+			// Both blocks are not hidden (first is explicitly visible, second has no visibility set)
+			expect( getViewportCheckboxState( blocks2, 'mobile' ) ).toBe(
+				false
+			);
+		} );
+	} );
+
+	describe( 'getHideEverywhereCheckboxState', () => {
+		it( 'should return false for empty or invalid input', () => {
+			expect( getHideEverywhereCheckboxState( [] ) ).toBe( false );
+			expect( getHideEverywhereCheckboxState( null ) ).toBe( false );
+			expect( getHideEverywhereCheckboxState( undefined ) ).toBe( false );
+		} );
+
+		it( 'should return false when no blocks are hidden everywhere', () => {
+			const blocks = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: {},
+						},
+					},
+				},
+				{
+					attributes: {},
+				},
+			];
+			expect( getHideEverywhereCheckboxState( blocks ) ).toBe( false );
+		} );
+
+		it( 'should return true when all blocks are hidden everywhere', () => {
+			const blocks = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: false,
+						},
+					},
+				},
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: false,
+						},
+					},
+				},
+			];
+			expect( getHideEverywhereCheckboxState( blocks ) ).toBe( true );
+		} );
+
+		it( 'should return null when some blocks are hidden everywhere', () => {
+			const blocks = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: false,
+						},
+					},
+				},
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: {},
+						},
+					},
+				},
+			];
+			expect( getHideEverywhereCheckboxState( blocks ) ).toBe( null );
+		} );
+
+		it( 'should return false when blocks have viewport-specific visibility', () => {
+			const blocks = [
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: {
+								mobile: false,
+							},
+						},
+					},
+				},
+				{
+					attributes: {
+						metadata: {
+							blockVisibility: {
+								tablet: false,
+							},
+						},
+					},
+				},
+			];
+			expect( getHideEverywhereCheckboxState( blocks ) ).toBe( false );
+		} );
+	} );
+} );

package/src/components/block-visibility/toolbar.js

@@ -75,7 +75,7 @@ export default function BlockVisibilityToolbar( { clientIds } ) {
 
 	return (
 		<>
-			<ToolbarGroup className="block-editor-block-lock-toolbar">
+			<ToolbarGroup>
 				<ToolbarButton
 					disabled={ ! canToggleBlockVisibility }
 					icon={ hasHiddenBlock ? unseen : seen }

package/src/components/block-visibility/use-block-visibility.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
+
+/**
+ * Returns information about the current block visibility state.
+ *
+ * @param {Object}         options                 Parameters to avoid extra store subscriptions.
+ * @param {Object|boolean} options.blockVisibility Block visibility metadata.
+ * @param {string}         options.deviceType      Current device type ('desktop', 'tablet', 'mobile').
+ * @return {Object} Object with `isBlockCurrentlyHidden` and `currentViewport` boolean properties.
+ */
+export default function useBlockVisibility( options = {} ) {
+	const {
+		blockVisibility = undefined,
+		deviceType = BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+	} = options;
+
+	const isLargerThanMobile = useViewportMatch( 'mobile', '>=' ); // >= 480px
+	const isLargerThanTablet = useViewportMatch( 'medium', '>=' ); // >= 782px
+
+	/*
+	 * Priority:
+	 * 1. Device type override (Mobile/Tablet) - uses device type to determine viewport
+	 * 2. Actual window size (Desktop mode) - uses viewport detection
+	 */
+	const currentViewport = useMemo( () => {
+		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
+		}
+		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
+		}
+		if ( ! isLargerThanMobile ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
+		}
+		if ( isLargerThanMobile && ! isLargerThanTablet ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
+		}
+		return BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
+	}, [ deviceType, isLargerThanMobile, isLargerThanTablet ] );
+
+	// Determine if block is currently hidden.
+	const isBlockCurrentlyHidden = useMemo( () => {
+		if ( blockVisibility === false ) {
+			return true;
+		}
+
+		if (
+			window.__experimentalHideBlocksBasedOnScreenSize &&
+			blockVisibility?.[ currentViewport ] === false
+		) {
+			return true;
+		}
+
+		return false;
+	}, [ blockVisibility, currentViewport ] );
+
+	return {
+		isBlockCurrentlyHidden,
+		currentViewport,
+	};
+}