@wordpress/block-editor 12.22.0 → 12.23.0

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

@@ -112,7 +112,10 @@ function BlockListBlock( {
 		...context
 	} = useContext( PrivateBlockContext );
 	const { removeBlock } = useDispatch( blockEditorStore );
-	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
+	const onRemove = useCallback(
+		() => removeBlock( clientId ),
+		[ clientId, removeBlock ]
+	);
 
 	const parentLayout = useLayout() || {};
 
@@ -222,6 +225,11 @@ function BlockListBlock( {
 	// We set a new context with the adjusted and filtered wrapperProps (through
 	// `editor.BlockListBlock`), which the `BlockListBlockProvider` did not have
 	// access to.
+	// Note that the context value doesn't have to be memoized in this case
+	// because when it changes, this component will be re-rendered anyway, and
+	// none of the consumers (BlockListBlock and useBlockProps) are memoized or
+	// "pure". This is different from the public BlockEditContext, where
+	// consumers might be memoized or "pure".
 	return (
 		<PrivateBlockContext.Provider
 			value={ {
@@ -451,8 +459,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else {
-					removeBlock( clientId );
+				} else if (
+					getBlockName( clientId ) !== getDefaultBlockName()
+				) {
+					const replacement = switchToBlockType(
+						getBlock( clientId ),
+						getDefaultBlockName()
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
 				}
 			}
 		},

package/src/components/block-mover/button.js

@@ -65,6 +65,7 @@ const BlockMoverButton = forwardRef(
 			? clientIds
 			: [ clientIds ];
 		const blocksCount = normalizedClientIds.length;
+		const { disabled } = props;
 
 		const {
 			blockType,
@@ -98,7 +99,9 @@ const BlockMoverButton = forwardRef(
 
 				return {
 					blockType: block ? getBlockType( block.name ) : null,
-					isDisabled: direction === 'up' ? isFirstBlock : isLastBlock,
+					isDisabled:
+						disabled ||
+						( direction === 'up' ? isFirstBlock : isLastBlock ),
 					rootClientId: blockRootClientId,
 					firstIndex: firstBlockIndex,
 					isFirst: isFirstBlock,

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

@@ -19,7 +19,12 @@ import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 import { store as blockEditorStore } from '../../store';
 
-function BlockMover( { clientIds, hideDragHandle } ) {
+function BlockMover( {
+	clientIds,
+	hideDragHandle,
+	isBlockMoverUpButtonDisabled,
+	isBlockMoverDownButtonDisabled,
+} ) {
 	const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
 		( select ) => {
 			const {
@@ -83,6 +88,7 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverUpButton
+							disabled={ isBlockMoverUpButtonDisabled }
 							clientIds={ clientIds }
 							{ ...itemProps }
 						/>
@@ -91,6 +97,7 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverDownButton
+							disabled={ isBlockMoverDownButtonDisabled }
 							clientIds={ clientIds }
 							{ ...itemProps }
 						/>

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

@@ -45,6 +45,7 @@ function BlockPattern( {
 	pattern,
 	onClick,
 	onHover,
+	showTitle = true,
 	showTooltip,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -122,25 +123,27 @@ function BlockPattern( {
 								viewportWidth={ viewportWidth }
 							/>
 
-							<HStack className="block-editor-patterns__pattern-details">
-								{ pattern.type ===
-									INSERTER_PATTERN_TYPES.user &&
-									! pattern.syncStatus && (
-										<div className="block-editor-patterns__pattern-icon-wrapper">
-											<Icon
-												className="block-editor-patterns__pattern-icon"
-												icon={ symbol }
-											/>
+							{ showTitle && (
+								<HStack className="block-editor-patterns__pattern-details">
+									{ pattern.type ===
+										INSERTER_PATTERN_TYPES.user &&
+										! pattern.syncStatus && (
+											<div className="block-editor-patterns__pattern-icon-wrapper">
+												<Icon
+													className="block-editor-patterns__pattern-icon"
+													icon={ symbol }
+												/>
+											</div>
+										) }
+									{ ( ! showTooltip ||
+										pattern.type ===
+											INSERTER_PATTERN_TYPES.user ) && (
+										<div className="block-editor-block-patterns-list__item-title">
+											{ pattern.title }
 										</div>
 									) }
-								{ ( ! showTooltip ||
-									pattern.type ===
-										INSERTER_PATTERN_TYPES.user ) && (
-									<div className="block-editor-block-patterns-list__item-title">
-										{ pattern.title }
-									</div>
-								) }
-							</HStack>
+								</HStack>
+							) }
 
 							{ !! pattern.description && (
 								<VisuallyHidden id={ descriptionId }>
@@ -170,6 +173,7 @@ function BlockPatternsList(
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
+		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
 	},
@@ -203,6 +207,7 @@ function BlockPatternsList(
 						onClick={ onClickPattern }
 						onHover={ onHover }
 						isDraggable={ isDraggable }
+						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
 					/>
 				) : (

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

@@ -48,3 +48,31 @@
 	bottom: 0;
 	z-index: 1;
 }
+
+// Restrict these shadows to the context of the inspector.
+.interface-interface-skeleton__sidebar {
+	.block-editor-block-patterns-list__list-item {
+		.block-editor-block-preview__container {
+			box-shadow: 0 0 $border-width rgba($black, 0.1);
+		}
+		&:hover {
+			.block-editor-block-preview__container {
+				box-shadow: 0 0 0 2px $gray-900;
+			}
+		}
+	}
+}
+
+// Restrict these shadows to the context of the inserter.
+.editor-inserter-sidebar {
+	.block-editor-block-patterns-list__list-item {
+		.block-editor-block-preview__container {
+			box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
+		}
+		&:hover {
+			.block-editor-block-preview__container {
+				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+			}
+		}
+	}
+}

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

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

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-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,9 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				hasBlockMovingClientId,
 				getBlockListSettings,
 				__unstableGetEditorMode,
+				getNextBlockClientId,
+				getPreviousBlockClientId,
+				canRemoveBlock,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
 				select( blocksStore );
@@ -69,6 +72,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 +103,34 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					index + 1,
 					orientation
 				),
+				isBlockTemplatePart,
+				isNextBlockTemplatePart,
+				isPrevBlockTemplatePart,
+				canRemove: canRemoveBlock( clientId, rootClientId ),
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { label, icon, blockMovingMode, editorMode } = selected;
+	const {
+		label,
+		icon,
+		blockMovingMode,
+		editorMode,
+		isBlockTemplatePart,
+		isNextBlockTemplatePart,
+		isPrevBlockTemplatePart,
+		canRemove,
+	} = 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 {
@@ -252,8 +289,17 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					<BlockIcon icon={ icon } showColors />
 				</FlexItem>
 				<FlexItem>
-					{ editorMode === 'zoom-out' && (
-						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+					{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
+						<BlockMover
+							clientIds={ [ clientId ] }
+							hideDragHandle
+							isBlockMoverUpButtonDisabled={
+								isPrevBlockTemplatePart
+							}
+							isBlockMoverDownButtonDisabled={
+								isNextBlockTemplatePart
+							}
+						/>
 					) }
 					{ editorMode === 'navigation' && (
 						<BlockDraggable clientIds={ [ clientId ] }>
@@ -275,6 +321,17 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				{ editorMode === 'zoom-out' && (
 					<Shuffle clientId={ clientId } as={ Button } />
 				) }
+				{ canRemove &&
+					editorMode === 'zoom-out' &&
+					! isBlockTemplatePart && (
+						<ToolbarButton
+							icon={ trash }
+							label="Delete"
+							onClick={ () => {
+								removeBlock( clientId );
+							} }
+						/>
+					) }
 				<FlexItem>
 					<Button
 						ref={ ref }

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/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/default-block-appender/content.scss

@@ -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/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(