@wordpress/block-editor 10.1.1-next.4d3b314fd5.0 → 10.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.1.1-next.4d3b314fd5.0",
+	"version": "10.3.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,33 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
-		"@wordpress/blob": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
-		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
-		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
-		"@wordpress/date": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/dom": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
-		"@wordpress/is-shallow-equal": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/keyboard-shortcuts": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/rich-text": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/shortcode": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/style-engine": "^1.1.1-next.4d3b314fd5.0",
-		"@wordpress/token-list": "^2.18.1-next.4d3b314fd5.0",
-		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
-		"@wordpress/warning": "^2.18.1-next.4d3b314fd5.0",
-		"@wordpress/wordcount": "^3.18.1-next.4d3b314fd5.0",
-		"change-case": "^4.1.2",
+		"@wordpress/a11y": "^3.20.0",
+		"@wordpress/api-fetch": "^6.17.0",
+		"@wordpress/blob": "^3.20.0",
+		"@wordpress/blocks": "^11.19.0",
+		"@wordpress/components": "^21.3.0",
+		"@wordpress/compose": "^5.18.0",
+		"@wordpress/data": "^7.4.0",
+		"@wordpress/date": "^4.20.0",
+		"@wordpress/deprecated": "^3.20.0",
+		"@wordpress/dom": "^3.20.0",
+		"@wordpress/element": "^4.18.0",
+		"@wordpress/hooks": "^3.20.0",
+		"@wordpress/html-entities": "^3.20.0",
+		"@wordpress/i18n": "^4.20.0",
+		"@wordpress/icons": "^9.11.0",
+		"@wordpress/is-shallow-equal": "^4.20.0",
+		"@wordpress/keyboard-shortcuts": "^3.18.0",
+		"@wordpress/keycodes": "^3.20.0",
+		"@wordpress/notices": "^3.20.0",
+		"@wordpress/rich-text": "^5.18.0",
+		"@wordpress/shortcode": "^3.20.0",
+		"@wordpress/style-engine": "^1.3.0",
+		"@wordpress/token-list": "^2.20.0",
+		"@wordpress/url": "^3.21.0",
+		"@wordpress/warning": "^2.20.0",
+		"@wordpress/wordcount": "^3.20.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -79,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
+	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
 }

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

@@ -30,7 +30,7 @@ describe( 'BlockBreadcrumb', () => {
 			const rootLabelText = screen.getByText( 'Tuhinga' );
 			const rootLabelTextDefault = screen.queryByText( 'Document' );
 
-			expect( rootLabelTextDefault ).toBeNull();
+			expect( rootLabelTextDefault ).not.toBeInTheDocument();
 			expect( rootLabelText ).toBeInTheDocument();
 		} );
 	} );

package/src/components/block-controls/slot.js

@@ -5,7 +5,7 @@ import { useContext } from '@wordpress/element';
 import {
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 
 /**
@@ -16,8 +16,8 @@ import groups from './groups';
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
 	const Slot = groups[ group ].Slot;
-	const slot = useSlot( Slot.__unstableName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( Slot.__unstableName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return null;

package/src/components/block-draggable/draggable-chip.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { Flex, FlexItem } from '@wordpress/components';
 import { dragHandle } from '@wordpress/icons';
 
@@ -10,7 +10,8 @@ import { dragHandle } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 
-export default function BlockDraggableChip( { count, icon } ) {
+export default function BlockDraggableChip( { count, icon, isPattern } ) {
+	const patternLabel = isPattern && __( 'Pattern' );
 	return (
 		<div className="block-editor-block-draggable-chip-wrapper">
 			<div
@@ -25,6 +26,7 @@ export default function BlockDraggableChip( { count, icon } ) {
 						{ icon ? (
 							<BlockIcon icon={ icon } />
 						) : (
+							patternLabel ||
 							sprintf(
 								/* translators: %d: Number of blocks. */
 								_n( '%d block', '%d blocks', count ),

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

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/blocks';
 import {
 	PanelBody,
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 	FlexItem,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -40,6 +40,7 @@ function useContentBlocks( blockTypes, block ) {
 	const contenBlocksObjectAux = useMemo( () => {
 		return blockTypes.reduce( ( result, blockType ) => {
 			if (
+				blockType.name !== 'core/list-item' &&
 				Object.entries( blockType.attributes ).some(
 					( [ , { __experimentalRole } ] ) =>
 						__experimentalRole === 'content'
@@ -158,11 +159,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
 			topLevelLockedBlock:
-				getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+				__unstableGetContentLockingParent( _selectedBlockClientId ) ||
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
 					? _selectedBlockClientId
-					: __unstableGetContentLockingParent(
-							_selectedBlockClientId
-					  ),
+					: undefined ),
 		};
 	}, [] );
 
@@ -245,10 +245,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 			{ hasBlockStyles && (
 				<div>
 					<PanelBody title={ __( 'Styles' ) }>
-						<BlockStyles
-							scope="core/block-inspector"
-							clientId={ clientId }
-						/>
+						<BlockStyles clientId={ clientId } />
 						{ hasBlockSupport(
 							blockName,
 							'defaultStylePicker',
@@ -284,8 +281,8 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 };
 
 const AdvancedControls = () => {
-	const slot = useSlot( InspectorAdvancedControls.slotName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( InspectorAdvancedControls.slotName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return null;

package/src/components/block-list/block-list-compact.native.js

@@ -50,6 +50,7 @@ function BlockListCompact( props ) {
 			{ blockClientIds.map( ( currentClientId ) => (
 				<BlockListBlock
 					clientId={ currentClientId }
+					rootClientId={ rootClientId }
 					key={ currentClientId }
 					marginHorizontal={ marginHorizontal }
 					marginVertical={ marginVertical }

package/src/components/block-list/block.js

@@ -296,7 +296,7 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 	};
 } );
 
-const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
+const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	const {
 		updateBlockAttributes,
 		insertBlocks,
@@ -304,6 +304,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 		replaceBlocks,
 		toggleSelection,
 		__unstableMarkLastChangeAsPersistent,
+		moveBlocksToPosition,
+		removeBlock,
+		selectBlock,
 	} = dispatch( blockEditorStore );
 
 	// Do not add new properties here, use `useDispatch` instead to avoid
@@ -311,7 +314,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 	return {
 		setAttributes( newAttributes ) {
 			const { getMultiSelectedBlockClientIds } =
-				select( blockEditorStore );
+				registry.select( blockEditorStore );
 			const multiSelectedBlockClientIds =
 				getMultiSelectedBlockClientIds();
 			const { clientId } = ownProps;
@@ -327,26 +330,124 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 		},
 		onInsertBlocksAfter( blocks ) {
 			const { clientId, rootClientId } = ownProps;
-			const { getBlockIndex } = select( blockEditorStore );
+			const { getBlockIndex } = registry.select( blockEditorStore );
 			const index = getBlockIndex( clientId );
 			insertBlocks( blocks, index + 1, rootClientId );
 		},
 		onMerge( forward ) {
 			const { clientId, rootClientId } = ownProps;
-			const { getPreviousBlockClientId, getNextBlockClientId, getBlock } =
-				select( blockEditorStore );
+			const {
+				getPreviousBlockClientId,
+				getNextBlockClientId,
+				getBlock,
+				getBlockAttributes,
+				getBlockName,
+				getBlockOrder,
+			} = registry.select( blockEditorStore );
 
+			// For `Delete` or forward merge, we should do the exact same thing
+			// as `Backspace`, but from the other block.
 			if ( forward ) {
+				if ( rootClientId ) {
+					const nextRootClientId =
+						getNextBlockClientId( rootClientId );
+
+					if ( nextRootClientId ) {
+						// If there is a block that follows with the same parent
+						// block name and the same attributes, merge the inner
+						// blocks.
+						if (
+							getBlockName( rootClientId ) ===
+							getBlockName( nextRootClientId )
+						) {
+							const rootAttributes =
+								getBlockAttributes( rootClientId );
+							const previousRootAttributes =
+								getBlockAttributes( nextRootClientId );
+
+							if (
+								Object.keys( rootAttributes ).every(
+									( key ) =>
+										rootAttributes[ key ] ===
+										previousRootAttributes[ key ]
+								)
+							) {
+								registry.batch( () => {
+									moveBlocksToPosition(
+										getBlockOrder( nextRootClientId ),
+										nextRootClientId,
+										rootClientId
+									);
+									removeBlock( nextRootClientId, false );
+								} );
+								return;
+							}
+						} else {
+							mergeBlocks( rootClientId, nextRootClientId );
+							return;
+						}
+					}
+				}
+
 				const nextBlockClientId = getNextBlockClientId( clientId );
-				if ( nextBlockClientId ) {
+
+				if ( ! nextBlockClientId ) {
+					return;
+				}
+
+				// Check if it's possibile to "unwrap" the following block
+				// before trying to merge.
+				const replacement = switchToBlockType(
+					getBlock( nextBlockClientId ),
+					'*'
+				);
+
+				if ( replacement && replacement.length ) {
+					replaceBlocks( nextBlockClientId, replacement );
+				} else {
 					mergeBlocks( clientId, nextBlockClientId );
 				}
 			} else {
 				const previousBlockClientId =
 					getPreviousBlockClientId( clientId );
+
 				if ( previousBlockClientId ) {
 					mergeBlocks( previousBlockClientId, clientId );
 				} else if ( rootClientId ) {
+					const previousRootClientId =
+						getPreviousBlockClientId( rootClientId );
+
+					// If there is a preceding block with the same parent block
+					// name and the same attributes, merge the inner blocks.
+					if (
+						previousRootClientId &&
+						getBlockName( rootClientId ) ===
+							getBlockName( previousRootClientId )
+					) {
+						const rootAttributes =
+							getBlockAttributes( rootClientId );
+						const previousRootAttributes =
+							getBlockAttributes( previousRootClientId );
+
+						if (
+							Object.keys( rootAttributes ).every(
+								( key ) =>
+									rootAttributes[ key ] ===
+									previousRootAttributes[ key ]
+							)
+						) {
+							registry.batch( () => {
+								moveBlocksToPosition(
+									getBlockOrder( rootClientId ),
+									rootClientId,
+									previousRootClientId
+								);
+								removeBlock( rootClientId, false );
+							} );
+							return;
+						}
+					}
+
 					// Attempt to "unwrap" the block contents when there's no
 					// preceding block to merge with.
 					const replacement = switchToBlockType(
@@ -354,7 +455,10 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 						'*'
 					);
 					if ( replacement && replacement.length ) {
-						replaceBlocks( rootClientId, replacement, 0 );
+						registry.batch( () => {
+							replaceBlocks( rootClientId, replacement );
+							selectBlock( replacement[ 0 ].clientId, 0 );
+						} );
 					}
 				}
 			}

package/src/components/block-list/block.native.js

@@ -20,6 +20,7 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
 	getBlockType,
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
+	switchToBlockType,
 } from '@wordpress/blocks';
 import { useSetting } from '@wordpress/block-editor';
 
@@ -41,7 +42,7 @@ function BlockForType( {
 	getBlockWidth,
 	insertBlocksAfter,
 	isSelected,
-	mergeBlocks,
+	onMerge,
 	name,
 	onBlockFocus,
 	onChange,
@@ -87,7 +88,7 @@ function BlockForType( {
 				onFocus={ onBlockFocus }
 				onReplace={ onReplace }
 				insertBlocksAfter={ insertBlocksAfter }
-				mergeBlocks={ mergeBlocks }
+				mergeBlocks={ onMerge }
 				// Block level styles.
 				wrapperProps={ wrapperProps }
 				// Inherited styles merged with block level styles.
@@ -407,31 +408,144 @@ export default compose( [
 			),
 		};
 	} ),
-	withDispatch( ( dispatch, ownProps, { select } ) => {
+	withDispatch( ( dispatch, ownProps, registry ) => {
 		const {
 			insertBlocks,
 			mergeBlocks,
 			replaceBlocks,
 			selectBlock,
 			updateBlockAttributes,
+			moveBlocksToPosition,
+			removeBlock,
 		} = dispatch( blockEditorStore );
 
 		return {
-			mergeBlocks( forward ) {
-				const { clientId } = ownProps;
-				const { getPreviousBlockClientId, getNextBlockClientId } =
-					select( blockEditorStore );
-
+			onMerge( forward ) {
+				const { clientId, rootClientId } = ownProps;
+				const {
+					getPreviousBlockClientId,
+					getNextBlockClientId,
+					getBlock,
+					getBlockAttributes,
+					getBlockName,
+					getBlockOrder,
+				} = registry.select( blockEditorStore );
+
+				// For `Delete` or forward merge, we should do the exact same thing
+				// as `Backspace`, but from the other block.
 				if ( forward ) {
+					if ( rootClientId ) {
+						const nextRootClientId =
+							getNextBlockClientId( rootClientId );
+
+						if ( nextRootClientId ) {
+							// If there is a block that follows with the same parent
+							// block name and the same attributes, merge the inner
+							// blocks.
+							if (
+								getBlockName( rootClientId ) ===
+								getBlockName( nextRootClientId )
+							) {
+								const rootAttributes =
+									getBlockAttributes( rootClientId );
+								const previousRootAttributes =
+									getBlockAttributes( nextRootClientId );
+
+								if (
+									Object.keys( rootAttributes ).every(
+										( key ) =>
+											rootAttributes[ key ] ===
+											previousRootAttributes[ key ]
+									)
+								) {
+									registry.batch( () => {
+										moveBlocksToPosition(
+											getBlockOrder( nextRootClientId ),
+											nextRootClientId,
+											rootClientId
+										);
+										removeBlock( nextRootClientId, false );
+									} );
+									return;
+								}
+							} else {
+								mergeBlocks( rootClientId, nextRootClientId );
+								return;
+							}
+						}
+					}
+
 					const nextBlockClientId = getNextBlockClientId( clientId );
-					if ( nextBlockClientId ) {
+
+					if ( ! nextBlockClientId ) {
+						return;
+					}
+
+					// Check if it's possibile to "unwrap" the following block
+					// before trying to merge.
+					const replacement = switchToBlockType(
+						getBlock( nextBlockClientId ),
+						'*'
+					);
+
+					if ( replacement && replacement.length ) {
+						replaceBlocks( nextBlockClientId, replacement );
+					} else {
 						mergeBlocks( clientId, nextBlockClientId );
 					}
 				} else {
 					const previousBlockClientId =
 						getPreviousBlockClientId( clientId );
+
 					if ( previousBlockClientId ) {
 						mergeBlocks( previousBlockClientId, clientId );
+					} else if ( rootClientId ) {
+						const previousRootClientId =
+							getPreviousBlockClientId( rootClientId );
+
+						// If there is a preceding block with the same parent block
+						// name and the same attributes, merge the inner blocks.
+						if (
+							previousRootClientId &&
+							getBlockName( rootClientId ) ===
+								getBlockName( previousRootClientId )
+						) {
+							const rootAttributes =
+								getBlockAttributes( rootClientId );
+							const previousRootAttributes =
+								getBlockAttributes( previousRootClientId );
+
+							if (
+								Object.keys( rootAttributes ).every(
+									( key ) =>
+										rootAttributes[ key ] ===
+										previousRootAttributes[ key ]
+								)
+							) {
+								registry.batch( () => {
+									moveBlocksToPosition(
+										getBlockOrder( rootClientId ),
+										rootClientId,
+										previousRootClientId
+									);
+									removeBlock( rootClientId, false );
+								} );
+								return;
+							}
+						}
+
+						// Attempt to "unwrap" the block contents when there's no
+						// preceding block to merge with.
+						const replacement = switchToBlockType(
+							getBlock( rootClientId ),
+							'*'
+						);
+						if ( replacement && replacement.length ) {
+							registry.batch( () => {
+								replaceBlocks( rootClientId, replacement );
+								selectBlock( replacement[ 0 ].clientId, 0 );
+							} );
+						}
 					}
 				}
 			},