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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.10.1-next.79a2f3cdd.0",
+	"version": "15.10.1-next.ba3aee3a2.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/api-fetch": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/base-styles": "^6.13.2-next.79a2f3cdd.0",
-		"@wordpress/blob": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/block-serialization-default-parser": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/blocks": "^15.10.1-next.79a2f3cdd.0",
-		"@wordpress/commands": "^1.37.1-next.79a2f3cdd.0",
-		"@wordpress/components": "^32.0.1-next.79a2f3cdd.0",
-		"@wordpress/compose": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/data": "^10.37.1-next.79a2f3cdd.0",
-		"@wordpress/dataviews": "^11.2.1-next.79a2f3cdd.0",
-		"@wordpress/date": "^5.37.2-next.79a2f3cdd.0",
-		"@wordpress/deprecated": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/dom": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/element": "^6.37.1-next.79a2f3cdd.0",
-		"@wordpress/escape-html": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/global-styles-engine": "^1.4.1-next.79a2f3cdd.0",
-		"@wordpress/hooks": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/html-entities": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/i18n": "^6.10.1-next.79a2f3cdd.0",
-		"@wordpress/icons": "^11.4.1-next.79a2f3cdd.0",
-		"@wordpress/image-cropper": "^1.1.1-next.79a2f3cdd.0",
-		"@wordpress/interactivity": "^6.37.1-next.79a2f3cdd.0",
-		"@wordpress/is-shallow-equal": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/keyboard-shortcuts": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/keycodes": "^4.38.1-next.79a2f3cdd.0",
-		"@wordpress/notices": "^5.37.1-next.79a2f3cdd.0",
-		"@wordpress/preferences": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/priority-queue": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/private-apis": "^1.37.1-next.79a2f3cdd.0",
-		"@wordpress/rich-text": "^7.37.1-next.79a2f3cdd.0",
-		"@wordpress/style-engine": "^2.37.1-next.79a2f3cdd.0",
-		"@wordpress/token-list": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/upload-media": "^0.22.1-next.79a2f3cdd.0",
-		"@wordpress/url": "^4.37.1-next.79a2f3cdd.0",
-		"@wordpress/warning": "^3.37.1-next.79a2f3cdd.0",
-		"@wordpress/wordcount": "^4.37.1-next.79a2f3cdd.0",
+		"@wordpress/a11y": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/api-fetch": "^7.37.1-next.ba3aee3a2.0",
+		"@wordpress/base-styles": "^6.13.2-next.ba3aee3a2.0",
+		"@wordpress/blob": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/block-serialization-default-parser": "^5.37.1-next.ba3aee3a2.0",
+		"@wordpress/blocks": "^15.10.1-next.ba3aee3a2.0",
+		"@wordpress/commands": "^1.37.1-next.ba3aee3a2.0",
+		"@wordpress/components": "^32.0.1-next.ba3aee3a2.0",
+		"@wordpress/compose": "^7.37.1-next.ba3aee3a2.0",
+		"@wordpress/data": "^10.37.1-next.ba3aee3a2.0",
+		"@wordpress/dataviews": "^11.2.1-next.ba3aee3a2.0",
+		"@wordpress/date": "^5.37.2-next.ba3aee3a2.0",
+		"@wordpress/deprecated": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/dom": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/element": "^6.37.1-next.ba3aee3a2.0",
+		"@wordpress/escape-html": "^3.37.1-next.ba3aee3a2.0",
+		"@wordpress/global-styles-engine": "^1.4.1-next.ba3aee3a2.0",
+		"@wordpress/hooks": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/html-entities": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/i18n": "^6.10.1-next.ba3aee3a2.0",
+		"@wordpress/icons": "^11.4.1-next.ba3aee3a2.0",
+		"@wordpress/image-cropper": "^1.1.1-next.ba3aee3a2.0",
+		"@wordpress/interactivity": "^6.37.2-next.ba3aee3a2.0",
+		"@wordpress/is-shallow-equal": "^5.37.1-next.ba3aee3a2.0",
+		"@wordpress/keyboard-shortcuts": "^5.37.1-next.ba3aee3a2.0",
+		"@wordpress/keycodes": "^4.38.1-next.ba3aee3a2.0",
+		"@wordpress/notices": "^5.37.1-next.ba3aee3a2.0",
+		"@wordpress/preferences": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/priority-queue": "^3.37.1-next.ba3aee3a2.0",
+		"@wordpress/private-apis": "^1.37.1-next.ba3aee3a2.0",
+		"@wordpress/rich-text": "^7.37.1-next.ba3aee3a2.0",
+		"@wordpress/style-engine": "^2.37.1-next.ba3aee3a2.0",
+		"@wordpress/token-list": "^3.37.1-next.ba3aee3a2.0",
+		"@wordpress/upload-media": "^0.22.1-next.ba3aee3a2.0",
+		"@wordpress/url": "^4.37.1-next.ba3aee3a2.0",
+		"@wordpress/warning": "^3.37.1-next.ba3aee3a2.0",
+		"@wordpress/wordcount": "^4.37.1-next.ba3aee3a2.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6a324496a37d9a333a11d4d7fe5fb93b8152a5ba"
+	"gitHead": "67d2e486fcd40c753591cf911ca0659132f519ca"
 }

package/src/components/block-list/block.js

@@ -38,8 +38,9 @@ import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import { PrivateBlockContext } from './private-block-context';
-
+import { useBlockVisibility } from '../block-visibility/';
 import { unlock } from '../../lock-unlock';
+import { deviceTypeKey } from '../../store/private-keys';
 
 /**
  * Merges wrapper props with special handling for classNames and styles.
@@ -607,16 +608,17 @@ function BlockListBlockProvider( props ) {
 			const attributes = getBlockAttributes( clientId );
 			const { name: blockName, isValid } = blockWithoutAttributes;
 			const blockType = getBlockType( blockName );
+			const settings = getSettings();
 			const {
 				supportsLayout,
 				isPreviewMode,
 				__experimentalBlockBindingsSupportedAttributes,
-			} = getSettings();
-			const { isBlockHidden: _isBlockHidden } = unlock(
-				select( blockEditorStore )
-			);
+			} = settings;
 			const bindableAttributes =
 				__experimentalBlockBindingsSupportedAttributes?.[ blockName ];
+			const blockVisibility = attributes?.metadata?.blockVisibility;
+			const deviceType =
+				settings?.[ deviceTypeKey ]?.toLowerCase() || 'desktop';
 
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const previewContext = {
@@ -635,8 +637,9 @@ function BlockListBlockProvider( props ) {
 					? getBlockDefaultClassName( blockName )
 					: undefined,
 				blockTitle: blockType?.title,
-				isBlockHidden: _isBlockHidden( clientId ),
 				bindableAttributes,
+				blockVisibility,
+				deviceType,
 			};
 
 			// When in preview mode, we can avoid a lot of selection and
@@ -725,6 +728,8 @@ function BlockListBlockProvider( props ) {
 				originalBlockClientId: isInvalid
 					? blocksWithSameName[ 0 ]
 					: false,
+				blockVisibility,
+				deviceType,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -770,10 +775,17 @@ function BlockListBlockProvider( props ) {
 		className,
 		defaultClassName,
 		originalBlockClientId,
-		isBlockHidden,
 		bindableAttributes,
+		blockVisibility,
+		deviceType,
 	} = selectedProps;
 
+	// Use block visibility hook with data from existing useSelect to avoid extra subscription
+	const { isBlockCurrentlyHidden } = useBlockVisibility( {
+		blockVisibility,
+		deviceType,
+	} );
+
 	// Users of the editor.BlockListBlock filter used to be able to
 	// access the block prop.
 	// Ideally these blocks would rely on the clientId prop only.
@@ -823,12 +835,14 @@ function BlockListBlockProvider( props ) {
 		originalBlockClientId,
 		themeSupportsLayout,
 		canMove,
-		isBlockHidden,
+		isBlockCurrentlyHidden,
 		bindableAttributes,
+		blockVisibility,
+		deviceType,
 	};
 
 	if (
-		isBlockHidden &&
+		isBlockCurrentlyHidden &&
 		! isSelected &&
 		! isMultiSelected &&
 		! hasChildSelected

package/src/components/block-list/use-block-props/index.js

@@ -30,6 +30,7 @@ import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
+import { useBlockVisibility } from '../../block-visibility/';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -102,7 +103,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isSectionBlock,
 		isWithinSectionBlock,
 		canMove,
-		isBlockHidden,
+		blockVisibility,
+		deviceType,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -138,6 +140,12 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		  }
 		: {};
 
+	// Use block visibility hook with data from context to avoid extra subscription.
+	const { isBlockCurrentlyHidden } = useBlockVisibility( {
+		blockVisibility,
+		deviceType,
+	} );
+
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
@@ -185,7 +193,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'has-editable-outline': hasEditableOutline,
 				'has-negative-margin': hasNegativeMargin,
 				'is-editing-content-only-section': isEditingContentOnlySection,
-				'is-block-hidden': isBlockHidden,
+				'is-block-hidden': isBlockCurrentlyHidden,
 			},
 			className,
 			props.className,

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

@@ -141,7 +141,6 @@
 			display: inline-flex;
 			height: 2px;
 			position: absolute;
-			right: 0;
 			top: $grid-unit-20 - $border-width;
 			width: 2px;
 		}

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

@@ -166,6 +166,11 @@
 			content: "";
 		}
 
+		// Hide the dot divider since the parent selector is visually separated.
+		&::after {
+			display: none;
+		}
+
 		.block-editor-block-parent-selector__button {
 			border: $border-width solid $gray-900;
 			padding-right: 6px;
@@ -186,6 +191,11 @@
 			position: relative;
 			left: auto;
 			margin-left: -$border-width;
+
+			// Show the dot divider since the parent selector is inline.
+			&::after {
+				display: inline-flex;
+			}
 		}
 
 		.block-editor-block-mover__move-button-container,

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

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { desktop, tablet, mobile } from '@wordpress/icons';
+
+/**
+ * The choices for the block visibility.
+ * Must match those in packages/editor/src/components/preview-dropdown/index.js.
+ *
+ * @todo create a single source of truth for the viewport types.
+ */
+export const BLOCK_VISIBILITY_VIEWPORTS = {
+	desktop: {
+		label: __( 'Desktop' ),
+		icon: desktop,
+		value: 'desktop',
+	},
+	tablet: {
+		label: __( 'Tablet' ),
+		icon: tablet,
+		value: 'tablet',
+	},
+	mobile: {
+		label: __( 'Mobile' ),
+		icon: mobile,
+		value: 'mobile',
+	},
+};

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

@@ -1,2 +1,3 @@
 export { default as BlockVisibilityMenuItem } from './menu-item';
 export { default as BlockVisibilityToolbar } from './toolbar';
+export { useBlockVisibility } from './use-block-visibility';

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

@@ -0,0 +1,360 @@
+/**
+ * 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( 'Default values', () => {
+		it( 'should return false when no options are provided', () => {
+			setupViewport( {
+				isMobileOrLarger: true,
+				isMediumOrLarger: true,
+			} );
+
+			const { result } = renderHook( () => useBlockVisibility( {} ) );
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+			expect( result.current.currentViewport ).toBe( 'desktop' );
+		} );
+
+		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 );
+			expect( result.current.currentViewport ).toBe( 'desktop' );
+		} );
+
+		it( 'should default to undefined blockVisibility when not provided', () => {
+			setupViewport( {
+				isMobileOrLarger: true,
+				isMediumOrLarger: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+	} );
+
+	describe( 'Edge cases', () => {
+		it( 'should return false when blockVisibility is an empty object', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: {},
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should handle null blockVisibility', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: null,
+					deviceType: 'desktop',
+				} )
+			);
+
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
+
+		it( 'should handle case-insensitive deviceType', () => {
+			setupViewport( { isMobileOrLarger: true } );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { mobile: false },
+					deviceType: 'MOBILE',
+				} )
+			);
+
+			// Should still work but viewport detection uses lowercase
+			expect( result.current.currentViewport ).toBe( 'desktop' );
+		} );
+	} );
+} );