@wordpress/block-editor 15.7.0 → 15.8.0

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

@@ -23,7 +23,6 @@ import { ToolbarGroup } from '@wordpress/components';
  */
 import BlockMover from '../block-mover';
 import BlockParentSelector from '../block-parent-selector';
-import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
 import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
@@ -39,6 +38,7 @@ import { useHasBlockToolbar } from './use-has-block-toolbar';
 import ChangeDesign from './change-design';
 import SwitchSectionStyle from './switch-section-style';
 import { unlock } from '../../lock-unlock';
+import BlockToolbarIcon from './block-toolbar-icon';
 
 /**
  * Renders the block toolbar.
@@ -68,7 +68,7 @@ export function PrivateBlockToolbar( {
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
-		hasParentPattern,
+		isSectionContainer,
 		hasContentOnlyLocking,
 		showShuffleButton,
 		showSlots,
@@ -85,7 +85,6 @@ export function PrivateBlockToolbar( {
 			isBlockValid,
 			getBlockEditingMode,
 			getBlockAttributes,
-			getBlockParentsByBlockName,
 			getTemplateLock,
 			getParentSectionBlock,
 			isZoomOut,
@@ -112,12 +111,6 @@ export function PrivateBlockToolbar( {
 				!! getBlockAttributes( clientId )?.metadata?.bindings
 		);
 
-		const _hasParentPattern = selectedBlockClientIds.every(
-			( clientId ) =>
-				getBlockParentsByBlockName( clientId, 'core/block', true )
-					.length > 0
-		);
-
 		// If one or more selected blocks are locked, do not show the BlockGroupToolbar.
 		const _hasTemplateLock = selectedBlockClientIds.some(
 			( id ) => getTemplateLock( id ) === 'contentOnly'
@@ -125,11 +118,13 @@ export function PrivateBlockToolbar( {
 
 		const _isZoomOut = isZoomOut();
 
+		const _isSectionBlock = isSectionBlock( selectedBlockClientId );
+
 		// The switch style button appears more prominently with the
 		// content only pattern experiment.
 		const _showSwitchSectionStyleButton =
 			window?.__experimentalContentOnlyPatternInsertion &&
-			( _isZoomOut || isSectionBlock( selectedBlockClientId ) );
+			( _isZoomOut || _isSectionBlock );
 
 		return {
 			blockClientId: selectedBlockClientId,
@@ -150,7 +145,7 @@ export function PrivateBlockToolbar( {
 				) &&
 				selectedBlockClientIds.length === 1,
 			isUsingBindings: _isUsingBindings,
-			hasParentPattern: _hasParentPattern,
+			isSectionContainer: _isSectionBlock,
 			hasContentOnlyLocking: _hasTemplateLock,
 			showShuffleButton: _isZoomOut,
 			showSlots: ! _isZoomOut,
@@ -210,34 +205,33 @@ export function PrivateBlockToolbar( {
 				{ showParentSelector && ! isMultiToolbar && isLargeViewport && (
 					<BlockParentSelector />
 				) }
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					! hasParentPattern && (
-						<div
-							ref={ nodeRef }
-							{ ...showHoveredOrFocusedGestures }
-						>
-							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-								<BlockSwitcher clientIds={ blockClientIds } />
-								{ isDefaultEditingMode &&
-									showBlockVisibilityButton && (
-										<BlockVisibilityToolbar
-											clientIds={ blockClientIds }
-										/>
-									) }
-								{ ! isMultiToolbar &&
-									isDefaultEditingMode &&
-									showLockButtons && (
-										<BlockLockToolbar
-											clientId={ blockClientId }
-										/>
-									) }
-								<BlockMover
-									clientIds={ blockClientIds }
-									hideDragHandle={ hideDragHandle }
-								/>
-							</ToolbarGroup>
-						</div>
-					) }
+				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
+					<div ref={ nodeRef } { ...showHoveredOrFocusedGestures }>
+						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+							<BlockToolbarIcon
+								clientIds={ blockClientIds }
+								isSynced={ isSynced }
+							/>
+							{ isDefaultEditingMode &&
+								showBlockVisibilityButton && (
+									<BlockVisibilityToolbar
+										clientIds={ blockClientIds }
+									/>
+								) }
+							{ ! isMultiToolbar &&
+								isDefaultEditingMode &&
+								showLockButtons && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
+								) }
+							<BlockMover
+								clientIds={ blockClientIds }
+								hideDragHandle={ hideDragHandle }
+							/>
+						</ToolbarGroup>
+					</div>
+				) }
 				{ ! hasContentOnlyLocking &&
 					shouldShowVisualToolbar &&
 					isMultiToolbar &&
@@ -250,19 +244,23 @@ export function PrivateBlockToolbar( {
 				) }
 				{ shouldShowVisualToolbar && showSlots && (
 					<>
-						<BlockControls.Slot
-							group="parent"
-							className="block-editor-block-toolbar__slot"
-						/>
-						<BlockControls.Slot
-							group="block"
-							className="block-editor-block-toolbar__slot"
-						/>
-						<BlockControls.Slot className="block-editor-block-toolbar__slot" />
-						<BlockControls.Slot
-							group="inline"
-							className="block-editor-block-toolbar__slot"
-						/>
+						{ ! isSectionContainer && (
+							<>
+								<BlockControls.Slot
+									group="parent"
+									className="block-editor-block-toolbar__slot"
+								/>
+								<BlockControls.Slot
+									group="block"
+									className="block-editor-block-toolbar__slot"
+								/>
+								<BlockControls.Slot className="block-editor-block-toolbar__slot" />
+								<BlockControls.Slot
+									group="inline"
+									className="block-editor-block-toolbar__slot"
+								/>
+							</>
+						) }
 						<BlockControls.Slot
 							group="other"
 							className="block-editor-block-toolbar__slot"

package/src/components/block-toolbar/pattern-overrides-dropdown.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Popover,
+	ToolbarButton,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Renders the content of the pattern overrides popover.
+ * Only mounts when the popover is opened.
+ *
+ * @param {Object} props            Component props.
+ * @param {Array}  props.clientIds  The client IDs of selected blocks.
+ * @param {string} props.blockTitle The display title of the block.
+ * @return {JSX.Element} The popover content.
+ */
+function PatternOverridesPopoverContent( { clientIds, blockTitle } ) {
+	const blockMetaName = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+			return getBlockAttributes( clientIds?.[ 0 ] )?.metadata?.name;
+		},
+		[ clientIds ]
+	);
+
+	const isSingleBlock = clientIds.length === 1;
+
+	// Pattern overrides description
+	let description;
+	if ( isSingleBlock && blockMetaName ) {
+		description = sprintf(
+			/* translators: 1: The block type's name. 2: The block's user-provided name (the same as the override name). */
+			__( 'This %1$s is editable using the "%2$s" override.' ),
+			blockTitle.toLowerCase(),
+			blockMetaName
+		);
+	} else {
+		description = __( 'These blocks are editable using overrides.' );
+	}
+
+	return <Text>{ description }</Text>;
+}
+
+/**
+ * Renders a toolbar button that displays information about pattern overrides in a popover.
+ *
+ * @param {Object}      props            Component props.
+ * @param {JSX.Element} props.icon       The icon element to display.
+ * @param {Array}       props.clientIds  The client IDs of selected blocks.
+ * @param {string}      props.blockTitle The display title of the block.
+ * @param {string}      props.label      The label for the button.
+ * @return {JSX.Element} The pattern overrides button component.
+ */
+export default function PatternOverridesDropdown( {
+	icon,
+	clientIds,
+	blockTitle,
+	label,
+} ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const anchorRef = useRef();
+
+	return (
+		<>
+			<ToolbarButton
+				ref={ anchorRef }
+				className="block-editor-block-toolbar__pattern-overrides-indicator"
+				icon={ icon }
+				label={ label }
+				onClick={ () => setIsOpen( ! isOpen ) }
+				aria-expanded={ isOpen }
+			/>
+			{ isOpen && (
+				<Popover
+					anchor={ anchorRef.current }
+					onClose={ () => setIsOpen( false ) }
+					placement="bottom-start"
+					offset={ 16 }
+					className="block-editor-block-toolbar__pattern-overrides-popover"
+				>
+					<PatternOverridesPopoverContent
+						clientIds={ clientIds }
+						blockTitle={ blockTitle }
+					/>
+				</Popover>
+			) }
+		</>
+	);
+}

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

@@ -50,13 +50,19 @@
 		}
 	}
 
-	&.is-synced,
-	&.is-connected {
-		.block-editor-block-switcher .components-button .block-editor-block-icon {
-			color: var(--wp-block-synced-color);
+	// Disabled block toolbar icon should have a fixed color.
+	.components-button.block-editor-block-toolbar__block-icon-button[aria-disabled="true"] {
+		color: $gray-900;
+
+		// Since it's not clickable, though, don't show a hover state.
+		&:hover {
+			color: $gray-900;
 		}
+	}
 
-		.block-editor-block-switcher__no-switcher-icon[aria-disabled="true"] .block-editor-block-icon {
+	&.is-synced,
+	&.is-connected {
+		.block-editor-block-toolbar__block-icon {
 			color: var(--wp-block-synced-color);
 		}
 	}
@@ -145,15 +151,6 @@
 
 // Block controls.
 .block-editor-block-toolbar__block-controls {
-	// Switcher.
-	.block-editor-block-switcher .components-dropdown-menu__toggle,
-	.block-editor-block-switcher__no-switcher-icon {
-		.block-editor-block-icon {
-			width: $button-size-small !important;
-			margin: 0 !important;
-		}
-	}
-
 	// @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.
 	.components-toolbar-group {
@@ -161,6 +158,12 @@
 	}
 }
 
+// Pattern overrides indicator popover
+.block-editor-block-toolbar__pattern-overrides-popover .components-popover__content {
+	min-width: 260px;
+	padding: $grid-unit-20;
+}
+
 .block-editor-block-toolbar,
 .block-editor-rich-text__inline-format-toolbar-group {
 	// Override Toolbar buttons size.
@@ -198,13 +201,10 @@
 		padding-right: 6px;
 	}
 
-	.block-editor-block-switcher .components-dropdown-menu__toggle,
-	.block-editor-block-switcher__no-switcher-icon {
-		.block-editor-block-icon {
-			width: 0 !important;
-			height: 0 !important;
-			min-width: 0 !important;
-		}
+	.block-editor-block-icon {
+		width: 0 !important;
+		height: 0 !important;
+		min-width: 0 !important;
 	}
 
 	// Parent selector overrides

package/src/components/block-toolbar/test/block-toolbar-icon.js

@@ -0,0 +1,182 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { paragraph } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockToolbarIcon from '../block-toolbar-icon';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () =>
+	jest.fn().mockReturnValue( 'Block Name' )
+);
+jest.mock( '../../block-switcher', () =>
+	jest.fn( ( { children } ) => (
+		<div data-testid="block-switcher">{ children }</div>
+	) )
+);
+jest.mock( '../pattern-overrides-dropdown', () =>
+	jest.fn( ( { clientIds } ) => (
+		<div data-testid="pattern-overrides-dropdown">
+			{ clientIds.length === 1
+				? 'Block Name'
+				: 'Multiple blocks selected' }
+		</div>
+	) )
+);
+
+describe( 'BlockToolbarIcon', () => {
+	const defaultProps = {
+		clientIds: [ 'test-client-id' ],
+		isSynced: false,
+	};
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	describe( 'when variant is "switcher"', () => {
+		it( 'should render BlockSwitcher with icon', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'switcher',
+			} ) );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByTestId( 'pattern-overrides-dropdown' )
+			).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when variant is "pattern-overrides"', () => {
+		it( 'should render PatternOverridesDropdown for single block', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'pattern-overrides',
+			} ) );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			const dropdown = screen.getByTestId( 'pattern-overrides-dropdown' );
+			expect( dropdown ).toBeInTheDocument();
+			expect( dropdown ).toHaveTextContent( 'Block Name' );
+			expect(
+				screen.queryByTestId( 'block-switcher' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should render PatternOverridesDropdown for multiple blocks', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'pattern-overrides',
+			} ) );
+
+			render(
+				<BlockToolbarIcon
+					{ ...defaultProps }
+					clientIds={ [ 'test-1', 'test-2' ] }
+				/>
+			);
+
+			const dropdown = screen.getByTestId( 'pattern-overrides-dropdown' );
+			expect( dropdown ).toBeInTheDocument();
+			expect( dropdown ).toHaveTextContent( 'Multiple blocks selected' );
+		} );
+	} );
+
+	describe( 'when variant is "default"', () => {
+		it( 'should render disabled ToolbarButton for single block', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'default',
+			} ) );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			const button = screen.getByRole( 'button' );
+			expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+			expect( button ).toHaveAttribute( 'aria-label', 'Block Name' );
+			expect(
+				screen.queryByTestId( 'block-switcher' )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId( 'pattern-overrides-dropdown' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should render disabled ToolbarButton for multiple blocks', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'default',
+			} ) );
+
+			render(
+				<BlockToolbarIcon
+					{ ...defaultProps }
+					clientIds={ [ 'test-1', 'test-2', 'test-3' ] }
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+			expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+			expect( button ).toHaveAttribute(
+				'aria-label',
+				'Multiple blocks selected'
+			);
+		} );
+	} );
+
+	describe( 'label calculation', () => {
+		it( 'should use block title for single block', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'default',
+			} ) );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			const button = screen.getByRole( 'button' );
+			expect( button ).toHaveAttribute( 'aria-label', 'Block Name' );
+		} );
+
+		it( 'should use "Multiple blocks selected" for multiple blocks', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'default',
+			} ) );
+
+			render(
+				<BlockToolbarIcon
+					{ ...defaultProps }
+					clientIds={ [ 'test-1', 'test-2' ] }
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+			expect( button ).toHaveAttribute(
+				'aria-label',
+				'Multiple blocks selected'
+			);
+		} );
+	} );
+} );

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

@@ -77,7 +77,8 @@ export default function BlockTools( {
 		getBlockRootClientId,
 		isGroupable,
 		getBlockName,
-	} = useSelect( blockEditorStore );
+		getEditedContentOnlySection,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
 		useShowBlockTools();
@@ -94,6 +95,7 @@ export default function BlockTools( {
 		moveBlocksDown,
 		expandBlock,
 		updateBlockAttributes,
+		stopEditingContentOnlySection,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
@@ -246,6 +248,14 @@ export default function BlockTools( {
 				} );
 			}
 		}
+
+		// Has the same keyboard shortcut as 'unselect', so can't be within the
+		// if/else chain above.
+		if ( isMatch( 'core/block-editor/stop-editing-as-blocks', event ) ) {
+			if ( getEditedContentOnlySection() ) {
+				stopEditingContentOnlySection();
+			}
+		}
 	}
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );

package/src/components/block-variation-transforms/index.js

@@ -5,16 +5,13 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
-	DropdownMenu,
-	MenuGroup,
-	MenuItemsChoice,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	VisuallyHidden,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -23,6 +20,8 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+const { Menu } = unlock( componentsPrivateApis );
+
 function VariationsButtons( {
 	className,
 	onSelectVariation,
@@ -65,36 +64,45 @@ function VariationsDropdown( {
 	selectedValue,
 	variations,
 } ) {
-	const selectOptions = variations.map(
-		( { name, title, description } ) => ( {
-			value: name,
-			label: title,
-			info: description,
-		} )
-	);
-
 	return (
-		<DropdownMenu
-			className={ className }
-			label={ __( 'Transform to variation' ) }
-			text={ __( 'Transform to variation' ) }
-			popoverProps={ {
-				position: 'bottom center',
-				className: `${ className }__popover`,
-			} }
-			icon={ chevronDown }
-			toggleProps={ { iconPosition: 'right' } }
-		>
-			{ () => (
-				<MenuGroup>
-					<MenuItemsChoice
-						choices={ selectOptions }
-						value={ selectedValue }
-						onSelect={ onSelectVariation }
-					/>
-				</MenuGroup>
-			) }
-		</DropdownMenu>
+		<div className={ className }>
+			<Menu>
+				<Menu.TriggerButton
+					render={
+						<Button
+							className="block-editor-block-variation-transforms__button"
+							__next40pxDefaultSize
+							variant="secondary"
+						>
+							{ __( 'Transform to variation' ) }
+						</Button>
+					}
+				/>
+				<Menu.Popover position="bottom">
+					<Menu.Group>
+						{ variations.map( ( variation ) => (
+							<Menu.RadioItem
+								key={ variation.name }
+								value={ variation.name }
+								checked={ selectedValue === variation.name }
+								onChange={ () =>
+									onSelectVariation( variation.name )
+								}
+							>
+								<Menu.ItemLabel>
+									{ variation.title }
+								</Menu.ItemLabel>
+								{ variation.description && (
+									<Menu.ItemHelpText>
+										{ variation.description }
+									</Menu.ItemHelpText>
+								) }
+							</Menu.RadioItem>
+						) ) }
+					</Menu.Group>
+				</Menu.Popover>
+			</Menu>
+		</div>
 	);
 }