@wordpress/block-editor 10.2.0 → 10.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.2.0",
+	"version": "10.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,33 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.19.0",
-		"@wordpress/api-fetch": "^6.16.0",
-		"@wordpress/blob": "^3.19.0",
-		"@wordpress/blocks": "^11.18.0",
-		"@wordpress/components": "^21.2.0",
-		"@wordpress/compose": "^5.17.0",
-		"@wordpress/data": "^7.3.0",
-		"@wordpress/date": "^4.19.0",
-		"@wordpress/deprecated": "^3.19.0",
-		"@wordpress/dom": "^3.19.0",
-		"@wordpress/element": "^4.17.0",
-		"@wordpress/hooks": "^3.19.0",
-		"@wordpress/html-entities": "^3.19.0",
-		"@wordpress/i18n": "^4.19.0",
-		"@wordpress/icons": "^9.10.0",
-		"@wordpress/is-shallow-equal": "^4.19.0",
-		"@wordpress/keyboard-shortcuts": "^3.17.0",
-		"@wordpress/keycodes": "^3.19.0",
-		"@wordpress/notices": "^3.19.0",
-		"@wordpress/rich-text": "^5.17.0",
-		"@wordpress/shortcode": "^3.19.0",
-		"@wordpress/style-engine": "^1.2.0",
-		"@wordpress/token-list": "^2.19.0",
-		"@wordpress/url": "^3.20.0",
-		"@wordpress/warning": "^2.19.0",
-		"@wordpress/wordcount": "^3.19.0",
+		"@wordpress/a11y": "^3.21.0",
+		"@wordpress/api-fetch": "^6.18.0",
+		"@wordpress/blob": "^3.21.0",
+		"@wordpress/blocks": "^11.20.0",
+		"@wordpress/components": "^22.0.0",
+		"@wordpress/compose": "^5.19.0",
+		"@wordpress/data": "^7.5.0",
+		"@wordpress/date": "^4.21.0",
+		"@wordpress/deprecated": "^3.21.0",
+		"@wordpress/dom": "^3.21.0",
+		"@wordpress/element": "^4.19.0",
+		"@wordpress/hooks": "^3.21.0",
+		"@wordpress/html-entities": "^3.21.0",
+		"@wordpress/i18n": "^4.21.0",
+		"@wordpress/icons": "^9.12.0",
+		"@wordpress/is-shallow-equal": "^4.21.0",
+		"@wordpress/keyboard-shortcuts": "^3.19.0",
+		"@wordpress/keycodes": "^3.21.0",
+		"@wordpress/notices": "^3.21.0",
+		"@wordpress/rich-text": "^5.19.0",
+		"@wordpress/shortcode": "^3.21.0",
+		"@wordpress/style-engine": "^1.4.0",
+		"@wordpress/token-list": "^2.21.0",
+		"@wordpress/url": "^3.22.0",
+		"@wordpress/warning": "^2.21.0",
+		"@wordpress/wordcount": "^3.21.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -78,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
+	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
 }

package/src/components/alignment-control/ui.js

@@ -30,7 +30,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function AlignmentUI( {

package/src/components/block-alignment-control/constants.js

@@ -41,5 +41,5 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
 export const DEFAULT_CONTROL = 'none';
 
 export const POPOVER_PROPS = {
-	isAlternate: true,
+	variant: 'toolbar',
 };

package/src/components/block-alignment-matrix-control/index.js

@@ -24,7 +24,7 @@ function BlockAlignmentMatrixControl( props ) {
 	return (
 		<Dropdown
 			position="bottom right"
-			popoverProps={ { isAlternate: true } }
+			popoverProps={ { variant: 'toolbar' } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

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

@@ -1,16 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockBreadcrumb should render correctly 1`] = `
-<ul
-  aria-label="Block breadcrumb"
-  class="block-editor-block-breadcrumb"
-  role="list"
->
-  <li
-    aria-current="true"
-    class="block-editor-block-breadcrumb__current"
+<div>
+  <ul
+    aria-label="Block breadcrumb"
+    class="block-editor-block-breadcrumb"
+    role="list"
   >
-    Document
-  </li>
-</ul>
+    <li
+      aria-current="true"
+      class="block-editor-block-breadcrumb__current"
+    >
+      Document
+    </li>
+  </ul>
+</div>
 `;

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

@@ -12,7 +12,7 @@ describe( 'BlockBreadcrumb', () => {
 	it( 'should render correctly', () => {
 		const { container } = render( <BlockBreadcrumb /> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	describe( 'Root label text', () => {
@@ -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-compare/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { castArray } from 'lodash';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -44,7 +43,9 @@ function BlockCompare( {
 
 	function getConvertedContent( convertedBlock ) {
 		// The convertor may return an array of items or a single item.
-		const newBlocks = castArray( convertedBlock );
+		const newBlocks = Array.isArray( convertedBlock )
+			? convertedBlock
+			: [ convertedBlock ];
 
 		// Get converted block details.
 		const newContent = newBlocks.map( ( item ) =>

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-edit/index.js

@@ -20,11 +20,12 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {
-	const { name, isSelected, clientId } = props;
+	const { name, isSelected, clientId, __unstableLayoutClassNames } = props;
 	const context = {
 		name,
 		isSelected,
 		clientId,
+		__unstableLayoutClassNames,
 	};
 	return (
 		<BlockEditContextProvider

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

@@ -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'
@@ -143,6 +144,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getSelectedBlockCount,
 			getBlockName,
 			__unstableGetContentLockingParent,
+			getTemplateLock,
 		} = select( blockEditorStore );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -156,9 +158,11 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockClientId: _selectedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock: __unstableGetContentLockingParent(
-				_selectedBlockClientId
-			),
+			topLevelLockedBlock:
+				__unstableGetContentLockingParent( _selectedBlockClientId ) ||
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+					? _selectedBlockClientId
+					: undefined ),
 		};
 	}, [] );
 
@@ -241,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',

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

@@ -84,6 +84,7 @@ function BlockListBlock( {
 	isSelected,
 	isSelectionEnabled,
 	className,
+	__unstableLayoutClassNames: layoutClassNames,
 	name,
 	isValid,
 	attributes,
@@ -146,6 +147,7 @@ function BlockListBlock( {
 			clientId={ clientId }
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
+			__unstableLayoutClassNames={ layoutClassNames }
 		/>
 	);
 
@@ -296,7 +298,7 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 	};
 } );
 
-const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
+const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	const {
 		updateBlockAttributes,
 		insertBlocks,
@@ -304,6 +306,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 +316,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 +332,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 +457,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 );
+							} );
+						}
 					}
 				}
 			},