diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 79f33bd30d7537..285581578ead43 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -18,6 +18,7 @@ import { } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { copy } from '@wordpress/icons'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -185,21 +186,6 @@ function BlockSwitcherDropdownMenuContents( { ); } -const BlockIndicator = ( { icon, showTitle, blockTitle } ) => ( - <> - - { showTitle && blockTitle && ( - - { blockTitle } - - ) } - -); - export const BlockSwitcher = ( { clientIds } ) => { const { hasContentOnlyLocking, @@ -272,6 +258,11 @@ export const BlockSwitcher = ( { clientIds } ) => { clientId: clientIds?.[ 0 ], maximumLength: 35, } ); + const showIconLabels = useSelect( + ( select ) => + select( preferencesStore ).get( 'core', 'showIconLabels' ), + [] + ); if ( invalidBlocks ) { return null; @@ -282,6 +273,11 @@ export const BlockSwitcher = ( { clientIds } ) => { ? blockTitle : __( 'Multiple blocks selected' ); + const blockIndicatorText = + ( isReusable || isTemplate ) && ! showIconLabels && blockTitle + ? blockTitle + : undefined; + const hideDropdown = isDisabled || ( ! hasBlockStyles && ! canRemove ) || @@ -295,12 +291,13 @@ export const BlockSwitcher = ( { clientIds } ) => { className="block-editor-block-switcher__no-switcher-icon" title={ blockSwitcherLabel } icon={ - } + text={ blockIndicatorText } /> ); @@ -329,12 +326,13 @@ export const BlockSwitcher = ( { clientIds } ) => { className: 'block-editor-block-switcher__popover', } } icon={ - } + text={ blockIndicatorText } toggleProps={ { description: blockSwitcherDescription, ...toggleProps, diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 3dc2a7d591c926..62a7bebe95d278 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -26,15 +26,6 @@ } } -.block-editor-block-switcher__toggle-text { - margin-left: $grid-unit-10; - - // Account for double label when show-text-buttons is set. - .show-icon-labels & { - display: none; - } -} - .components-button.block-editor-block-switcher__no-switcher-icon { display: flex;