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

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/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-tabs/content-tab.js

@@ -15,7 +15,6 @@ const ContentTab = ( { contentClientIds } ) => {
 	}
 
 	const shouldShowBlockFields =
-		window?.__experimentalContentOnlyPatternInsertion &&
 		window?.__experimentalContentOnlyInspectorFields;
 
 	return (

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

@@ -66,7 +66,7 @@ function ListViewBlockSelectButton(
 			( select ) => {
 				const { getBlockName, getBlockAttributes } =
 					select( blockEditorStore );
-				const { isBlockHidden: _isBlockHidden } = unlock(
+				const { areBlocksHiddenAnywhere } = unlock(
 					select( blockEditorStore )
 				);
 				const blockAttributes = getBlockAttributes( clientId );
@@ -76,7 +76,7 @@ function ListViewBlockSelectButton(
 						'visibility',
 						true
 					),
-					isBlockHidden: _isBlockHidden( clientId ),
+					isBlockHidden: areBlocksHiddenAnywhere( [ clientId ] ),
 					hasPatternName: !! blockAttributes?.metadata?.patternName,
 				};
 			},

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

@@ -54,6 +54,7 @@ import AriaReferencedText from './aria-referenced-text';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
 import { cleanEmptyObject } from '../../hooks/utils';
+import { BlockVisibilityModal } from '../block-visibility';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -79,7 +80,8 @@ function ListViewBlock( {
 	const settingsRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
-
+	const [ visibilityModalClientIds, setVisibilityModalClientIds ] =
+		useState( null );
 	const { isLocked } = useBlockLock( clientId );
 
 	const isFirstSelectedBlock =
@@ -98,6 +100,7 @@ function ListViewBlock( {
 		insertBeforeBlock,
 		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
+
 	const debouncedToggleBlockHighlight = useDebounce(
 		toggleBlockHighlight,
 		50
@@ -125,15 +128,18 @@ function ListViewBlock( {
 	const { block, blockName, allowRightClickOverrides, isBlockHidden } =
 		useSelect(
 			( select ) => {
-				const { getBlock, getBlockName, getSettings } =
-					select( blockEditorStore );
+				const {
+					getBlock,
+					getBlockName: _getBlockName,
+					getSettings,
+				} = select( blockEditorStore );
 				const { isBlockHidden: _isBlockHidden } = unlock(
 					select( blockEditorStore )
 				);
 
 				return {
 					block: getBlock( clientId ),
-					blockName: getBlockName( clientId ),
+					blockName: _getBlockName( clientId ),
 					allowRightClickOverrides:
 						getSettings().allowRightClickOverrides,
 					isBlockHidden: _isBlockHidden( clientId ),
@@ -373,30 +379,40 @@ function ListViewBlock( {
 			event.preventDefault();
 			const { blocksToUpdate } = getBlocksToUpdate();
 			const blocks = getBlocksByClientId( blocksToUpdate );
-			const canToggleVisibility = blocks.every( ( blockToUpdate ) =>
-				hasBlockSupport( blockToUpdate.name, 'visibility', true )
+			const supportsBlockVisibility = blocks.every( ( _block ) =>
+				hasBlockSupport( _block.name, 'visibility', true )
 			);
-			if ( ! canToggleVisibility ) {
+
+			if ( ! supportsBlockVisibility ) {
 				return;
 			}
-			const hasHiddenBlock = blocks.some(
-				( blockToUpdate ) =>
-					blockToUpdate.attributes.metadata?.blockVisibility === false
-			);
-			const attributesByClientId = Object.fromEntries(
-				blocks.map( ( { clientId: mapClientId, attributes } ) => [
-					mapClientId,
-					{
-						metadata: cleanEmptyObject( {
-							...attributes?.metadata,
-							blockVisibility: hasHiddenBlock ? undefined : false,
-						} ),
-					},
-				] )
-			);
-			updateBlockAttributes( blocksToUpdate, attributesByClientId, {
-				uniqueByBlock: true,
-			} );
+
+			if ( window.__experimentalHideBlocksBasedOnScreenSize ) {
+				// Open the visibility breakpoints modal.
+				setVisibilityModalClientIds( blocksToUpdate );
+			} else {
+				const hasHiddenBlock = blocks.some(
+					( blockToUpdate ) =>
+						blockToUpdate.attributes.metadata?.blockVisibility ===
+						false
+				);
+				const attributesByClientId = Object.fromEntries(
+					blocks.map( ( { clientId: mapClientId, attributes } ) => [
+						mapClientId,
+						{
+							metadata: cleanEmptyObject( {
+								...attributes?.metadata,
+								blockVisibility: hasHiddenBlock
+									? undefined
+									: false,
+							} ),
+						},
+					] )
+				);
+				updateBlockAttributes( blocksToUpdate, attributesByClientId, {
+					uniqueByBlock: true,
+				} );
+			}
 		}
 	}
 
@@ -699,6 +715,12 @@ function ListViewBlock( {
 					) }
 				</TreeGridCell>
 			) }
+			{ visibilityModalClientIds && (
+				<BlockVisibilityModal
+					clientIds={ visibilityModalClientIds }
+					onClose={ () => setVisibilityModalClientIds( null ) }
+				/>
+			) }
 		</ListViewLeaf>
 	);
 }

package/src/components/list-view/index.js

@@ -19,7 +19,6 @@ import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import {
 	useCallback,
-	useEffect,
 	useMemo,
 	useRef,
 	useReducer,
@@ -118,7 +117,8 @@ function ListViewComponent(
 		useListViewClientIds( { blocks, rootClientId } );
 	const blockIndexes = useListViewBlockIndexes( clientIdsTree );
 
-	const { getBlock } = useSelect( blockEditorStore );
+	const { getBlock, getSelectedBlockClientIds } =
+		useSelect( blockEditorStore );
 	const { visibleBlockCount } = useSelect(
 		( select ) => {
 			const { getGlobalBlockCount, getClientIdsOfDescendants } =
@@ -172,22 +172,26 @@ function ListViewComponent(
 		selectBlock: selectEditorBlock,
 	} );
 
+	const focusSelectedBlock = useCallback(
+		( node ) => {
+			const [ firstSelectedClientId ] = getSelectedBlockClientIds();
+			// If a blocks are already selected when the list view is initially
+			// mounted, shift focus to the first selected block.
+			if ( firstSelectedClientId && node ) {
+				focusListItem( firstSelectedClientId, node );
+			}
+		},
+		[ getSelectedBlockClientIds ]
+	);
+
 	const treeGridRef = useMergeRefs( [
 		clipBoardRef,
+		focusSelectedBlock,
 		elementRef,
 		dropZoneRef,
 		ref,
 	] );
 
-	useEffect( () => {
-		// If a blocks are already selected when the list view is initially
-		// mounted, shift focus to the first selected block.
-		if ( selectedClientIds?.length ) {
-			focusListItem( selectedClientIds[ 0 ], elementRef?.current );
-		}
-		// Only focus on the selected item when the list view is mounted.
-	}, [] );
-
 	const expand = useCallback(
 		( clientId ) => {
 			if ( ! clientId ) {

package/src/components/list-view/utils.js

@@ -81,33 +81,41 @@ export function getCommonDepthClientIds(
  * @param {?HTMLElement} treeGridElement The container element to search within.
  */
 export function focusListItem( focusClientId, treeGridElement ) {
-	const getFocusElement = () => {
-		const row = treeGridElement?.querySelector(
-			`[role=row][data-block="${ focusClientId }"]`
-		);
-		if ( ! row ) {
-			return null;
+	if ( ! treeGridElement ) {
+		return;
+	}
+
+	const selector = `[role=row][data-block="${ focusClientId }"]`;
+
+	return new Promise( ( resolve ) => {
+		if ( treeGridElement.querySelector( selector ) ) {
+			return resolve( treeGridElement.querySelector( selector ) );
 		}
-		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
-		return focus.focusable.find( row )[ 0 ];
-	};
 
-	let focusElement = getFocusElement();
-	if ( focusElement ) {
-		focusElement.focus();
-	} else {
-		// The element hasn't been painted yet. Defer focusing on the next frame.
-		// This could happen when all blocks have been deleted and the default block
-		// hasn't been added to the editor yet.
-		window.requestAnimationFrame( () => {
-			focusElement = getFocusElement();
-
-			// Ignore if the element still doesn't exist.
-			if ( focusElement ) {
-				focusElement.focus();
+		let timer = null;
+		// Wait for the element to be added to the DOM.
+		const observer = new window.MutationObserver( () => {
+			if ( treeGridElement.querySelector( selector ) ) {
+				clearTimeout( timer );
+				observer.disconnect();
+				resolve( treeGridElement.querySelector( selector ) );
 			}
 		} );
-	}
+
+		observer.observe( treeGridElement, {
+			childList: true,
+			subtree: true,
+		} );
+
+		// Stop trying after 3 seconds.
+		timer = setTimeout( () => {
+			observer.disconnect();
+			resolve( null );
+		}, 3000 );
+	} ).then( ( element ) => {
+		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+		focus.focusable.find( element )?.[ 0 ]?.focus();
+	} );
 }
 
 /**

package/src/components/rich-text/event-listeners/input-rules.js

@@ -99,6 +99,7 @@ export default ( props ) => ( element ) => {
 			__unstableAllowPrefixTransformations,
 			formatTypes,
 			registry,
+			onReplace,
 		} = props.current;
 
 		// Only run input rules when inserting text.
@@ -111,6 +112,22 @@ export default ( props ) => ( element ) => {
 		}
 
 		const value = getValue();
+
+		const transforms = getBlockTransforms( 'from' ).filter(
+			( transform ) => transform.type === 'input'
+		);
+		const transformation = findTransform( transforms, ( item ) => {
+			return item.regExp.test( value.text );
+		} );
+
+		if ( transformation ) {
+			onReplace( transformation.transform() );
+			registry
+				.dispatch( blockEditorStore )
+				.__unstableMarkAutomaticChange();
+			return;
+		}
+
 		const transformed = formatTypes.reduce(
 			( accumulator, { __unstableInputRule } ) => {
 				if ( __unstableInputRule ) {

package/src/components/rich-text/index.js

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

package/src/components/url-input/index.js

@@ -452,6 +452,8 @@ class URLInput extends Component {
 			value,
 			required: true,
 			type: 'text',
+			name: inputId,
+			autoComplete: 'off',
 			onChange: disabled ? () => {} : this.onChange, // Disable onChange when disabled
 			onFocus: disabled ? () => {} : this.onFocus, // Disable onFocus when disabled
 			placeholder,

package/src/components/use-block-commands/index.js

@@ -223,9 +223,10 @@ const getQuickActionsCommands = () =>
 		} );
 		const canRemove = canRemoveBlocks( clientIds );
 
-		const canToggleBlockVisibility = blocks.every( ( { clientId } ) =>
-			hasBlockSupport( getBlockName( clientId ), 'visibility', true )
-		);
+		const canToggleBlockVisibility =
+			blocks.every( ( { clientId } ) =>
+				hasBlockSupport( getBlockName( clientId ), 'visibility', true )
+			) && ! window.__experimentalHideBlocksBasedOnScreenSize;
 
 		const commands = [];