@wordpress/block-editor 14.5.0 → 14.7.0

package/src/components/use-block-commands/index.js

@@ -24,275 +24,286 @@ import {
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-export const useTransformCommands = () => {
-	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
-	const {
-		blocks,
-		clientIds,
-		canRemove,
-		possibleBlockTransformations,
-		invalidSelection,
-	} = useSelect( ( select ) => {
+const getTransformCommands = () =>
+	function useTransformCommands() {
+		const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
 		const {
-			getBlockRootClientId,
-			getBlockTransformItems,
-			getSelectedBlockClientIds,
-			getBlocksByClientId,
-			canRemoveBlocks,
-		} = select( blockEditorStore );
+			blocks,
+			clientIds,
+			canRemove,
+			possibleBlockTransformations,
+			invalidSelection,
+		} = useSelect( ( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockTransformItems,
+				getSelectedBlockClientIds,
+				getBlocksByClientId,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const selectedBlocks = getBlocksByClientId(
+				selectedBlockClientIds
+			);
+
+			// selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
+			// These nulls will cause fatal errors down the line.
+			// In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
+			// @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
+			if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) {
+				return {
+					invalidSelection: true,
+				};
+			}
 
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		const selectedBlocks = getBlocksByClientId( selectedBlockClientIds );
+			const rootClientId = getBlockRootClientId(
+				selectedBlockClientIds[ 0 ]
+			);
+			return {
+				blocks: selectedBlocks,
+				clientIds: selectedBlockClientIds,
+				possibleBlockTransformations: getBlockTransformItems(
+					selectedBlocks,
+					rootClientId
+				),
+				canRemove: canRemoveBlocks( selectedBlockClientIds ),
+				invalidSelection: false,
+			};
+		}, [] );
 
-		// selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
-		// These nulls will cause fatal errors down the line.
-		// In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
-		// @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
-		if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) {
+		if ( invalidSelection ) {
 			return {
-				invalidSelection: true,
+				isLoading: false,
+				commands: [],
 			};
 		}
+		const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
+
+		function selectForMultipleBlocks( insertedBlocks ) {
+			if ( insertedBlocks.length > 1 ) {
+				multiSelect(
+					insertedBlocks[ 0 ].clientId,
+					insertedBlocks[ insertedBlocks.length - 1 ].clientId
+				);
+			}
+		}
 
-		const rootClientId = getBlockRootClientId(
-			selectedBlockClientIds[ 0 ]
-		);
-		return {
-			blocks: selectedBlocks,
-			clientIds: selectedBlockClientIds,
-			possibleBlockTransformations: getBlockTransformItems(
-				selectedBlocks,
-				rootClientId
-			),
-			canRemove: canRemoveBlocks( selectedBlockClientIds ),
-			invalidSelection: false,
-		};
-	}, [] );
+		// Simple block tranformation based on the `Block Transforms` API.
+		function onBlockTransform( name ) {
+			const newBlocks = switchToBlockType( blocks, name );
+			replaceBlocks( clientIds, newBlocks );
+			selectForMultipleBlocks( newBlocks );
+		}
 
-	if ( invalidSelection ) {
-		return {
-			isLoading: false,
-			commands: [],
-		};
-	}
-	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
-
-	function selectForMultipleBlocks( insertedBlocks ) {
-		if ( insertedBlocks.length > 1 ) {
-			multiSelect(
-				insertedBlocks[ 0 ].clientId,
-				insertedBlocks[ insertedBlocks.length - 1 ].clientId
-			);
+		/**
+		 * The `isTemplate` check is a stopgap solution here.
+		 * Ideally, the Transforms API should handle this
+		 * by allowing to exclude blocks from wildcard transformations.
+		 */
+		const hasPossibleBlockTransformations =
+			!! possibleBlockTransformations.length && canRemove && ! isTemplate;
+
+		if (
+			! clientIds ||
+			clientIds.length < 1 ||
+			! hasPossibleBlockTransformations
+		) {
+			return { isLoading: false, commands: [] };
 		}
-	}
-
-	// Simple block tranformation based on the `Block Transforms` API.
-	function onBlockTransform( name ) {
-		const newBlocks = switchToBlockType( blocks, name );
-		replaceBlocks( clientIds, newBlocks );
-		selectForMultipleBlocks( newBlocks );
-	}
-
-	/**
-	 * The `isTemplate` check is a stopgap solution here.
-	 * Ideally, the Transforms API should handle this
-	 * by allowing to exclude blocks from wildcard transformations.
-	 */
-	const hasPossibleBlockTransformations =
-		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
-
-	if (
-		! clientIds ||
-		clientIds.length < 1 ||
-		! hasPossibleBlockTransformations
-	) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const commands = possibleBlockTransformations.map( ( transformation ) => {
-		const { name, title, icon } = transformation;
-		return {
-			name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ),
-			// translators: %s: block title/name.
-			label: sprintf( __( 'Transform to %s' ), title ),
-			icon: <BlockIcon icon={ icon } />,
-			callback: ( { close } ) => {
-				onBlockTransform( name );
-				close();
+
+		const commands = possibleBlockTransformations.map(
+			( transformation ) => {
+				const { name, title, icon } = transformation;
+				return {
+					name:
+						'core/block-editor/transform-to-' +
+						name.replace( '/', '-' ),
+					/* translators: %s: Block or block variation name. */
+					label: sprintf( __( 'Transform to %s' ), title ),
+					icon: <BlockIcon icon={ icon } />,
+					callback: ( { close } ) => {
+						onBlockTransform( name );
+						close();
+					},
+				};
+			}
+		);
+
+		return { isLoading: false, commands };
+	};
+
+const getQuickActionsCommands = () =>
+	function useQuickActionsCommands() {
+		const { clientIds, isUngroupable, isGroupable } = useSelect(
+			( select ) => {
+				const {
+					getSelectedBlockClientIds,
+					isUngroupable: _isUngroupable,
+					isGroupable: _isGroupable,
+				} = select( blockEditorStore );
+				const selectedBlockClientIds = getSelectedBlockClientIds();
+
+				return {
+					clientIds: selectedBlockClientIds,
+					isUngroupable: _isUngroupable(),
+					isGroupable: _isGroupable(),
+				};
 			},
-		};
-	} );
+			[]
+		);
+		const {
+			canInsertBlockType,
+			getBlockRootClientId,
+			getBlocksByClientId,
+			canRemoveBlocks,
+		} = useSelect( blockEditorStore );
+		const { getDefaultBlockName, getGroupingBlockName } =
+			useSelect( blocksStore );
 
-	return { isLoading: false, commands };
-};
+		const blocks = getBlocksByClientId( clientIds );
 
-const useQuickActionsCommands = () => {
-	const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
 		const {
-			getSelectedBlockClientIds,
-			isUngroupable: _isUngroupable,
-			isGroupable: _isGroupable,
-		} = select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
+			removeBlocks,
+			replaceBlocks,
+			duplicateBlocks,
+			insertAfterBlock,
+			insertBeforeBlock,
+		} = useDispatch( blockEditorStore );
+
+		const onGroup = () => {
+			if ( ! blocks.length ) {
+				return;
+			}
 
-		return {
-			clientIds: selectedBlockClientIds,
-			isUngroupable: _isUngroupable(),
-			isGroupable: _isGroupable(),
+			const groupingBlockName = getGroupingBlockName();
+
+			// Activate the `transform` on `core/group` which does the conversion.
+			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+
+			if ( ! newBlocks ) {
+				return;
+			}
+			replaceBlocks( clientIds, newBlocks );
 		};
-	}, [] );
-	const {
-		canInsertBlockType,
-		getBlockRootClientId,
-		getBlocksByClientId,
-		canRemoveBlocks,
-	} = useSelect( blockEditorStore );
-	const { getDefaultBlockName, getGroupingBlockName } =
-		useSelect( blocksStore );
-
-	const blocks = getBlocksByClientId( clientIds );
-
-	const {
-		removeBlocks,
-		replaceBlocks,
-		duplicateBlocks,
-		insertAfterBlock,
-		insertBeforeBlock,
-	} = useDispatch( blockEditorStore );
-
-	const onGroup = () => {
-		if ( ! blocks.length ) {
-			return;
-		}
+		const onUngroup = () => {
+			if ( ! blocks.length ) {
+				return;
+			}
 
-		const groupingBlockName = getGroupingBlockName();
+			const innerBlocks = blocks[ 0 ].innerBlocks;
 
-		// Activate the `transform` on `core/group` which does the conversion.
-		const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			if ( ! innerBlocks.length ) {
+				return;
+			}
 
-		if ( ! newBlocks ) {
-			return;
-		}
-		replaceBlocks( clientIds, newBlocks );
-	};
-	const onUngroup = () => {
-		if ( ! blocks.length ) {
-			return;
+			replaceBlocks( clientIds, innerBlocks );
+		};
+
+		if ( ! clientIds || clientIds.length < 1 ) {
+			return { isLoading: false, commands: [] };
 		}
 
-		const innerBlocks = blocks[ 0 ].innerBlocks;
+		const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+		const canInsertDefaultBlock = canInsertBlockType(
+			getDefaultBlockName(),
+			rootClientId
+		);
+		const canDuplicate = blocks.every( ( block ) => {
+			return (
+				!! block &&
+				hasBlockSupport( block.name, 'multiple', true ) &&
+				canInsertBlockType( block.name, rootClientId )
+			);
+		} );
+		const canRemove = canRemoveBlocks( clientIds );
 
-		if ( ! innerBlocks.length ) {
-			return;
+		const commands = [];
+
+		if ( canDuplicate ) {
+			commands.push( {
+				name: 'duplicate',
+				label: __( 'Duplicate' ),
+				callback: () => duplicateBlocks( clientIds, true ),
+				icon: copy,
+			} );
 		}
 
-		replaceBlocks( clientIds, innerBlocks );
-	};
+		if ( canInsertDefaultBlock ) {
+			commands.push(
+				{
+					name: 'add-before',
+					label: __( 'Add before' ),
+					callback: () => {
+						const clientId = Array.isArray( clientIds )
+							? clientIds[ 0 ]
+							: clientId;
+						insertBeforeBlock( clientId );
+					},
+					icon: add,
+				},
+				{
+					name: 'add-after',
+					label: __( 'Add after' ),
+					callback: () => {
+						const clientId = Array.isArray( clientIds )
+							? clientIds[ clientIds.length - 1 ]
+							: clientId;
+						insertAfterBlock( clientId );
+					},
+					icon: add,
+				}
+			);
+		}
 
-	if ( ! clientIds || clientIds.length < 1 ) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-	const canInsertDefaultBlock = canInsertBlockType(
-		getDefaultBlockName(),
-		rootClientId
-	);
-	const canDuplicate = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			hasBlockSupport( block.name, 'multiple', true ) &&
-			canInsertBlockType( block.name, rootClientId )
-		);
-	} );
-	const canRemove = canRemoveBlocks( clientIds );
+		if ( isGroupable ) {
+			commands.push( {
+				name: 'Group',
+				label: __( 'Group' ),
+				callback: onGroup,
+				icon: group,
+			} );
+		}
 
-	const commands = [];
+		if ( isUngroupable ) {
+			commands.push( {
+				name: 'ungroup',
+				label: __( 'Ungroup' ),
+				callback: onUngroup,
+				icon: ungroup,
+			} );
+		}
 
-	if ( canDuplicate ) {
-		commands.push( {
-			name: 'duplicate',
-			label: __( 'Duplicate' ),
-			callback: () => duplicateBlocks( clientIds, true ),
-			icon: copy,
-		} );
-	}
-
-	if ( canInsertDefaultBlock ) {
-		commands.push(
-			{
-				name: 'add-before',
-				label: __( 'Add before' ),
-				callback: () => {
-					const clientId = Array.isArray( clientIds )
-						? clientIds[ 0 ]
-						: clientId;
-					insertBeforeBlock( clientId );
-				},
-				icon: add,
-			},
-			{
-				name: 'add-after',
-				label: __( 'Add after' ),
-				callback: () => {
-					const clientId = Array.isArray( clientIds )
-						? clientIds[ clientIds.length - 1 ]
-						: clientId;
-					insertAfterBlock( clientId );
+		if ( canRemove ) {
+			commands.push( {
+				name: 'remove',
+				label: __( 'Delete' ),
+				callback: () => removeBlocks( clientIds, true ),
+				icon: remove,
+			} );
+		}
+
+		return {
+			isLoading: false,
+			commands: commands.map( ( command ) => ( {
+				...command,
+				name: 'core/block-editor/action-' + command.name,
+				callback: ( { close } ) => {
+					command.callback();
+					close();
 				},
-				icon: add,
-			}
-		);
-	}
-
-	if ( isGroupable ) {
-		commands.push( {
-			name: 'Group',
-			label: __( 'Group' ),
-			callback: onGroup,
-			icon: group,
-		} );
-	}
-
-	if ( isUngroupable ) {
-		commands.push( {
-			name: 'ungroup',
-			label: __( 'Ungroup' ),
-			callback: onUngroup,
-			icon: ungroup,
-		} );
-	}
-
-	if ( canRemove ) {
-		commands.push( {
-			name: 'remove',
-			label: __( 'Delete' ),
-			callback: () => removeBlocks( clientIds, true ),
-			icon: remove,
-		} );
-	}
-
-	return {
-		isLoading: false,
-		commands: commands.map( ( command ) => ( {
-			...command,
-			name: 'core/block-editor/action-' + command.name,
-			callback: ( { close } ) => {
-				command.callback();
-				close();
-			},
-		} ) ),
+			} ) ),
+		};
 	};
-};
 
 export const useBlockCommands = () => {
 	useCommandLoader( {
 		name: 'core/block-editor/blockTransforms',
-		hook: useTransformCommands,
+		hook: getTransformCommands(),
 	} );
 	useCommandLoader( {
 		name: 'core/block-editor/blockQuickActions',
-		hook: useQuickActionsCommands,
+		hook: getQuickActionsCommands(),
 		context: 'block-selection-edit',
 	} );
 };

package/src/components/use-block-drop-zone/index.js

@@ -287,7 +287,7 @@ function isInsertionPoint( targetToCheck, ownerDocument ) {
 	return !! (
 		defaultView &&
 		targetToCheck instanceof defaultView.HTMLElement &&
-		targetToCheck.dataset.isInsertionPoint
+		targetToCheck.closest( '[data-is-insertion-point]' )
 	);
 }
 
@@ -330,7 +330,7 @@ export default function useBlockDropZone( {
 		getAllowedBlocks,
 		isDragging,
 		isGroupable,
-		isZoomOutMode,
+		isZoomOut,
 		getSectionRootClientId,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
@@ -383,7 +383,7 @@ export default function useBlockDropZone( {
 				// do not allow dropping as the drop target is not within the root (that which is
 				// treated as "the content" by Zoom Out Mode).
 				if (
-					isZoomOutMode() &&
+					isZoomOut() &&
 					sectionRootClientId !== targetRootClientId
 				) {
 					return;
@@ -439,7 +439,7 @@ export default function useBlockDropZone( {
 				const [ targetIndex, operation, nearestSide ] =
 					dropTargetPosition;
 
-				if ( isZoomOutMode() && operation !== 'insert' ) {
+				if ( isZoomOut() && operation !== 'insert' ) {
 					return;
 				}
 
@@ -514,7 +514,7 @@ export default function useBlockDropZone( {
 				getDraggedBlockClientIds,
 				getBlockType,
 				getSectionRootClientId,
-				isZoomOutMode,
+				isZoomOut,
 				getBlocks,
 				getBlockListSettings,
 				dropZoneElement,

package/src/components/use-block-drop-zone/index.native.js

@@ -132,7 +132,6 @@ export default function useBlockDropZone( {
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
 		// We use the value of `blocksLayouts` as the dependency.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ blocksLayouts.current ] );
 
 	const isRTL = getSettings().isRTL;

package/src/components/use-moving-animation/index.js

@@ -61,7 +61,6 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 			previous: ref.current && getAbsolutePosition( ref.current ),
 			prevRect: ref.current && ref.current.getBoundingClientRect(),
 		} ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ triggerAnimationOnChange ]
 	);
 

package/src/components/use-settings/index.js

@@ -32,7 +32,6 @@ export function useSettings( ...paths ) {
 				clientId,
 				...paths
 			),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ clientId, ...paths ]
 	);
 }

package/src/components/writing-flow/index.js

@@ -47,19 +47,21 @@ export function useWritingFlow() {
 			useRefEffect(
 				( node ) => {
 					node.tabIndex = 0;
+					node.dataset.hasMultiSelection = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {
-						return;
+						return () => {
+							delete node.dataset.hasMultiSelection;
+						};
 					}
 
-					node.classList.add( 'has-multi-selection' );
 					node.setAttribute(
 						'aria-label',
 						__( 'Multiple selected blocks' )
 					);
 
 					return () => {
-						node.classList.remove( 'has-multi-selection' );
+						delete node.dataset.hasMultiSelection;
 						node.removeAttribute( 'aria-label' );
 					};
 				},

package/src/components/writing-flow/use-tab-nav.js

@@ -27,7 +27,6 @@ export default function useTabNav() {
 		getLastFocus,
 		getSectionRootClientId,
 		isZoomOut,
-		__unstableGetEditorMode,
 	} = unlock( useSelect( blockEditorStore ) );
 	const { setLastFocus } = unlock( useDispatch( blockEditorStore ) );
 
@@ -54,7 +53,7 @@ export default function useTabNav() {
 			}
 		}
 		// In "compose" mode without a selected ID, we want to place focus on the section root when tabbing to the canvas.
-		else if ( __unstableGetEditorMode() === 'zoom-out' && isZoomOut() ) {
+		else if ( isZoomOut() ) {
 			const sectionRootClientId = getSectionRootClientId();
 			const sectionBlocks = getBlockOrder( sectionRootClientId );