@wordpress/block-editor 8.3.1 → 8.5.1

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

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Return details about the block lock status.
+ *
+ * @param {string}  clientId    The block client Id.
+ * @param {boolean} checkParent Optional. The status is derived from the parent `templateLock`
+ *                              when the current block's lock state isn't defined.
+ *
+ * @return {Object} Block lock status
+ */
+export default function useBlockLock( clientId, checkParent = false ) {
+	return useSelect(
+		( select ) => {
+			const {
+				canEditBlock,
+				canMoveBlock,
+				canRemoveBlock,
+				canLockBlockType,
+				getBlockName,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const rootClientId = checkParent
+				? getBlockRootClientId( clientId )
+				: null;
+
+			const canEdit = canEditBlock( clientId );
+			const canMove = canMoveBlock( clientId, rootClientId );
+			const canRemove = canRemoveBlock( clientId, rootClientId );
+
+			return {
+				canEdit,
+				canMove,
+				canRemove,
+				canLock: canLockBlockType( getBlockName( clientId ) ),
+				isLocked: ! canEdit || ! canMove || ! canRemove,
+			};
+		},
+		[ clientId, checkParent ]
+	);
+}

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

@@ -95,6 +95,9 @@ function BlockMover( {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-mover/README.md
+ */
 export default withSelect( ( select, { clientIds } ) => {
 	const {
 		getBlock,

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

@@ -22,6 +22,10 @@
 		@include break-small() {
 			flex-direction: column;
 		}
+
+		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+		// This is best fixed by making the mover control area a proper single toolbar group.
+		padding: 0;
 	}
 
 	&.is-horizontal .block-editor-block-mover__move-button-container,

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

@@ -11,7 +11,7 @@ import {
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useResizeObserver } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -28,6 +28,7 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	height,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -38,41 +39,52 @@ const SetupContent = ( {
 			[ activeSlide + 1, 'next-slide' ],
 		] );
 		return (
-			<div className={ containerClass }>
-				<ul className="carousel-container">
-					{ patterns.map( ( pattern, index ) => (
-						<BlockPatternSlide
-							className={ slideClass.get( index ) || '' }
-							key={ pattern.name }
-							pattern={ pattern }
-						/>
-					) ) }
-				</ul>
+			<div
+				className="block-editor-block-pattern-setup__carousel"
+				style={ { height } }
+			>
+				<div className={ containerClass }>
+					<ul className="carousel-container">
+						{ patterns.map( ( pattern, index ) => (
+							<BlockPatternSlide
+								className={ slideClass.get( index ) || '' }
+								key={ pattern.name }
+								pattern={ pattern }
+								minHeight={ height }
+							/>
+						) ) }
+					</ul>
+				</div>
 			</div>
 		);
 	}
 	return (
-		<Composite
-			{ ...composite }
-			role="listbox"
-			className={ containerClass }
-			aria-label={ __( 'Patterns list' ) }
+		<div
+			style={ { height } }
+			className="block-editor-block-pattern-setup__grid"
 		>
-			{ patterns.map( ( pattern ) => (
-				<BlockPattern
-					key={ pattern.name }
-					pattern={ pattern }
-					onSelect={ onBlockPatternSelect }
-					composite={ composite }
-				/>
-			) ) }
-		</Composite>
+			<Composite
+				{ ...composite }
+				role="listbox"
+				className={ containerClass }
+				aria-label={ __( 'Patterns list' ) }
+			>
+				{ patterns.map( ( pattern ) => (
+					<BlockPattern
+						key={ pattern.name }
+						pattern={ pattern }
+						onSelect={ onBlockPatternSelect }
+						composite={ composite }
+					/>
+				) ) }
+			</Composite>
+		</div>
 	);
 };
 
 function BlockPattern( { pattern, onSelect, composite } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
-	const { blocks, title, description, viewportWidth = 700 } = pattern;
+	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPattern,
 		`${ baseClassName }__item-description`
@@ -94,9 +106,6 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
-				<div className={ `${ baseClassName }__item-title` }>
-					{ title }
-				</div>
 			</CompositeItem>
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
@@ -107,7 +116,7 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 	);
 }
 
-function BlockPatternSlide( { className, pattern } ) {
+function BlockPatternSlide( { className, pattern, minHeight } ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
@@ -119,7 +128,10 @@ function BlockPatternSlide( { className, pattern } ) {
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
 		>
-			<BlockPreview blocks={ blocks } __experimentalLive />
+			<BlockPreview
+				blocks={ blocks }
+				__experimentalMinHeight={ minHeight }
+			/>
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ description }
@@ -141,6 +153,10 @@ const BlockPatternSetup = ( {
 	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;
@@ -152,35 +168,44 @@ const BlockPatternSetup = ( {
 	};
 	const onPatternSelectCallback =
 		onBlockPatternSelect || onBlockPatternSelectDefault;
+	const onStartBlank = startBlankComponent
+		? () => {
+				setShowBlank( true );
+		  }
+		: undefined;
 	return (
-		<div
-			className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
-		>
-			<SetupToolbar
-				viewMode={ viewMode }
-				setViewMode={ setViewMode }
-				activeSlide={ activeSlide }
-				totalSlides={ patterns.length }
-				handleNext={ () => {
-					setActiveSlide( ( active ) => active + 1 );
-				} }
-				handlePrevious={ () => {
-					setActiveSlide( ( active ) => active - 1 );
-				} }
-				onBlockPatternSelect={ () => {
-					onPatternSelectCallback( patterns[ activeSlide ].blocks );
-				} }
-				onStartBlank={ () => {
-					setShowBlank( true );
-				} }
-			/>
-			<SetupContent
-				viewMode={ viewMode }
-				activeSlide={ activeSlide }
-				patterns={ patterns }
-				onBlockPatternSelect={ onPatternSelectCallback }
-			/>
-		</div>
+		<>
+			{ contentResizeListener }
+			<div
+				className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
+			>
+				<SetupContent
+					viewMode={ viewMode }
+					activeSlide={ activeSlide }
+					patterns={ patterns }
+					onBlockPatternSelect={ onPatternSelectCallback }
+					height={ contentHeight - 2 * 60 }
+				/>
+				<SetupToolbar
+					viewMode={ viewMode }
+					setViewMode={ setViewMode }
+					activeSlide={ activeSlide }
+					totalSlides={ patterns.length }
+					handleNext={ () => {
+						setActiveSlide( ( active ) => active + 1 );
+					} }
+					handlePrevious={ () => {
+						setActiveSlide( ( active ) => active - 1 );
+					} }
+					onBlockPatternSelect={ () => {
+						onPatternSelectCallback(
+							patterns[ activeSlide ].blocks
+						);
+					} }
+					onStartBlank={ onStartBlank }
+				/>
+			</div>
+		</>
 	);
 };
 

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

@@ -17,7 +17,9 @@ import { VIEWMODES } from './constants';
 
 const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
+		{ onStartBlank && (
+			<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
+		) }
 		<Button variant="primary" onClick={ onBlockPatternSelect }>
 			{ __( 'Choose' ) }
 		</Button>

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

@@ -5,8 +5,6 @@
 	align-items: flex-start;
 	width: 100%;
 	border-radius: $radius-block-ui;
-	box-shadow: inset 0 0 0 $border-width $gray-900;
-	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 
 	// TODO change to check parent.
 	&.view-mode-grid {
@@ -15,37 +13,41 @@
 		}
 
 		.block-editor-block-pattern-setup__container {
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			grid-gap: $grid-unit-20;
-			padding: $grid-unit-20;
-			max-height: 550px;
-			overflow: auto;
-			margin: 0 $border-width $border-width $border-width;
-			width: calc(100% - #{ $border-width * 2 });
-			background: $white;
+			column-gap: $grid-unit-30;
+			display: block;
+			width: 100%;
+			padding: $grid-unit-40;
+			column-count: 2;
+
+			@include break-huge() {
+				column-count: 3;
+			}
 
 			.block-editor-block-preview__container,
 			div[role="button"] {
 				cursor: pointer;
 			}
 
-			.block-editor-block-pattern-setup-list__item-title {
-				padding: $grid-unit-05;
-				font-size: $helptext-font-size;
-				text-align: center;
-			}
+			.block-editor-block-pattern-setup-list__list-item {
+				break-inside: avoid-column;
+				margin-bottom: $grid-unit-30;
+
+				.block-editor-block-preview__container {
+					min-height: 100px;
+					border-radius: $radius-block-ui;
+					border: $border-width solid $gray-300;
+				}
 
-			.block-editor-block-preview__container {
-				border-radius: $radius-block-ui;
-				border: $border-width solid $gray-300;
+				.block-editor-block-preview__content {
+					width: 100%;
+				}
 			}
 		}
 	}
 
 	.block-editor-block-pattern-setup__toolbar {
+		height: $header-height;
 		box-sizing: border-box;
-		position: relative;
 		padding: $grid-unit-20;
 		width: 100%;
 		text-align: left;
@@ -54,13 +56,12 @@
 		// Block UI appearance.
 		border-radius: $radius-block-ui $radius-block-ui 0 0;
 		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
-
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
+		border-top: 1px solid $gray-300;
+		align-self: flex-end;
 
 		.block-editor-block-pattern-setup__display-controls {
 			display: flex;
@@ -93,13 +94,12 @@
 				box-sizing: border-box;
 			}
 			.pattern-slide {
-				opacity: 0;
 				position: absolute;
 				top: 0;
 				width: 100%;
 				margin: auto;
-				padding: $grid-unit-20;
-				transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
+				padding: 0;
+				transition: transform 0.5s, z-index 0.5s;
 				z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");
 
 				&.active-slide {
@@ -125,3 +125,9 @@
 		}
 	}
 }
+
+.block-editor-block-pattern-setup__carousel,
+.block-editor-block-pattern-setup__grid {
+	width: 100%;
+	overflow-y: auto;
+}

package/src/components/block-preview/auto.js

@@ -19,7 +19,11 @@ let MemoizedBlockList;
 
 const MAX_HEIGHT = 2000;
 
-function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
+function AutoBlockPreview( {
+	viewportWidth,
+	__experimentalPadding,
+	__experimentalMinHeight,
+} ) {
 	const [
 		containerResizeListener,
 		{ width: containerWidth },
@@ -68,6 +72,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						contentHeight > MAX_HEIGHT
 							? MAX_HEIGHT * scale
 							: undefined,
+					minHeight: __experimentalMinHeight,
 				} }
 			>
 				<Iframe
@@ -98,6 +103,10 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						// This is a catch-all max-height for patterns.
 						// See: https://github.com/WordPress/gutenberg/pull/38175.
 						maxHeight: MAX_HEIGHT,
+						minHeight:
+							scale < 1 && __experimentalMinHeight
+								? __experimentalMinHeight / scale
+								: __experimentalMinHeight,
 					} }
 				>
 					{ contentResizeListener }

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

@@ -29,6 +29,7 @@ export function BlockPreview( {
 	viewportWidth = 1200,
 	__experimentalLive = false,
 	__experimentalOnClick,
+	__experimentalMinHeight,
 } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -51,6 +52,7 @@ export function BlockPreview( {
 				<AutoHeightBlockPreview
 					viewportWidth={ viewportWidth }
 					__experimentalPadding={ __experimentalPadding }
+					__experimentalMinHeight={ __experimentalMinHeight }
 				/>
 			) }
 		</BlockEditorProvider>

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

@@ -6,12 +6,17 @@ import { castArray, flow, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { getBlockType, serialize } from '@wordpress/blocks';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize } from '@wordpress/blocks';
+import {
+	Children,
+	cloneElement,
+	useCallback,
+	useRef,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -19,12 +24,14 @@ import { useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import BlockIcon from '../block-icon';
 import BlockModeToggle from './block-mode-toggle';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -46,11 +53,40 @@ export function BlockSettingsDropdown( {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
-	const { onlyBlock } = useSelect(
+	const {
+		firstParentClientId,
+		hasReducedUI,
+		onlyBlock,
+		parentBlockType,
+		previousBlockClientId,
+		nextBlockClientId,
+		selectedBlockClientIds,
+	} = useSelect(
 		( select ) => {
-			const { getBlockCount } = select( blockEditorStore );
+			const {
+				getBlockCount,
+				getBlockName,
+				getBlockParents,
+				getPreviousBlockClientId,
+				getNextBlockClientId,
+				getSelectedBlockClientIds,
+				getSettings,
+			} = select( blockEditorStore );
+
+			const parents = getBlockParents( firstBlockClientId );
+			const _firstParentClientId = parents[ parents.length - 1 ];
+			const parentBlockName = getBlockName( _firstParentClientId );
+
 			return {
+				firstParentClientId: _firstParentClientId,
+				hasReducedUI: getSettings().hasReducedUI,
 				onlyBlock: 1 === getBlockCount(),
+				parentBlockType: getBlockType( parentBlockName ),
+				previousBlockClientId: getPreviousBlockClientId(
+					firstBlockClientId
+				),
+				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
+				selectedBlockClientIds: getSelectedBlockClientIds(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -72,7 +108,11 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 
-	const updateSelection = useCallback(
+	const { selectBlock, toggleBlockHighlight } = useDispatch(
+		blockEditorStore
+	);
+
+	const updateSelectionAfterDuplicate = useCallback(
 		__experimentalSelectBlock
 			? async ( clientIdsPromise ) => {
 					const ids = await clientIdsPromise;
@@ -86,6 +126,33 @@ export function BlockSettingsDropdown( {
 
 	const blockTitle = useBlockDisplayTitle( firstBlockClientId, 25 );
 
+	const updateSelectionAfterRemove = useCallback(
+		__experimentalSelectBlock
+			? () => {
+					const blockToSelect =
+						previousBlockClientId || nextBlockClientId;
+
+					if (
+						blockToSelect &&
+						// From the block options dropdown, it's possible to remove a block that is not selected,
+						// in this case, it's not necessary to update the selection since the selected block wasn't removed.
+						selectedBlockClientIds.includes( firstBlockClientId ) &&
+						// Don't update selection when next/prev block also is in the selection ( and gets removed ),
+						// In case someone selects all blocks and removes them at once.
+						! selectedBlockClientIds.includes( blockToSelect )
+					) {
+						__experimentalSelectBlock( blockToSelect );
+					}
+			  }
+			: noop,
+		[
+			__experimentalSelectBlock,
+			previousBlockClientId,
+			nextBlockClientId,
+			selectedBlockClientIds,
+		]
+	);
+
 	const label = sprintf(
 		/* translators: %s: block name */
 		__( 'Remove %s' ),
@@ -93,6 +160,19 @@ export function BlockSettingsDropdown( {
 	);
 	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
 
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const selectParentButtonRef = useRef();
+	const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
+		ref: selectParentButtonRef,
+		onChange( isFocused ) {
+			if ( isFocused && hasReducedUI ) {
+				return;
+			}
+			toggleBlockHighlight( firstParentClientId, isFocused );
+		},
+	} );
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -125,6 +205,26 @@ export function BlockSettingsDropdown( {
 								<__unstableBlockSettingsMenuFirstItem.Slot
 									fillProps={ { onClose } }
 								/>
+								{ firstParentClientId !== undefined && (
+									<MenuItem
+										{ ...showParentOutlineGestures }
+										ref={ selectParentButtonRef }
+										icon={
+											<BlockIcon
+												icon={ parentBlockType.icon }
+											/>
+										}
+										onClick={ () =>
+											selectBlock( firstParentClientId )
+										}
+									>
+										{ sprintf(
+											/* translators: %s: Name of the block's parent. */
+											__( 'Select parent block (%s)' ),
+											parentBlockType.title
+										) }
+									</MenuItem>
+								) }
 								{ count === 1 && (
 									<BlockHTMLConvertButton
 										clientId={ firstBlockClientId }
@@ -139,7 +239,7 @@ export function BlockSettingsDropdown( {
 										onClick={ flow(
 											onClose,
 											onDuplicate,
-											updateSelection
+											updateSelectionAfterDuplicate
 										) }
 										shortcut={ shortcuts.duplicate }
 									>
@@ -197,7 +297,7 @@ export function BlockSettingsDropdown( {
 										onClick={ flow(
 											onClose,
 											onRemove,
-											updateSelection
+											updateSelectionAfterRemove
 										) }
 										shortcut={ shortcuts.remove }
 									>