@wordpress/block-editor 14.5.0 → 14.6.0

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

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
+
+/**
+ * WordPress dependencies
+ */
+import { useAsyncList } from '@wordpress/compose';
+
+/**
+ * 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 ) {
+		const shownPatterns = useAsyncList( props.blockPatterns );
+		return (
+			<ExperimentalBlockEditorProvider settings={ blockEditorSettings }>
+				<BlockPatternsList
+					shownPatterns={ shownPatterns }
+					{ ...props }
+				/>
+			</ExperimentalBlockEditorProvider>
+		);
+	},
+	args: {
+		blockPatterns: patterns,
+		isDraggable: false,
+		label: 'Block patterns story',
+		showTitle: true,
+		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`.',
+		},
+		showTitle: {
+			description: 'Whether to render the title of each pattern.',
+			table: {
+				defaultValue: { summary: true },
+				type: { summary: 'boolean' },
+			},
+		},
+		onClickPattern: { type: 'function' },
+		onHover: { type: 'function' },
+		showTitlesAsTooltip: {
+			description:
+				'Whether to render the title of each pattern as a tooltip. If enabled, it takes precedence over `showTitle` prop.',
+		},
+		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,
@@ -22,8 +21,6 @@ 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';
 
 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,35 +88,6 @@ 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 ),
@@ -157,13 +99,9 @@ function BlockPopover(
 		};
 	}, [
 		popoverDimensionsRecomputeCounter,
-		isZoomOut,
-		parentSectionElement,
 		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		isSectionSelected,
-		__unstableContentRef,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

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

@@ -59,7 +59,7 @@ export function BlockPreview( {
 		() => ( {
 			...originalSettings,
 			focusMode: false, // Disable "Spotlight mode".
-			__unstableIsPreviewMode: true,
+			isPreviewMode: true,
 		} ),
 		[ originalSettings ]
 	);
@@ -124,7 +124,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,133 @@
+/**
+ * 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 { useAsyncList } from '@wordpress/compose';
+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 ] );
+
+	const currentShownPatterns = useAsyncList(
+		sameCategoryPatternsWithSingleWrapper
+	);
+
+	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
+						shownPatterns={ currentShownPatterns }
+						blockPatterns={ sameCategoryPatternsWithSingleWrapper }
+						onClickPattern={ onClickPattern }
+						showTitle={ false }
+					/>
+				</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

@@ -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,
@@ -211,13 +205,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

package/src/components/block-tools/insertion-point.js

@@ -18,6 +18,7 @@ import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import BlockDropZonePopover from '../block-popover/drop-zone';
+import { unlock } from '../../lock-unlock';
 
 export const InsertionPointOpenRef = createContext();
 
@@ -47,8 +48,8 @@ function InbetweenInsertionPointPopover( {
 			getPreviousBlockClientId,
 			getNextBlockClientId,
 			getSettings,
-			__unstableGetEditorMode,
-		} = select( blockEditorStore );
+			isZoomOut,
+		} = unlock( select( blockEditorStore ) );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
 
@@ -78,7 +79,7 @@ function InbetweenInsertionPointPopover( {
 			rootClientId: insertionPoint.rootClientId,
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			isZoomOutMode: isZoomOut(),
 		};
 	}, [] );
 	const { getBlockEditingMode } = useSelect( blockEditorStore );

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

@@ -187,23 +187,3 @@
 	top: 50%;
 	left: 50%;
 }
-
-.zoom-out-toolbar {
-
-	.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-	.zoom-out-toolbar-button:focus::before,
-	.block-editor-block-toolbar-shuffle:focus::before,
-	.block-selection-button_drag-handle:focus::before {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	.block-editor-block-mover {
-		background: none;
-		border: none;
-	}
-
-	// Make the spacing consistent between controls.
-	.zoom-out-toolbar-button {
-		height: $button-size-next-default-40px;
-	}
-}

package/src/components/block-tools/use-show-block-tools.js

@@ -25,8 +25,6 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
-			getBlockOrder,
-			getSectionRootClientId,
 		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
@@ -44,17 +42,7 @@ export function useShowBlockTools() {
 			! isTyping() &&
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
-		const isZoomOut = editorMode === 'zoom-out';
-		const isSectionSelected = getBlockOrder(
-			getSectionRootClientId()
-		).includes( clientId );
-		const _showZoomOutToolbar =
-			clientId &&
-			isZoomOut &&
-			! _showEmptyBlockSideInserter &&
-			isSectionSelected;
 		const _showBlockToolbarPopover =
-			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
@@ -63,7 +51,6 @@ export function useShowBlockTools() {
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }