Skip to content

Commit

Permalink
Don't rely on pseudo-elements
Browse files Browse the repository at this point in the history
  • Loading branch information
t-hamano committed May 24, 2024
1 parent 5f42aa5 commit e21b144
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {
Button,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { store as preferencesStore } from '@wordpress/preferences';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
Expand All @@ -24,6 +26,10 @@ export default function InspectorControlsTabs( {
hasBlockStyles,
tabs,
} ) {
const showIconLabels = useSelect( ( select ) => {
return select( preferencesStore ).get( 'core', 'showIconLabels' );
}, [] );

// The tabs panel will mount before fills are rendered to the list view
// slot. This means the list view tab isn't initially included in the
// available tabs so the panel defaults selection to the settings tab
Expand All @@ -43,10 +49,16 @@ export default function InspectorControlsTabs( {
tabId={ tab.name }
render={
<Button
icon={ tab.icon }
label={ tab.title }
icon={
! showIconLabels ? tab.icon : undefined
}
label={
! showIconLabels ? tab.title : undefined
}
className={ tab.className }
/>
>
{ showIconLabels && tab.title }
</Button>
}
/>
) ) }
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
.show-icon-labels {
.block-editor-block-inspector__tabs [role="tablist"] {
.components-button.has-icon {
// Hide the button icons when labels are set to display...
svg {
display: none;
}
// ... and display labels.
&::after {
content: attr(aria-label);
}
.components-button {
justify-content: center;
}
}
}
Expand Down

0 comments on commit e21b144

Please sign in to comment.