Skip to content

Commit

Permalink
Show block icon in contentOnly toolbar (WordPress#64694)
Browse files Browse the repository at this point in the history
jeryj authored and bph committed Aug 31, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent a41cf1a commit 9b87708
Showing 3 changed files with 36 additions and 27 deletions.
46 changes: 26 additions & 20 deletions packages/block-editor/src/components/block-switcher/index.js
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
@@ -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;
}
}
10 changes: 7 additions & 3 deletions packages/block-editor/src/components/block-toolbar/index.js
Original file line number Diff line number Diff line change
@@ -59,6 +59,7 @@ export function PrivateBlockToolbar( {
const {
blockClientId,
blockClientIds,
isContentOnlyEditingMode,
isDefaultEditingMode,
blockType,
toolbarKey,
@@ -85,8 +86,8 @@ export function PrivateBlockToolbar( {
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 )
@@ -101,6 +102,7 @@ export function PrivateBlockToolbar( {
return {
blockClientId: selectedBlockClientId,
blockClientIds: selectedBlockClientIds,
isContentOnlyEditingMode: editingMode === 'contentOnly',
isDefaultEditingMode: _isDefaultEditingMode,
blockType: selectedBlockClientId && getBlockType( _blockName ),
shouldShowVisualToolbar: isValid && isVisual,
@@ -171,7 +173,9 @@ export function PrivateBlockToolbar( {
isLargeViewport &&
isDefaultEditingMode && <BlockParentSelector /> }
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
( isDefaultEditingMode || isSynced ) && (
( isDefaultEditingMode ||
isContentOnlyEditingMode ||
isSynced ) && (
<div
ref={ nodeRef }
{ ...showHoveredOrFocusedGestures }

0 comments on commit 9b87708

Please sign in to comment.