@wordpress/block-editor 13.2.0 → 13.4.0

package/src/components/block-quick-navigation/index.js

@@ -10,18 +10,16 @@ import {
 	FlexBlock,
 	FlexItem,
 } from '@wordpress/components';
-import {
-	__experimentalGetBlockLabel,
-	store as blocksStore,
-} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
+import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
-export default function BlockQuickNavigation( { clientIds } ) {
+export default function BlockQuickNavigation( { clientIds, onSelect } ) {
 	if ( ! clientIds.length ) {
 		return null;
 	}
@@ -29,6 +27,7 @@ export default function BlockQuickNavigation( { clientIds } ) {
 		<VStack spacing={ 1 }>
 			{ clientIds.map( ( clientId ) => (
 				<BlockQuickNavigationItem
+					onSelect={ onSelect }
 					key={ clientId }
 					clientId={ clientId }
 				/>
@@ -37,29 +36,18 @@ export default function BlockQuickNavigation( { clientIds } ) {
 	);
 }
 
-function BlockQuickNavigationItem( { clientId } ) {
-	const { name, icon, isSelected } = useSelect(
+function BlockQuickNavigationItem( { clientId, onSelect } ) {
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const { isSelected } = useSelect(
 		( select ) => {
-			const {
-				getBlockName,
-				getBlockAttributes,
-				isBlockSelected,
-				hasSelectedInnerBlock,
-			} = select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
-
-			const blockType = getBlockType( getBlockName( clientId ) );
-			const attributes = getBlockAttributes( clientId );
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
 
 			return {
-				name:
-					blockType &&
-					__experimentalGetBlockLabel(
-						blockType,
-						attributes,
-						'list-view'
-					),
-				icon: blockType?.icon,
 				isSelected:
 					isBlockSelected( clientId ) ||
 					hasSelectedInnerBlock( clientId, /* deep: */ true ),
@@ -72,14 +60,19 @@ function BlockQuickNavigationItem( { clientId } ) {
 	return (
 		<Button
 			isPressed={ isSelected }
-			onClick={ () => selectBlock( clientId ) }
+			onClick={ async () => {
+				await selectBlock( clientId );
+				if ( onSelect ) {
+					onSelect( clientId );
+				}
+			} }
 		>
 			<Flex>
 				<FlexItem>
-					<BlockIcon icon={ icon } />
+					<BlockIcon icon={ blockInformation?.icon } />
 				</FlexItem>
 				<FlexBlock style={ { textAlign: 'left' } }>
-					<Truncate>{ name }</Truncate>
+					<Truncate>{ blockTitle }</Truncate>
 				</FlexBlock>
 			</Flex>
 		</Button>

package/src/components/block-removal-warning-modal/index.js

@@ -53,10 +53,18 @@ export function BlockRemovalWarningModal( { rules } ) {
 		>
 			<p>{ message }</p>
 			<HStack justify="right">
-				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>
+				<Button
+					variant="tertiary"
+					onClick={ clearBlockRemovalPrompt }
+					__next40pxDefaultSize
+				>
 					{ __( 'Cancel' ) }
 				</Button>
-				<Button variant="primary" onClick={ onConfirmRemoval }>
+				<Button
+					variant="primary"
+					onClick={ onConfirmRemoval }
+					__next40pxDefaultSize
+				>
 					{ __( 'Delete' ) }
 				</Button>
 			</HStack>

package/src/components/block-rename/modal.js

@@ -9,7 +9,7 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState, useId } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -27,7 +27,6 @@ export default function BlockRenameModal( {
 	hasOverridesWarning,
 } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
-	const descriptionId = useId();
 
 	const nameHasChanged = editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
@@ -65,7 +64,6 @@ export default function BlockRenameModal( {
 			onRequestClose={ onClose }
 			overlayClassName="block-editor-block-rename-modal"
 			focusOnMount="firstContentElement"
-			aria={ { describedby: descriptionId } }
 			size="small"
 		>
 			<form
@@ -79,16 +77,12 @@ export default function BlockRenameModal( {
 					handleSubmit();
 				} }
 			>
-				<p id={ descriptionId }>
-					{ __( 'Enter a custom name for this block.' ) }
-				</p>
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						value={ editedBlockName }
-						label={ __( 'Block name' ) }
-						hideLabelFromVision
+						label={ __( 'Name' ) }
 						help={
 							hasOverridesWarning
 								? __(

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

@@ -306,7 +306,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 							</>
 						}
 						toggleProps={ {
-							describedBy: blockSwitcherDescription,
+							description: blockSwitcherDescription,
 							...toggleProps,
 						} }
 						menuProps={ { orientation: 'both' } }

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { chevronRight } from '@wordpress/icons';
 
 import {
@@ -34,6 +34,7 @@ function PatternTransformationsMenu( {
 } ) {
 	const [ showTransforms, setShowTransforms ] = useState( false );
 	const patterns = useTransformedPatterns( statePatterns, blocks );
+
 	if ( ! patterns.length ) {
 		return null;
 	}
@@ -60,21 +61,22 @@ function PatternTransformationsMenu( {
 }
 
 function PreviewPatternsPopover( { patterns, onSelect } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
-		<div className="block-editor-block-switcher__popover__preview__parent">
-			<div className="block-editor-block-switcher__popover__preview__container">
-				<Popover
-					className="block-editor-block-switcher__preview__popover"
-					position="bottom right"
-				>
-					<div className="block-editor-block-switcher__preview is-pattern-list-preview">
-						<BlockPatternsList
-							patterns={ patterns }
-							onSelect={ onSelect }
-						/>
-					</div>
-				</Popover>
-			</div>
+		<div className="block-editor-block-switcher__popover-preview-container">
+			<Popover
+				className="block-editor-block-switcher__popover-preview"
+				placement={ isMobile ? 'bottom' : 'right-start' }
+				offset={ 16 }
+			>
+				<div className="block-editor-block-switcher__preview is-pattern-list-preview">
+					<BlockPatternsList
+						patterns={ patterns }
+						onSelect={ onSelect }
+					/>
+				</div>
+			</Popover>
 		</div>
 	);
 }

package/src/components/block-switcher/preview-block-popover.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -10,22 +11,27 @@ import { Popover } from '@wordpress/components';
 import BlockPreview from '../block-preview';
 
 export default function PreviewBlockPopover( { blocks } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	if ( isMobile ) {
+		return null;
+	}
+
 	return (
-		<div className="block-editor-block-switcher__popover__preview__parent">
-			<div className="block-editor-block-switcher__popover__preview__container">
-				<Popover
-					className="block-editor-block-switcher__preview__popover"
-					placement="bottom-start"
-					focusOnMount={ false }
-				>
-					<div className="block-editor-block-switcher__preview">
-						<div className="block-editor-block-switcher__preview-title">
-							{ __( 'Preview' ) }
-						</div>
-						<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+		<div className="block-editor-block-switcher__popover-preview-container">
+			<Popover
+				className="block-editor-block-switcher__popover-preview"
+				placement="right-start"
+				focusOnMount={ false }
+				offset={ 16 }
+			>
+				<div className="block-editor-block-switcher__preview">
+					<div className="block-editor-block-switcher__preview-title">
+						{ __( 'Preview' ) }
 					</div>
-				</Popover>
-			</div>
+					<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+				</div>
+			</Popover>
 		</div>
 	);
 }

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

@@ -84,27 +84,18 @@
 	min-width: 300px;
 }
 
-.block-editor-block-switcher__popover__preview__parent {
-	.block-editor-block-switcher__popover__preview__container {
-		position: absolute;
-		top: -$grid-unit-15;
-		left: calc(100% + #{$grid-unit-20});
-	}
+.block-editor-block-switcher__popover-preview-container {
+	left: 0;
+	position: absolute;
+	top: -$border-width;
+	width: 100%;
+	bottom: 0;
+	pointer-events: none;
 }
 
-.block-editor-block-switcher__preview__popover {
-	display: none;
+.block-editor-block-switcher__popover-preview {
 	overflow: hidden;
 
-	// Position correctly. Needs specificity.
-	&.components-popover {
-		margin-top: $grid-unit-15 - $border-width;
-	}
-
-	@include break-medium() {
-		display: block;
-	}
-
 	.components-popover__content {
 		width: 300px;
 		border: $border-width solid $gray-900;

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

@@ -134,7 +134,7 @@ describe( 'BlockSwitcher', () => {
 		expect( items[ 1 ] ).toHaveTextContent( headingBlockType.title );
 	} );
 
-	test( 'should render disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
+	test( 'should render accessibly disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
 		useSelect.mockImplementation( () => ( {
 			blocks: [ headingBlock1 ],
 			icon: copy,
@@ -142,11 +142,11 @@ describe( 'BlockSwitcher', () => {
 			canRemove: false,
 		} ) );
 		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Block Name',
-			} )
-		).toBeDisabled();
+		const blockSwitcher = screen.getByRole( 'button', {
+			name: 'Block Name',
+		} );
+		expect( blockSwitcher ).toBeEnabled();
+		expect( blockSwitcher ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
 	test( 'should render message for no available transforms', async () => {

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

@@ -54,10 +54,16 @@ export default function Shuffle( { clientId, as = Container } ) {
 			return EMPTY_ARRAY;
 		}
 		return patterns.filter( ( pattern ) => {
+			const isCorePattern =
+				pattern.source === 'core' ||
+				( pattern.source?.startsWith( 'pattern-directory' ) &&
+					pattern.source !== 'pattern-directory/theme' );
 			return (
 				// Check if the pattern has only one top level block,
 				// otherwise we may shuffle to pattern that will not allow to continue shuffling.
 				pattern.blocks.length === 1 &&
+				// We exclude the core patterns and pattern directory patterns that are not theme patterns.
+				! isCorePattern &&
 				pattern.categories?.some( ( category ) => {
 					return categories.includes( category );
 				} ) &&
@@ -66,7 +72,8 @@ export default function Shuffle( { clientId, as = Container } ) {
 			);
 		} );
 	}, [ categories, patterns ] );
-	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
+
+	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
 		return null;
 	}
 
@@ -85,6 +92,7 @@ export default function Shuffle( { clientId, as = Container } ) {
 		<ComponentToUse
 			label={ __( 'Shuffle' ) }
 			icon={ shuffle }
+			className="block-editor-block-toolbar-shuffle"
 			onClick={ () => {
 				const nextPattern = getNextPattern();
 				nextPattern.blocks[ 0 ].attributes = {

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

@@ -24,8 +24,6 @@
 	.components-toolbar-group,
 	.components-toolbar {
 		background: none;
-		// IE11 has thick paddings without this.
-		line-height: 0;
 
 		// These margins make the buttons themselves overlap the chrome of the toolbar.
 		// This helps make them square, and maximize the hit area.
@@ -151,15 +149,7 @@
 }
 
 .block-editor-block-toolbar__slot {
-	// Required for IE11.
-	display: inline-block;
-	// Fix for toolbar button misalignment on IE11
-	line-height: 0;
-
-	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-	@supports (position: sticky) {
-		display: inline-flex;
-	}
+	display: inline-flex;
 }
 
 .show-icon-labels {

package/src/components/block-tools/block-selection-button.js

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { dragHandle, trash } from '@wordpress/icons';
-import { Button, Flex, FlexItem, ToolbarButton } from '@wordpress/components';
+import { dragHandle } from '@wordpress/icons';
+import { Button, Flex, FlexItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { forwardRef, useEffect } from '@wordpress/element';
 import {
 	BACKSPACE,
 	DELETE,
@@ -38,8 +38,6 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockMover from '../block-mover';
-import Shuffle from '../block-toolbar/shuffle';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -48,10 +46,11 @@ import Shuffle from '../block-toolbar/shuffle';
  *
  * @param {string} props          Component props.
  * @param {string} props.clientId Client ID of block.
+ * @param {Object} ref            Reference to the component.
  *
  * @return {Component} The component to be rendered.
  */
-function BlockSelectionButton( { clientId, rootClientId } ) {
+function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 	const selected = useSelect(
 		( select ) => {
 			const {
@@ -62,7 +61,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				__unstableGetEditorMode,
 				getNextBlockClientId,
 				getPreviousBlockClientId,
-				canRemoveBlock,
 				canMoveBlock,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
@@ -73,26 +71,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 			const orientation =
 				getBlockListSettings( rootClientId )?.orientation;
 			const match = getActiveBlockVariation( name, attributes );
-			const isBlockTemplatePart =
-				blockType?.name === 'core/template-part';
-
-			let isNextBlockTemplatePart = false;
-			const nextClientId = getNextBlockClientId();
-			if ( nextClientId ) {
-				const { name: nextName } = getBlock( nextClientId );
-				const nextBlockType = getBlockType( nextName );
-				isNextBlockTemplatePart =
-					nextBlockType?.name === 'core/template-part';
-			}
-
-			let isPrevBlockTemplatePart = false;
-			const prevClientId = getPreviousBlockClientId();
-			if ( prevClientId ) {
-				const { name: prevName } = getBlock( prevClientId );
-				const prevBlockType = getBlockType( prevName );
-				isPrevBlockTemplatePart =
-					prevBlockType?.name === 'core/template-part';
-			}
 
 			return {
 				blockMovingMode: hasBlockMovingClientId(),
@@ -104,28 +82,15 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					index + 1,
 					orientation
 				),
-				isBlockTemplatePart,
-				isNextBlockTemplatePart,
-				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId ),
-				canMove: canMoveBlock( clientId ),
+				canMove: canMoveBlock( clientId, rootClientId ),
+				getNextBlockClientId,
+				getPreviousBlockClientId,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const {
-		label,
-		icon,
-		blockMovingMode,
-		editorMode,
-		isBlockTemplatePart,
-		isNextBlockTemplatePart,
-		isPrevBlockTemplatePart,
-		canRemove,
-		canMove,
-	} = selected;
+	const { label, icon, blockMovingMode, editorMode, canMove } = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
-	const ref = useRef();
 
 	// Focus the breadcrumb in navigation mode.
 	useEffect( () => {
@@ -164,11 +129,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		const isEnter = keyCode === ENTER;
 		const isSpace = keyCode === SPACE;
 		const isShift = event.shiftKey;
-		if ( isEscape && editorMode === 'navigation' ) {
-			setNavigationMode( false );
-			event.preventDefault();
-			return;
-		}
 
 		if ( keyCode === BACKSPACE || keyCode === DELETE ) {
 			removeBlock( clientId );
@@ -281,9 +241,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 	);
 
 	const dragHandleLabel = __( 'Drag' );
-	const showBlockDraggable =
-		( canMove && editorMode === 'navigation' ) ||
-		( editorMode === 'zoom-out' && canMove && ! isBlockTemplatePart );
+	const showBlockDraggable = canMove && editorMode === 'navigation';
 
 	return (
 		<div className={ classNames }>
@@ -312,36 +270,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						</BlockDraggable>
 					</FlexItem>
 				) }
-				{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
-					<FlexItem>
-						<BlockMover
-							clientIds={ [ clientId ] }
-							hideDragHandle
-							isBlockMoverUpButtonDisabled={
-								isPrevBlockTemplatePart
-							}
-							isBlockMoverDownButtonDisabled={
-								isNextBlockTemplatePart
-							}
-						/>
-					</FlexItem>
-				) }
-				{ canMove && canRemove && editorMode === 'zoom-out' && (
-					<Shuffle clientId={ clientId } as={ Button } />
-				) }
-				{ canRemove &&
-					editorMode === 'zoom-out' &&
-					! isBlockTemplatePart && (
-						<FlexItem>
-							<ToolbarButton
-								icon={ trash }
-								label="Delete"
-								onClick={ () => {
-									removeBlock( clientId );
-								} }
-							/>
-						</FlexItem>
-					) }
 				{ editorMode === 'navigation' && (
 					<FlexItem>
 						<Button
@@ -368,4 +296,4 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 	);
 }
 
-export default BlockSelectionButton;
+export default forwardRef( BlockSelectionButton );

package/src/components/block-tools/block-toolbar-breadcrumb.js

@@ -3,6 +3,11 @@
  */
 import clsx from 'clsx';
 
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -11,10 +16,7 @@ import { PrivateBlockPopover } from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
 
-export default function BlockToolbarBreadcrumb( {
-	clientId,
-	__unstableContentRef,
-} ) {
+function BlockToolbarBreadcrumb( { clientId, __unstableContentRef }, ref ) {
 	const {
 		capturingClientId,
 		isInsertionPointVisible,
@@ -38,9 +40,12 @@ export default function BlockToolbarBreadcrumb( {
 			{ ...popoverProps }
 		>
 			<BlockSelectionButton
+				ref={ ref }
 				clientId={ clientId }
 				rootClientId={ rootClientId }
 			/>
 		</PrivateBlockPopover>
 	);
 }
+
+export default forwardRef( BlockToolbarBreadcrumb );

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

@@ -20,11 +20,13 @@ import {
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
 import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
+import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
+import getEditorRegion from '../../utils/get-editor-region';
 
 function selector( select ) {
 	const {
@@ -78,9 +80,11 @@ export default function BlockTools( {
 		showEmptyBlockSideInserter,
 		showBreadcrumb,
 		showBlockToolbarPopover,
+		showZoomOutToolbar,
 	} = useShowBlockTools();
 
 	const {
+		clearSelectedBlock,
 		duplicateBlocks,
 		removeBlocks,
 		replaceBlocks,
@@ -92,6 +96,8 @@ export default function BlockTools( {
 		expandBlock,
 	} = unlock( useDispatch( blockEditorStore ) );
 
+	const blockSelectionButtonRef = useRef();
+
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
@@ -152,6 +158,13 @@ export default function BlockTools( {
 				// block so that focus is directed back to the beginning of the selection.
 				// In effect, to the user this feels like deselecting the multi-selection.
 				selectBlock( clientIds[ 0 ] );
+			} else if (
+				clientIds.length === 1 &&
+				event.target === blockSelectionButtonRef?.current
+			) {
+				event.preventDefault();
+				clearSelectedBlock();
+				getEditorRegion( __unstableContentRef.current )?.focus();
 			}
 		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
 			// If focus is currently within a text field, such as a rich text block or other editable field,
@@ -182,7 +195,6 @@ export default function BlockTools( {
 			}
 		}
 	}
-
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
 
@@ -213,6 +225,14 @@ export default function BlockTools( {
 
 				{ showBreadcrumb && (
 					<BlockToolbarBreadcrumb
+						ref={ blockSelectionButtonRef }
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+					/>
+				) }
+
+				{ showZoomOutToolbar && (
+					<ZoomOutPopover
 						__unstableContentRef={ __unstableContentRef }
 						clientId={ clientId }
 					/>