@wordpress/block-editor 16.1.0 → 16.2.0

package/src/store/private-selectors.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createSelector, createRegistrySelector } from '@wordpress/data';
 import {
 	getBlockType,
@@ -8,10 +5,6 @@ import {
 	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
 import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import {
 	getBlockOrder,
 	getBlockParents,
@@ -366,12 +359,13 @@ function getListViewClientIdsTreeUnmemoized( state, rootClientId ) {
  *
  * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
  */
-export const getEnabledClientIdsTree = createRegistrySelector( () =>
-	createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [
+export const getEnabledClientIdsTree = createSelector(
+	getEnabledClientIdsTreeUnmemoized,
+	( state ) => [
 		state.blocks.order,
 		state.derivedBlockEditingModes,
 		state.blocks.blockEditingModes,
-	] )
+	]
 );
 
 /**
@@ -388,18 +382,27 @@ export const getEnabledClientIdsTree = createRegistrySelector( () =>
  *
  * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
  */
-export const getListViewClientIdsTree = createRegistrySelector( () =>
-	createSelector( getListViewClientIdsTreeUnmemoized, ( state ) => [
+export const getListViewClientIdsTree = createSelector(
+	getListViewClientIdsTreeUnmemoized,
+	( state ) => [
 		state.blocks.order,
 		state.derivedBlockEditingModes,
 		state.blocks.blockEditingModes,
 		state.blocks.parents,
-		state.blocks.byClientId,
-		state.blocks.attributes,
-		state.blockListSettings,
 		state.editedContentOnlySection,
-		state.settings,
-	] )
+		// The state below is only read to resolve a block's parent section,
+		// which the tree does only while a content-only section is being
+		// edited. Depending on it otherwise rebuilds the tree on every
+		// attribute change, i.e. on every keystroke.
+		...( state.editedContentOnlySection
+			? [
+					state.blocks.byClientId,
+					state.blocks.attributes,
+					state.blockListSettings,
+					state.settings,
+			  ]
+			: [] ),
+	]
 );
 
 /**
@@ -837,6 +840,29 @@ export function isSectionBlock( state, clientId ) {
 	return isSectionBlockCandidate( state, clientId );
 }
 
+/**
+ * Returns whether the block is displayed as a synced block, meaning a synced
+ * pattern or a template part. A block that carries pattern metadata is
+ * displayed as a pattern instead, so it is not considered synced.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client Id of the block.
+ *
+ * @return {boolean} Whether the block is displayed as a synced block.
+ */
+export function isSyncedBlock( state, clientId ) {
+	const blockName = getBlockName( state, clientId );
+	// Checked first so that the section lookup below, which walks the block's
+	// ancestors, is only reached for the few blocks that can be synced.
+	if ( blockName !== 'core/block' && blockName !== 'core/template-part' ) {
+		return false;
+	}
+
+	const patternName = getBlockAttributes( state, clientId )?.metadata
+		?.patternName;
+	return ! ( patternName && isSectionBlock( state, clientId ) );
+}
+
 /**
  * Retrieves the client ID of the block that is a contentOnly section but is
  * currently being temporarily edited (contentOnly is deactivated).

package/src/store/reducer.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import fastDeepEqual from 'fast-deep-equal/es6/index.js';
-
-/**
- * WordPress dependencies
- */
 import { pipe } from '@wordpress/compose';
 import { combineReducers, select } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
@@ -13,10 +6,6 @@ import {
 	store as blocksStore,
 	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
 import { insertAt, moveTo } from './array';
 import { sectionRootClientIdKey, isIsolatedEditorKey } from './private-keys';
@@ -2339,7 +2328,14 @@ export function selectedBlockStyleState( state = undefined, action ) {
 
 		case 'SELECT_BLOCK':
 		case 'SELECTION_CHANGE': {
-			if ( state?.clientId && state.clientId !== action.clientId ) {
+			const startClientId = action.clientId ?? action.start?.clientId;
+			const endClientId = action.clientId ?? action.end?.clientId;
+
+			if (
+				state?.clientId &&
+				( startClientId !== endClientId ||
+					state.clientId !== startClientId )
+			) {
 				return undefined;
 			}
 

package/src/store/selectors.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	getBlockType,
 	getBlockTypes,
@@ -17,10 +14,6 @@ import { symbol } from '@wordpress/icons';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 import { createSelector, createRegistrySelector } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import {
 	isFiltered,
 	checkAllowListRecursive,
@@ -34,7 +27,6 @@ import {
 import { orderBy } from '../utils/sorting';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
-
 import {
 	getContentLockingParent,
 	getEditedContentOnlySection,
@@ -1313,9 +1305,40 @@ export function isBlockSelected( state, clientId ) {
 		return false;
 	}
 
-	return selectionStart.clientId === clientId;
+	// Both sides are `undefined` when nothing is selected and the caller
+	// passes an optional client ID.
+	return !! clientId && selectionStart.clientId === clientId;
 }
 
+/**
+ * Returns the ancestors of the current selection, as a set. A block is not its
+ * own ancestor, so the selected blocks themselves are not in the set.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {Set<string>} Client IDs of the ancestors of the selection.
+ */
+const getSelectedBlockAncestors = createSelector(
+	( state ) => {
+		const ancestors = new Set();
+
+		for ( const clientId of getSelectedBlockClientIds( state ) ) {
+			let current = clientId;
+			while ( ( current = state.blocks.parents.get( current ) ) ) {
+				// An earlier block already walked the rest of this chain.
+				if ( ancestors.has( current ) ) {
+					break;
+				}
+
+				ancestors.add( current );
+			}
+		}
+
+		return ancestors;
+	},
+	( state ) => getSelectedBlockClientIds.getDependants( state )
+);
+
 /**
  * Returns true if one of the block's inner blocks is selected.
  *
@@ -1326,18 +1349,19 @@ export function isBlockSelected( state, clientId ) {
  * @return {boolean} Whether the block has an inner block selected
  */
 export function hasSelectedInnerBlock( state, clientId, deep = false ) {
-	const selectedBlockClientIds = getSelectedBlockClientIds( state );
+	if ( ! clientId ) {
+		return false;
+	}
 
+	const selectedBlockClientIds = getSelectedBlockClientIds( state );
 	if ( ! selectedBlockClientIds.length ) {
 		return false;
 	}
 
 	if ( deep ) {
-		return selectedBlockClientIds.some( ( id ) =>
-			// Pass true because we don't care about order and it's more
-			// performant.
-			getBlockParents( state, id, true ).includes( clientId )
-		);
+		// Callers ask once per rendered block, so the set is built once per
+		// selection rather than walking the selection on every call.
+		return getSelectedBlockAncestors( state ).has( clientId );
 	}
 
 	return selectedBlockClientIds.some(
@@ -2735,15 +2759,14 @@ export const __experimentalGetAllowedBlocks = createSelector(
 /**
  * Returns the block to be directly inserted by the block appender.
  *
- * @param    {Object}         state            Editor state.
- * @param    {?string}        rootClientId     Optional root client ID of block list.
+ * @param    {Object}  state        Editor state.
+ * @param    {?string} rootClientId Optional root client ID of block list.
  *
- * @return {WPDirectInsertBlock|undefined}              The block type to be directly inserted.
+ * @return {WPDirectInsertBlock|undefined} The block type to be directly inserted.
  *
  * @typedef {Object} WPDirectInsertBlock
- * @property {string}         name             The type of block.
- * @property {?Object}        attributes       Attributes to pass to the newly created block.
- * @property {?Array<string>} attributesToCopy Attributes to be copied from adjacent blocks when inserted.
+ * @property {string}  name         The type of block.
+ * @property {?Object} attributes   Attributes to pass to the newly created block.
  */
 export function getDirectInsertBlock( state, rootClientId = null ) {
 	if ( ! rootClientId ) {

package/src/store/test/actions.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import deepFreeze from 'deep-freeze';
-
-/**
- * WordPress dependencies
- */
 import { createRegistry } from '@wordpress/data';
 import {
 	getBlockTypes,
@@ -13,11 +6,6 @@ import {
 	registerBlockType,
 	createBlock,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-
 import * as selectors from '../selectors';
 import reducer from '../reducer';
 import * as actions from '../actions';
@@ -171,6 +159,12 @@ describe( 'actions', () => {
 				getSelectedBlockCount() {
 					return 0;
 				},
+				getMultiSelectedBlockClientIds() {
+					return [];
+				},
+				getClientIdsOfDescendants() {
+					return [];
+				},
 			};
 			const dispatch = jest.fn();
 
@@ -227,6 +221,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
 				getBlockRootClientId: () => null,
 				canInsertBlockType: () => true,
 				getBlockCount: () => 1,
@@ -262,6 +257,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
 				getBlockRootClientId: () => null,
 				canInsertBlockType: ( clientId ) => {
 					switch ( clientId ) {
@@ -294,6 +290,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
 				getBlockRootClientId: () => null,
 				canInsertBlockType: () => true,
 				getBlockCount: () => 1,
@@ -332,6 +329,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
 				getBlockRootClientId: () => null,
 				canInsertBlockType: () => true,
 				getBlockCount: () => 1,
@@ -370,6 +368,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
 				canInsertBlockType: () => true,
 			};
 			const dispatch = jest.fn();
@@ -379,7 +378,7 @@ describe( 'actions', () => {
 				index,
 				'testclientid',
 				true
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'INSERT_BLOCKS',
@@ -394,6 +393,179 @@ describe( 'actions', () => {
 	} );
 
 	describe( 'insertBlocks', () => {
+		afterEach( () => {
+			getBlockTypes().forEach( ( block ) => {
+				unregisterBlockType( block.name );
+			} );
+		} );
+
+		it( 'should apply block type templates to empty blocks', () => {
+			registerBlockType( 'core/test-container', {
+				...defaultBlockSettings,
+				template: [ [ 'core/test-item', { content: 'chicken' } ] ],
+			} );
+			registerBlockType( 'core/test-item', defaultBlockSettings );
+
+			const containerBlock = createBlock( 'core/test-container' );
+			const select = {
+				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
+				canInsertBlockType: () => true,
+			};
+			const dispatch = jest.fn();
+
+			insertBlocks(
+				[ containerBlock ],
+				5,
+				'testrootid',
+				false
+			)( {
+				select,
+				dispatch,
+				registry: { batch: ( fn ) => fn() },
+			} );
+
+			expect( dispatch ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					type: 'INSERT_BLOCKS',
+					blocks: [
+						expect.objectContaining( {
+							name: 'core/test-container',
+							innerBlocks: [
+								expect.objectContaining( {
+									name: 'core/test-item',
+									attributes: expect.objectContaining( {
+										content: 'chicken',
+									} ),
+									innerBlocks: [],
+								} ),
+							],
+						} ),
+					],
+				} )
+			);
+		} );
+
+		it( 'selects the first inner leaf block when the block type opts in', () => {
+			registerBlockType( 'core/test-container', {
+				...defaultBlockSettings,
+				template: [ [ 'core/test-item', { foo: 42 } ] ],
+				templateInsertUpdatesSelection: true,
+			} );
+			registerBlockType( 'core/test-item', defaultBlockSettings );
+
+			const containerBlock = createBlock( 'core/test-container' );
+			const select = {
+				getSettings: () => null,
+				// The insertion selects the inserted block.
+				getSelectedBlockClientId: () => containerBlock.clientId,
+				canInsertBlockType: () => true,
+			};
+			const dispatch = jest.fn();
+			dispatch.selectBlock = jest.fn();
+
+			insertBlocks(
+				[ containerBlock ],
+				5,
+				'testrootid',
+				true,
+				0
+			)( {
+				select,
+				dispatch,
+				registry: { batch: ( fn ) => fn() },
+			} );
+
+			const insertedBlocks = dispatch.mock.calls[ 0 ][ 0 ].blocks;
+			expect( dispatch.selectBlock ).toHaveBeenCalledWith(
+				insertedBlocks[ 0 ].innerBlocks[ 0 ].clientId,
+				0
+			);
+		} );
+
+		it( 'should not apply block type templates to blocks with inner blocks', () => {
+			registerBlockType( 'core/test-container', {
+				...defaultBlockSettings,
+				template: [ [ 'core/test-item', { content: 'chicken' } ] ],
+			} );
+			registerBlockType( 'core/test-item', defaultBlockSettings );
+
+			const containerBlock = createBlock( 'core/test-container', {}, [
+				createBlock( 'core/test-item', { content: 'ribs' } ),
+			] );
+			const select = {
+				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
+				canInsertBlockType: () => true,
+			};
+			const dispatch = jest.fn();
+
+			insertBlocks(
+				[ containerBlock ],
+				5,
+				'testrootid',
+				false
+			)( {
+				select,
+				dispatch,
+				registry: { batch: ( fn ) => fn() },
+			} );
+
+			expect( dispatch ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					blocks: [ containerBlock ],
+				} )
+			);
+		} );
+
+		it( 'should leave a nested occurrence of the same block type empty', () => {
+			registerBlockType( 'core/test-container', {
+				...defaultBlockSettings,
+				template: [ [ 'core/test-item' ], [ 'core/test-container' ] ],
+			} );
+			registerBlockType( 'core/test-item', defaultBlockSettings );
+
+			const containerBlock = createBlock( 'core/test-container' );
+			const select = {
+				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
+				canInsertBlockType: () => true,
+			};
+			const dispatch = jest.fn();
+
+			insertBlocks(
+				[ containerBlock ],
+				5,
+				'testrootid',
+				false
+			)( {
+				select,
+				dispatch,
+				registry: { batch: ( fn ) => fn() },
+			} );
+
+			expect( dispatch ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					type: 'INSERT_BLOCKS',
+					blocks: [
+						expect.objectContaining( {
+							name: 'core/test-container',
+							innerBlocks: [
+								expect.objectContaining( {
+									name: 'core/test-item',
+									innerBlocks: [],
+								} ),
+								expect.objectContaining( {
+									name: 'core/test-container',
+									innerBlocks: [],
+								} ),
+							],
+						} ),
+					],
+				} )
+			);
+		} );
+
 		it( 'should filter the allowed blocks in INSERT_BLOCKS action', () => {
 			const ribsBlock = {
 				clientId: 'ribs',
@@ -411,6 +583,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
 				canInsertBlockType: ( clientId ) => {
 					switch ( clientId ) {
 						case 'core/test-ribs':
@@ -431,7 +604,7 @@ describe( 'actions', () => {
 				5,
 				'testrootid',
 				false
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'INSERT_BLOCKS',
@@ -457,6 +630,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
 				canInsertBlockType: () => false,
 			};
 			const dispatch = jest.fn();
@@ -466,7 +640,7 @@ describe( 'actions', () => {
 				5,
 				'testrootid',
 				false
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch ).not.toHaveBeenCalled();
 		} );
@@ -489,6 +663,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getSettings: () => null,
+				getSelectedBlockClientId: () => null,
 				canInsertBlockType: ( clientId ) => {
 					switch ( clientId ) {
 						case 'core/test-ribs':
@@ -511,7 +686,7 @@ describe( 'actions', () => {
 				false,
 				0,
 				meta
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'INSERT_BLOCKS',
@@ -575,7 +750,7 @@ describe( 'actions', () => {
 				'ribs',
 				'ribs',
 				5
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch ).not.toHaveBeenCalled();
 		} );
@@ -593,7 +768,7 @@ describe( 'actions', () => {
 				'ribs',
 				'chicken-ribs',
 				5
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'MOVE_BLOCKS_TO_POSITION',
@@ -617,7 +792,7 @@ describe( 'actions', () => {
 				'ribs',
 				'chicken-ribs',
 				5
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch ).not.toHaveBeenCalled();
 		} );
@@ -635,7 +810,7 @@ describe( 'actions', () => {
 				'ribs',
 				'ribs',
 				5
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'MOVE_BLOCKS_TO_POSITION',
@@ -653,6 +828,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getBlockRootClientId: () => null,
+				getSelectedBlockClientId: () => null,
 				canRemoveBlocks: () => true,
 				getBlockRemovalRules: () => false,
 			};
@@ -678,6 +854,7 @@ describe( 'actions', () => {
 
 			const select = {
 				getBlockRootClientId: () => null,
+				getSelectedBlockClientId: () => null,
 				canRemoveBlocks: () => true,
 				getBlockRemovalRules: () => false,
 			};
@@ -878,7 +1055,7 @@ describe( 'actions', () => {
 			mergeBlocks(
 				blockA.clientId,
 				blockB.clientId
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch.selectBlock ).toHaveBeenCalledWith( 'chicken' );
 		} );
@@ -932,7 +1109,7 @@ describe( 'actions', () => {
 			mergeBlocks(
 				blockA.clientId,
 				blockB.clientId
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch.selectionChange ).toHaveBeenCalledWith(
 				blockA.clientId,
@@ -1003,7 +1180,7 @@ describe( 'actions', () => {
 			mergeBlocks(
 				blockA.clientId,
 				blockB.clientId
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch.replaceBlocks ).not.toHaveBeenCalled();
 		} );
@@ -1083,7 +1260,7 @@ describe( 'actions', () => {
 			mergeBlocks(
 				blockA.clientId,
 				blockB.clientId
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch.selectionChange ).toHaveBeenCalledWith(
 				blockA.clientId,
@@ -1159,7 +1336,7 @@ describe( 'actions', () => {
 			mergeBlocks(
 				blockA.clientId,
 				blockB.clientId
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch.selectionChange ).not.toHaveBeenCalled();
 			expect( dispatch.replaceBlocks ).not.toHaveBeenCalled();
@@ -1219,7 +1396,7 @@ describe( 'actions', () => {
 			mergeBlocks(
 				blockA.clientId,
 				blockB.clientId
-			)( { select, dispatch } );
+			)( { select, dispatch, registry: { batch: ( fn ) => fn() } } );
 
 			expect( dispatch.selectionChange ).not.toHaveBeenCalled();
 			expect( dispatch.replaceBlocks ).not.toHaveBeenCalled();

package/src/store/test/array.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { insertAt, moveTo } from '../array';
 
 describe( 'array', () => {

package/src/store/test/get-block-settings.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { addFilter, removeFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
 import { getBlockSettings } from '../get-block-settings';
 
 describe( 'getBlockSettings', () => {

package/src/store/test/performance.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import reducer from '../reducer';
 
 describe( 'performance', () => {

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

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	hideBlockInterface,
 	showBlockInterface,