@wordpress/block-editor 12.0.0 → 12.2.0

package/src/store/private-actions.js

@@ -66,3 +66,42 @@ export function showBlockInterface() {
 		type: 'SHOW_BLOCK_INTERFACE',
 	};
 }
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Sets the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string}           clientId The block client ID, or `''` for the root container.
+ * @param {BlockEditingMode} mode     The block editing mode. One of `'disabled'`,
+ *                                    `'contentOnly'`, or `'default'`.
+ *
+ * @return {Object} Action object.
+ */
+export function setBlockEditingMode( clientId = '', mode ) {
+	return {
+		type: 'SET_BLOCK_EDITING_MODE',
+		clientId,
+		mode,
+	};
+}
+
+/**
+ * Clears the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {Object} Action object.
+ */
+export function unsetBlockEditingMode( clientId = '' ) {
+	return {
+		type: 'UNSET_BLOCK_EDITING_MODE',
+		clientId,
+	};
+}

package/src/store/private-selectors.js

@@ -1,3 +1,23 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+
+/**
+ * WordPress dependencies
+ */
+import { createRegistrySelector } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockRootClientId,
+	getTemplateLock,
+	getBlockName,
+} from './selectors';
+
 /**
  * Returns true if the block interface is hidden, or false otherwise.
  *
@@ -18,3 +38,78 @@ export function isBlockInterfaceHidden( state ) {
 export function getLastInsertedBlocksClientIds( state ) {
 	return state?.lastBlockInserted?.clientIds;
 }
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Returns the block editing mode for a given block.
+ *
+ * The 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.
+ *
+ * Blocks can set a mode using the `useBlockEditingMode` hook.
+ *
+ * The mode is inherited by all of the block's inner blocks, unless they have
+ * their own mode.
+ *
+ * A template lock can also set a mode. If the template lock is `'contentOnly'`,
+ * the block's mode is overridden to `'contentOnly'` if the block has a content
+ * role attribute, or `'disabled'` otherwise.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
+ *                            `'contentOnly'`, or `'default'`.
+ */
+export const getBlockEditingMode = createRegistrySelector(
+	( select ) =>
+		( state, clientId = '' ) => {
+			const explicitEditingMode = getExplcitBlockEditingMode(
+				state,
+				clientId
+			);
+			const rootClientId = getBlockRootClientId( state, clientId );
+			const templateLock = getTemplateLock( state, rootClientId );
+			const name = getBlockName( state, clientId );
+			const isContent =
+				select( blocksStore ).__experimentalHasContentRoleAttribute(
+					name
+				);
+			if (
+				explicitEditingMode === 'disabled' ||
+				( templateLock === 'contentOnly' && ! isContent )
+			) {
+				return 'disabled';
+			}
+			if (
+				explicitEditingMode === 'contentOnly' ||
+				( templateLock === 'contentOnly' && isContent )
+			) {
+				return 'contentOnly';
+			}
+			return 'default';
+		}
+);
+
+const getExplcitBlockEditingMode = createSelector(
+	( state, clientId = '' ) => {
+		while (
+			! state.blockEditingModes.has( clientId ) &&
+			state.blocks.parents.has( clientId )
+		) {
+			clientId = state.blocks.parents.get( clientId );
+		}
+		return state.blockEditingModes.get( clientId ) ?? 'default';
+	},
+	( state ) => [ state.blockEditingModes, state.blocks.parents ]
+);

package/src/store/reducer.js

@@ -1834,6 +1834,32 @@ export function temporarilyEditingAsBlocks( state = '', action ) {
 	return state;
 }
 
+/**
+ * Reducer returning a map of block client IDs to block editing modes.
+ *
+ * @param {Map}    state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Map} Updated state.
+ */
+export function blockEditingModes( state = new Map(), action ) {
+	switch ( action.type ) {
+		case 'SET_BLOCK_EDITING_MODE':
+			return new Map( state ).set( action.clientId, action.mode );
+		case 'UNSET_BLOCK_EDITING_MODE': {
+			const newState = new Map( state );
+			newState.delete( action.clientId );
+			return newState;
+		}
+		case 'RESET_BLOCKS': {
+			return state.has( '' )
+				? new Map().set( '', state.get( '' ) )
+				: state;
+		}
+	}
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isTyping,
@@ -1856,6 +1882,7 @@ const combinedReducers = combineReducers( {
 	lastBlockInserted,
 	temporarilyEditingAsBlocks,
 	blockVisibility,
+	blockEditingModes,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/selectors.js

@@ -18,7 +18,6 @@ import {
 import { Platform } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
@@ -2101,7 +2100,6 @@ export const getInserterItems = createSelector(
 export const getBlockTransformItems = createSelector(
 	( state, blocks, rootClientId = null ) => {
 		const normalizedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
-		const [ sourceBlock ] = normalizedBlocks;
 		const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
 			buildScope: 'transform',
 		} );
@@ -2118,22 +2116,10 @@ export const getBlockTransformItems = createSelector(
 			] )
 		);
 
-		// Consider unwraping the highest priority.
-		itemsByName[ '*' ] = {
-			frecency: +Infinity,
-			id: '*',
-			isDisabled: false,
-			name: '*',
-			title: __( 'Unwrap' ),
-			icon: itemsByName[ sourceBlock?.name ]?.icon,
-		};
-
 		const possibleTransforms = getPossibleBlockTransformations(
 			normalizedBlocks
 		).reduce( ( accumulator, block ) => {
-			if ( block === '*' ) {
-				accumulator.push( itemsByName[ '*' ] );
-			} else if ( itemsByName[ block?.name ] ) {
+			if ( itemsByName[ block?.name ] ) {
 				accumulator.push( itemsByName[ block.name ] );
 			}
 			return accumulator;
@@ -2504,6 +2490,30 @@ export function getSettings( state ) {
 	return state.settings;
 }
 
+/**
+ * Returns the behaviors registered with the editor.
+ *
+ * Behaviors are named, reusable pieces of functionality that can be
+ * attached to blocks. They are registered with the editor using the
+ * `theme.json` file.
+ *
+ * @example
+ *
+ * ```js
+ * const behaviors = select( blockEditorStore ).getBehaviors();
+ * if ( behaviors?.lightbox ) {
+ * 	 // Do something with the lightbox.
+ * }
+ *```
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {Object} The editor behaviors object.
+ */
+export function getBehaviors( state ) {
+	return state.settings.behaviors;
+}
+
 /**
  * Returns true if the most recent block change is be considered persistent, or
  * false otherwise. A persistent change is one committed by BlockEditorProvider

package/src/store/test/private-actions.js

@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import { hideBlockInterface, showBlockInterface } from '../private-actions';
+import {
+	hideBlockInterface,
+	showBlockInterface,
+	setBlockEditingMode,
+	unsetBlockEditingMode,
+} from '../private-actions';
 
 describe( 'private actions', () => {
 	describe( 'hideBlockInterface', () => {
@@ -19,4 +24,30 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'setBlockEditingMode', () => {
+		it( 'should return the SET_BLOCK_EDITING_MODE action', () => {
+			expect(
+				setBlockEditingMode(
+					'14501cc2-90a6-4f52-aa36-ab6e896135d1',
+					'default'
+				)
+			).toEqual( {
+				type: 'SET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+				mode: 'default',
+			} );
+		} );
+	} );
+
+	describe( 'unsetBlockEditingMode', () => {
+		it( 'should return the UNSET_BLOCK_EDITING_MODE action', () => {
+			expect(
+				unsetBlockEditingMode( '14501cc2-90a6-4f52-aa36-ab6e896135d1' )
+			).toEqual( {
+				type: 'UNSET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+			} );
+		} );
+	} );
 } );

package/src/store/test/private-selectors.js

@@ -4,6 +4,7 @@
 import {
 	isBlockInterfaceHidden,
 	getLastInsertedBlocksClientIds,
+	getBlockEditingMode,
 } from '../private-selectors';
 
 describe( 'private selectors', () => {
@@ -49,4 +50,161 @@ describe( 'private selectors', () => {
 			] );
 		} );
 	} );
+
+	describe( 'getBlockEditingMode', () => {
+		const baseState = {
+			settings: {},
+			blocks: {
+				byClientId: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', {} ], // Header
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', {} ], // Group
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', {} ], // |  Post Title
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', {} ], // |  Post Content
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', {} ], // | |  Paragraph
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', {} ], // | |  Paragraph
+				] ),
+				parents: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', '' ],
+					[
+						'b26fc763-417d-4f01-b81c-2ec61e14a972',
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					],
+					[
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					],
+					[
+						'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					],
+					[
+						'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					],
+				] ),
+			},
+			blockListSettings: {
+				'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337': {},
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {},
+			},
+			blockEditingModes: new Map( [] ),
+		};
+
+		const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+		getBlockEditingMode.registry = {
+			select: jest.fn( () => ( {
+				__experimentalHasContentRoleAttribute,
+			} ) ),
+		};
+
+		it( 'should return default by default', () => {
+			expect(
+				getBlockEditingMode(
+					baseState,
+					'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+				)
+			).toBe( 'default' );
+		} );
+
+		[ 'disabled', 'contentOnly' ].forEach( ( mode ) => {
+			it( `should return ${ mode } if explicitly set`, () => {
+				const state = {
+					...baseState,
+					blockEditingModes: new Map( [
+						[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', mode ],
+					] ),
+				};
+				expect(
+					getBlockEditingMode(
+						state,
+						'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+					)
+				).toBe( mode );
+			} );
+
+			it( `should return ${ mode } if explicitly set on a parent`, () => {
+				const state = {
+					...baseState,
+					blockEditingModes: new Map( [
+						[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', mode ],
+					] ),
+				};
+				expect(
+					getBlockEditingMode(
+						state,
+						'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+					)
+				).toBe( mode );
+			} );
+
+			it( `should return ${ mode } if overridden by a parent`, () => {
+				const state = {
+					...baseState,
+					blockEditingModes: new Map( [
+						[ '', mode ],
+						[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'default' ],
+						[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', mode ],
+					] ),
+				};
+				expect(
+					getBlockEditingMode(
+						state,
+						'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+					)
+				).toBe( mode );
+			} );
+
+			it( `should return ${ mode } if explicitly set on root`, () => {
+				const state = {
+					...baseState,
+					blockEditingModes: new Map( [ [ '', mode ] ] ),
+				};
+				expect(
+					getBlockEditingMode(
+						state,
+						'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+					)
+				).toBe( mode );
+			} );
+		} );
+
+		it( 'should return disabled if parent is locked and the block has no content role', () => {
+			const state = {
+				...baseState,
+				blockListSettings: {
+					...baseState.blockListSettings,
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {
+						templateLock: 'contentOnly',
+					},
+				},
+			};
+			__experimentalHasContentRoleAttribute.mockReturnValueOnce( false );
+			expect(
+				getBlockEditingMode(
+					state,
+					'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+				)
+			).toBe( 'disabled' );
+		} );
+
+		it( 'should return contentOnly if parent is locked and the block has a content role', () => {
+			const state = {
+				...baseState,
+				blockListSettings: {
+					...baseState.blockListSettings,
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {
+						templateLock: 'contentOnly',
+					},
+				},
+			};
+			__experimentalHasContentRoleAttribute.mockReturnValueOnce( true );
+			expect(
+				getBlockEditingMode(
+					state,
+					'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+				)
+			).toBe( 'contentOnly' );
+		} );
+	} );
 } );

package/src/store/test/reducer.js

@@ -32,6 +32,7 @@ import {
 	blockListSettings,
 	lastBlockAttributesChange,
 	lastBlockInserted,
+	blockEditingModes,
 } from '../reducer';
 
 const noop = () => {};
@@ -3367,4 +3368,51 @@ describe( 'state', () => {
 			expect( state ).toEqual( expectedState );
 		} );
 	} );
+
+	describe( 'blockEditingModes', () => {
+		it( 'should return an empty map by default', () => {
+			expect( blockEditingModes( undefined, {} ) ).toEqual( new Map() );
+		} );
+
+		it( 'should set the editing mode for a block', () => {
+			const state = new Map();
+			const newState = blockEditingModes( state, {
+				type: 'SET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+				mode: 'default',
+			} );
+			expect( newState ).toEqual(
+				new Map( [
+					[ '14501cc2-90a6-4f52-aa36-ab6e896135d1', 'default' ],
+				] )
+			);
+		} );
+
+		it( 'should clear the editing mode for a block', () => {
+			const state = new Map( [
+				[ '14501cc2-90a6-4f52-aa36-ab6e896135d1', 'default' ],
+			] );
+			const newState = blockEditingModes( state, {
+				type: 'UNSET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+			} );
+			expect( newState ).toEqual( new Map() );
+		} );
+
+		it( 'should clear editing modes when blocks are reset', () => {
+			const state = new Map( [
+				[ '', 'disabled' ],
+				[ '14501cc2-90a6-4f52-aa36-ab6e896135d1', 'default' ],
+			] );
+			const newState = blockEditingModes( state, {
+				type: 'RESET_BLOCKS',
+			} );
+			expect( newState ).toEqual(
+				new Map( [
+					// Root mode should be maintained.
+					[ '', 'disabled' ],
+				] )
+			);
+		} );
+	} );
 } );

package/src/style.scss

@@ -59,7 +59,4 @@
 @import "./components/preview-options/style.scss";
 @import "./components/spacing-sizes-control/style.scss";
 
-// Experiments.
-@import "./components/off-canvas-editor/style.scss";
-
 @include wordpress-admin-schemes();

package/src/utils/order-inserter-block-items.js

@@ -0,0 +1,26 @@
+/** @typedef {import('../store/selectors').WPEditorInserterItem} WPEditorInserterItem */
+
+/**
+ * Helper function to order inserter block items according to a provided array of prioritized blocks.
+ *
+ * @param {WPEditorInserterItem[]} items    The array of editor inserter block items to be sorted.
+ * @param {string[]}               priority The array of block names to be prioritized.
+ * @return {WPEditorInserterItem[]} The sorted array of editor inserter block items.
+ */
+export const orderInserterBlockItems = ( items, priority ) => {
+	if ( ! priority ) {
+		return items;
+	}
+
+	items.sort( ( { id: aName }, { id: bName } ) => {
+		// Sort block items according to `priority`.
+		let aIndex = priority.indexOf( aName );
+		let bIndex = priority.indexOf( bName );
+		// All other block items should come after that.
+		if ( aIndex < 0 ) aIndex = priority.length;
+		if ( bIndex < 0 ) bIndex = priority.length;
+		return aIndex - bIndex;
+	} );
+
+	return items;
+};

package/src/utils/use-should-contextual-toolbar-show.js

@@ -14,14 +14,16 @@ import { unlock } from '../lock-unlock';
 /**
  * Returns true if the contextual block toolbar should show, or false if it should be hidden.
  *
- * @param {string} clientId The client ID of the block.
- *
  * @return {boolean} Whether the block toolbar is hidden.
  */
-export function useShouldContextualToolbarShow( clientId ) {
+export function useShouldContextualToolbarShow() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { shouldShowContextualToolbar, canFocusHiddenToolbar } = useSelect(
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useSelect(
 		( select ) => {
 			const {
 				__unstableGetEditorMode,
@@ -31,14 +33,19 @@ export function useShouldContextualToolbarShow( clientId ) {
 				getBlock,
 				getSettings,
 				isNavigationMode,
+				getSelectedBlockClientId,
+				getFirstMultiSelectedBlockClientId,
 			} = unlock( select( blockEditorStore ) );
 
 			const isEditMode = __unstableGetEditorMode() === 'edit';
 			const hasFixedToolbar = getSettings().hasFixedToolbar;
 			const isDistractionFree = getSettings().isDistractionFree;
-			const hasClientId = !! clientId;
+			const selectedBlockId =
+				getFirstMultiSelectedBlockClientId() ||
+				getSelectedBlockClientId();
+			const hasSelectedBlockId = !! selectedBlockId;
 			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(
-				getBlock( clientId ) || {}
+				getBlock( selectedBlockId ) || {}
 			);
 
 			const _shouldShowContextualToolbar =
@@ -48,13 +55,13 @@ export function useShouldContextualToolbarShow( clientId ) {
 				isLargeViewport &&
 				! isMultiSelecting() &&
 				! isTyping() &&
-				hasClientId &&
+				hasSelectedBlockId &&
 				! isEmptyDefaultBlock &&
 				! isBlockInterfaceHidden();
 
 			const _canFocusHiddenToolbar =
 				isEditMode &&
-				hasClientId &&
+				hasSelectedBlockId &&
 				! _shouldShowContextualToolbar &&
 				! hasFixedToolbar &&
 				! isDistractionFree &&
@@ -63,13 +70,16 @@ export function useShouldContextualToolbarShow( clientId ) {
 			return {
 				shouldShowContextualToolbar: _shouldShowContextualToolbar,
 				canFocusHiddenToolbar: _canFocusHiddenToolbar,
+				fixedToolbarCanBeFocused:
+					( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId,
 			};
 		},
-		[ clientId, isLargeViewport ]
+		[ isLargeViewport ]
 	);
 
 	return {
 		shouldShowContextualToolbar,
 		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
 	};
 }

package/tsconfig.json

@@ -24,6 +24,7 @@
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../keycodes" },
 		{ "path": "../notices" },
+		{ "path": "../rich-text" },
 		{ "path": "../style-engine" },
 		{ "path": "../token-list" },
 		{ "path": "../url" },