@wordpress/block-editor 12.22.0 → 12.24.0

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

@@ -32,11 +32,17 @@ export default function BlockRenameControl( { clientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const customName = metadata?.name;
+	const hasPatternOverrides =
+		!! customName &&
+		!! metadata?.bindings &&
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
 
 	function onChange( newName ) {
 		updateBlockAttributes( [ clientId ], {
 			metadata: {
-				...( metadata && metadata ),
+				...metadata,
 				name: newName,
 			},
 		} );
@@ -59,6 +65,7 @@ export default function BlockRenameControl( { clientId } ) {
 				<BlockRenameModal
 					blockName={ customName || '' }
 					originalBlockName={ blockInformation?.title }
+					hasOverridesWarning={ hasPatternOverrides }
 					onClose={ () => setRenamingBlock( false ) }
 					onSave={ ( newName ) => {
 						// If the new value is the block's original name (e.g. `Group`)

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -11,6 +11,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
 import { Children, cloneElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { displayShortcut } from '@wordpress/keycodes';
 import {
 	store as keyboardShortcutsStore,
 	__unstableUseShortcutEventMatch,
@@ -33,14 +34,18 @@ const POPOVER_PROPS = {
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { clientIds, onCopy, label } ) {
+function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) {
 	const { getBlocksByClientId } = useSelect( blockEditorStore );
 	const ref = useCopyToClipboard(
 		() => serialize( getBlocksByClientId( clientIds ) ),
 		onCopy
 	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
-	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
+	return (
+		<MenuItem ref={ ref } shortcut={ shortcut }>
+			{ copyMenuItemLabel }
+		</MenuItem>
+	);
 }
 
 export function BlockSettingsDropdown( {
@@ -279,6 +284,7 @@ export function BlockSettingsDropdown( {
 								<CopyMenuItem
 									clientIds={ clientIds }
 									onCopy={ onCopy }
+									shortcut={ displayShortcut.primary( 'c' ) }
 								/>
 								{ canDuplicate && (
 									<MenuItem

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

@@ -160,7 +160,7 @@ function BlockSwitcherDropdownMenuContents( {
 	);
 }
 
-export const BlockSwitcher = ( { clientIds } ) => {
+export const BlockSwitcher = ( { clientIds, disabled } ) => {
 	const {
 		canRemove,
 		hasBlockStyles,
@@ -182,7 +182,9 @@ export const BlockSwitcher = ( { clientIds } ) => {
 			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
 				return { invalidBlocks: true };
 			}
-			const rootClientId = getBlockRootClientId( clientIds );
+			const rootClientId = getBlockRootClientId(
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
+			);
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
 			const blockType = getBlockType( firstBlockName );
@@ -229,8 +231,8 @@ export const BlockSwitcher = ( { clientIds } ) => {
 	const blockSwitcherLabel = isSingleBlock
 		? blockTitle
 		: __( 'Multiple blocks selected' );
-	const hideDropdown = ! hasBlockStyles && ! canRemove;
 
+	const hideDropdown = disabled || ( ! hasBlockStyles && ! canRemove );
 	if ( hideDropdown ) {
 		return (
 			<ToolbarGroup>

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

@@ -1,7 +1,7 @@
 .block-editor-block-switcher {
 	position: relative;
 
-	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// @todo override toolbar group inherited paddings from components/block-tools/style.scss.
 	// This is best fixed by making the mover control area a proper single toolbar group.
 	// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
 	.components-button.components-dropdown-menu__toggle.has-icon.has-icon {

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

@@ -171,22 +171,29 @@ export function PrivateBlockToolbar( {
 					<BlockBindingsIndicator />
 				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					isDefaultEditingMode && (
+					( isDefaultEditingMode || isSynced ) && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-								<BlockSwitcher clientIds={ blockClientIds } />
-								{ ! isMultiToolbar && (
-									<BlockLockToolbar
-										clientId={ blockClientId }
-									/>
-								) }
-								<BlockMover
+								<BlockSwitcher
 									clientIds={ blockClientIds }
-									hideDragHandle={ hideDragHandle }
+									disabled={ ! isDefaultEditingMode }
 								/>
+								{ isDefaultEditingMode && (
+									<>
+										{ ! isMultiToolbar && (
+											<BlockLockToolbar
+												clientId={ blockClientId }
+											/>
+										) }
+										<BlockMover
+											clientIds={ blockClientIds }
+											hideDragHandle={ hideDragHandle }
+										/>
+									</>
+								) }
 							</ToolbarGroup>
 						</div>
 					) }

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

@@ -23,7 +23,7 @@ function Container( props ) {
 }
 
 export default function Shuffle( { clientId, as = Container } ) {
-	const { categories, patterns } = useSelect(
+	const { categories, patterns, patternName } = useSelect(
 		( select ) => {
 			const {
 				getBlockAttributes,
@@ -32,11 +32,13 @@ export default function Shuffle( { clientId, as = Container } ) {
 			} = select( blockEditorStore );
 			const attributes = getBlockAttributes( clientId );
 			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
+			const _patternName = attributes?.metadata?.patternName;
 			const rootBlock = getBlockRootClientId( clientId );
 			const _patterns = __experimentalGetAllowedPatterns( rootBlock );
 			return {
 				categories: _categories,
 				patterns: _patterns,
+				patternName: _patternName,
 			};
 		},
 		[ clientId ]
@@ -65,28 +67,32 @@ export default function Shuffle( { clientId, as = Container } ) {
 	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
 		return null;
 	}
+
+	function getNextPattern() {
+		const numberOfPatterns = sameCategoryPatternsWithSingleWrapper.length;
+		const patternIndex = sameCategoryPatternsWithSingleWrapper.findIndex(
+			( { name } ) => name === patternName
+		);
+		const nextPatternIndex =
+			patternIndex + 1 < numberOfPatterns ? patternIndex + 1 : 0;
+		return sameCategoryPatternsWithSingleWrapper[ nextPatternIndex ];
+	}
+
 	const ComponentToUse = as;
 	return (
 		<ComponentToUse
 			label={ __( 'Shuffle' ) }
 			icon={ shuffle }
 			onClick={ () => {
-				const randomPattern =
-					sameCategoryPatternsWithSingleWrapper[
-						Math.floor(
-							// eslint-disable-next-line no-restricted-syntax
-							Math.random() *
-								sameCategoryPatternsWithSingleWrapper.length
-						)
-					];
-				randomPattern.blocks[ 0 ].attributes = {
-					...randomPattern.blocks[ 0 ].attributes,
+				const nextPattern = getNextPattern();
+				nextPattern.blocks[ 0 ].attributes = {
+					...nextPattern.blocks[ 0 ].attributes,
 					metadata: {
-						...randomPattern.blocks[ 0 ].attributes.metadata,
+						...nextPattern.blocks[ 0 ].attributes.metadata,
 						categories,
 					},
 				};
-				replaceBlocks( clientId, randomPattern.blocks );
+				replaceBlocks( clientId, nextPattern.blocks );
 			} }
 		/>
 	);

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

@@ -133,7 +133,7 @@
 		}
 	}
 
-	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// @todo override toolbar group inherited paddings from components/block-tools/style.scss.
 	// This is best fixed by making the mover control area a proper single toolbar group.
 	.components-toolbar-group {
 		padding: 0;

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -21,11 +21,13 @@ export function useHasBlockToolbar() {
 			const {
 				getBlockEditingMode,
 				getBlockName,
-				getSelectedBlockClientIds,
+				getBlockSelectionStart,
 			} = select( blockEditorStore );
 
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			// we only care about the 1st selected block
+			// for the toolbar, so we use getBlockSelectionStart
+			// instead of getSelectedBlockClientIds
+			const selectedBlockClientId = getBlockSelectionStart();
 			const isDefaultEditingMode =
 				getBlockEditingMode( selectedBlockClientId ) === 'default';
 			const blockType =

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

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { dragHandle } from '@wordpress/icons';
-import { Button, Flex, FlexItem } from '@wordpress/components';
+import { dragHandle, trash } from '@wordpress/icons';
+import { Button, Flex, FlexItem, ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import {
@@ -60,6 +60,10 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				hasBlockMovingClientId,
 				getBlockListSettings,
 				__unstableGetEditorMode,
+				getNextBlockClientId,
+				getPreviousBlockClientId,
+				canRemoveBlock,
+				canMoveBlock,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
 				select( blocksStore );
@@ -69,6 +73,26 @@ 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(),
@@ -80,20 +104,36 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					index + 1,
 					orientation
 				),
+				isBlockTemplatePart,
+				isNextBlockTemplatePart,
+				isPrevBlockTemplatePart,
+				canRemove: canRemoveBlock( clientId, rootClientId ),
+				canMove: canMoveBlock( clientId, rootClientId ),
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { label, icon, blockMovingMode, editorMode } = selected;
+	const {
+		label,
+		icon,
+		blockMovingMode,
+		editorMode,
+		isBlockTemplatePart,
+		isNextBlockTemplatePart,
+		isPrevBlockTemplatePart,
+		canRemove,
+		canMove,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
 	// Focus the breadcrumb in navigation mode.
 	useEffect( () => {
-		ref.current.focus();
-
-		speak( label );
-	}, [ label ] );
+		if ( editorMode === 'navigation' ) {
+			ref.current.focus();
+			speak( label );
+		}
+	}, [ label, editorMode ] );
 	const blockElement = useBlockElement( clientId );
 
 	const {
@@ -241,6 +281,9 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 	);
 
 	const dragHandleLabel = __( 'Drag' );
+	const showBlockDraggable =
+		( canMove && editorMode === 'navigation' ) ||
+		( editorMode === 'zoom-out' && canMove && ! isBlockTemplatePart );
 
 	return (
 		<div className={ classNames }>
@@ -251,11 +294,8 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				<FlexItem>
 					<BlockIcon icon={ icon } showColors />
 				</FlexItem>
-				<FlexItem>
-					{ editorMode === 'zoom-out' && (
-						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
-					) }
-					{ editorMode === 'navigation' && (
+				{ showBlockDraggable && (
+					<FlexItem>
 						<BlockDraggable clientIds={ [ clientId ] }>
 							{ ( draggableProps ) => (
 								<Button
@@ -270,30 +310,59 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 								/>
 							) }
 						</BlockDraggable>
-					) }
-				</FlexItem>
-				{ editorMode === 'zoom-out' && (
-					<Shuffle clientId={ clientId } as={ Button } />
+					</FlexItem>
 				) }
-				<FlexItem>
-					<Button
-						ref={ ref }
-						onClick={
-							editorMode === 'navigation'
-								? () => setNavigationMode( false )
-								: undefined
-						}
-						onKeyDown={ onKeyDown }
-						label={ label }
-						showTooltip={ false }
-						className="block-selection-button_select-button"
-					>
-						<BlockTitle
-							clientId={ clientId }
-							maximumLength={ 35 }
+				{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
+					<FlexItem>
+						<BlockMover
+							clientIds={ [ clientId ] }
+							hideDragHandle
+							isBlockMoverUpButtonDisabled={
+								isPrevBlockTemplatePart
+							}
+							isBlockMoverDownButtonDisabled={
+								isNextBlockTemplatePart
+							}
 						/>
-					</Button>
-				</FlexItem>
+					</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
+							ref={ ref }
+							onClick={
+								editorMode === 'navigation'
+									? () => setNavigationMode( false )
+									: undefined
+							}
+							onKeyDown={ onKeyDown }
+							label={ label }
+							showTooltip={ false }
+							className="block-selection-button_select-button"
+						>
+							<BlockTitle
+								clientId={ clientId }
+								maximumLength={ 35 }
+							/>
+						</Button>
+					</FlexItem>
+				) }
 			</Flex>
 		</div>
 	);

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+import { isTextField } from '@wordpress/dom';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
@@ -20,6 +21,7 @@ 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';
 
 function selector( select ) {
 	const {
@@ -79,7 +81,8 @@ export default function BlockTools( {
 		selectBlock,
 		moveBlocksUp,
 		moveBlocksDown,
-	} = useDispatch( blockEditorStore );
+		expandBlock,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) return;
@@ -140,6 +143,20 @@ export default function BlockTools( {
 				// In effect, to the user this feels like deselecting the multi-selection.
 				selectBlock( clientIds[ 0 ] );
 			}
+		} 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,
+			// skip collapsing the list view, and allow the keyboard shortcut to be handled by the text field.
+			// This condition checks for both the active element and the active element within an iframed editor.
+			if (
+				isTextField( event.target ) ||
+				isTextField(
+					event.target?.contentWindow?.document?.activeElement
+				)
+			) {
+				return;
+			}
+			event.preventDefault();
+			expandBlock( clientId );
 		}
 	}
 

package/src/components/block-tools/use-show-block-tools.js

@@ -34,18 +34,15 @@ export function useShowBlockTools() {
 				getSelectedBlockClientId() ||
 				getFirstMultiSelectedBlockClientId();
 
-			const { name = '', attributes = {} } = getBlock( clientId ) || {};
+			const block = getBlock( clientId ) || { name: '', attributes: {} };
 			const editorMode = __unstableGetEditorMode();
-			const hasSelectedBlock = clientId && name;
-			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
-				name,
-				attributes,
-			} );
+			const hasSelectedBlock = clientId && block?.name;
+			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( block );
 			const _showEmptyBlockSideInserter =
 				clientId &&
 				! isTyping() &&
 				editorMode === 'edit' &&
-				isUnmodifiedDefaultBlock( { name, attributes } );
+				isEmptyDefaultBlock;
 			const maybeShowBreadcrumb =
 				hasSelectedBlock &&
 				! hasMultiSelection() &&

package/src/components/block-variation-transforms/index.js

@@ -116,7 +116,9 @@ function VariationsToggleGroupControl( {
 				{ variations.map( ( variation ) => (
 					<ToggleGroupControlOptionIcon
 						key={ variation.name }
-						icon={ variation.icon }
+						icon={
+							<BlockIcon icon={ variation.icon } showColors />
+						}
 						value={ variation.name }
 						label={
 							selectedValue === variation.name

package/src/components/button-block-appender/content.scss

@@ -56,7 +56,11 @@
 		}
 
 		.block-editor-inserter {
-			visibility: hidden;
+			opacity: 0;
+
+			&:focus-within {
+				opacity: 1;
+			}
 		}
 
 		&.is-drag-over {

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

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { Icon, plusCircleFilled } from '@wordpress/icons';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +24,20 @@ function ButtonBlockAppender( {
 	isFloating = false,
 	onAddBlock,
 } ) {
+	const onAppenderPress = useCallback(
+		( onToggle ) => () => {
+			if ( onAddBlock ) {
+				onAddBlock();
+				return;
+			}
+
+			if ( onToggle ) {
+				onToggle();
+			}
+		},
+		[ onAddBlock ]
+	);
+
 	const appenderStyle = {
 		...styles.appender,
 		...getStylesFromColorScheme(
@@ -44,7 +59,7 @@ function ButtonBlockAppender( {
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 					<Button
 						testID="appender-button"
-						onClick={ onAddBlock || onToggle }
+						onClick={ onAppenderPress( onToggle ) }
 						aria-expanded={ isOpen }
 						disabled={ disabled }
 						fixedRatio={ false }

package/src/components/default-block-appender/content.scss

@@ -31,7 +31,7 @@
 	// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
 	:where(body .is-layout-constrained) &,
 	:where(.wp-site-blocks) & {
-		> :first-child:first-child {
+		> :first-child {
 			margin-block-start: 0;
 			margin-block-end: 0;
 		}
@@ -101,7 +101,7 @@
 		height: $button-size-small;
 	}
 
-	// @todo: these are currently two separate components. Since we're now
+	// @todo these are currently two separate components. Since we're now
 	// treating them the same, one or both can be retired.
 	.block-editor-inserter__toggle.components-button.has-icon,
 	.block-list-appender__toggle {
@@ -134,7 +134,7 @@
 
 	// These could be avoided by employing a :not(:only-child) on the parent,
 	// but this should be more performant.
-	// @todo: These styles can almost certainly be refactored away we refactor
+	// @todo These styles can almost certainly be refactored away we refactor
 	// the markup and classes of the component itself. The rules provide some
 	// baseline styles for when the block is the only one inside.
 	&:only-child {

package/src/components/editor-styles/index.js

@@ -9,7 +9,7 @@ import a11yPlugin from 'colord/plugins/a11y';
  * WordPress dependencies
  */
 import { SVG } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -67,7 +67,7 @@ function useDarkThemeBodyClassName( styles, scope ) {
 	);
 }
 
-export default function EditorStyles( { styles, scope } ) {
+function EditorStyles( { styles, scope } ) {
 	const overrides = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
 		[]
@@ -124,3 +124,5 @@ export default function EditorStyles( { styles, scope } ) {
 		</>
 	);
 }
+
+export default memo( EditorStyles );

package/src/components/global-styles/advanced-panel.js

@@ -28,9 +28,12 @@ export default function AdvancedPanel( {
 			css: newValue,
 		} );
 		if ( cssError ) {
+			// Check if the new value is valid CSS, and pass a wrapping selector
+			// to ensure that `transformStyles` validates the CSS. Note that the
+			// wrapping selector here is not used in the actual output of any styles.
 			const [ transformed ] = transformStyles(
 				[ { css: newValue } ],
-				'.editor-styles-wrapper'
+				'.for-validation-only'
 			);
 			if ( transformed ) {
 				setCSSError( null );
@@ -43,9 +46,12 @@ export default function AdvancedPanel( {
 			return;
 		}
 
+		// Check if the new value is valid CSS, and pass a wrapping selector
+		// to ensure that `transformStyles` validates the CSS. Note that the
+		// wrapping selector here is not used in the actual output of any styles.
 		const [ transformed ] = transformStyles(
 			[ { css: event.target.value } ],
-			'.editor-styles-wrapper'
+			'.for-validation-only'
 		);
 
 		setCSSError(