@wordpress/block-editor 15.7.1-next.2f1c7c01b.0 → 15.8.0

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

@@ -94,10 +94,17 @@ describe( 'BlockSwitcher', () => {
 				},
 			],
 			blocks: [ headingBlock1 ],
+			patterns: [],
+			isUsingBindings: false,
 			canRemove: true,
 		} ) );
 		const user = userEvent.setup();
-		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
+		render(
+			<BlockSwitcher
+				clientIds={ [ headingBlock1.clientId ] }
+				label="Block Name"
+			/>
+		);
 		expect(
 			screen.getByRole( 'button', {
 				name: 'Block Name',
@@ -134,29 +141,21 @@ describe( 'BlockSwitcher', () => {
 		expect( items[ 1 ] ).toHaveTextContent( headingBlockType.title );
 	} );
 
-	test( 'should render accessibly disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
-		useSelect.mockImplementation( () => ( {
-			blocks: [ headingBlock1 ],
-			icon: copy,
-			hasBlockStyles: false,
-			canRemove: false,
-		} ) );
-		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
-		const blockSwitcher = screen.getByRole( 'button', {
-			name: 'Block Name',
-		} );
-		expect( blockSwitcher ).toBeEnabled();
-		expect( blockSwitcher ).toHaveAttribute( 'aria-disabled', 'true' );
-	} );
-
 	test( 'should render message for no available transforms', async () => {
 		useSelect.mockImplementation( () => ( {
 			possibleBlockTransformations: [],
 			blocks: [ headingBlock1 ],
+			patterns: [],
+			isUsingBindings: false,
+			canRemove: false,
 			icon: copy,
-			canRemove: true,
 		} ) );
-		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
+		render(
+			<BlockSwitcher
+				clientIds={ [ headingBlock1.clientId ] }
+				label="Block Name"
+			/>
+		);
 		const user = userEvent.setup();
 		await user.type(
 			screen.getByRole( 'button', {

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

@@ -0,0 +1,173 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { copy } from '@wordpress/icons';
+import { getBlockType, store as blocksStore } from '@wordpress/blocks';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import BlockSwitcher from '../block-switcher';
+import BlockIcon from '../block-icon';
+import PatternOverridesDropdown from './pattern-overrides-dropdown';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { store as blockEditorStore } from '../../store';
+import { hasPatternOverridesDefaultBinding } from '../../utils/block-bindings';
+import { unlock } from '../../lock-unlock';
+
+function getBlockIconVariant( { select, clientIds } ) {
+	const {
+		getBlockName,
+		getBlockAttributes,
+		getBlockParentsByBlockName,
+		isSectionBlock,
+		canRemoveBlocks,
+		getTemplateLock,
+		getBlockEditingMode,
+	} = unlock( select( blockEditorStore ) );
+	const { getBlockStyles } = select( blocksStore );
+
+	const hasTemplateLock = clientIds.some(
+		( id ) => getTemplateLock( id ) === 'contentOnly'
+	);
+
+	// Calculate props only used in this function
+	const isSingleBlock = clientIds.length === 1;
+	const blockName = isSingleBlock && getBlockName( clientIds[ 0 ] );
+	const hasBlockStyles =
+		isSingleBlock && !! getBlockStyles( blockName )?.length;
+	const isSectionInSelection = clientIds.some( ( id ) =>
+		isSectionBlock( id )
+	);
+	const hasPatternOverrides = clientIds.every( ( clientId ) =>
+		hasPatternOverridesDefaultBinding(
+			getBlockAttributes( clientId )?.metadata?.bindings
+		)
+	);
+	const hasParentPattern = clientIds.every(
+		( clientId ) =>
+			getBlockParentsByBlockName( clientId, 'core/block', true ).length >
+			0
+	);
+	const canRemove = canRemoveBlocks( clientIds );
+
+	const isDefaultEditingMode =
+		getBlockEditingMode( clientIds[ 0 ] ) === 'default';
+	const _hideTransformsForSections =
+		window?.__experimentalContentOnlyPatternInsertion &&
+		isSectionInSelection;
+	const _showBlockSwitcher =
+		! _hideTransformsForSections &&
+		isDefaultEditingMode &&
+		( hasBlockStyles || canRemove ) &&
+		! hasTemplateLock;
+
+	const _showPatternOverrides = hasPatternOverrides && hasParentPattern;
+
+	if ( _showBlockSwitcher ) {
+		return 'switcher';
+	} else if ( _showPatternOverrides ) {
+		return 'pattern-overrides';
+	}
+
+	return 'default';
+}
+
+function getBlockIcon( { select, clientIds } ) {
+	const { getBlockName, getBlockAttributes } = unlock(
+		select( blockEditorStore )
+	);
+	const { getActiveBlockVariation } = select( blocksStore );
+
+	const _isSingleBlock = clientIds.length === 1;
+	const firstClientId = clientIds[ 0 ];
+
+	const blockName = getBlockName( firstClientId );
+	const blockType = getBlockType( blockName );
+
+	if ( _isSingleBlock ) {
+		const match = getActiveBlockVariation(
+			blockName,
+			getBlockAttributes( firstClientId )
+		);
+		return match?.icon || blockType?.icon;
+	}
+
+	const blockNames = clientIds.map( ( id ) => getBlockName( id ) );
+	const isSelectionOfSameType = new Set( blockNames ).size === 1;
+	return isSelectionOfSameType ? blockType?.icon : copy;
+}
+
+export default function BlockToolbarIcon( { clientIds, isSynced } ) {
+	const { icon, showIconLabels, variant } = useSelect(
+		( select ) => {
+			return {
+				icon: getBlockIcon( { select, clientIds } ),
+				showIconLabels: select( preferencesStore ).get(
+					'core',
+					'showIconLabels'
+				),
+				variant: getBlockIconVariant( {
+					select,
+					clientIds,
+				} ),
+			};
+		},
+		[ clientIds ]
+	);
+
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: clientIds?.[ 0 ],
+		maximumLength: 35,
+	} );
+
+	const isSingleBlock = clientIds.length === 1;
+	const showBlockTitle = isSingleBlock && isSynced && ! showIconLabels;
+	const label = isSingleBlock ? blockTitle : __( 'Multiple blocks selected' );
+	// Used to hide the block icon when the showIconLabels preference is enabled, or to display the template title when it's a template.
+	const text = showBlockTitle && blockTitle ? blockTitle : undefined;
+
+	const BlockIconElement = (
+		<BlockIcon
+			className="block-editor-block-toolbar__block-icon"
+			icon={ icon }
+		/>
+	);
+
+	if ( variant === 'switcher' ) {
+		return (
+			<BlockSwitcher
+				clientIds={ clientIds }
+				label={ label }
+				text={ text }
+			>
+				{ BlockIconElement }
+			</BlockSwitcher>
+		);
+	}
+
+	if ( variant === 'pattern-overrides' ) {
+		return (
+			<PatternOverridesDropdown
+				icon={ BlockIconElement }
+				clientIds={ clientIds }
+				blockTitle={ blockTitle }
+				label={ label }
+			/>
+		);
+	}
+
+	return (
+		<ToolbarButton
+			disabled
+			className="block-editor-block-toolbar__block-icon-button"
+			title={ label }
+			icon={ BlockIconElement }
+			text={ text }
+		/>
+	);
+}

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