@wordpress/block-editor 14.1.0 → 14.2.0

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

@@ -27,11 +27,9 @@ import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
 import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
+const { CompositeV2: Composite, CompositeItemV2: CompositeItem } = unlock(
+	componentsPrivateApis
+);
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -206,19 +204,23 @@ function BlockPatternsList(
 	},
 	ref
 ) {
-	const compositeStore = useCompositeStore( { orientation } );
-	const { setActiveId } = compositeStore;
+	const [ activeCompositeId, setActiveCompositeId ] = useState( undefined );
 
 	useEffect( () => {
-		// We reset the active composite item whenever the
-		// available patterns change, to make sure that
-		// focus is put back to the start.
-		setActiveId( undefined );
-	}, [ setActiveId, shownPatterns, blockPatterns ] );
+		// Reset the active composite item whenever the available patterns change,
+		// to make sure that Composite widget can receive focus correctly when its
+		// composite items change. The first composite item will receive focus.
+		const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
+			shownPatterns.includes( pattern )
+		)?.name;
+		setActiveCompositeId( firstCompositeItemId );
+	}, [ shownPatterns, blockPatterns ] );
 
 	return (
 		<Composite
-			store={ compositeStore }
+			orientation={ orientation }
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }

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

@@ -36,12 +36,12 @@
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-medium;
 
 		&::after {
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-medium;
 		}
 	}
 

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

@@ -38,6 +38,8 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-previous"
 					>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
@@ -47,6 +49,8 @@ export default function Pagination( {
 							<span>«</span>
 						</Button>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
@@ -70,6 +74,8 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-next"
 					>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }

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

@@ -20,6 +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';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -87,34 +88,12 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
-				const selectedBCR = selectedElement.getBoundingClientRect();
-				const lastSelectedBCR =
-					lastSelectedElement?.getBoundingClientRect();
-
-				// Get the biggest rectangle that encompasses completely the currently
-				// selected element and the last selected element:
-				// - for top/left coordinates, use the smaller numbers
-				// - for the bottom/right coordinates, use the largest numbers
-				const left = Math.min(
-					selectedBCR.left,
-					lastSelectedBCR?.left ?? Infinity
-				);
-				const top = Math.min(
-					selectedBCR.top,
-					lastSelectedBCR?.top ?? Infinity
-				);
-				const right = Math.max(
-					selectedBCR.right,
-					lastSelectedBCR.right ?? -Infinity
-				);
-				const bottom = Math.max(
-					selectedBCR.bottom,
-					lastSelectedBCR.bottom ?? -Infinity
-				);
-				const width = right - left;
-				const height = bottom - top;
-
-				return new window.DOMRect( left, top, width, height );
+				return lastSelectedElement
+					? rectUnion(
+							getVisibleElementBounds( selectedElement ),
+							getVisibleElementBounds( lastSelectedElement )
+					  )
+					: getVisibleElementBounds( selectedElement );
 			},
 			contextElement: selectedElement,
 		};

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

@@ -57,6 +57,6 @@
 		position: absolute;
 		inset: 0;
 		background-color: var(--wp-admin-theme-color);
-		border-radius: 2px;
+		border-radius: $radius-small;
 	}
 }

package/src/components/block-quick-navigation/index.js

@@ -59,6 +59,8 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 
 	return (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			isPressed={ isSelected }
 			onClick={ async () => {
 				await selectBlock( clientId );

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

@@ -21,7 +21,7 @@ import {
 import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
-
+import { ModifyContentLockMenuItem } from '../content-lock';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
@@ -108,6 +108,12 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 									{ __( 'Move to' ) }
 								</MenuItem>
 							) }
+						{ selectedClientIds.length === 1 && (
+							<ModifyContentLockMenuItem
+								clientId={ selectedClientIds[ 0 ] }
+								onClose={ fillProps?.onClose }
+							/>
+						) }
 						{ fillProps?.count === 1 && ! isContentOnly && (
 							<BlockModeToggle
 								clientId={ fillProps?.firstBlockClientId }

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

@@ -181,6 +181,21 @@ function BlockSwitcherDropdownMenuContents( {
 	);
 }
 
+const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
+	<>
+		<BlockIcon
+			className="block-editor-block-switcher__toggle"
+			icon={ icon }
+			showColors
+		/>
+		{ showTitle && blockTitle && (
+			<span className="block-editor-block-switcher__toggle-text">
+				{ blockTitle }
+			</span>
+		) }
+	</>
+);
+
 export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 	const {
 		canRemove,
@@ -247,6 +262,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		: __( 'Multiple blocks selected' );
 
 	const hideDropdown = disabled || ( ! hasBlockStyles && ! canRemove );
+
 	if ( hideDropdown ) {
 		return (
 			<ToolbarGroup>
@@ -255,14 +271,11 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 					className="block-editor-block-switcher__no-switcher-icon"
 					title={ blockSwitcherLabel }
 					icon={
-						<>
-							<BlockIcon icon={ icon } showColors />
-							{ ( isReusable || isTemplate ) && (
-								<span className="block-editor-block-switcher__toggle-text">
-									{ blockTitle }
-								</span>
-							) }
-						</>
+						<BlockIndicator
+							icon={ icon }
+							showTitle={ isReusable || isTemplate }
+							blockTitle={ blockTitle }
+						/>
 					}
 				/>
 			</ToolbarGroup>
@@ -292,18 +305,11 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={
-							<>
-								<BlockIcon
-									icon={ icon }
-									className="block-editor-block-switcher__toggle"
-									showColors
-								/>
-								{ ( isReusable || isTemplate ) && (
-									<span className="block-editor-block-switcher__toggle-text">
-										{ blockTitle }
-									</span>
-								) }
-							</>
+							<BlockIndicator
+								icon={ icon }
+								showTitle={ isReusable || isTemplate }
+								blockTitle={ blockTitle }
+							/>
 						}
 						toggleProps={ {
 							description: blockSwitcherDescription,

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -21,11 +21,9 @@ import BlockPreview from '../block-preview';
 import useTransformedPatterns from './use-transformed-patterns';
 import { unlock } from '../../lock-unlock';
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
+const { CompositeV2: Composite, CompositeItemV2: CompositeItem } = unlock(
+	componentsPrivateApis
+);
 
 function PatternTransformationsMenu( {
 	blocks,
@@ -82,10 +80,8 @@ function PreviewPatternsPopover( { patterns, onSelect } ) {
 }
 
 function BlockPatternsList( { patterns, onSelect } ) {
-	const composite = useCompositeStore();
 	return (
 		<Composite
-			store={ composite }
 			role="listbox"
 			className="block-editor-block-switcher__preview-patterns-container"
 			aria-label={ __( 'Patterns list' ) }

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

@@ -46,12 +46,11 @@
 }
 
 // Even when the block switcher does not have any transformations, it still serves as a block indicator.
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled {
-	opacity: 1;
+.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled="true"] {
+	color: $gray-900;
 
 	// Since it's not clickable, though, don't show a hover state.
-	&,
-	.block-editor-block-icon.has-colors {
+	&:hover {
 		color: $gray-900;
 	}
 }
@@ -100,7 +99,7 @@
 		width: 300px;
 		border: $border-width solid $gray-900;
 		background: $white;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-medium;
 		outline: none;
 		box-shadow: none;
 		overflow: auto;
@@ -162,7 +161,7 @@
 
 		.block-editor-block-switcher__preview-patterns-container-list__item {
 			height: 100%;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			transition: all 0.05s ease-in-out;
 			position: relative;
 			border: $border-width solid transparent;

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

@@ -34,7 +34,6 @@ import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
-import Shuffle from './shuffle';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 
 /**
@@ -59,12 +58,14 @@ export function PrivateBlockToolbar( {
 	const {
 		blockClientId,
 		blockClientIds,
+		isContentOnlyEditingMode,
 		isDefaultEditingMode,
 		blockType,
 		toolbarKey,
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
+		hasParentPattern,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -72,19 +73,18 @@ export function PrivateBlockToolbar( {
 			getBlockParents,
 			getSelectedBlockClientIds,
 			isBlockValid,
-			getBlockRootClientId,
 			getBlockEditingMode,
 			getBlockAttributes,
+			getBlockParentsByBlockName,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
 		const firstParentClientId = parents[ parents.length - 1 ];
 		const parentBlockName = getBlockName( firstParentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
-		const _isDefaultEditingMode =
-			getBlockEditingMode( selectedBlockClientId ) === 'default';
+		const editingMode = getBlockEditingMode( selectedBlockClientId );
+		const _isDefaultEditingMode = editingMode === 'default';
 		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
 			isBlockValid( id )
@@ -96,13 +96,20 @@ export function PrivateBlockToolbar( {
 			( clientId ) =>
 				!! getBlockAttributes( clientId )?.metadata?.bindings
 		);
+
+		const _hasParentPattern = selectedBlockClientIds.every(
+			( clientId ) =>
+				getBlockParentsByBlockName( clientId, 'core/block', true )
+					.length > 0
+		);
+
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
+			isContentOnlyEditingMode: editingMode === 'contentOnly',
 			isDefaultEditingMode: _isDefaultEditingMode,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
-			rootClientId: blockRootClientId,
 			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
 			showParentSelector:
 				parentBlockType &&
@@ -115,6 +122,7 @@ export function PrivateBlockToolbar( {
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
 			isUsingBindings: _isUsingBindings,
+			hasParentPattern: _hasParentPattern,
 		};
 	}, [] );
 
@@ -168,7 +176,9 @@ export function PrivateBlockToolbar( {
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					( isDefaultEditingMode || isSynced ) && (
+					( isDefaultEditingMode ||
+						( isContentOnlyEditingMode && ! hasParentPattern ) ||
+						isSynced ) && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
@@ -195,7 +205,6 @@ export function PrivateBlockToolbar( {
 							</ToolbarGroup>
 						</div>
 					) }
-				<Shuffle clientId={ blockClientId } />
 				{ shouldShowVisualToolbar && isMultiToolbar && (
 					<BlockGroupToolbar />
 				) }

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

@@ -34,7 +34,14 @@ export default function Shuffle( { clientId, as = Container } ) {
 			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
 			const _patternName = attributes?.metadata?.patternName;
 			const rootBlock = getBlockRootClientId( clientId );
-			const _patterns = __experimentalGetAllowedPatterns( rootBlock );
+
+			// Calling `__experimentalGetAllowedPatterns` is expensive.
+			// Checking if the block can be shuffled prevents unnecessary selector calls.
+			// See: https://github.com/WordPress/gutenberg/pull/64736.
+			const _patterns =
+				_categories.length > 0
+					? __experimentalGetAllowedPatterns( rootBlock )
+					: EMPTY_ARRAY;
 			return {
 				categories: _categories,
 				patterns: _patterns,
@@ -45,12 +52,7 @@ export default function Shuffle( { clientId, as = Container } ) {
 	);
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const sameCategoryPatternsWithSingleWrapper = useMemo( () => {
-		if (
-			! categories ||
-			categories.length === 0 ||
-			! patterns ||
-			patterns.length === 0
-		) {
+		if ( categories.length === 0 || ! patterns || patterns.length === 0 ) {
 			return EMPTY_ARRAY;
 		}
 		return patterns.filter( ( pattern ) => {

package/src/components/block-tools/block-selection-button.js

@@ -257,6 +257,8 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 						<BlockDraggable clientIds={ [ clientId ] }>
 							{ ( draggableProps ) => (
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									icon={ dragHandle }
 									className="block-selection-button_drag-handle"
 									label={ dragHandleLabel }
@@ -272,6 +274,8 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 				{ editorMode === 'navigation' && (
 					<FlexItem>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							ref={ ref }
 							onClick={
 								editorMode === 'navigation'

package/src/components/block-tools/block-toolbar-popover.js

@@ -36,26 +36,30 @@ export default function BlockToolbarPopover( {
 	}, [ clientId ] );
 
 	const { stopTyping } = useDispatch( blockEditorStore );
-	const isToolbarForced = useRef( false );
+	const isToolbarForcedRef = useRef( false );
 
 	useShortcut( 'core/block-editor/focus-toolbar', () => {
-		isToolbarForced.current = true;
+		isToolbarForcedRef.current = true;
 		stopTyping( true );
 	} );
 
 	useEffect( () => {
-		isToolbarForced.current = false;
+		isToolbarForcedRef.current = false;
 	} );
 
+	// If the block has a parent with __experimentalCaptureToolbars enabled,
+	// the toolbar should be positioned over the topmost capturing parent.
+	const clientIdToPositionOver = capturingClientId || clientId;
+
 	const popoverProps = useBlockToolbarPopoverProps( {
 		contentElement: __unstableContentRef?.current,
-		clientId,
+		clientId: clientIdToPositionOver,
 	} );
 
 	return (
 		! isTyping && (
 			<BlockPopover
-				clientId={ capturingClientId || clientId }
+				clientId={ clientIdToPositionOver }
 				bottomClientId={ lastClientId }
 				className={ clsx( 'block-editor-block-list__block-popover', {
 					'is-insertion-point-visible': isInsertionPointVisible,
@@ -66,7 +70,7 @@ export default function BlockToolbarPopover( {
 				<PrivateBlockToolbar
 					// If the toolbar is being shown because of being forced
 					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced.current }
+					focusOnMount={ isToolbarForcedRef.current }
 					__experimentalInitialIndex={
 						initialToolbarItemIndexRef.current
 					}

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

@@ -13,7 +13,7 @@
 .block-editor-block-list__insertion-point-indicator {
 	position: absolute;
 	background: var(--wp-admin-theme-color);
-	border-radius: 2px;
+	border-radius: $radius-small;
 	transform-origin: center;
 	opacity: 0;
 	will-change: transform, opacity;
@@ -63,7 +63,6 @@
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
-		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
 
@@ -95,7 +94,7 @@
 	z-index: z-index(".block-editor-block-list__block-selection-button");
 
 	// Dark block UI appearance.
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background-color: $gray-900;
 
 	font-size: $default-font-size;
@@ -188,7 +187,7 @@
 
 	.block-editor-block-contextual-toolbar {
 		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		overflow: visible; // allow the parent selector to be visible
 		position: static;
 		width: auto;

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -17,6 +17,7 @@ import {
 import { store as blockEditorStore } from '../../store';
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { hasStickyOrFixedPositionValue } from '../../hooks/position';
+import { getVisibleElementBounds } from '../../utils/dom';
 
 const COMMON_PROPS = {
 	placement: 'top-start',
@@ -67,7 +68,7 @@ function getProps(
 	// Get how far the content area has been scrolled.
 	const scrollTop = scrollContainer?.scrollTop || 0;
 
-	const blockRect = selectedBlockElement.getBoundingClientRect();
+	const blockRect = getVisibleElementBounds( selectedBlockElement );
 	const contentRect = contentElement.getBoundingClientRect();
 
 	// Get the vertical position of top of the visible content area.

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -23,7 +23,6 @@ function ZoomOutModeInserters() {
 		sectionRootClientId,
 		selectedBlockClientId,
 		hoveredBlockClientId,
-		inserterSearchInputRef,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
@@ -33,10 +32,10 @@ function ZoomOutModeInserters() {
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
 			isBlockInsertionPointVisible,
-			getInserterSearchInputRef,
+			getSectionRootClientId,
 		} = unlock( select( blockEditorStore ) );
 
-		const { sectionRootClientId: root } = unlock( getSettings() );
+		const root = getSectionRootClientId();
 
 		return {
 			hasSelection: !! getSelectionStart().clientId,
@@ -48,7 +47,6 @@ function ZoomOutModeInserters() {
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
 			hoveredBlockClientId: getHoveredBlockClientId(),
-			inserterSearchInputRef: getInserterSearchInputRef(),
 		};
 	}, [] );
 
@@ -115,7 +113,6 @@ function ZoomOutModeInserters() {
 							showInsertionPoint( sectionRootClientId, index, {
 								operation: 'insert',
 							} );
-							inserterSearchInputRef?.current?.focus();
 						} }
 					/>
 				) }

package/src/components/block-tools/zoom-out-popover.js

@@ -11,12 +11,8 @@ import useSelectedBlockToolProps from './use-selected-block-tool-props';
 import ZoomOutToolbar from './zoom-out-toolbar';
 
 export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
-	const {
-		capturingClientId,
-		isInsertionPointVisible,
-		lastClientId,
-		rootClientId,
-	} = useSelectedBlockToolProps( clientId );
+	const { capturingClientId, isInsertionPointVisible, lastClientId } =
+		useSelectedBlockToolProps( clientId );
 
 	const popoverProps = useBlockToolbarPopoverProps( {
 		contentElement: __unstableContentRef?.current,
@@ -42,8 +38,8 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 			{ ...props }
 		>
 			<ZoomOutToolbar
+				__unstableContentRef={ __unstableContentRef }
 				clientId={ clientId }
-				rootClientId={ rootClientId }
 			/>
 		</BlockPopover>
 	);