@wordpress/block-editor 12.1.0 → 12.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.1.0",
+	"version": "12.2.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,38 +33,39 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.33.0",
-		"@wordpress/api-fetch": "^6.30.0",
-		"@wordpress/blob": "^3.33.0",
-		"@wordpress/blocks": "^12.10.0",
-		"@wordpress/components": "^24.0.0",
-		"@wordpress/compose": "^6.10.0",
-		"@wordpress/data": "^9.3.0",
-		"@wordpress/date": "^4.33.0",
-		"@wordpress/deprecated": "^3.33.0",
-		"@wordpress/dom": "^3.33.0",
-		"@wordpress/element": "^5.10.0",
-		"@wordpress/escape-html": "^2.33.0",
-		"@wordpress/hooks": "^3.33.0",
-		"@wordpress/html-entities": "^3.33.0",
-		"@wordpress/i18n": "^4.33.0",
-		"@wordpress/icons": "^9.24.0",
-		"@wordpress/is-shallow-equal": "^4.33.0",
-		"@wordpress/keyboard-shortcuts": "^4.10.0",
-		"@wordpress/keycodes": "^3.33.0",
-		"@wordpress/notices": "^4.1.0",
-		"@wordpress/preferences": "^3.10.0",
-		"@wordpress/private-apis": "^0.15.0",
-		"@wordpress/rich-text": "^6.10.0",
-		"@wordpress/shortcode": "^3.33.0",
-		"@wordpress/style-engine": "^1.16.0",
-		"@wordpress/token-list": "^2.33.0",
-		"@wordpress/url": "^3.34.0",
-		"@wordpress/warning": "^2.33.0",
-		"@wordpress/wordcount": "^3.33.0",
+		"@wordpress/a11y": "^3.34.0",
+		"@wordpress/api-fetch": "^6.31.0",
+		"@wordpress/blob": "^3.34.0",
+		"@wordpress/blocks": "^12.11.0",
+		"@wordpress/components": "^25.0.0",
+		"@wordpress/compose": "^6.11.0",
+		"@wordpress/data": "^9.4.0",
+		"@wordpress/date": "^4.34.0",
+		"@wordpress/deprecated": "^3.34.0",
+		"@wordpress/dom": "^3.34.0",
+		"@wordpress/element": "^5.11.0",
+		"@wordpress/escape-html": "^2.34.0",
+		"@wordpress/hooks": "^3.34.0",
+		"@wordpress/html-entities": "^3.34.0",
+		"@wordpress/i18n": "^4.34.0",
+		"@wordpress/icons": "^9.25.0",
+		"@wordpress/is-shallow-equal": "^4.34.0",
+		"@wordpress/keyboard-shortcuts": "^4.11.0",
+		"@wordpress/keycodes": "^3.34.0",
+		"@wordpress/notices": "^4.2.0",
+		"@wordpress/preferences": "^3.11.0",
+		"@wordpress/private-apis": "^0.16.0",
+		"@wordpress/rich-text": "^6.11.0",
+		"@wordpress/shortcode": "^3.34.0",
+		"@wordpress/style-engine": "^1.17.0",
+		"@wordpress/token-list": "^2.34.0",
+		"@wordpress/url": "^3.35.0",
+		"@wordpress/warning": "^2.34.0",
+		"@wordpress/wordcount": "^3.34.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
@@ -83,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

package/src/autocompleters/block.js

@@ -16,6 +16,7 @@ import useBlockTypesState from '../components/inserter/hooks/use-block-types-sta
 import BlockIcon from '../components/block-icon';
 import { store as blockEditorStore } from '../store';
 import { orderBy } from '../utils/sorting';
+import { orderInserterBlockItems } from '../utils/order-inserter-block-items';
 
 const noop = () => {};
 const SHOWN_BLOCK_TYPES = 9;
@@ -34,23 +35,26 @@ function createBlockCompleter() {
 		triggerPrefix: '/',
 
 		useItems( filterValue ) {
-			const { rootClientId, selectedBlockName } = useSelect(
-				( select ) => {
+			const { rootClientId, selectedBlockName, prioritizedBlocks } =
+				useSelect( ( select ) => {
 					const {
 						getSelectedBlockClientId,
 						getBlockName,
 						getBlockInsertionPoint,
+						getBlockListSettings,
 					} = select( blockEditorStore );
 					const selectedBlockClientId = getSelectedBlockClientId();
+					const _rootClientId = getBlockInsertionPoint().rootClientId;
 					return {
 						selectedBlockName: selectedBlockClientId
 							? getBlockName( selectedBlockClientId )
 							: null,
-						rootClientId: getBlockInsertionPoint().rootClientId,
+						rootClientId: _rootClientId,
+						prioritizedBlocks:
+							getBlockListSettings( _rootClientId )
+								?.prioritizedInserterBlocks,
 					};
-				},
-				[]
-			);
+				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
 				noop
@@ -64,7 +68,10 @@ function createBlockCompleter() {
 							collections,
 							filterValue
 					  )
-					: orderBy( items, 'frecency', 'desc' );
+					: orderInserterBlockItems(
+							orderBy( items, 'frecency', 'desc' ),
+							prioritizedBlocks
+					  );
 
 				return initialFilteredItems
 					.filter( ( item ) => item.name !== selectedBlockName )
@@ -75,6 +82,7 @@ function createBlockCompleter() {
 				items,
 				categories,
 				collections,
+				prioritizedBlocks,
 			] );
 
 			const options = useMemo(

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

@@ -11,6 +11,7 @@ import { chevronRightSmall, Icon } from '@wordpress/icons';
  */
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
@@ -22,11 +23,18 @@ import { store as blockEditorStore } from '../../store';
 function BlockBreadcrumb( { rootLabelText } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { clientId, parents, hasSelection } = useSelect( ( select ) => {
-		const { getSelectionStart, getSelectedBlockClientId, getBlockParents } =
-			select( blockEditorStore );
+		const {
+			getSelectionStart,
+			getSelectedBlockClientId,
+			getBlockParents,
+			getBlockEditingMode,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
-			parents: getBlockParents( selectedBlockClientId ),
+			parents: getBlockParents( selectedBlockClientId ).filter(
+				( parentClientId ) =>
+					getBlockEditingMode( parentClientId ) !== 'disabled'
+			),
 			clientId: selectedBlockClientId,
 			hasSelection: !! getSelectionStart().clientId,
 		};

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-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,13 +161,13 @@
 	padding: 0;
 }
 
-.is-content-locked {
-	.block-editor-block-list__block {
+.block-editor-block-list__layout,
+.block-editor-block-list__block {
+	pointer-events: initial;
+
+	&.is-editing-disabled {
 		pointer-events: none;
 	}
-	.is-content-block {
-		pointer-events: initial;
-	}
 }
 
 .block-editor-block-list__layout .block-editor-block-list__block {