@wordpress/block-editor 12.1.0 → 12.3.0

package/src/components/block-controls/slot.native.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalToolbarContext as ToolbarContext,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 import warning from '@wordpress/warning';
 
 /**
@@ -14,7 +10,6 @@ import warning from '@wordpress/warning';
 import groups from './groups';
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
 		warning( `Unknown BlockControls group "${ group }" provided.` );
@@ -22,11 +17,11 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	}
 
 	if ( group === 'default' ) {
-		return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+		return <Slot { ...props } />;
 	}
 
 	return (
-		<Slot { ...props } fillProps={ accessibleToolbarState }>
+		<Slot { ...props }>
 			{ ( fills ) => {
 				if ( ! fills.length ) {
 					return null;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
@@ -24,6 +24,7 @@ const BlockDraggable = ( {
 		( select ) => {
 			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
 				select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
 

package/src/components/block-edit/test/edit.js

@@ -107,7 +107,7 @@ describe( 'Edit', () => {
 		it( 'should assign context', () => {
 			const edit = ( { context } ) => context.value;
 			registerBlockType( 'core/test-block', {
-				apiVersion: 2,
+				apiVersion: 3,
 				category: 'text',
 				title: 'block title',
 				usesContext: [ 'value' ],

package/src/components/block-editing-mode/index.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useContext, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { BlockListBlockContext } from '../block-list/block-list-block-context';
+
+/**
+ * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
+ */
+
+/**
+ * Allows a block to restrict the user interface that is displayed for editing
+ * that block and its inner blocks.
+ *
+ * @example
+ * ```js
+ * function MyBlock( { attributes, setAttributes } ) {
+ *     useBlockEditingMode( 'disabled' );
+ *     return <div { ...useBlockProps() }></div>;
+ * }
+ * ```
+ *
+ * `mode` can be one of three options:
+ *
+ * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
+ *   selected.
+ * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
+ *   toolbar, the block movers, block settings.
+ * - `'default'`: Allows editing the block as normal.
+ *
+ * The mode is inherited by all of the block's inner blocks, unless they have
+ * their own mode.
+ *
+ * If called outside of a block context, the mode is applied to all blocks.
+ *
+ * @param {?BlockEditingMode} mode The editing mode to apply. If undefined, the
+ *                                 current editing mode is not changed.
+ *
+ * @return {BlockEditingMode} The current editing mode.
+ */
+export function useBlockEditingMode( mode ) {
+	const { clientId = '' } = useContext( BlockListBlockContext ) ?? {};
+	const blockEditingMode = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getBlockEditingMode(
+				clientId
+			),
+		[ clientId ]
+	);
+	const { setBlockEditingMode, unsetBlockEditingMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	useEffect( () => {
+		if ( mode ) {
+			setBlockEditingMode( clientId, mode );
+		}
+		return () => {
+			if ( mode ) {
+				unsetBlockEditingMode( clientId );
+			}
+		};
+	}, [ clientId, mode ] );
+	return blockEditingMode;
+}

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

@@ -356,6 +356,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						</div>
 					) }
 					<InspectorControls.Slot />
+					<InspectorControls.Slot group="list" />
 					<InspectorControls.Slot
 						group="color"
 						label={ __( 'Color' ) }

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

@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const BlockListBlockContext = createContext( null );

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

@@ -6,19 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useMemo,
-	useCallback,
-	RawHTML,
-} from '@wordpress/element';
+import { useMemo, useCallback, RawHTML } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
 	serializeRawBlock,
 	switchToBlockType,
-	store as blocksStore,
 	getDefaultBlockName,
 	isUnmodifiedBlock,
 } from '@wordpress/blocks';
@@ -43,7 +37,8 @@ import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
-export const BlockListBlockContext = createContext();
+import { unlock } from '../../lock-unlock';
+import { BlockListBlockContext } from './block-list-block-context';
 
 /**
  * Merges wrapper props with special handling for classNames and styles.
@@ -99,35 +94,23 @@ function BlockListBlock( {
 } ) {
 	const {
 		themeSupportsLayout,
-		hasContentLockedParent,
-		isContentBlock,
-		isContentLocking,
 		isTemporarilyEditingAsBlocks,
+		blockEditingMode,
 	} = useSelect(
 		( select ) => {
 			const {
 				getSettings,
-				__unstableGetContentLockingParent,
-				getTemplateLock,
 				__unstableGetTemporarilyEditingAsBlocks,
-			} = select( blockEditorStore );
-			const _hasContentLockedParent =
-				!! __unstableGetContentLockingParent( clientId );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			return {
 				themeSupportsLayout: getSettings().supportsLayout,
-				isContentBlock:
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					),
-				hasContentLockedParent: _hasContentLockedParent,
-				isContentLocking:
-					getTemplateLock( clientId ) === 'contentOnly' &&
-					! _hasContentLockedParent,
 				isTemporarilyEditingAsBlocks:
 					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+				blockEditingMode: getBlockEditingMode( clientId ),
 			};
 		},
-		[ name, clientId ]
+		[ clientId ]
 	);
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
@@ -160,7 +143,7 @@ function BlockListBlock( {
 
 	const blockType = getBlockType( name );
 
-	if ( hasContentLockedParent && ! isContentBlock ) {
+	if ( blockEditingMode === 'disabled' ) {
 		wrapperProps = {
 			...wrapperProps,
 			tabIndex: -1,
@@ -234,10 +217,9 @@ function BlockListBlock( {
 		clientId,
 		className: classnames(
 			{
-				'is-content-locked': isContentLocking,
+				'is-editing-disabled': blockEditingMode === 'disabled',
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
-				'is-content-block': hasContentLockedParent && isContentBlock,
 			},
 			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
 			className
@@ -376,26 +358,26 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				) {
 					removeBlock( _clientId );
 				} else {
-					if (
-						canInsertBlockType(
-							getBlockName( firstClientId ),
-							targetRootClientId
-						)
-					) {
-						moveBlocksToPosition(
-							[ firstClientId ],
-							_clientId,
-							targetRootClientId,
-							getBlockIndex( _clientId )
-						);
-					} else {
-						const replacement = switchToBlockType(
-							getBlock( firstClientId ),
-							getDefaultBlockName()
-						);
-
-						if ( replacement && replacement.length ) {
-							registry.batch( () => {
+					registry.batch( () => {
+						if (
+							canInsertBlockType(
+								getBlockName( firstClientId ),
+								targetRootClientId
+							)
+						) {
+							moveBlocksToPosition(
+								[ firstClientId ],
+								_clientId,
+								targetRootClientId,
+								getBlockIndex( _clientId )
+							);
+						} else {
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if ( replacement && replacement.length ) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -403,16 +385,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 									changeSelection
 								);
 								removeBlock( firstClientId, false );
-							} );
+							}
 						}
-					}
 
-					if (
-						! getBlockOrder( _clientId ).length &&
-						isUnmodifiedBlock( getBlock( _clientId ) )
-					) {
-						removeBlock( _clientId, false );
-					}
+						if (
+							! getBlockOrder( _clientId ).length &&
+							isUnmodifiedBlock( getBlock( _clientId ) )
+						) {
+							removeBlock( _clientId, false );
+						}
+					} );
 				}
 			}
 

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

@@ -162,7 +162,6 @@ function BlockListBlock( {
 		blockType,
 		draggingClientId,
 		draggingEnabled,
-		firstToSelectId,
 		isDescendantOfParentSelected,
 		isDescendentBlockSelected,
 		isParentSelected,
@@ -174,7 +173,6 @@ function BlockListBlock( {
 				getBlockHierarchyRootClientId,
 				getBlockIndex,
 				getBlockParents,
-				getLowestCommonAncestorWithSelectedBlock,
 				getSelectedBlockClientId,
 				getSettings,
 				hasSelectedInnerBlock,
@@ -198,13 +196,6 @@ function BlockListBlock( {
 				selectedParents.includes( rootClientId );
 			const hasInnerBlocks = getBlockCount( clientId ) > 0;
 
-			const commonAncestor =
-				getLowestCommonAncestorWithSelectedBlock( clientId );
-			const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
-			const firstBlockToSelectId = commonAncestor
-				? parents[ commonAncestorIndex ]
-				: parents[ parents.length - 1 ];
-
 			// For blocks with inner blocks, we only enable the dragging in the nested
 			// blocks if any of them are selected. This way we prevent the long-press
 			// gesture from being disabled for elements within the block UI.
@@ -223,7 +214,6 @@ function BlockListBlock( {
 				blockType: currentBlockType,
 				draggingClientId: currentDraggingClientId,
 				draggingEnabled: isDraggingEnabled,
-				firstToSelectId: firstBlockToSelectId,
 				isDescendantOfParentSelected: descendantOfParentSelected,
 				isDescendentBlockSelected: descendentBlockSelected,
 				isParentSelected: parentSelected,
@@ -245,11 +235,10 @@ function BlockListBlock( {
 		[ clientId, removeBlock ]
 	);
 	const onFocus = useCallback( () => {
-		const blockId = firstToSelectId ?? clientId;
 		if ( ! isSelected ) {
-			selectBlock( blockId );
+			selectBlock( clientId );
 		}
-	}, [ selectBlock, clientId, firstToSelectId, isSelected ] );
+	}, [ selectBlock, clientId, isSelected ] );
 
 	const onLayout = useCallback(
 		( { nativeEvent } ) => {
@@ -492,26 +481,26 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				) {
 					removeBlock( _clientId );
 				} else {
-					if (
-						canInsertBlockType(
-							getBlockName( firstClientId ),
-							targetRootClientId
-						)
-					) {
-						moveBlocksToPosition(
-							[ firstClientId ],
-							_clientId,
-							targetRootClientId,
-							getBlockIndex( _clientId )
-						);
-					} else {
-						const replacement = switchToBlockType(
-							getBlock( firstClientId ),
-							getDefaultBlockName()
-						);
-
-						if ( replacement && replacement.length ) {
-							registry.batch( () => {
+					registry.batch( () => {
+						if (
+							canInsertBlockType(
+								getBlockName( firstClientId ),
+								targetRootClientId
+							)
+						) {
+							moveBlocksToPosition(
+								[ firstClientId ],
+								_clientId,
+								targetRootClientId,
+								getBlockIndex( _clientId )
+							);
+						} else {
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if ( replacement && replacement.length ) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -519,16 +508,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 									changeSelection
 								);
 								removeBlock( firstClientId, false );
-							} );
+							}
 						}
-					}
 
-					if (
-						! getBlockOrder( _clientId ).length &&
-						isUnmodifiedBlock( getBlock( _clientId ) )
-					) {
-						removeBlock( _clientId, false );
-					}
+						if (
+							! getBlockOrder( _clientId ).length &&
+							isUnmodifiedBlock( getBlock( _clientId ) )
+						) {
+							removeBlock( _clientId, false );
+						}
+					} );
 				}
 			}
 

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

@@ -161,15 +161,6 @@
 	padding: 0;
 }
 
-.is-content-locked {
-	.block-editor-block-list__block {
-		pointer-events: none;
-	}
-	.is-content-block {
-		pointer-events: initial;
-	}
-}
-
 .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 *");
 	}