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

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

@@ -10,44 +10,41 @@ import { useMemo } from '@wordpress/element';
 import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
 
 /**
- * Determines if a block should be hidden based on visibility settings.
- *
- * Priority:
- * 1. Device type override (Mobile/Tablet) - uses device type to determine viewport
- * 2. Actual window size (Desktop mode) - uses viewport detection
+ * 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` boolean property.
+ * @return {Object} Object with `isBlockCurrentlyHidden` and `currentViewport` boolean properties.
  */
-export function useBlockVisibility( options = {} ) {
+export default function useBlockVisibility( options = {} ) {
 	const {
 		blockVisibility = undefined,
-		deviceType = BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+		deviceType = BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
 	} = options;
 
 	const isLargerThanMobile = useViewportMatch( 'mobile', '>=' ); // >= 480px
 	const isLargerThanTablet = useViewportMatch( 'medium', '>=' ); // >= 782px
 
 	/*
-	 * When Desktop is selected, use actual viewport detection.
-	 * When Mobile/Tablet is selected, override with device type.
+	 * 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.value ) {
-			return BLOCK_VISIBILITY_VIEWPORTS.mobile.value;
+		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
 		}
-		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.value ) {
-			return BLOCK_VISIBILITY_VIEWPORTS.tablet.value;
+		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key ) {
+			return BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
 		}
 		if ( ! isLargerThanMobile ) {
-			return BLOCK_VISIBILITY_VIEWPORTS.mobile.value;
+			return BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
 		}
 		if ( isLargerThanMobile && ! isLargerThanTablet ) {
-			return BLOCK_VISIBILITY_VIEWPORTS.tablet.value;
+			return BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
 		}
-		return BLOCK_VISIBILITY_VIEWPORTS.desktop.value;
+		return BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 	}, [ deviceType, isLargerThanMobile, isLargerThanTablet ] );
 
 	// Determine if block is currently hidden.
@@ -66,8 +63,8 @@ export function useBlockVisibility( options = {} ) {
 		return false;
 	}, [ blockVisibility, currentViewport ] );
 
-	return useMemo(
-		() => ( { isBlockCurrentlyHidden, currentViewport } ),
-		[ isBlockCurrentlyHidden, currentViewport ]
-	);
+	return {
+		isBlockCurrentlyHidden,
+		currentViewport,
+	};
 }

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

@@ -0,0 +1,95 @@
+/**
+ * Internal dependencies
+ */
+import { BLOCK_VISIBILITY_VIEWPORT_ENTRIES } from './constants';
+
+/**
+ * Checks if a block is hidden for a specific viewport.
+ *
+ * @param {Object} block    The block to check.
+ * @param {string} viewport The viewport to check (e.g., 'mobile', 'tablet', 'desktop').
+ * @return {boolean} Whether the block is hidden for the viewport.
+ */
+function isBlockHiddenForViewport( block, viewport ) {
+	if ( ! block ) {
+		return false;
+	}
+
+	const blockVisibility = block.attributes?.metadata?.blockVisibility;
+
+	// If explicitly visible everywhere (true), return false for all viewports.
+	if ( blockVisibility === true ) {
+		return false;
+	}
+
+	// If null or not an object, block is not hidden for any specific viewport.
+	if ( 'object' !== typeof blockVisibility ) {
+		return false;
+	}
+
+	// Check if the viewport is valid.
+	if (
+		! BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
+			( [ , { key } ] ) => key === viewport
+		)
+	) {
+		return false;
+	}
+
+	// Check if the specific viewport is hidden.
+	return blockVisibility[ viewport ] === false;
+}
+
+/**
+ * Gets the checkbox state for a viewport across multiple blocks.
+ * Returns `true` if all blocks are hidden, `null` if some are hidden, `false` if none are hidden.
+ *
+ * @param {Array}  blocks   Array of blocks to check.
+ * @param {string} viewport The viewport to check (e.g., 'mobile', 'tablet', 'desktop').
+ * @return {boolean|null} `true` if all hidden, `null` if some hidden, `false` if none hidden.
+ */
+export function getViewportCheckboxState( blocks, viewport ) {
+	if ( ! blocks?.length ) {
+		return false;
+	}
+
+	const hiddenCount = blocks.filter( ( block ) =>
+		isBlockHiddenForViewport( block, viewport )
+	).length;
+
+	if ( hiddenCount === 0 ) {
+		return false;
+	}
+	if ( hiddenCount === blocks.length ) {
+		return true;
+	}
+
+	return null; // Indeterminate: some hidden, some visible (normal mixed state)
+}
+
+/**
+ * Gets the checkbox state for "hide everywhere" across multiple blocks.
+ * Returns `true` if all blocks are hidden everywhere, `null` if some are hidden everywhere, `false` if none are.
+ *
+ * @param {Array} blocks Array of blocks to check.
+ * @return {boolean|null} `true` if all hidden everywhere, `null` if some hidden everywhere, `false` if none.
+ */
+export function getHideEverywhereCheckboxState( blocks ) {
+	if ( ! blocks?.length ) {
+		return false;
+	}
+
+	const hiddenEverywhereCount = blocks.filter(
+		( block ) =>
+			block && block.attributes?.metadata?.blockVisibility === false
+	).length;
+
+	if ( hiddenEverywhereCount === 0 ) {
+		return false;
+	}
+	if ( hiddenEverywhereCount === blocks.length ) {
+		return true;
+	}
+
+	return null; // Indeterminate: some but not all
+}

package/src/components/block-visibility/viewport-menu-item.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+import { seen, unseen } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { BlockVisibilityModal } from './';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const areBlocksHiddenAnywhere = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).areBlocksHiddenAnywhere(
+				clientIds
+			),
+		[ clientIds ]
+	);
+	return (
+		<>
+			<MenuItem
+				icon={ areBlocksHiddenAnywhere ? unseen : seen }
+				onClick={ () => setIsModalOpen( true ) }
+			>
+				{ areBlocksHiddenAnywhere ? __( 'Show' ) : __( 'Hide' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<BlockVisibilityModal
+					clientIds={ clientIds }
+					onClose={ () => setIsModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useRef, useEffect, useState } from '@wordpress/element';
+import { seen, unseen } from '@wordpress/icons';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { BlockVisibilityModal } from './';
+import { unlock } from '../../lock-unlock';
+
+export default function BlockVisibilityViewportToolbar( { clientIds } ) {
+	const hasBlockVisibilityButtonShownRef = useRef( false );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(
+		( select ) => {
+			const {
+				getBlocksByClientId,
+				getBlockName,
+				areBlocksHiddenAnywhere: _areBlocksHiddenAnywhere,
+			} = unlock( select( blockEditorStore ) );
+			const _blocks = getBlocksByClientId( clientIds );
+			return {
+				canToggleBlockVisibility: _blocks.every( ( { clientId } ) =>
+					hasBlockSupport(
+						getBlockName( clientId ),
+						'visibility',
+						true
+					)
+				),
+				areBlocksHiddenAnywhere: _areBlocksHiddenAnywhere( clientIds ),
+			};
+		},
+
+		[ clientIds ]
+	);
+
+	/*
+	 * If the block visibility button has been shown, we don't want to
+	 * remove it from the toolbar until the toolbar is rendered again
+	 * without it. Removing it beforehand can cause focus loss issues.
+	 * It needs to return focus from whence it came, and to do that,
+	 * we need to leave the button in the toolbar.
+	 */
+	useEffect( () => {
+		if ( areBlocksHiddenAnywhere ) {
+			hasBlockVisibilityButtonShownRef.current = true;
+		}
+	}, [ areBlocksHiddenAnywhere ] );
+
+	if (
+		! areBlocksHiddenAnywhere &&
+		! hasBlockVisibilityButtonShownRef.current
+	) {
+		return null;
+	}
+
+	return (
+		<>
+			<ToolbarGroup className="block-editor-block-visibility-toolbar">
+				<ToolbarButton
+					disabled={ ! canToggleBlockVisibility }
+					icon={ areBlocksHiddenAnywhere ? unseen : seen }
+					label={
+						areBlocksHiddenAnywhere
+							? __( 'Hidden' )
+							: __( 'Visible' )
+					}
+					onClick={ () => setIsModalOpen( true ) }
+					aria-expanded={ isModalOpen }
+					aria-haspopup={ ! isModalOpen ? 'dialog' : undefined }
+				/>
+			</ToolbarGroup>
+			{ isModalOpen && (
+				<BlockVisibilityModal
+					clientIds={ clientIds }
+					onClose={ () => setIsModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/button-block-appender/index.js

@@ -54,6 +54,8 @@ function ButtonBlockAppender(
 					  );
 
 				return (
+					// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.
+					// eslint-disable-next-line @wordpress/components-no-unsafe-button-disabled
 					<Button
 						__next40pxDefaultSize
 						ref={ ref }
@@ -66,8 +68,6 @@ function ButtonBlockAppender(
 						onClick={ onToggle }
 						aria-haspopup={ isToggleButton ? 'true' : undefined }
 						aria-expanded={ isToggleButton ? isOpen : undefined }
-						// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.
-						// eslint-disable-next-line no-restricted-syntax
 						disabled={ disabled }
 						label={ label }
 						showTooltip

package/src/components/font-sizes/font-size-picker.js

@@ -19,6 +19,7 @@ function FontSizePicker( props ) {
 			{ ...props }
 			fontSizes={ fontSizes }
 			disableCustomFontSizes={ ! customFontSize }
+			__next40pxDefaultSize
 		/>
 	);
 }

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/components/inserter/menu.js

@@ -75,6 +75,8 @@ function InserterMenu(
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
 	const isLargeViewport = useViewportMatch( 'large' );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const maybeCloseInserter = isMobileViewport ? onClose : NOOP;
 
 	function getInitialTab() {
 		if ( __experimentalInitialTab ) {
@@ -114,6 +116,7 @@ function InserterMenu(
 				_rootClientId
 			);
 			onSelect( blocks );
+			maybeCloseInserter();
 
 			// Check for focus loss due to filtering blocks by selected block type
 			window.requestAnimationFrame( () => {
@@ -128,7 +131,7 @@ function InserterMenu(
 				}
 			} );
 		},
-		[ onInsertBlocks, onSelect, shouldFocusBlock ]
+		[ onInsertBlocks, maybeCloseInserter, onSelect, ref, shouldFocusBlock ]
 	);
 
 	const onInsertPattern = useCallback(
@@ -136,8 +139,9 @@ function InserterMenu(
 			onToggleInsertionPoint( false );
 			onInsertBlocks( blocks, { patternName }, ...args );
 			onSelect();
+			maybeCloseInserter();
 		},
-		[ onInsertBlocks, onSelect ]
+		[ onInsertBlocks, maybeCloseInserter, onSelect, onToggleInsertionPoint ]
 	);
 
 	const onHover = useCallback(

package/src/components/inspector-controls/fill.js

@@ -15,15 +15,15 @@ import { useEffect, useContext } from '@wordpress/element';
 import {
 	useBlockEditContext,
 	mayDisplayControlsKey,
+	mayDisplayPatternEditingControlsKey,
 } from '../block-edit/context';
 import groups from './groups';
 
-export function PrivateInspectorControlsFill( {
+export default function InspectorControlsFill( {
 	children,
 	group = 'default',
 	__experimentalGroup,
 	resetAllFilter,
-	forceDisplayControls,
 } ) {
 	if ( __experimentalGroup ) {
 		deprecated(
@@ -43,7 +43,14 @@ export function PrivateInspectorControlsFill( {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! forceDisplayControls && ! context[ mayDisplayControlsKey ] ) {
+	const shouldDisplayForPatternEditing =
+		context[ mayDisplayPatternEditingControlsKey ] &&
+		( group === 'list' || group === 'content' );
+
+	if (
+		! context[ mayDisplayControlsKey ] &&
+		! shouldDisplayForPatternEditing
+	) {
 		return null;
 	}
 
@@ -64,23 +71,6 @@ export function PrivateInspectorControlsFill( {
 	);
 }
 
-export default function InspectorControlsFill( {
-	children,
-	group = 'default',
-	__experimentalGroup,
-	resetAllFilter,
-} ) {
-	return (
-		<PrivateInspectorControlsFill
-			group={ group }
-			__experimentalGroup={ __experimentalGroup }
-			resetAllFilter={ resetAllFilter }
-		>
-			{ children }
-		</PrivateInspectorControlsFill>
-	);
-}
-
 function RegisterResetAll( { resetAllFilter, children } ) {
 	const { registerResetAllFilter, deregisterResetAllFilter } =
 		useContext( ToolsPanelContext );