@wordpress/block-editor 12.2.0 → 12.3.1

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

@@ -345,6 +345,7 @@ function BlockListBlock( {
 							isSelectionEnabled={ isSelectionEnabled }
 							mergeBlocks={ canRemove ? onMerge : undefined }
 							name={ name }
+							onDeleteBlock={ onDeleteBlock }
 							onFocus={ onFocus }
 							onRemove={ canRemove ? onRemove : undefined }
 							onReplace={ canRemove ? onReplace : undefined }

package/src/components/block-list/content.scss

@@ -161,15 +161,6 @@
 	padding: 0;
 }
 
-.block-editor-block-list__layout,
-.block-editor-block-list__block {
-	pointer-events: initial;
-
-	&.is-editing-disabled {
-		pointer-events: none;
-	}
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block {
 	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
 	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
@@ -178,12 +169,17 @@
 	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 
-	// Re-enable text-selection on editable blocks.
-	user-select: text;
-
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
+	pointer-events: auto;
+	user-select: text;
+
+	&.is-editing-disabled {
+		pointer-events: none;
+		user-select: none;
+	}
+
 	.reusable-block-edit-panel * {
 		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
 	}

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

@@ -142,7 +142,7 @@ function Items( {
 	rootClientId,
 	renderAppender,
 	__experimentalAppenderTagName,
-	__experimentalLayout: layout = defaultLayout,
+	layout = defaultLayout,
 } ) {
 	const { order, selectedBlocks, visibleBlocks } = useSelect(
 		( select ) => {

package/src/components/block-list/use-block-props/index.js

@@ -36,6 +36,7 @@ import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
 import useBlockOverlayActive from '../../block-content-overlay';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * If the block count exceeds the threshold, we disable the reordering animation
@@ -75,6 +76,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isPartOfSelection,
 		adjustScrolling,
 		enableAnimation,
+		isSubtreeDisabled,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -88,7 +90,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isBlockMultiSelected,
 				isAncestorMultiSelected,
 				isFirstMultiSelectedBlock,
-			} = select( blockEditorStore );
+				isBlockSubtreeDisabled,
+			} = unlock( select( blockEditorStore ) );
 			const { getActiveBlockVariation } = select( blocksStore );
 			const isSelected = isBlockSelected( clientId );
 			const isPartOfMultiSelection =
@@ -111,6 +114,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				enableAnimation:
 					! isTyping() &&
 					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
+				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
 			};
 		},
 		[ clientId ]
@@ -158,6 +162,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,
+		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: classnames(
 			// The wp-block className is important for editor styles.
 			classnames( 'block-editor-block-list__block', {

package/src/components/block-list/use-in-between-inserter.js

@@ -23,9 +23,7 @@ export function useInBetweenInserter() {
 	);
 	const {
 		getBlockListSettings,
-		getBlockRootClientId,
 		getBlockIndex,
-		isBlockInsertionPointVisible,
 		isMultiSelecting,
 		getSelectedBlockClientIds,
 		getTemplateLock,
@@ -172,9 +170,7 @@ export function useInBetweenInserter() {
 		[
 			openRef,
 			getBlockListSettings,
-			getBlockRootClientId,
 			getBlockIndex,
-			isBlockInsertionPointVisible,
 			isMultiSelecting,
 			showInsertionPoint,
 			hideInsertionPoint,

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

@@ -15,6 +15,7 @@ import { getDefaultBlockName } from '@wordpress/blocks';
 import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function DefaultAppender( { rootClientId } ) {
 	const canInsertDefaultBlock = useSelect( ( select ) =>
@@ -40,42 +41,51 @@ function DefaultAppender( { rootClientId } ) {
 }
 
 function useAppender( rootClientId, CustomAppender ) {
-	const { hideInserter, isParentSelected } = useSelect(
+	const isVisible = useSelect(
 		( select ) => {
 			const {
 				getTemplateLock,
 				getSelectedBlockClientId,
 				__unstableGetEditorMode,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 
-			const selectedBlockClientId = getSelectedBlockClientId();
+			if ( CustomAppender === false ) {
+				return false;
+			}
 
-			return {
-				hideInserter:
-					!! getTemplateLock( rootClientId ) ||
-					__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 ) {
-		return null;
-	}
-
-	if ( CustomAppender ) {
-		// Prefer custom render prop if provided.
-		return <CustomAppender />;
-	}
-
-	if ( ! isParentSelected ) {
+	if ( ! isVisible ) {
 		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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useReducer } from '@wordpress/element';
 import { lock } from '@wordpress/icons';
@@ -11,10 +11,8 @@ import { lock } from '@wordpress/icons';
  */
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
-import useBlockDisplayInformation from '../use-block-display-information';
 
 export default function BlockLockToolbar( { clientId } ) {
-	const blockInformation = useBlockDisplayInformation( clientId );
 	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
@@ -35,11 +33,7 @@ export default function BlockLockToolbar( { clientId } ) {
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
 					icon={ lock }
-					label={ sprintf(
-						/* translators: %s: block name */
-						__( 'Unlock %s' ),
-						blockInformation.title
-					) }
+					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
 				/>
 			</ToolbarGroup>

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>
+	);
+}