InspectorControls: Text not displayed when "Show button text labels" …

…is enabled (#61949)

* InspectorControls: Text not displayed when "Show button text labels" is enabled

* Don't rely on pseudo-elements

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

packages/block-editor/src/components/inspector-controls-tabs/index.js

@@ -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
@@ -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
@@ -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>
 							}
 						/>
 					) ) }

packages/block-editor/src/components/inspector-controls-tabs/style.scss

@@ -1,15 +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.
-			// Uses ::before as ::after is already used for active tab styling.
-			&::before {
-				content: attr(aria-label);
-			}
+		.components-button {
+			justify-content: center;
 		}
 	}
 }