@wordpress/block-editor 9.3.0 → 9.6.0

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"
@@ -145,19 +137,15 @@ const BlockPatternSetup = ( {
 	clientId,
 	blockName,
 	filterPatternsFn,
-	startBlankComponent = null,
 	onBlockPatternSelect,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
-	const [ showBlank, setShowBlank ] = useState( false );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
 
-	if ( ! patterns?.length || showBlank ) {
-		return startBlankComponent;
+	if ( ! patterns?.length ) {
+		return null;
 	}
 
 	const onBlockPatternSelectDefault = ( blocks ) => {
@@ -166,14 +154,8 @@ const BlockPatternSetup = ( {
 	};
 	const onPatternSelectCallback =
 		onBlockPatternSelect || onBlockPatternSelectDefault;
-	const onStartBlank = startBlankComponent
-		? () => {
-				setShowBlank( true );
-		  }
-		: undefined;
 	return (
 		<>
-			{ contentResizeListener }
 			<div
 				className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
 			>
@@ -182,7 +164,6 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
-					height={ contentHeight - 2 * 60 }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }
@@ -200,7 +181,6 @@ const BlockPatternSetup = ( {
 							patterns[ activeSlide ].blocks
 						);
 					} }
-					onStartBlank={ onStartBlank }
 				/>
 			</div>
 		</>

package/src/components/block-pattern-setup/setup-toolbar.js

@@ -15,11 +15,8 @@ import {
  */
 import { VIEWMODES } from './constants';
 
-const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
+const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		{ onStartBlank && (
-			<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
-		) }
 		<Button variant="primary" onClick={ onBlockPatternSelect }>
 			{ __( 'Choose' ) }
 		</Button>
@@ -56,7 +53,6 @@ const SetupToolbar = ( {
 	activeSlide,
 	totalSlides,
 	onBlockPatternSelect,
-	onStartBlank,
 } ) => {
 	const isCarouselView = viewMode === VIEWMODES.carousel;
 	const displayControls = (
@@ -87,10 +83,7 @@ const SetupToolbar = ( {
 			) }
 			{ displayControls }
 			{ isCarouselView && (
-				<Actions
-					onBlockPatternSelect={ onBlockPatternSelect }
-					onStartBlank={ onStartBlank }
-				/>
+				<Actions onBlockPatternSelect={ onBlockPatternSelect } />
 			) }
 		</div>
 	);

package/src/components/block-pattern-setup/style.scss

@@ -17,6 +17,8 @@
 			display: block;
 			width: 100%;
 			padding: $grid-unit-40;
+			padding-bottom: 0;
+			padding-top: 0;
 			column-count: 2;
 
 			@include break-huge() {
@@ -53,8 +55,9 @@
 		text-align: left;
 		margin: 0;
 		color: $gray-900;
+		position: absolute;
+		bottom: 0;
 		// Block UI appearance.
-		border-radius: $radius-block-ui $radius-block-ui 0 0;
 		background-color: $white;
 		display: flex;
 		flex-direction: row;
@@ -129,5 +132,4 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
 	width: 100%;
-	overflow-y: auto;
 }

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

@@ -172,7 +172,7 @@ function BlockPopoverInbetween( {
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
+			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			// Forces a remount of the popover when its position changes
 			// This makes sure the popover doesn't animate from its previous position.

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

@@ -57,7 +57,7 @@ export default function BlockPopover( {
 			focusOnMount={ false }
 			anchorRef={ anchorRef }
 			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
+			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }