@wordpress/block-editor 8.4.0 → 8.5.0

package/src/store/reducer.js

@@ -1278,17 +1278,24 @@ function selectionHelper( state = {}, action ) {
 export function selection( state = {}, action ) {
 	switch ( action.type ) {
 		case 'SELECTION_CHANGE':
+			if ( action.clientId ) {
+				return {
+					selectionStart: {
+						clientId: action.clientId,
+						attributeKey: action.attributeKey,
+						offset: action.startOffset,
+					},
+					selectionEnd: {
+						clientId: action.clientId,
+						attributeKey: action.attributeKey,
+						offset: action.endOffset,
+					},
+				};
+			}
+
 			return {
-				selectionStart: {
-					clientId: action.clientId,
-					attributeKey: action.attributeKey,
-					offset: action.startOffset,
-				},
-				selectionEnd: {
-					clientId: action.clientId,
-					attributeKey: action.attributeKey,
-					offset: action.endOffset,
-				},
+				selectionStart: action.start || state.selectionStart,
+				selectionEnd: action.end || state.selectionEnd,
 			};
 		case 'RESET_SELECTION':
 			const { selectionStart, selectionEnd } = action;
@@ -1298,6 +1305,14 @@ export function selection( state = {}, action ) {
 			};
 		case 'MULTI_SELECT':
 			const { start, end } = action;
+
+			if (
+				start === state.selectionStart?.clientId &&
+				end === state.selectionEnd?.clientId
+			) {
+				return state;
+			}
+
 			return {
 				selectionStart: { clientId: start },
 				selectionEnd: { clientId: end },

package/src/store/selectors.js

@@ -3,7 +3,6 @@
  */
 import {
 	castArray,
-	flatMap,
 	first,
 	isArray,
 	isBoolean,
@@ -28,10 +27,12 @@ import {
 	hasBlockSupport,
 	getPossibleBlockTransformations,
 	parse,
+	switchToBlockType,
 } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * A block selection object.
@@ -215,26 +216,35 @@ export const __unstableGetClientIdsTree = createSelector(
 );
 
 /**
- * Returns an array containing the clientIds of all descendants
- * of the blocks given.
+ * Returns an array containing the clientIds of all descendants of the blocks
+ * given. Returned ids are ordered first by the order of the ids given, then
+ * by the order that they appear in the editor.
  *
  * @param {Object} state     Global application state.
  * @param {Array}  clientIds Array of blocks to inspect.
  *
  * @return {Array} ids of descendants.
  */
-export const getClientIdsOfDescendants = ( state, clientIds ) =>
-	flatMap( clientIds, ( clientId ) => {
-		const descendants = getBlockOrder( state, clientId );
-		return [
-			...descendants,
-			...getClientIdsOfDescendants( state, descendants ),
-		];
-	} );
+export const getClientIdsOfDescendants = createSelector(
+	( state, clientIds ) => {
+		const collectedIds = [];
+		for ( const givenId of clientIds ) {
+			for ( const descendantId of getBlockOrder( state, givenId ) ) {
+				collectedIds.push(
+					descendantId,
+					...getClientIdsOfDescendants( state, [ descendantId ] )
+				);
+			}
+		}
+		return collectedIds;
+	},
+	( state ) => [ state.blocks.order ]
+);
 
 /**
- * Returns an array containing the clientIds of the top-level blocks
- * and their descendants of any depth (for nested blocks).
+ * Returns an array containing the clientIds of the top-level blocks and
+ * their descendants of any depth (for nested blocks). Ids are returned
+ * in the same order that they appear in the editor.
  *
  * @param {Object} state Global application state.
  *
@@ -242,11 +252,14 @@ export const getClientIdsOfDescendants = ( state, clientIds ) =>
  */
 export const getClientIdsWithDescendants = createSelector(
 	( state ) => {
-		const topLevelIds = getBlockOrder( state );
-		return [
-			...topLevelIds,
-			...getClientIdsOfDescendants( state, topLevelIds ),
-		];
+		const collectedIds = [];
+		for ( const topLevelId of getBlockOrder( state ) ) {
+			collectedIds.push(
+				topLevelId,
+				...getClientIdsOfDescendants( state, [ topLevelId ] )
+			);
+		}
+		return collectedIds;
 	},
 	( state ) => [ state.blocks.order ]
 );
@@ -895,6 +908,102 @@ export function getMultiSelectedBlocksEndClientId( state ) {
 	return selectionEnd.clientId || null;
 }
 
+/**
+ * Returns true if the selection is not partial.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {boolean} Whether the selection is mergeable.
+ */
+export function __unstableIsFullySelected( state ) {
+	const selectionAnchor = getSelectionStart( state );
+	const selectionFocus = getSelectionEnd( state );
+	return (
+		! selectionAnchor.attributeKey &&
+		! selectionFocus.attributeKey &&
+		typeof selectionAnchor.offset === 'undefined' &&
+		typeof selectionFocus.offset === 'undefined'
+	);
+}
+
+/**
+ * Check whether the selection is mergeable.
+ *
+ * @param {Object}  state     Editor state.
+ * @param {boolean} isForward Whether to merge forwards.
+ *
+ * @return {boolean} Whether the selection is mergeable.
+ */
+export function __unstableIsSelectionMergeable( state, isForward ) {
+	const selectionAnchor = getSelectionStart( state );
+	const selectionFocus = getSelectionEnd( state );
+
+	// It's not mergeable if the start and end are within the same block.
+	if ( selectionAnchor.clientId === selectionFocus.clientId ) return false;
+
+	// It's not mergeable if there's no rich text selection.
+	if (
+		! selectionAnchor.attributeKey ||
+		! selectionFocus.attributeKey ||
+		typeof selectionAnchor.offset === 'undefined' ||
+		typeof selectionFocus.offset === 'undefined'
+	)
+		return false;
+
+	const anchorRootClientId = getBlockRootClientId(
+		state,
+		selectionAnchor.clientId
+	);
+	const focusRootClientId = getBlockRootClientId(
+		state,
+		selectionFocus.clientId
+	);
+
+	// It's not mergeable if the selection doesn't start and end in the same
+	// block list. Maybe in the future it should be allowed.
+	if ( anchorRootClientId !== focusRootClientId ) {
+		return false;
+	}
+
+	const blockOrder = getBlockOrder( state, anchorRootClientId );
+	const anchorIndex = blockOrder.indexOf( selectionAnchor.clientId );
+	const focusIndex = blockOrder.indexOf( selectionFocus.clientId );
+
+	// Reassign selection start and end based on order.
+	let selectionStart, selectionEnd;
+
+	if ( anchorIndex > focusIndex ) {
+		selectionStart = selectionFocus;
+		selectionEnd = selectionAnchor;
+	} else {
+		selectionStart = selectionAnchor;
+		selectionEnd = selectionFocus;
+	}
+
+	const targetBlockClientId = isForward
+		? selectionEnd.clientId
+		: selectionStart.clientId;
+	const blockToMergeClientId = isForward
+		? selectionStart.clientId
+		: selectionEnd.clientId;
+
+	const targetBlock = getBlock( state, targetBlockClientId );
+	const targetBlockType = getBlockType( targetBlock.name );
+
+	if ( ! targetBlockType.merge ) return false;
+
+	const blockToMerge = getBlock( state, blockToMergeClientId );
+
+	// It's mergeable if the blocks are of the same type.
+	if ( blockToMerge.name === targetBlock.name ) return true;
+
+	// If the blocks are of a different type, try to transform the block being
+	// merged into the same type of block.
+	const blocksToMerge = switchToBlockType( blockToMerge, targetBlock.name );
+
+	return blocksToMerge && blocksToMerge.length;
+}
+
 /**
  * Returns an array containing all block client IDs in the editor in the order
  * they appear. Optionally accepts a root client ID of the block list for which
@@ -1284,10 +1393,28 @@ const canInsertBlockTypeUnmemoized = (
 		parentName
 	);
 
+	let hasBlockAllowedAncestor = true;
+	const blockAllowedAncestorBlocks = blockType.ancestor;
+	if ( blockAllowedAncestorBlocks ) {
+		const ancestors = [
+			rootClientId,
+			...getBlockParents( state, rootClientId ),
+		];
+
+		hasBlockAllowedAncestor = some( ancestors, ( ancestorClientId ) =>
+			checkAllowList(
+				blockAllowedAncestorBlocks,
+				getBlockName( state, ancestorClientId )
+			)
+		);
+	}
+
 	const canInsert =
-		( hasParentAllowedBlock === null && hasBlockAllowedParent === null ) ||
-		hasParentAllowedBlock === true ||
-		hasBlockAllowedParent === true;
+		hasBlockAllowedAncestor &&
+		( ( hasParentAllowedBlock === null &&
+			hasBlockAllowedParent === null ) ||
+			hasParentAllowedBlock === true ||
+			hasBlockAllowedParent === true );
 
 	if ( ! canInsert ) {
 		return canInsert;
@@ -1442,6 +1569,23 @@ export function canMoveBlocks( state, clientIds, rootClientId = null ) {
 	);
 }
 
+/**
+ * Determines if the given block type can be locked/unlocked by a user.
+ *
+ * @param {Object}          state      Editor state.
+ * @param {(string|Object)} nameOrType Block name or type object.
+ *
+ * @return {boolean} Whether a given block type can be locked/unlocked.
+ */
+export function canLockBlockType( state, nameOrType ) {
+	if ( ! hasBlockSupport( nameOrType, 'lock', true ) ) {
+		return false;
+	}
+
+	// Use block editor settings as the default value.
+	return !! state.settings?.canLockBlocks;
+}
+
 /**
  * Returns information about how recently and frequently a block has been inserted.
  *
@@ -1767,6 +1911,7 @@ export const getInserterItems = createSelector(
  */
 export const getBlockTransformItems = createSelector(
 	( state, blocks, rootClientId = null ) => {
+		const [ sourceBlock ] = blocks;
 		const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
 			buildScope: 'transform',
 		} );
@@ -1780,20 +1925,32 @@ export const getBlockTransformItems = createSelector(
 			blockTypeTransformItems,
 			( { name } ) => name
 		);
+
+		// Consider unwraping the highest priority.
+		itemsByName[ '*' ] = {
+			frecency: +Infinity,
+			id: '*',
+			isDisabled: false,
+			name: '*',
+			title: __( 'Unwrap' ),
+			icon: itemsByName[ sourceBlock.name ]?.icon,
+		};
+
 		const possibleTransforms = getPossibleBlockTransformations(
 			blocks
 		).reduce( ( accumulator, block ) => {
-			if ( itemsByName[ block?.name ] ) {
+			if ( block === '*' ) {
+				accumulator.push( itemsByName[ '*' ] );
+			} else if ( itemsByName[ block?.name ] ) {
 				accumulator.push( itemsByName[ block.name ] );
 			}
 			return accumulator;
 		}, [] );
-		const possibleBlockTransformations = orderBy(
+		return orderBy(
 			possibleTransforms,
 			( block ) => itemsByName[ block.name ].frecency,
 			'desc'
 		);
-		return possibleBlockTransformations;
 	},
 	( state, rootClientId ) => [
 		state.blockListSettings[ rootClientId ],

package/src/store/test/selectors.js

@@ -146,6 +146,41 @@ describe( 'selectors', () => {
 			parent: [ 'core/post-content' ],
 		} );
 
+		registerBlockType( 'core/test-block-ancestor', {
+			save: ( props ) => props.attributes.text,
+			category: 'text',
+			title: 'Test Block required as ancestor',
+			icon: 'test',
+			keywords: [ 'testing' ],
+		} );
+
+		registerBlockType( 'core/test-block-parent', {
+			save: ( props ) => props.attributes.text,
+			category: 'text',
+			title: 'Test Block required as parent',
+			icon: 'test',
+			keywords: [ 'testing' ],
+		} );
+
+		registerBlockType( 'core/test-block-requires-ancestor', {
+			save: ( props ) => props.attributes.text,
+			category: 'text',
+			title: 'Test Block that requires ancestor',
+			icon: 'test',
+			keywords: [ 'testing' ],
+			ancestor: [ 'core/test-block-ancestor' ],
+		} );
+
+		registerBlockType( 'core/test-block-requires-ancestor-parent', {
+			save: ( props ) => props.attributes.text,
+			category: 'text',
+			title: 'Test Block that requires both ancestor and parent',
+			icon: 'test',
+			keywords: [ 'testing' ],
+			parent: [ 'core/test-block-parent' ],
+			ancestor: [ 'core/test-block-ancestor' ],
+		} );
+
 		setFreeformContentHandlerName( 'core/test-freeform' );
 
 		cachedSelectors.forEach( ( { clear } ) => clear() );
@@ -158,6 +193,10 @@ describe( 'selectors', () => {
 		unregisterBlockType( 'core/test-block-c' );
 		unregisterBlockType( 'core/test-freeform' );
 		unregisterBlockType( 'core/post-content-child' );
+		unregisterBlockType( 'core/test-block-ancestor' );
+		unregisterBlockType( 'core/test-block-parent' );
+		unregisterBlockType( 'core/test-block-requires-ancestor' );
+		unregisterBlockType( 'core/test-block-requires-ancestor-parent' );
 
 		setFreeformContentHandlerName( undefined );
 	} );
@@ -448,7 +487,7 @@ describe( 'selectors', () => {
 	} );
 
 	describe( 'getClientIdsOfDescendants', () => {
-		it( 'should return the ids of any descendants, given an array of clientIds', () => {
+		it( 'should return the ids of any descendants in sequential order, given an array of clientIds', () => {
 			const state = {
 				blocks: {
 					byClientId: {
@@ -541,8 +580,8 @@ describe( 'selectors', () => {
 				getClientIdsOfDescendants( state, [ 'uuid-10' ] )
 			).toEqual( [
 				'uuid-12',
-				'uuid-14',
 				'uuid-16',
+				'uuid-14',
 				'uuid-18',
 				'uuid-24',
 				'uuid-26',
@@ -553,7 +592,7 @@ describe( 'selectors', () => {
 	} );
 
 	describe( 'getClientIdsWithDescendants', () => {
-		it( 'should return the ids for top-level blocks and their descendants of any depth (for nested blocks).', () => {
+		it( 'should return the ids for top-level blocks and their descendants of any depth (for nested blocks) in sequential order.', () => {
 			const state = {
 				blocks: {
 					byClientId: {
@@ -645,15 +684,15 @@ describe( 'selectors', () => {
 				'uuid-6',
 				'uuid-8',
 				'uuid-10',
-				'uuid-22',
 				'uuid-12',
-				'uuid-14',
 				'uuid-16',
+				'uuid-14',
 				'uuid-18',
 				'uuid-24',
 				'uuid-26',
 				'uuid-28',
 				'uuid-30',
+				'uuid-22',
 			] );
 		} );
 	} );
@@ -2475,6 +2514,198 @@ describe( 'selectors', () => {
 				canInsertBlockType( state, 'core/post-content-child' )
 			).toBe( true );
 		} );
+
+		it( 'should allow blocks to be inserted in a descendant of a required ancestor', () => {
+			const state = {
+				blocks: {
+					byClientId: {
+						block1: { name: 'core/test-block-ancestor' },
+						block2: { name: 'core/block' },
+					},
+					attributes: {
+						block1: {},
+						block2: {},
+					},
+					parents: {
+						block2: 'block1',
+					},
+				},
+				blockListSettings: {
+					block1: {},
+					block2: {},
+				},
+				settings: {},
+			};
+			expect(
+				canInsertBlockType(
+					state,
+					'core/test-block-requires-ancestor',
+					'block2'
+				)
+			).toBe( true );
+		} );
+
+		it( 'should allow blocks to be inserted if both parent and ancestor restrictions are met', () => {
+			const state = {
+				blocks: {
+					byClientId: {
+						block1: { name: 'core/test-block-ancestor' },
+						block2: { name: 'core/block' },
+						block3: { name: 'core/test-block-parent' },
+					},
+					attributes: {
+						block1: {},
+						block2: {},
+						block3: {},
+					},
+					parents: {
+						block2: 'block1',
+						block3: 'block2',
+					},
+				},
+				blockListSettings: {
+					block1: {},
+					block2: {},
+					block3: {},
+				},
+				settings: {},
+			};
+			expect(
+				canInsertBlockType(
+					state,
+					'core/test-block-requires-ancestor-parent',
+					'block3'
+				)
+			).toBe( true );
+		} );
+
+		it( 'should deny blocks from being inserted outside a required ancestor', () => {
+			const state = {
+				blocks: {
+					byClientId: {
+						block1: { name: 'core/test-block-ancestor' },
+						block2: { name: 'core/block' },
+						block3: { name: 'core/block' },
+					},
+					attributes: {
+						block1: {},
+						block2: {},
+						block3: {},
+					},
+					parents: {
+						block3: 'block2',
+					},
+				},
+				blockListSettings: {
+					block1: {},
+					block2: {},
+					block3: {},
+				},
+				settings: {},
+			};
+			expect(
+				canInsertBlockType(
+					state,
+					'core/test-block-requires-ancestor',
+					'block3'
+				)
+			).toBe( false );
+		} );
+
+		it( 'should deny blocks from being inserted outside of a required ancestor, even if parent matches', () => {
+			const state = {
+				blocks: {
+					byClientId: {
+						block1: { name: 'core/test-block-ancestor' },
+						block2: { name: 'core/block' },
+						block3: { name: 'core/test-block-parent' },
+					},
+					attributes: {
+						block1: {},
+						block2: {},
+						block3: {},
+					},
+					parents: {
+						block3: 'block2',
+					},
+				},
+				blockListSettings: {
+					block1: {},
+					block2: {},
+					block3: {},
+				},
+				settings: {},
+			};
+			expect(
+				canInsertBlockType(
+					state,
+					'core/test-block-requires-ancestor-parent',
+					'block3'
+				)
+			).toBe( false );
+		} );
+
+		it( 'should deny blocks from being inserted inside ancestor if parent restricts allowedBlocks', () => {
+			const state = {
+				blocks: {
+					byClientId: {
+						block1: { name: 'core/test-block-ancestor' },
+						block2: { name: 'core/block' },
+					},
+					attributes: {
+						block1: {},
+						block2: {},
+					},
+					parents: {
+						block2: 'block1',
+					},
+				},
+				blockListSettings: {
+					block1: {},
+					block2: {
+						allowedBlocks: [],
+					},
+				},
+				settings: {},
+			};
+			expect(
+				canInsertBlockType(
+					state,
+					'core/test-block-requires-ancestor',
+					'block2'
+				)
+			).toBe( false );
+		} );
+
+		it( 'should deny blocks from being inserted inside ancestor if parent restriction is not met', () => {
+			const state = {
+				blocks: {
+					byClientId: {
+						block1: { name: 'core/test-block-ancestor' },
+						block2: { name: 'core/block' },
+					},
+					attributes: {
+						block1: {},
+						block2: {},
+					},
+					parents: {
+						block2: 'block1',
+					},
+				},
+				blockListSettings: {
+					block1: {},
+					block2: {},
+				},
+				settings: {},
+			};
+			expect(
+				canInsertBlockType(
+					state,
+					'core/test-block-requires-ancestor-parent',
+					'block2'
+				)
+			).toBe( false );
+		} );
 	} );
 
 	describe( 'canInsertBlocks', () => {
@@ -2681,6 +2912,8 @@ describe( 'selectors', () => {
 				'core/test-block-a',
 				'core/test-block-b',
 				'core/test-freeform',
+				'core/test-block-ancestor',
+				'core/test-block-parent',
 				'core/block/1',
 				'core/block/2',
 			] );
@@ -2695,6 +2928,8 @@ describe( 'selectors', () => {
 				'core/test-block-a',
 				'core/test-block-b',
 				'core/test-freeform',
+				'core/test-block-ancestor',
+				'core/test-block-parent',
 				'core/block/1',
 				'core/block/2',
 			] );
@@ -2727,6 +2962,7 @@ describe( 'selectors', () => {
 						},
 					},
 					controlledInnerBlocks: {},
+					parents: {},
 				},
 				preferences: {
 					insertUsage: {},
@@ -2935,6 +3171,7 @@ describe( 'selectors', () => {
 						},
 					},
 					controlledInnerBlocks: {},
+					parents: {},
 				},
 				preferences: {
 					insertUsage: {},

package/src/utils/dom.js

@@ -1,5 +1,6 @@
 const BLOCK_SELECTOR = '.block-editor-block-list__block';
 const APPENDER_SELECTOR = '.block-list-appender';
+const BLOCK_APPENDER_CLASS = '.block-editor-button-block-appender';
 
 /**
  * Returns true if two elements are contained within the same block.
@@ -25,7 +26,7 @@ export function isInSameBlock( a, b ) {
  */
 export function isInsideRootBlock( blockElement, element ) {
 	const parentBlock = element.closest(
-		[ BLOCK_SELECTOR, APPENDER_SELECTOR ].join( ',' )
+		[ BLOCK_SELECTOR, APPENDER_SELECTOR, BLOCK_APPENDER_CLASS ].join( ',' )
 	);
 	return parentBlock === blockElement;
 }