@wordpress/block-editor 9.4.0 → 9.7.0

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 {
@@ -56,10 +57,10 @@ function mergeWrapperProps( propsA, propsB ) {
 		...propsB,
 	};
 
-	if ( propsA && propsB && propsA.className && propsB.className ) {
+	if ( propsA?.className && propsB?.className ) {
 		newProps.className = classnames( propsA.className, propsB.className );
 	}
-	if ( propsA && propsB && propsA.style && propsB.style ) {
+	if ( propsA?.style && propsB?.style ) {
 		newProps.style = { ...propsA.style, ...propsB.style };
 	}
 
@@ -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/block.native.js

@@ -272,6 +272,7 @@ class BlockListBlock extends Component {
 									<BlockInvalidWarning
 										blockTitle={ title }
 										icon={ icon }
+										clientId={ clientId }
 									/>
 								)
 							}

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { identity } from 'lodash';
 import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 
 /**
@@ -35,6 +34,7 @@ import { BlockDraggableWrapper } from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
 export const OnCaretVerticalPositionChange = createContext();
+const identity = ( x ) => x;
 
 const stylesMemo = {};
 const getStyles = (
@@ -469,7 +469,7 @@ class EmptyListComponent extends Component {
 			renderFooterAppender,
 		} = this.props;
 
-		if ( renderFooterAppender ) {
+		if ( renderFooterAppender || renderAppender === false ) {
 			return null;
 		}
 

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

@@ -7,6 +7,7 @@ import { createContext, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { getLayoutType } from '../../layouts';
+import useSetting from '../use-setting';
 
 export const defaultLayout = { type: 'default' };
 
@@ -24,12 +25,23 @@ export function useLayout() {
 	return useContext( Layout );
 }
 
-export function LayoutStyle( { layout = {}, ...props } ) {
+export function LayoutStyle( { layout = {}, css, ...props } ) {
 	const layoutType = getLayoutType( layout.type );
+	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGapSupport !== null;
 
 	if ( layoutType ) {
-		return <layoutType.save layout={ layout } { ...props } />;
+		if ( css ) {
+			return <style>{ css }</style>;
+		}
+		const layoutStyle = layoutType.getLayoutStyle?.( {
+			hasBlockGapSupport,
+			layout,
+			...props,
+		} );
+		if ( layoutStyle ) {
+			return <style>{ layoutStyle }</style>;
+		}
 	}
-
 	return null;
 }

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

@@ -26,7 +26,7 @@
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
-	.block-editor-block-list__block.is-multi-selected:not([contenteditable]),
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
 		&::after {

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -33,6 +33,7 @@ export function useBlockClassNames( clientId ) {
 				getSettings,
 				hasSelectedInnerBlock,
 				isTyping,
+				__unstableIsFullySelected,
 			} = select( blockEditorStore );
 			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
@@ -44,10 +45,13 @@ export function useBlockClassNames( clientId ) {
 				clientId,
 				checkDeep
 			);
+			const isMultiSelected = isBlockMultiSelected( clientId );
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
-				'is-multi-selected': isBlockMultiSelected( clientId ),
+				'is-multi-selected': isMultiSelected,
+				'is-partially-selected':
+					isMultiSelected && ! __unstableIsFullySelected(),
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,

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

@@ -10,6 +10,7 @@ import {
 	FlexItem,
 	Icon,
 	Modal,
+	ToggleControl,
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
@@ -23,20 +24,41 @@ import useBlockLock from './use-block-lock';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
+function getTemplateLockValue( lock ) {
+	// Prevents all operations.
+	if ( lock.remove && lock.move ) {
+		return 'all';
+	}
+
+	// Prevents inserting or removing blocks, but allows moving existing blocks.
+	if ( lock.remove && ! lock.move ) {
+		return 'insert';
+	}
+
+	return false;
+}
+
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
 	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
-	const { isReusable } = useSelect(
+	const { isReusable, templateLock, hasTemplateLock } = useSelect(
 		( select ) => {
-			const { getBlockName } = select( blockEditorStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const blockName = getBlockName( clientId );
+			const blockType = getBlockType( blockName );
 
 			return {
-				isReusable: isReusableBlock( getBlockType( blockName ) ),
+				isReusable: isReusableBlock( blockType ),
+				templateLock: getBlockAttributes( clientId )?.templateLock,
+				hasTemplateLock: !! blockType?.attributes?.templateLock,
 			};
 		},
 		[ clientId ]
 	);
+	const [ applyTemplateLock, setApplyTemplateLock ] = useState(
+		!! templateLock
+	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const instanceId = useInstanceId(
@@ -66,18 +88,23 @@ 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();
-					updateBlockAttributes( [ clientId ], { lock } );
+					updateBlockAttributes( [ clientId ], {
+						lock,
+						templateLock: applyTemplateLock
+							? getTemplateLockValue( lock )
+							: undefined,
+					} );
 					onClose();
 				} }
 			>
-				<p>
-					{ __(
-						'Choose specific attributes to restrict or lock all available options.'
-					) }
-				</p>
 				<div
 					role="group"
 					aria-labelledby={ instanceId }
@@ -171,6 +198,17 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							/>
 						</li>
 					</ul>
+					{ hasTemplateLock && (
+						<ToggleControl
+							className="block-editor-block-lock-modal__template-lock"
+							label={ __( 'Apply to all blocks inside' ) }
+							checked={ applyTemplateLock }
+							disabled={ lock.move && ! lock.remove }
+							onChange={ () =>
+								setApplyTemplateLock( ! applyTemplateLock )
+							}
+						/>
+					) }
 				</div>
 				<Flex
 					className="block-editor-block-lock-modal__actions"

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

@@ -53,6 +53,16 @@
 	}
 }
 
+.block-editor-block-lock-modal__template-lock {
+	border-top: $border-width solid $gray-300;
+	margin-top: $grid-unit-20;
+	padding: $grid-unit-15 0;
+
+	.components-base-control__field {
+		margin: 0;
+	}
+}
+
 .block-editor-block-lock-modal__actions {
 	margin-top: $grid-unit-30;
 }

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

@@ -11,7 +11,7 @@ import {
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
-import { useInstanceId, useResizeObserver } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -28,7 +28,6 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
-	height,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -39,10 +38,7 @@ const SetupContent = ( {
 			[ activeSlide + 1, 'next-slide' ],
 		] );
 		return (
-			<div
-				className="block-editor-block-pattern-setup__carousel"
-				style={ { height } }
-			>
+			<div className="block-editor-block-pattern-setup__carousel">
 				<div className={ containerClass }>
 					<ul className="carousel-container">
 						{ patterns.map( ( pattern, index ) => (
@@ -50,7 +46,6 @@ const SetupContent = ( {
 								className={ slideClass.get( index ) || '' }
 								key={ pattern.name }
 								pattern={ pattern }
-								minHeight={ height }
 							/>
 						) ) }
 					</ul>
@@ -59,10 +54,7 @@ const SetupContent = ( {
 		);
 	}
 	return (
-		<div
-			style={ { height } }
-			className="block-editor-block-pattern-setup__grid"
-		>
+		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
 				{ ...composite }
 				role="listbox"
@@ -151,8 +143,6 @@ const BlockPatternSetup = ( {
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
 
 	if ( ! patterns?.length ) {
 		return null;
@@ -166,7 +156,6 @@ const BlockPatternSetup = ( {
 		onBlockPatternSelect || onBlockPatternSelectDefault;
 	return (
 		<>
-			{ contentResizeListener }
 			<div
 				className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
 			>
@@ -175,7 +164,6 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
-					height={ contentHeight - 2 * 60 }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }