@wordpress/block-editor 14.5.0 → 14.7.0

package/src/components/block-patterns-list/stories/index.story.js

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
+
+/**
+ * Internal dependencies
+ */
+import BlockPatternsList from '../';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+import patterns from './fixtures';
+
+const blockEditorSettings = {
+	styles: [ { css: blockLibraryStyles } ],
+};
+
+export default {
+	component: BlockPatternsList,
+	title: 'BlockEditor/BlockPatternsList',
+};
+
+export const Default = {
+	render: function Template( props ) {
+		return (
+			<ExperimentalBlockEditorProvider settings={ blockEditorSettings }>
+				<BlockPatternsList { ...props } />
+			</ExperimentalBlockEditorProvider>
+		);
+	},
+	args: {
+		blockPatterns: patterns,
+		isDraggable: false,
+		label: 'Block patterns story',
+		showTitlesAsTooltip: false,
+	},
+	argTypes: {
+		blockPatterns: { description: 'The patterns to render.' },
+		shownPatterns: {
+			description:
+				'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.',
+		},
+		onClickPattern: { type: 'function' },
+		onHover: { type: 'function' },
+		showTitlesAsTooltip: {
+			description:
+				'Whether to render the title of each pattern as a tooltip. If enabled',
+		},
+		orientation: {
+			description: 'Orientation for the underlying composite widget.',
+			table: {
+				defaultValue: { summary: 'both' },
+				type: { summary: 'string' },
+			},
+		},
+		category: { description: 'The currently selected pattern category.' },
+		isDraggable: {
+			description: 'Whether the pattern list item should be draggable.',
+		},
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+	},
+};

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

@@ -26,6 +26,8 @@
 	// the bottom margin set on `...__list-item` above
 	scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);
 
+	outline: 0;
+
 	.block-editor-block-patterns-list__item-title {
 		flex-grow: 1;
 		font-size: $helptext-font-size;

package/src/components/block-patterns-paging/index.js

@@ -62,7 +62,7 @@ export default function Pagination( {
 					</HStack>
 					<Text variant="muted">
 						{ sprintf(
-							// translators: %1$s: Current page number, %2$s: Total number of pages.
+							// translators: 1: Current page number. 2: Total number of pages.
 							_x( '%1$s of %2$s', 'paging' ),
 							currentPage,
 							numPages

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

@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import {
 	forwardRef,
 	useMemo,
@@ -21,9 +20,7 @@ import {
  */
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
-import { rectUnion, getVisibleElementBounds } from '../../utils/dom';
-import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
+import { rectUnion, getElementBounds } from '../../utils/dom';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -77,38 +74,12 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	const { isZoomOut, parentSectionBlock, isSectionSelected } = useSelect(
-		( select ) => {
-			const {
-				isZoomOut: isZoomOutSelector,
-				getSectionRootClientId,
-				getParentSectionBlock,
-				getBlockOrder,
-			} = unlock( select( blockEditorStore ) );
-
-			return {
-				isZoomOut: isZoomOutSelector(),
-				parentSectionBlock:
-					getParentSectionBlock( clientId ) ?? clientId,
-				isSectionSelected: getBlockOrder(
-					getSectionRootClientId()
-				).includes( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
-	// This element is used to position the zoom out view vertical toolbar
-	// correctly, relative to the selected section.
-	const parentSectionElement = useBlockElement( parentSectionBlock );
-
 	const popoverAnchor = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
 			popoverDimensionsRecomputeCounter < 0 ||
-			( isZoomOut && ! parentSectionElement ) ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -117,53 +88,20 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
-				// The zoom out view has a vertical block toolbar that should always
-				// be on the edge of the canvas, aligned to the top of the currently
-				// selected section. This condition changes the anchor of the toolbar
-				// to the section instead of the block to handle blocks that are
-				// not full width and nested blocks to keep section height.
-				if ( isZoomOut && isSectionSelected ) {
-					// Compute the height based on the parent section of the
-					// selected block, because the selected block may be
-					// shorter than the section.
-					const canvasElementRect = getVisibleElementBounds(
-						__unstableContentRef.current
-					);
-					const parentSectionElementRect =
-						getVisibleElementBounds( parentSectionElement );
-					const anchorHeight =
-						parentSectionElementRect.bottom -
-						parentSectionElementRect.top;
-
-					// Always use the width of the section root element to make sure
-					// the toolbar is always on the edge of the canvas.
-					const anchorWidth = canvasElementRect.width;
-					return new window.DOMRectReadOnly(
-						canvasElementRect.left,
-						parentSectionElementRect.top,
-						anchorWidth,
-						anchorHeight
-					);
-				}
-
 				return lastSelectedElement
 					? rectUnion(
-							getVisibleElementBounds( selectedElement ),
-							getVisibleElementBounds( lastSelectedElement )
+							getElementBounds( selectedElement ),
+							getElementBounds( lastSelectedElement )
 					  )
-					: getVisibleElementBounds( selectedElement );
+					: getElementBounds( selectedElement );
 			},
 			contextElement: selectedElement,
 		};
 	}, [
 		popoverDimensionsRecomputeCounter,
-		isZoomOut,
-		parentSectionElement,
 		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		isSectionSelected,
-		__unstableContentRef,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, flushSync } from '@wordpress/element';
+import { createQueue } from '@wordpress/priority-queue';
+
+const blockPreviewQueue = createQueue();
+
+/**
+ * Renders a component at the next idle time.
+ * @param {*} props
+ */
+export function Async( { children, placeholder } ) {
+	const [ shouldRender, setShouldRender ] = useState( false );
+
+	// In the future, we could try to use startTransition here, but currently
+	// react will batch all transitions, which means all previews will be
+	// rendered at the same time.
+	// https://react.dev/reference/react/startTransition#caveats
+	// > If there are multiple ongoing Transitions, React currently batches them
+	// > together. This is a limitation that will likely be removed in a future
+	// > release.
+
+	useEffect( () => {
+		const context = {};
+		blockPreviewQueue.add( context, () => {
+			// Synchronously run all renders so it consumes timeRemaining.
+			// See https://github.com/WordPress/gutenberg/pull/48238
+			flushSync( () => {
+				setShouldRender( true );
+			} );
+		} );
+		return () => {
+			blockPreviewQueue.cancel( context );
+		};
+	}, [] );
+
+	if ( ! shouldRender ) {
+		return placeholder;
+	}
+
+	return children;
+}

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

@@ -19,6 +19,7 @@ import AutoHeightBlockPreview from './auto';
 import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
+import { Async } from './async';
 
 const EMPTY_ADDITIONAL_STYLES = [];
 
@@ -59,7 +60,7 @@ export function BlockPreview( {
 		() => ( {
 			...originalSettings,
 			focusMode: false, // Disable "Spotlight mode".
-			__unstableIsPreviewMode: true,
+			isPreviewMode: true,
 		} ),
 		[ originalSettings ]
 	);
@@ -86,6 +87,10 @@ export function BlockPreview( {
 	);
 }
 
+const MemoizedBlockPreview = memo( BlockPreview );
+
+MemoizedBlockPreview.Async = Async;
+
 /**
  * BlockPreview renders a preview of a block or array of blocks.
  *
@@ -97,7 +102,7 @@ export function BlockPreview( {
  *
  * @return {Component} The component to be rendered.
  */
-export default memo( BlockPreview );
+export default MemoizedBlockPreview;
 
 /**
  * This hook is used to lightly mark an element as a block preview wrapper
@@ -124,7 +129,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 			...originalSettings,
 			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
 			focusMode: false, // Disable "Spotlight mode".
-			__unstableIsPreviewMode: true,
+			isPreviewMode: true,
 		} ),
 		[ originalSettings ]
 	);

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

@@ -19,6 +19,7 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import __unstableCommentIconFill from '../../components/collab/block-comment-icon-slot';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
@@ -294,6 +295,9 @@ export function BlockSettingsDropdown( {
 											</MenuItem>
 										</>
 									) }
+									<__unstableCommentIconFill.Slot
+										fillProps={ { onClose } }
+									/>
 								</MenuGroup>
 								{ canCopyStyles && ! isContentOnly && (
 									<MenuGroup>

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

@@ -7,10 +7,13 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
+import __unstableCommentIconToolbarFill from '../../components/collab/block-comment-icon-toolbar-slot';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
 		<ToolbarGroup>
+			<__unstableCommentIconToolbarFill.Slot />
+
 			<ToolbarItem>
 				{ ( toggleProps ) => (
 					<BlockSettingsDropdown

package/src/components/block-toolbar/change-design.js

@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cloneBlock } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockPatternsList from '../block-patterns-list';
+
+const EMPTY_ARRAY = [];
+const MAX_PATTERNS_TO_SHOW = 6;
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
+export default function ChangeDesign( { clientId } ) {
+	const { categories, currentPatternName, patterns } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockRootClientId,
+				__experimentalGetAllowedPatterns,
+			} = select( blockEditorStore );
+			const attributes = getBlockAttributes( clientId );
+			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
+			const rootBlock = getBlockRootClientId( clientId );
+
+			// Calling `__experimentalGetAllowedPatterns` is expensive.
+			// Checking if the block can be changed prevents unnecessary selector calls.
+			// See: https://github.com/WordPress/gutenberg/pull/64736.
+			const _patterns =
+				_categories.length > 0
+					? __experimentalGetAllowedPatterns( rootBlock )
+					: EMPTY_ARRAY;
+			return {
+				categories: _categories,
+				currentPatternName: attributes?.metadata?.patternName,
+				patterns: _patterns,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const sameCategoryPatternsWithSingleWrapper = useMemo( () => {
+		if ( categories.length === 0 || ! patterns || patterns.length === 0 ) {
+			return EMPTY_ARRAY;
+		}
+		return patterns
+			.filter( ( pattern ) => {
+				const isCorePattern =
+					pattern.source === 'core' ||
+					( pattern.source?.startsWith( 'pattern-directory' ) &&
+						pattern.source !== 'pattern-directory/theme' );
+				return (
+					// Check if the pattern has only one top level block,
+					// otherwise we may switch to a pattern that doesn't have replacement suggestions.
+					pattern.blocks.length === 1 &&
+					// We exclude the core patterns and pattern directory patterns that are not theme patterns.
+					! isCorePattern &&
+					// Exclude current pattern.
+					currentPatternName !== pattern.name &&
+					pattern.categories?.some( ( category ) => {
+						return categories.includes( category );
+					} ) &&
+					// Check if the pattern is not a synced pattern.
+					( pattern.syncStatus === 'unsynced' || ! pattern.id )
+				);
+			} )
+			.slice( 0, MAX_PATTERNS_TO_SHOW );
+	}, [ categories, currentPatternName, patterns ] );
+
+	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
+		return null;
+	}
+
+	const onClickPattern = ( pattern ) => {
+		const newBlocks = ( pattern.blocks ?? [] ).map( ( block ) => {
+			return cloneBlock( block );
+		} );
+		newBlocks[ 0 ].attributes.metadata = {
+			...newBlocks[ 0 ].attributes.metadata,
+			categories,
+		};
+		replaceBlocks( clientId, newBlocks );
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ POPOVER_PROPS }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				return (
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ () => onToggle( ! isOpen ) }
+							aria-expanded={ isOpen }
+						>
+							{ __( 'Change design' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper
+					className="block-editor-block-toolbar-change-design-content-wrapper"
+					paddingSize="none"
+				>
+					<BlockPatternsList
+						blockPatterns={ sameCategoryPatternsWithSingleWrapper }
+						onClickPattern={ onClickPattern }
+						showTitlesAsTooltip
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}

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

@@ -35,6 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import ChangeDesign from './change-design';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -67,6 +68,10 @@ export function PrivateBlockToolbar( {
 		isUsingBindings,
 		hasParentPattern,
 		hasContentOnlyLocking,
+		showShuffleButton,
+		showSlots,
+		showGroupButtons,
+		showLockButtons,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -79,6 +84,7 @@ export function PrivateBlockToolbar( {
 			getBlockParentsByBlockName,
 			getTemplateLock,
 			getParentSectionBlock,
+			isZoomOut,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -119,6 +125,7 @@ export function PrivateBlockToolbar( {
 			shouldShowVisualToolbar: isValid && isVisual,
 			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
+				! isZoomOut() &&
 				parentBlockType &&
 				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
@@ -130,6 +137,10 @@ export function PrivateBlockToolbar( {
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
+			showShuffleButton: isZoomOut(),
+			showSlots: ! isZoomOut(),
+			showGroupButtons: ! isZoomOut(),
+			showLockButtons: ! isZoomOut(),
 		};
 	}, [] );
 
@@ -179,7 +190,7 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar && isLargeViewport && (
+				{ showParentSelector && ! isMultiToolbar && isLargeViewport && (
 					<BlockParentSelector />
 				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
@@ -190,11 +201,13 @@ export function PrivateBlockToolbar( {
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 								<BlockSwitcher clientIds={ blockClientIds } />
-								{ ! isMultiToolbar && isDefaultEditingMode && (
-									<BlockLockToolbar
-										clientId={ blockClientId }
-									/>
-								) }
+								{ ! isMultiToolbar &&
+									isDefaultEditingMode &&
+									showLockButtons && (
+										<BlockLockToolbar
+											clientId={ blockClientId }
+										/>
+									) }
 								<BlockMover
 									clientIds={ blockClientIds }
 									hideDragHandle={ hideDragHandle }
@@ -204,8 +217,12 @@ export function PrivateBlockToolbar( {
 					) }
 				{ ! hasContentOnlyLocking &&
 					shouldShowVisualToolbar &&
-					isMultiToolbar && <BlockGroupToolbar /> }
-				{ shouldShowVisualToolbar && (
+					isMultiToolbar &&
+					showGroupButtons && <BlockGroupToolbar /> }
+				{ showShuffleButton && (
+					<ChangeDesign clientId={ blockClientIds[ 0 ] } />
+				) }
+				{ shouldShowVisualToolbar && showSlots && (
 					<>
 						<BlockControls.Slot
 							group="parent"

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

@@ -285,3 +285,19 @@
 		}
 	}
 }
+
+.block-editor-block-toolbar-change-design-content-wrapper {
+	padding: $grid-unit-15;
+	width: 320px;
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: $grid-unit-15;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
+		.block-editor-inserter__media-list__list-item {
+			min-height: 100px;
+		}
+	}
+}

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

@@ -8,7 +8,7 @@ import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordp
 import { useRef } from '@wordpress/element';
 import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -19,7 +19,6 @@ import {
 	default as InsertionPoint,
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
-import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
@@ -31,21 +30,19 @@ function selector( select ) {
 		getSelectedBlockClientId,
 		getFirstMultiSelectedBlockClientId,
 		getSettings,
-		__unstableGetEditorMode,
 		isTyping,
 		isDragging,
+		isZoomOut,
 	} = unlock( select( blockEditorStore ) );
 
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-	const editorMode = __unstableGetEditorMode();
-
 	return {
 		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
-		isZoomOutMode: editorMode === 'zoom-out',
+		isZoomOutMode: isZoomOut(),
 		isDragging: isDragging(),
 	};
 }
@@ -75,11 +72,8 @@ export default function BlockTools( {
 		isGroupable,
 	} = useSelect( blockEditorStore );
 	const { getGroupingBlockName } = useSelect( blocksStore );
-	const {
-		showEmptyBlockSideInserter,
-		showBlockToolbarPopover,
-		showZoomOutToolbar,
-	} = useShowBlockTools();
+	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
+		useShowBlockTools();
 
 	const {
 		duplicateBlocks,
@@ -98,19 +92,35 @@ export default function BlockTools( {
 			return;
 		}
 
-		if ( isMatch( 'core/block-editor/move-up', event ) ) {
-			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length ) {
-				event.preventDefault();
-				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				moveBlocksUp( clientIds, rootClientId );
-			}
-		} else if ( isMatch( 'core/block-editor/move-down', event ) ) {
+		if (
+			isMatch( 'core/block-editor/move-up', event ) ||
+			isMatch( 'core/block-editor/move-down', event )
+		) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
 				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				moveBlocksDown( clientIds, rootClientId );
+				const direction = isMatch( 'core/block-editor/move-up', event )
+					? 'up'
+					: 'down';
+				if ( direction === 'up' ) {
+					moveBlocksUp( clientIds, rootClientId );
+				} else {
+					moveBlocksDown( clientIds, rootClientId );
+				}
+				const blockLength = Array.isArray( clientIds )
+					? clientIds.length
+					: 1;
+				const message = sprintf(
+					// translators: %d: the name of the block that has been moved
+					_n(
+						'%d block moved.',
+						'%d blocks moved.',
+						clientIds.length
+					),
+					blockLength
+				);
+				speak( message );
 			}
 		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
@@ -211,13 +221,6 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showZoomOutToolbar && (
-					<ZoomOutPopover
-						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
-					/>
-				) }
-
 				{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
 				{ ! isZoomOutMode && ! hasFixedToolbar && (
 					<Popover.Slot