@wordpress/block-editor 12.3.0 → 12.3.2

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

@@ -41,7 +41,7 @@ function DefaultAppender( { rootClientId } ) {
 }
 
 function useAppender( rootClientId, CustomAppender ) {
-	const { hideInserter, isParentSelected } = useSelect(
+	const isVisible = useSelect(
 		( select ) => {
 			const {
 				getTemplateLock,
@@ -50,35 +50,42 @@ function useAppender( rootClientId, CustomAppender ) {
 				getBlockEditingMode,
 			} = unlock( select( blockEditorStore ) );
 
-			const selectedBlockClientId = getSelectedBlockClientId();
+			if ( CustomAppender === false ) {
+				return false;
+			}
 
-			return {
-				hideInserter:
-					!! getTemplateLock( rootClientId ) ||
-					getBlockEditingMode( rootClientId ) === 'disabled' ||
-					__unstableGetEditorMode() === 'zoom-out',
-				isParentSelected:
+			if ( ! CustomAppender ) {
+				const selectedBlockClientId = getSelectedBlockClientId();
+				const isParentSelected =
 					rootClientId === selectedBlockClientId ||
-					( ! rootClientId && ! selectedBlockClientId ),
-			};
+					( ! rootClientId && ! selectedBlockClientId );
+				if ( ! isParentSelected ) {
+					return false;
+				}
+			}
+
+			if (
+				getTemplateLock( rootClientId ) ||
+				getBlockEditingMode( rootClientId ) === 'disabled' ||
+				__unstableGetEditorMode() === 'zoom-out'
+			) {
+				return false;
+			}
+
+			return true;
 		},
-		[ rootClientId ]
+		[ rootClientId, CustomAppender ]
 	);
 
-	if ( hideInserter || CustomAppender === false ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 
-	if ( CustomAppender ) {
-		// Prefer custom render prop if provided.
-		return <CustomAppender />;
-	}
-
-	if ( ! isParentSelected ) {
-		return null;
-	}
-
-	return <DefaultAppender rootClientId={ rootClientId } />;
+	return CustomAppender ? (
+		<CustomAppender />
+	) : (
+		<DefaultAppender rootClientId={ rootClientId } />
+	);
 }
 
 function BlockListAppender( {

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

@@ -52,10 +52,17 @@
 .block-editor-block-lock-toolbar {
 	.components-button.has-icon {
 		min-width: $button-size-small + $grid-unit-15 !important;
-		padding-left: 0 !important;
+	}
+}
 
-		&:focus::before {
-			right: $grid-unit-10 !important;
-		}
+.block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
+	margin-left: -$grid-unit-15 * 0.5 !important;
+}
+
+.show-icon-labels {
+	.block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
+		border-left: 1px solid $gray-900;
+		margin-left: $grid-unit-15 * 0.5 !important;
+		margin-right: -$grid-unit-15 * 0.5;
 	}
 }

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

@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useReducer } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
+import { useReducer, useRef, useEffect } from '@wordpress/element';
 import { lock } from '@wordpress/icons';
 
 /**
@@ -12,7 +13,7 @@ import { lock } from '@wordpress/icons';
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
 
-export default function BlockLockToolbar( { clientId } ) {
+export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
@@ -20,11 +21,37 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	if ( ! canLock ) {
-		return null;
-	}
+	const lockButtonRef = useRef( null );
+	const isFirstRender = useRef( true );
+
+	const shouldHideBlockLockUI =
+		! canLock || ( canEdit && canMove && canRemove );
+
+	// Restore focus manually on the first focusable element in the toolbar
+	// when the block lock modal is closed and the block is not locked anymore.
+	// See https://github.com/WordPress/gutenberg/issues/51447
+	useEffect( () => {
+		if ( isFirstRender.current ) {
+			isFirstRender.current = false;
+			return;
+		}
+
+		if ( ! isModalOpen && shouldHideBlockLockUI ) {
+			focus.focusable
+				.find( wrapperRef.current, {
+					sequential: false,
+				} )
+				.find(
+					( element ) =>
+						element.tagName === 'BUTTON' &&
+						element !== lockButtonRef.current
+				)
+				?.focus();
+		}
+		// wrapperRef is a reference object and should be stable
+	}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );
 
-	if ( canEdit && canMove && canRemove ) {
+	if ( shouldHideBlockLockUI ) {
 		return null;
 	}
 
@@ -35,6 +62,7 @@ export default function BlockLockToolbar( { clientId } ) {
 					icon={ lock }
 					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
+					ref={ lockButtonRef }
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -156,7 +156,7 @@ const BlockActionsMenu = ( {
 		},
 		copyButton: {
 			id: 'copyButtonOption',
-			label: __( 'Copy block' ),
+			label: __( 'Copy' ),
 			value: 'copyButtonOption',
 			onSelect: () => {
 				const serializedBlock = serialize(

package/src/components/block-mobile-toolbar/test/block-actions-menu.native.js

@@ -246,7 +246,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
 
 			// Tap on the Copy button
-			fireEvent.press( getByLabelText( /Copy block/ ) );
+			fireEvent.press( getByLabelText( /Copy/ ) );
 
 			// Get Paragraph block
 			paragraphBlock = await getBlock( screen, 'Paragraph' );
@@ -293,7 +293,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
 
 			// Tap on the Copy button
-			fireEvent.press( getByLabelText( /Copy block/ ) );
+			fireEvent.press( getByLabelText( /Copy/ ) );
 
 			// Get Paragraph block
 			paragraphBlock = await getBlock( screen, 'Paragraph' );

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -42,7 +42,7 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 <!-- /wp:spacer -->"
 `;
 
-exports[`Block Mover Picker should match snapshot 1`] = `
+exports[`Block Mover Picker should render without crashing and match snapshot 1`] = `
 [
   <View>
     <View
@@ -76,7 +76,7 @@ exports[`Block Mover Picker should match snapshot 1`] = `
     >
       <View
         collapsable={false}
-        handlerTag={3}
+        handlerTag={1}
         handlerType="LongPressGestureHandler"
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
@@ -144,7 +144,7 @@ exports[`Block Mover Picker should match snapshot 1`] = `
     >
       <View
         collapsable={false}
-        handlerTag={4}
+        handlerTag={2}
         handlerType="LongPressGestureHandler"
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}

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

@@ -24,26 +24,7 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 import { BlockMover } from '../index';
 
 describe( 'Block Mover Picker', () => {
-	it( 'renders without crashing', () => {
-		const props = {
-			isFirst: false,
-			isLast: true,
-			canMove: true,
-			numberOfBlocks: 2,
-			firstIndex: 1,
-
-			onMoveDown: jest.fn(),
-			onMoveUp: jest.fn(),
-			onLongPress: jest.fn(),
-
-			rootClientId: '',
-			isStackedHorizontally: true,
-		};
-		const screen = render( <BlockMover { ...props } /> );
-		expect( screen.container ).toBeTruthy();
-	} );
-
-	it( 'should match snapshot', () => {
+	it( 'should render without crashing and match snapshot', () => {
 		const props = {
 			isFirst: false,
 			isLast: true,

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

@@ -101,18 +101,14 @@ export default memo( BlockPreview );
  * returns. Optionally, you can also pass any other props through this hook, and
  * they will be merged and returned.
  *
- * @param {Object}    options                      Preview options.
- * @param {WPBlock[]} options.blocks               Block objects.
- * @param {Object}    options.props                Optional. Props to pass to the element. Must contain
- *                                                 the ref if one is defined.
- * @param {Object}    options.__experimentalLayout Layout settings to be used in the preview.
+ * @param {Object}    options        Preview options.
+ * @param {WPBlock[]} options.blocks Block objects.
+ * @param {Object}    options.props  Optional. Props to pass to the element. Must contain
+ *                                   the ref if one is defined.
+ * @param {Object}    options.layout Layout settings to be used in the preview.
  *
  */
-export function useBlockPreview( {
-	blocks,
-	props = {},
-	__experimentalLayout,
-} ) {
+export function useBlockPreview( { blocks, props = {}, layout } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -133,10 +129,7 @@ export function useBlockPreview( {
 			value={ renderedBlocks }
 			settings={ settings }
 		>
-			<BlockListItems
-				renderAppender={ false }
-				__experimentalLayout={ __experimentalLayout }
-			/>
+			<BlockListItems renderAppender={ false } layout={ layout } />
 		</ExperimentalBlockEditorProvider>
 	);
 

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

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	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';
+
+export default function BlockQuickNavigation( { clientIds } ) {
+	if ( ! clientIds.length ) {
+		return null;
+	}
+	return (
+		<VStack spacing={ 1 }>
+			{ clientIds.map( ( clientId ) => (
+				<BlockQuickNavigationItem
+					key={ clientId }
+					clientId={ clientId }
+				/>
+			) ) }
+		</VStack>
+	);
+}
+
+function BlockQuickNavigationItem( { clientId } ) {
+	const { name, icon, isSelected } = useSelect(
+		( select ) => {
+			const {
+				getBlockName,
+				getBlockAttributes,
+				isBlockSelected,
+				hasSelectedInnerBlock,
+			} = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+
+			const blockType = getBlockType( getBlockName( clientId ) );
+			const attributes = getBlockAttributes( clientId );
+
+			return {
+				name:
+					blockType &&
+					__experimentalGetBlockLabel(
+						blockType,
+						attributes,
+						'list-view'
+					),
+				icon: blockType?.icon,
+				isSelected:
+					isBlockSelected( clientId ) ||
+					hasSelectedInnerBlock( clientId, /* deep: */ true ),
+			};
+		},
+		[ clientId ]
+	);
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	return (
+		<Button
+			isPressed={ isSelected }
+			onClick={ () => selectBlock( clientId ) }
+		>
+			<HStack justify="flex-start">
+				<BlockIcon icon={ icon } />
+				<FlexItem>{ name }</FlexItem>
+			</HStack>
+		</Button>
+	);
+}

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

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+// In certain editing contexts, we'd like to prevent accidental removal of
+// important blocks. For example, in the site editor, the Query Loop block is
+// deemed important. In such cases, we'll ask the user for confirmation that
+// they intended to remove such block(s).
+//
+// @see https://github.com/WordPress/gutenberg/pull/51145
+export const blockTypePromptMessages = {
+	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
+	'core/post-content': __(
+		'Post Content displays the content of a post or page.'
+	),
+};
+
+export function BlockRemovalWarningModal() {
+	const { clientIds, selectPrevious, blockNamesForPrompt } = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getRemovalPromptData()
+	);
+
+	const {
+		clearRemovalPrompt,
+		toggleRemovalPromptSupport,
+		privateRemoveBlocks,
+	} = unlock( useDispatch( blockEditorStore ) );
+
+	// Signalling the removal prompt is in place.
+	useEffect( () => {
+		toggleRemovalPromptSupport( true );
+		return () => {
+			toggleRemovalPromptSupport( false );
+		};
+	}, [ toggleRemovalPromptSupport ] );
+
+	if ( ! blockNamesForPrompt ) {
+		return;
+	}
+
+	const onConfirmRemoval = () => {
+		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
+		clearRemovalPrompt();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Are you sure?' ) }
+			onRequestClose={ clearRemovalPrompt }
+		>
+			{ blockNamesForPrompt.length === 1 ? (
+				<p>{ blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }</p>
+			) : (
+				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
+					{ blockNamesForPrompt.map( ( name ) => (
+						<li key={ name }>
+							{ blockTypePromptMessages[ name ] }
+						</li>
+					) ) }
+				</ul>
+			) }
+			<p>
+				{ _n(
+					'Removing this block is not advised.',
+					'Removing these blocks is not advised.',
+					blockNamesForPrompt.length
+				) }
+			</p>
+			<HStack justify="right">
+				<Button variant="tertiary" onClick={ clearRemovalPrompt }>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button variant="primary" onClick={ onConfirmRemoval }>
+					{ __( 'Delete' ) }
+				</Button>
+			</HStack>
+		</Modal>
+	);
+}

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

@@ -35,14 +35,13 @@ import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 function CopyMenuItem( { blocks, onCopy, label } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
 	const copyMenuItemBlocksLabel =
-		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
+		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy' );
 	const copyMenuItemLabel = label ? label : copyMenuItemBlocksLabel;
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
@@ -190,6 +189,7 @@ export function BlockSettingsDropdown( {
 			__experimentalUpdateSelection={ ! __experimentalSelectBlock }
 		>
 			{ ( {
+				canCopyStyles,
 				canDuplicate,
 				canInsertDefaultBlock,
 				canMove,
@@ -331,16 +331,18 @@ export function BlockSettingsDropdown( {
 									</>
 								) }
 							</MenuGroup>
-							<MenuGroup>
-								<CopyMenuItem
-									blocks={ blocks }
-									onCopy={ onCopy }
-									label={ __( 'Copy styles' ) }
-								/>
-								<MenuItem onClick={ onPasteStyles }>
-									{ __( 'Paste styles' ) }
-								</MenuItem>
-							</MenuGroup>
+							{ canCopyStyles && (
+								<MenuGroup>
+									<CopyMenuItem
+										blocks={ blocks }
+										onCopy={ onCopy }
+										label={ __( 'Copy styles' ) }
+									/>
+									<MenuItem onClick={ onPasteStyles }>
+										{ __( 'Paste styles' ) }
+									</MenuItem>
+								</MenuGroup>
+							) }
 							<BlockSettingsMenuControls.Slot
 								fillProps={ {
 									onClose,

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

@@ -196,8 +196,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						className="block-editor-block-switcher"
 						label={ blockSwitcherLabel }
 						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
+							placement: 'bottom-start',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={

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

@@ -78,6 +78,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		};
 	}, [] );
 
+	const toolbarWrapperRef = useRef( null );
+
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
@@ -123,18 +125,19 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	} );
 
 	return (
-		<div className={ classes }>
+		<div className={ classes } ref={ toolbarWrapperRef }>
 			{ ! isMultiToolbar &&
 				isLargeViewport &&
 				blockEditingMode === 'default' && <BlockParentSelector /> }
-			<div ref={ nodeRef } { ...showMoversGestures }>
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					blockEditingMode === 'default' && (
+			{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+				blockEditingMode === 'default' && (
+					<div ref={ nodeRef } { ...showMoversGestures }>
 						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 							<BlockSwitcher clientIds={ blockClientIds } />
 							{ ! isMultiToolbar && (
 								<BlockLockToolbar
 									clientId={ blockClientIds[ 0 ] }
+									wrapperRef={ toolbarWrapperRef }
 								/>
 							) }
 							<BlockMover
@@ -142,8 +145,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 								hideDragHandle={ hideDragHandle }
 							/>
 						</ToolbarGroup>
-					) }
-			</div>
+					</div>
+				) }
 			{ shouldShowVisualToolbar && isMultiToolbar && (
 				<BlockGroupToolbar />
 			) }

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

@@ -110,10 +110,6 @@
 		}
 	}
 
-	.block-editor-block-lock-toolbar {
-		margin-left: -$grid-unit-15 * 0.5 !important;
-	}
-
 	// @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 {

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

@@ -59,6 +59,7 @@ export default function BlockTools( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		clearSelectedBlock,
+		selectBlock,
 		moveBlocksUp,
 		moveBlocksDown,
 	} = useDispatch( blockEditorStore );
@@ -108,7 +109,15 @@ export default function BlockTools( {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				clearSelectedBlock();
+
+				// If there is more than one block selected, select the first
+				// 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.
+				if ( clientIds.length > 1 ) {
+					selectBlock( clientIds[ 0 ] );
+				} else {
+					clearSelectedBlock();
+				}
 				event.target.ownerDocument.defaultView
 					.getSelection()
 					.removeAllRanges();

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

@@ -121,6 +121,10 @@
 		}
 	}
 
+	&:has(.block-editor-block-toolbar:empty) {
+		display: none;
+	}
+
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
 

package/src/components/block-vertical-alignment-control/ui.js

@@ -57,9 +57,7 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar
-		? { isCollapsed }
-		: { popoverProps: { variant: 'toolbar' } };
+	const extraProps = isToolbar ? { isCollapsed } : {};
 
 	return (
 		<UIComponent

package/src/components/colors/utils.js

@@ -1,11 +1,15 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
 
+/**
+ * Internal dependencies
+ */
+import { kebabCase } from '../../utils/object';
+
 extend( [ namesPlugin, a11yPlugin ] );
 
 /**

package/src/components/colors/with-colors.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,6 +14,7 @@ import {
 	getMostReadableColor,
 } from './utils';
 import useSetting from '../use-setting';
+import { kebabCase } from '../../utils/object';
 
 /**
  * Capitalizes the first letter in a string.