@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.5.0",
+	"version": "9.7.1-next.d6164808d3.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.13.0",
-		"@wordpress/api-fetch": "^6.10.0",
-		"@wordpress/blob": "^3.13.0",
-		"@wordpress/blocks": "^11.12.0",
-		"@wordpress/components": "^19.15.0",
-		"@wordpress/compose": "^5.11.0",
-		"@wordpress/data": "^6.13.0",
-		"@wordpress/date": "^4.13.0",
-		"@wordpress/deprecated": "^3.13.0",
-		"@wordpress/dom": "^3.13.0",
-		"@wordpress/element": "^4.11.0",
-		"@wordpress/hooks": "^3.13.0",
-		"@wordpress/html-entities": "^3.13.0",
-		"@wordpress/i18n": "^4.13.0",
-		"@wordpress/icons": "^9.4.0",
-		"@wordpress/is-shallow-equal": "^4.13.0",
-		"@wordpress/keyboard-shortcuts": "^3.11.0",
-		"@wordpress/keycodes": "^3.13.0",
-		"@wordpress/notices": "^3.13.0",
-		"@wordpress/rich-text": "^5.11.0",
-		"@wordpress/shortcode": "^3.13.0",
-		"@wordpress/style-engine": "^0.12.0",
-		"@wordpress/token-list": "^2.13.0",
-		"@wordpress/url": "^3.14.0",
-		"@wordpress/warning": "^2.13.0",
-		"@wordpress/wordcount": "^3.13.0",
+		"@wordpress/a11y": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/api-fetch": "^6.12.1-next.d6164808d3.0",
+		"@wordpress/blob": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/blocks": "^11.14.1-next.d6164808d3.0",
+		"@wordpress/components": "^20.0.1-next.d6164808d3.0",
+		"@wordpress/compose": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/data": "^7.0.1-next.d6164808d3.0",
+		"@wordpress/date": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/deprecated": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/dom": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/element": "^4.13.1-next.d6164808d3.0",
+		"@wordpress/hooks": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/html-entities": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/i18n": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/icons": "^9.6.1-next.d6164808d3.0",
+		"@wordpress/is-shallow-equal": "^4.15.1-next.d6164808d3.0",
+		"@wordpress/keyboard-shortcuts": "^3.13.1-next.d6164808d3.0",
+		"@wordpress/keycodes": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/notices": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/rich-text": "^5.13.1-next.d6164808d3.0",
+		"@wordpress/shortcode": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/style-engine": "^0.14.1-next.d6164808d3.0",
+		"@wordpress/token-list": "^2.15.1-next.d6164808d3.0",
+		"@wordpress/url": "^3.16.1-next.d6164808d3.0",
+		"@wordpress/warning": "^2.15.1-next.d6164808d3.0",
+		"@wordpress/wordcount": "^3.15.1-next.d6164808d3.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -68,6 +69,7 @@
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
 		"rememo": "^4.0.0",
+		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
@@ -77,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
+	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
 }

package/src/components/block-alignment-control/use-available-alignments.js

@@ -46,7 +46,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
-	if ( layoutType.name !== 'default' ) {
+	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
 		return [];
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;

package/src/components/block-edit-visually-button/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockEditVisuallyButton( { clientIds } ) {
+	// Edit visually only works for single block selection.
+	const clientId = clientIds.length === 1 ? clientIds[ 0 ] : undefined;
+	const canEditVisually = useSelect(
+		( select ) =>
+			!! clientId &&
+			select( blockEditorStore ).getBlockMode( clientId ) === 'html',
+		[ clientId ]
+	);
+	const { toggleBlockMode } = useDispatch( blockEditorStore );
+
+	if ( ! canEditVisually ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				onClick={ () => {
+					toggleBlockMode( clientId );
+				} }
+			>
+				{ __( 'Edit visually' ) }
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}

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

@@ -18,6 +18,7 @@ import {
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
 	serializeRawBlock,
+	switchToBlockType,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -291,8 +292,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 			insertBlocks( blocks, index + 1, rootClientId );
 		},
 		onMerge( forward ) {
-			const { clientId } = ownProps;
-			const { getPreviousBlockClientId, getNextBlockClientId } =
+			const { clientId, rootClientId } = ownProps;
+			const { getPreviousBlockClientId, getNextBlockClientId, getBlock } =
 				select( blockEditorStore );
 
 			if ( forward ) {
@@ -305,6 +306,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 					getPreviousBlockClientId( clientId );
 				if ( previousBlockClientId ) {
 					mergeBlocks( previousBlockClientId, clientId );
+				} else if ( rootClientId ) {
+					// Attempt to "unwrap" the block contents when there's no
+					// preceding block to merge with.
+					const replacement = switchToBlockType(
+						getBlock( rootClientId ),
+						'*'
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( rootClientId, replacement, 0 );
+					}
 				}
 			}
 		},

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

@@ -469,7 +469,7 @@ class EmptyListComponent extends Component {
 			renderFooterAppender,
 		} = this.props;
 
-		if ( renderFooterAppender ) {
+		if ( renderFooterAppender || renderAppender === false ) {
 			return null;
 		}
 

package/src/components/block-lock/modal.js

@@ -88,6 +88,11 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
 		>
+			<p>
+				{ __(
+					'Choose specific attributes to restrict or lock all available options.'
+				) }
+			</p>
 			<form
 				onSubmit={ ( event ) => {
 					event.preventDefault();
@@ -100,11 +105,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					onClose();
 				} }
 			>
-				<p>
-					{ __(
-						'Choose specific attributes to restrict or lock all available options.'
-					) }
-				</p>
 				<div
 					role="group"
 					aria-labelledby={ instanceId }

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Platform, findNodeHandle } from 'react-native';
-import { partial, first, castArray, last, compact, every } from 'lodash';
+import { partial, first, castArray, last, every } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -202,7 +202,7 @@ const BlockActionsMenu = ( {
 		},
 	};
 
-	const options = compact( [
+	const options = [
 		wrapBlockMover && allOptions.backwardButton,
 		wrapBlockMover && allOptions.forwardButton,
 		wrapBlockSettings && allOptions.settings,
@@ -215,7 +215,7 @@ const BlockActionsMenu = ( {
 		canDuplicate && allOptions.duplicateButton,
 		isReusableBlockType && allOptions.convertToRegularBlocks,
 		! isLocked && allOptions.delete,
-	] );
+	].filter( Boolean );
 
 	// End early if there are no options to show.
 	if ( ! options.length ) {

package/src/components/block-mover/mover-description.js

@@ -1,7 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
+
+const getMovementDirection = ( moveDirection, orientation ) => {
+	if ( moveDirection === 'up' ) {
+		if ( orientation === 'horizontal' ) {
+			return isRTL() ? 'right' : 'left';
+		}
+		return 'up';
+	} else if ( moveDirection === 'down' ) {
+		if ( orientation === 'horizontal' ) {
+			return isRTL() ? 'left' : 'right';
+		}
+		return 'down';
+	}
+	return null;
+};
 
 /**
  * Return a label for the block movement controls depending on block position.
@@ -30,28 +45,14 @@ export function getBlockMoverDescription(
 ) {
 	const position = firstIndex + 1;
 
-	const getMovementDirection = ( moveDirection ) => {
-		if ( moveDirection === 'up' ) {
-			if ( orientation === 'horizontal' ) {
-				return isRTL() ? 'right' : 'left';
-			}
-			return 'up';
-		} else if ( moveDirection === 'down' ) {
-			if ( orientation === 'horizontal' ) {
-				return isRTL() ? 'left' : 'right';
-			}
-			return 'down';
-		}
-		return null;
-	};
-
 	if ( selectedCount > 1 ) {
 		return getMultiBlockMoverDescription(
 			selectedCount,
 			firstIndex,
 			isFirst,
 			isLast,
-			dir
+			dir,
+			orientation
 		);
 	}
 
@@ -65,7 +66,7 @@ export function getBlockMoverDescription(
 
 	if ( dir > 0 && ! isLast ) {
 		// Moving down.
-		const movementDirection = getMovementDirection( 'down' );
+		const movementDirection = getMovementDirection( 'down', orientation );
 
 		if ( movementDirection === 'down' ) {
 			return sprintf(
@@ -106,7 +107,7 @@ export function getBlockMoverDescription(
 
 	if ( dir > 0 && isLast ) {
 		// Moving down, and is the last item.
-		const movementDirection = getMovementDirection( 'down' );
+		const movementDirection = getMovementDirection( 'down', orientation );
 
 		if ( movementDirection === 'down' ) {
 			return sprintf(
@@ -141,7 +142,7 @@ export function getBlockMoverDescription(
 
 	if ( dir < 0 && ! isFirst ) {
 		// Moving up.
-		const movementDirection = getMovementDirection( 'up' );
+		const movementDirection = getMovementDirection( 'up', orientation );
 
 		if ( movementDirection === 'up' ) {
 			return sprintf(
@@ -180,7 +181,7 @@ export function getBlockMoverDescription(
 
 	if ( dir < 0 && isFirst ) {
 		// Moving up, and is the first item.
-		const movementDirection = getMovementDirection( 'up' );
+		const movementDirection = getMovementDirection( 'up', orientation );
 
 		if ( movementDirection === 'up' ) {
 			return sprintf(
@@ -223,6 +224,8 @@ export function getBlockMoverDescription(
  * @param {boolean} isLast        This is the last block.
  * @param {number}  dir           Direction of movement (> 0 is considered to be going
  *                                down, < 0 is up).
+ * @param {string}  orientation   The orientation of the block movers, vertical or
+ *                                horizontal.
  *
  * @return {string} Label for the block movement controls.
  */
@@ -231,43 +234,123 @@ export function getMultiBlockMoverDescription(
 	firstIndex,
 	isFirst,
 	isLast,
-	dir
+	dir,
+	orientation
 ) {
 	const position = firstIndex + 1;
 
-	if ( dir < 0 && isFirst ) {
-		return __( 'Blocks cannot be moved up as they are already at the top' );
+	if ( isFirst && isLast ) {
+		// All blocks are selected
+		return __( 'All blocks are selected, and cannot be moved' );
+	}
+
+	if ( dir > 0 && ! isLast ) {
+		// moving down
+		const movementDirection = getMovementDirection( 'down', orientation );
+
+		if ( movementDirection === 'down' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d down by one place' ),
+				selectedCount,
+				position
+			);
+		}
+
+		if ( movementDirection === 'left' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d left by one place' ),
+				selectedCount,
+				position
+			);
+		}
+
+		if ( movementDirection === 'right' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d right by one place' ),
+				selectedCount,
+				position
+			);
+		}
 	}
 
 	if ( dir > 0 && isLast ) {
-		return __(
-			'Blocks cannot be moved down as they are already at the bottom'
-		);
+		// moving down, and the selected blocks are the last item
+		const movementDirection = getMovementDirection( 'down', orientation );
+
+		if ( movementDirection === 'down' ) {
+			return __(
+				'Blocks cannot be moved down as they are already at the bottom'
+			);
+		}
+
+		if ( movementDirection === 'left' ) {
+			return __(
+				'Blocks cannot be moved left as they are already are at the leftmost position'
+			);
+		}
+
+		if ( movementDirection === 'right' ) {
+			return __(
+				'Blocks cannot be moved right as they are already are at the rightmost position'
+			);
+		}
 	}
 
 	if ( dir < 0 && ! isFirst ) {
-		return sprintf(
-			// translators: 1: Number of selected blocks, 2: Position of selected blocks
-			_n(
-				'Move %1$d block from position %2$d up by one place',
-				'Move %1$d blocks from position %2$d up by one place',
-				selectedCount
-			),
-			selectedCount,
-			position
-		);
+		// moving up
+		const movementDirection = getMovementDirection( 'up', orientation );
+
+		if ( movementDirection === 'up' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d up by one place' ),
+				selectedCount,
+				position
+			);
+		}
+
+		if ( movementDirection === 'left' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d left by one place' ),
+				selectedCount,
+				position
+			);
+		}
+
+		if ( movementDirection === 'right' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d right by one place' ),
+				selectedCount,
+				position
+			);
+		}
 	}
 
-	if ( dir > 0 && ! isLast ) {
-		return sprintf(
-			// translators: 1: Number of selected blocks, 2: Position of selected blocks
-			_n(
-				'Move %1$d block from position %2$d down by one place',
-				'Move %1$d blocks from position %2$d down by one place',
-				selectedCount
-			),
-			selectedCount,
-			position
-		);
+	if ( dir < 0 && isFirst ) {
+		// moving up, and the selected blocks are the first item
+		const movementDirection = getMovementDirection( 'up', orientation );
+
+		if ( movementDirection === 'up' ) {
+			return __(
+				'Blocks cannot be moved up as they are already at the top'
+			);
+		}
+
+		if ( movementDirection === 'left' ) {
+			return __(
+				'Blocks cannot be moved left as they are already are at the leftmost position'
+			);
+		}
+
+		if ( movementDirection === 'right' ) {
+			return __(
+				'Blocks cannot be moved right as they are already are at the rightmost position'
+			);
+		}
 	}
 }

package/src/components/block-mover/test/mover-description.js

@@ -183,9 +183,7 @@ describe( 'block mover', () => {
 					true,
 					negativeDirection
 				)
-			).toBe(
-				'Blocks cannot be moved up as they are already at the top'
-			);
+			).toBe( 'All blocks are selected, and cannot be moved' );
 		} );
 
 		it( 'generates a title for a selection of blocks at the bottom', () => {
@@ -201,5 +199,59 @@ describe( 'block mover', () => {
 				'Blocks cannot be moved down as they are already at the bottom'
 			);
 		} );
+
+		it( 'indicates that blocks can be moved left when the orientation is horizontal and the direction is negative', () => {
+			expect(
+				getMultiBlockMoverDescription(
+					4,
+					1,
+					false,
+					true,
+					negativeDirection,
+					'horizontal'
+				)
+			).toBe( 'Move 4 blocks from position 2 left by one place' );
+		} );
+
+		it( 'indicates that blocks can be moved right when the orientation is horizontal and the direction is positive', () => {
+			expect(
+				getMultiBlockMoverDescription(
+					4,
+					0,
+					true,
+					false,
+					positiveDirection,
+					'horizontal'
+				)
+			).toBe( 'Move 4 blocks from position 1 right by one place' );
+		} );
+
+		it( 'indicates that blocks cannot be moved left when the orientation is horizontal and a selection of blocks at the left', () => {
+			expect(
+				getMultiBlockMoverDescription(
+					4,
+					1,
+					true,
+					true,
+					negativeDirection,
+					'horizontal'
+				)
+			).toBe( 'All blocks are selected, and cannot be moved' );
+		} );
+
+		it( 'indicates that blocks cannot be moved right when the orientation is horizontal and the block is the last block', () => {
+			expect(
+				getMultiBlockMoverDescription(
+					4,
+					2,
+					false,
+					true,
+					positiveDirection,
+					'horizontal'
+				)
+			).toBe(
+				'Blocks cannot be moved right as they are already are at the rightmost position'
+			);
+		} );
 	} );
 } );

package/src/components/block-popover/inbetween.js

@@ -154,7 +154,10 @@ function BlockPopoverInbetween( {
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement || ! nextElement || ! isVisible ) {
+	// If there's either a previous or a next element, show the inbetween popover.
+	// Note that drag and drop uses the inbetween popover to show the drop indicator
+	// before the first block and after the last block.
+	if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 		return null;
 	}
 
@@ -180,6 +183,7 @@ function BlockPopoverInbetween( {
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',
+				'block-editor-block-popover__inbetween',
 				props.className
 			) }
 			__unstableForcePosition

package/src/components/block-popover/style.scss

@@ -18,11 +18,34 @@
 
 		// Allow clicking through the toolbar holder.
 		pointer-events: none;
+	}
 
-		// Position the block toolbar.
-		> * {
+	// Enable pointer events for the toolbar's content.
+	&:not(.block-editor-block-popover__inbetween) .components-popover__content {
+		* {
 			pointer-events: all;
 		}
 	}
 }
 
+.components-popover.block-editor-block-popover__inbetween {
+	// Disable pointer events for dragging and dropping.
+	// Without this the insertion point interferes with the
+	// drop zone.
+	pointer-events: none;
+
+	* {
+		pointer-events: none;
+	}
+
+	// Re-enable pointer events when the inbetween inserter has a '+' button.
+	//
+	// Needs specificity, do not simplify.
+	.is-with-inserter {
+		pointer-events: all;
+
+		* {
+			pointer-events: all;
+		}
+	}
+}

package/src/components/block-settings-menu/index.js

@@ -7,24 +7,20 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
-import BlockEditVisuallyButton from './block-edit-visually-button';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
-		<>
-			<BlockEditVisuallyButton clientIds={ clientIds } { ...props } />
-			<ToolbarGroup>
-				<ToolbarItem>
-					{ ( toggleProps ) => (
-						<BlockSettingsDropdown
-							clientIds={ clientIds }
-							toggleProps={ toggleProps }
-							{ ...props }
-						/>
-					) }
-				</ToolbarItem>
-			</ToolbarGroup>
-		</>
+		<ToolbarGroup>
+			<ToolbarItem>
+				{ ( toggleProps ) => (
+					<BlockSettingsDropdown
+						clientIds={ clientIds }
+						toggleProps={ toggleProps }
+						{ ...props }
+					/>
+				) }
+			</ToolbarItem>
+		</ToolbarGroup>
 	);
 }
 

package/src/components/block-settings-menu-controls/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { compact, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
 				selectedBlocks: map(
-					compact( getBlocksByClientId( ids ) ),
+					getBlocksByClientId( ids ).filter( Boolean ),
 					( block ) => block.name
 				),
 				selectedClientIds: ids,