@wordpress/block-editor 14.4.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

@@ -98,10 +98,10 @@ function BlockPopover(
 			contextElement: selectedElement,
 		};
 	}, [
+		popoverDimensionsRecomputeCounter,
+		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		selectedElement,
-		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

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

@@ -15,7 +15,7 @@ import EditorStyles from '../editor-styles';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
-let MemoizedBlockList;
+const MemoizedBlockList = memo( BlockList );
 
 const MAX_HEIGHT = 2000;
 const EMPTY_ADDITIONAL_STYLES = [];
@@ -55,9 +55,6 @@ function ScaledBlockPreview( {
 		return styles;
 	}, [ styles, additionalStyles ] );
 
-	// Initialize on render instead of module top level, to avoid circular dependency issues.
-	MemoizedBlockList = MemoizedBlockList || memo( BlockList );
-
 	const scale = containerWidth / viewportWidth;
 	const aspectRatio = contentHeight
 		? containerWidth / ( contentHeight * scale )

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,34 +19,30 @@ 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';
 import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
-import getEditorRegion from '../../utils/get-editor-region';
 
 function selector( select ) {
 	const {
 		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(),
 	};
 }
@@ -76,14 +72,10 @@ export default function BlockTools( {
 		isGroupable,
 	} = useSelect( blockEditorStore );
 	const { getGroupingBlockName } = useSelect( blocksStore );
-	const {
-		showEmptyBlockSideInserter,
-		showBlockToolbarPopover,
-		showZoomOutToolbar,
-	} = useShowBlockTools();
+	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
+		useShowBlockTools();
 
 	const {
-		clearSelectedBlock,
 		duplicateBlocks,
 		removeBlocks,
 		replaceBlocks,
@@ -95,8 +87,6 @@ export default function BlockTools( {
 		expandBlock,
 	} = unlock( useDispatch( blockEditorStore ) );
 
-	const blockSelectionButtonRef = useRef();
-
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
@@ -157,13 +147,6 @@ export default function BlockTools( {
 				// block so that focus is directed back to the beginning of the selection.
 				// In effect, to the user this feels like deselecting the multi-selection.
 				selectBlock( clientIds[ 0 ] );
-			} else if (
-				clientIds.length === 1 &&
-				event.target === blockSelectionButtonRef?.current
-			) {
-				event.preventDefault();
-				clearSelectedBlock();
-				getEditorRegion( __unstableContentRef.current )?.focus();
 			}
 		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
 			// If focus is currently within a text field, such as a rich text block or other editable field,
@@ -222,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.
-	.components-button {
-		height: $button-size-next-default-40px;
-	}
-}

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

@@ -8,6 +8,7 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Source of truth for which block tools are showing in the block editor.
@@ -24,7 +25,7 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
-		} = select( blockEditorStore );
+		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -41,13 +42,7 @@ export function useShowBlockTools() {
 			! isTyping() &&
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
-		const isZoomOut = editorMode === 'zoom-out';
-		const _showZoomOutToolbar =
-			isZoomOut &&
-			block?.attributes?.align === 'full' &&
-			! _showEmptyBlockSideInserter;
 		const _showBlockToolbarPopover =
-			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
@@ -56,7 +51,6 @@ export function useShowBlockTools() {
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }