Edit Widgets: Settings toggle shows wrong icon when 'Show button text labels' is on

[afercia]

Description

In the Edit Widgets page, the Settings panel toggle button shows a wrong icon when 'Show button text labels' is on.

It appears the Edit Widgets page is a bit behind and maybe a little overlooked.
To start with, it should fullly support 'Show button text labels', like the two other editors.
Anyways, when 'Show button text labels' is enabled in the post editor, the widgets editor shows a wrong icon instead of text.

See:

https://github.com/WordPress/gutenberg/blame/302c1487c0298a75b4a0094e77ec87256f15ccdf/packages/interface/src/components/complementary-area/index.js#L190

icon={ showIconLabels ? check : icon }

I'm not sure why the Complementary area toggle is supposed to show the 'check' icon when showIconLabels is true. There's no apparent reason for that, unless I'm missing something. Cc @tellthemachines
It seems to be there since #24304

I'm not even shure the other editors use the ComplementaryArea and ComplementaryAreaToggle this way.

Step-by-step reproduction instructions

• Set Twenty Twenty-One as active theme.
• Go to Appearance > Widgets
• Observe the button to toggle the Settings panel shows the correct icon drawerRight.
• Hover or focus the button and observe it shows a tooltip with text 'Settings'.
• Screenshot:

• Go to the post editor, and enable Options > Preferences > Accessibility > Show button text labels.
• Go to Appearance > Widgets
• Observe the button to toggle the Settings panel now shows a wrong 'check' icon.
• Hover or focus the button and observe there is no tooltip.
• Screenshot:

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[tellthemachines]

Thanks for opening this! It is a bug, due to support for button text labels never having been implemented in the widgets editor. Now that it's a cross-editor preference it should be made to work correctly in this editor too.

[afercia]

@karthick-murugan thanks for your PR at #68116
I'm not sure this hsould be fixed by changing how the ComplementaryArea toggle icon and text work, at least not for now.

As @tellthemachines mentioned, the broader issue is that support for the showIconLabels preference hasn't been implemented in the widgets editor at all.

The current mechanism to hide the SVG icons and display text is CSS-based, see the implementation in the editor pagkage here:

gutenberg/packages/editor/src/components/header/style.scss

Lines 121 to 134 in aecb645

	.show-icon-labels.interface-pinned-items,
	.show-icon-labels .editor-header {
	.components-button.has-icon {
	width: auto;
	// Hide the button icons when labels are set to display...
	svg {
	display: none;
	}
	// ... and display labels.
	&::after {
	content: attr(aria-label);
	white-space: nowrap;
	}

I'm not saying that's ideal. I would prefer a more solid, programamtic, approach like the one you tried on #68116 but for now I'd think it's best to keep the implementation consistent and use the current CSS approach. A better, more solid, implementation should be considered in the context of the following dedicated issue: #61763

It's also worth noting that the implementation in the post editor and in the site editor is inconsistent.

In the post editor, the show-icon-labels CSS class is added to the body element with the reason that it needs to be used also for contant inside modal dialogs. Previously, it was set on the edit-post-layout element. That changed in #53835.

Instead, in the site editor it's still added to the edit-site-layout element.

I'll submit a PR shortly to start adding support for showIconLabels in the Widgets editor.

[karthick-murugan]

@afercia - Thanks for the detailed explanation. In that case, can I close my PR?

[afercia]

@afercia - Thanks for the detailed explanation. In that case, can I close my PR?

@karthick-murugan yes thanks. Feedback and thoughts on the alternative PR #68531 welcome.