@wordpress/block-editor 15.7.0 → 15.8.0

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

@@ -217,7 +217,6 @@ function BlockPopoverInbetween( {
 		return null;
 	}
 
-	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	// While ideally it would be enough to capture the
 	// bubbling focus event from the Inserter, due to the
 	// characteristics of click focusing of `button`s in
@@ -253,7 +252,6 @@ function BlockPopoverInbetween( {
 			</div>
 		</Popover>
 	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 }
 
 export default BlockPopoverInbetween;

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -336,7 +336,10 @@ export function BlockSettingsDropdown( {
 									) }
 									{ count === 1 && (
 										<CommentIconSlotFill.Slot
-											fillProps={ { onClose } }
+											fillProps={ {
+												clientId: firstBlockClientId,
+												onClose,
+											} }
 										/>
 									) }
 								</MenuGroup>

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

@@ -19,7 +19,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 { ModifyContentOnlySectionMenuItem } from '../content-lock';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
 import { BlockVisibilityMenuItem } from '../block-visibility';
 
@@ -115,7 +115,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 						) }
 						{ fills }
 						{ selectedClientIds.length === 1 && (
-							<ModifyContentLockMenuItem
+							<ModifyContentOnlySectionMenuItem
 								clientId={ selectedClientIds[ 0 ] }
 								onClose={ fillProps?.onClose }
 							/>

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

@@ -4,7 +4,6 @@
 import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import {
 	DropdownMenu,
-	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
 	__experimentalText as Text,
@@ -17,60 +16,64 @@ import {
 	isTemplatePart,
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { copy } from '@wordpress/icons';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import BlockTransformationsMenu from './block-transformations-menu';
 import { useBlockVariationTransforms } from './block-variation-transformations';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import { unlock } from '../../lock-unlock';
 
-function BlockSwitcherDropdownMenuContents( {
-	onClose,
-	clientIds,
-	hasBlockStyles,
-	canRemove,
-} ) {
+function BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, patterns, blocks, isUsingBindings } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockAttributes,
-					getBlocksByClientId,
-					getBlockRootClientId,
-					getBlockTransformItems,
-					__experimentalGetPatternTransformItems,
-				} = select( blockEditorStore );
-				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				const _blocks = getBlocksByClientId( clientIds );
-				return {
-					blocks: _blocks,
-					possibleBlockTransformations: getBlockTransformItems(
-						_blocks,
-						rootClientId
-					),
-					patterns: __experimentalGetPatternTransformItems(
-						_blocks,
-						rootClientId
-					),
-					isUsingBindings: clientIds.every(
-						( clientId ) =>
-							!! getBlockAttributes( clientId )?.metadata
-								?.bindings
-					),
-				};
-			},
-			[ clientIds ]
-		);
+	const {
+		possibleBlockTransformations,
+		patterns,
+		blocks,
+		isUsingBindings,
+		canRemove,
+		hasBlockStyles,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlocksByClientId,
+				getBlockRootClientId,
+				getBlockTransformItems,
+				__experimentalGetPatternTransformItems,
+				canRemoveBlocks,
+				getBlockName,
+			} = select( blockEditorStore );
+			const { getBlockStyles } = select( blocksStore );
+			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const _blocks = getBlocksByClientId( clientIds );
+			const _isSingleBlock = clientIds.length === 1;
+			const _blockName = _isSingleBlock && getBlockName( clientIds[ 0 ] );
+			const _hasBlockStyles =
+				_isSingleBlock && !! getBlockStyles( _blockName )?.length;
+			return {
+				blocks: _blocks,
+				possibleBlockTransformations: getBlockTransformItems(
+					_blocks,
+					rootClientId
+				),
+				patterns: __experimentalGetPatternTransformItems(
+					_blocks,
+					rootClientId
+				),
+				isUsingBindings: clientIds.every(
+					( clientId ) =>
+						!! getBlockAttributes( clientId )?.metadata?.bindings
+				),
+				canRemove: canRemoveBlocks( clientIds ),
+				hasBlockStyles: _hasBlockStyles,
+			};
+		},
+		[ clientIds ]
+	);
 	const blockVariationTransformations = useBlockVariationTransforms( {
 		clientIds,
 		blocks,
@@ -101,6 +104,7 @@ function BlockSwitcherDropdownMenuContents( {
 		replaceBlocks( clientIds, transformedBlocks );
 		selectForMultipleBlocks( transformedBlocks );
 	}
+
 	/**
 	 * The `isSynced` check is a stopgap solution here.
 	 * Ideally, the Transforms API should handle this
@@ -189,133 +193,8 @@ function BlockSwitcherDropdownMenuContents( {
 	);
 }
 
-export const BlockSwitcher = ( { clientIds } ) => {
-	const {
-		hasContentOnlyLocking,
-		canRemove,
-		hasBlockStyles,
-		icon,
-		invalidBlocks,
-		isReusable,
-		isTemplate,
-		isDisabled,
-		isSectionInSelection,
-	} = useSelect(
-		( select ) => {
-			const {
-				getTemplateLock,
-				getBlocksByClientId,
-				getBlockAttributes,
-				canRemoveBlocks,
-				getBlockEditingMode,
-				isSectionBlock,
-			} = unlock( select( blockEditorStore ) );
-			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
-				select( blocksStore );
-			const _blocks = getBlocksByClientId( clientIds );
-			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
-				return { invalidBlocks: true };
-			}
-			const [ { name: firstBlockName } ] = _blocks;
-			const _isSingleBlockSelected = _blocks.length === 1;
-			const blockType = getBlockType( firstBlockName );
-			const editingMode = getBlockEditingMode( clientIds[ 0 ] );
-
-			let _icon;
-			let _hasTemplateLock;
-			if ( _isSingleBlockSelected ) {
-				const match = getActiveBlockVariation(
-					firstBlockName,
-					getBlockAttributes( clientIds[ 0 ] )
-				);
-				// Take into account active block variations.
-				_icon = match?.icon || blockType.icon;
-				_hasTemplateLock =
-					getTemplateLock( clientIds[ 0 ] ) === 'contentOnly';
-			} else {
-				const isSelectionOfSameType =
-					new Set( _blocks.map( ( { name } ) => name ) ).size === 1;
-				_hasTemplateLock = clientIds.some(
-					( id ) => getTemplateLock( id ) === 'contentOnly'
-				);
-				// When selection consists of blocks of multiple types, display an
-				// appropriate icon to communicate the non-uniformity.
-				_icon = isSelectionOfSameType ? blockType.icon : copy;
-			}
-
-			const _isSectionInSelection = clientIds.some( ( id ) =>
-				isSectionBlock( id )
-			);
-
-			return {
-				canRemove: canRemoveBlocks( clientIds ),
-				hasBlockStyles:
-					_isSingleBlockSelected &&
-					!! getBlockStyles( firstBlockName )?.length,
-				icon: _icon,
-				isReusable:
-					_isSingleBlockSelected && isReusableBlock( _blocks[ 0 ] ),
-				isTemplate:
-					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
-				hasContentOnlyLocking: _hasTemplateLock,
-				isDisabled: editingMode !== 'default',
-				isSectionInSelection: _isSectionInSelection,
-			};
-		},
-		[ clientIds ]
-	);
-	const blockTitle = useBlockDisplayTitle( {
-		clientId: clientIds?.[ 0 ],
-		maximumLength: 35,
-	} );
-	const showIconLabels = useSelect(
-		( select ) =>
-			select( preferencesStore ).get( 'core', 'showIconLabels' ),
-		[]
-	);
-
-	if ( invalidBlocks ) {
-		return null;
-	}
-
+export const BlockSwitcher = ( { children, clientIds, label, text } ) => {
 	const isSingleBlock = clientIds.length === 1;
-	const blockSwitcherLabel = isSingleBlock
-		? blockTitle
-		: __( 'Multiple blocks selected' );
-
-	const blockIndicatorText =
-		( isReusable || isTemplate ) && ! showIconLabels && blockTitle
-			? blockTitle
-			: undefined;
-
-	const hideTransformsForSections =
-		window?.__experimentalContentOnlyPatternInsertion &&
-		isSectionInSelection;
-	const hideDropdown =
-		hideTransformsForSections ||
-		isDisabled ||
-		( ! hasBlockStyles && ! canRemove ) ||
-		hasContentOnlyLocking;
-
-	if ( hideDropdown ) {
-		return (
-			<ToolbarGroup>
-				<ToolbarButton
-					disabled
-					className="block-editor-block-switcher__no-switcher-icon"
-					title={ blockSwitcherLabel }
-					icon={
-						<BlockIcon
-							className="block-editor-block-switcher__toggle"
-							icon={ icon }
-							showColors
-						/>
-					}
-					text={ blockIndicatorText }
-				/>
-			</ToolbarGroup>
-		);
-	}
 
 	const blockSwitcherDescription = isSingleBlock
 		? __( 'Change block type or style' )
@@ -334,19 +213,13 @@ export const BlockSwitcher = ( { clientIds } ) => {
 				{ ( toggleProps ) => (
 					<DropdownMenu
 						className="block-editor-block-switcher"
-						label={ blockSwitcherLabel }
+						label={ label }
 						popoverProps={ {
 							placement: 'bottom-start',
 							className: 'block-editor-block-switcher__popover',
 						} }
-						icon={
-							<BlockIcon
-								className="block-editor-block-switcher__toggle"
-								icon={ icon }
-								showColors
-							/>
-						}
-						text={ blockIndicatorText }
+						icon={ children }
+						text={ text }
 						toggleProps={ {
 							description: blockSwitcherDescription,
 							...toggleProps,
@@ -357,8 +230,6 @@ export const BlockSwitcher = ( { clientIds } ) => {
 							<BlockSwitcherDropdownMenuContents
 								onClose={ onClose }
 								clientIds={ clientIds }
-								hasBlockStyles={ hasBlockStyles }
-								canRemove={ canRemove }
 							/>
 						) }
 					</DropdownMenu>

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

@@ -1,54 +1,6 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
 
-.block-editor-block-switcher {
-	position: relative;
-
-	// @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.
-	// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
-	.components-button.components-dropdown-menu__toggle.has-icon.has-icon {
-		min-width: $button-size;
-	}
-}
-
-// Show an indicator triangle.
-.block-editor-block-switcher__no-switcher-icon,
-.block-editor-block-switcher__toggle {
-	position: relative;
-}
-
-.components-button.block-editor-block-switcher__toggle,
-.components-button.block-editor-block-switcher__no-switcher-icon {
-	margin: 0;
-	display: block;
-	height: $grid-unit-60;
-
-	.block-editor-block-icon {
-		margin: auto;
-	}
-}
-
-.components-button.block-editor-block-switcher__no-switcher-icon {
-	display: flex;
-
-	.block-editor-block-icon {
-		margin-right: auto;
-		margin-left: auto;
-		min-width: $icon-size !important;
-	}
-}
-
-// 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[aria-disabled="true"] {
-	color: $gray-900;
-
-	// Since it's not clickable, though, don't show a hover state.
-	&:hover {
-		color: $gray-900;
-	}
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
 	min-width: 300px;
 }
@@ -97,28 +49,6 @@
 	font-weight: $font-weight-medium;
 }
 
-// The block switcher in the contextual toolbar should be bigger.
-.block-editor-block-contextual-toolbar {
-	.components-button.block-editor-block-switcher__no-switcher-icon {
-		min-width: $button-size;
-	}
-
-	.components-button.block-editor-block-switcher__no-switcher-icon,
-	.components-button.block-editor-block-switcher__toggle {
-		height: $grid-unit-60;
-
-		.block-editor-block-icon,
-		.block-editor-block-switcher__transform {
-			width: $block-toolbar-height;
-			height: $block-toolbar-height;
-		}
-
-		.block-editor-block-switcher__transform {
-			padding: $grid-unit-15;
-		}
-	}
-}
-
 .block-editor-block-switcher__preview-patterns-container {
 	padding-bottom: $grid-unit-20;
 

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 }
+		/>
+	);
+}