Skip to content

Fix: Hide non-svg icons when "Show button text labels" is active #66150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
dougwollison wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Fix: Hide non-svg icons when "Show button text labels" is active #66150

dougwollison wants to merge 1 commit into from

Conversation

@dougwollison
Copy link
Contributor

@dougwollison dougwollison commented Oct 15, 2024

What?

Adds img and .dashicon to the .show-icon-labels styles that currently only hide SVG icons.

Note: since GlobalStylesSidebar only has hard-coded icons, it's been excluded. Likewise, LinkControl only seems to potentially have icons, so only img was added to the selector.

Why?

Blocks, plugins, formats, etc can be registered with a dashicon or potentially an element, rather than an SVG icon. Currently, if, say, a block has a dashicon for it's icon, that dashicon will still be visible when Show Button Text Labels is enabled, and it overlaps with the text.

Testing Instructions

  1. Register a custom block with a dashicon string for the icon.
  2. Open editor, insert block.
  3. Open Preferences > Accessibility, toggle on Show Button Text Labels
  4. Toolbar icon for block should correctly show just the block name now.
  5. Repeate with a custom format or plugin.

Screenshots or screencast

Current handling with example block using dashicon icon.

image

@dougwollison
hide non-svg icons when showing labels
354dee5 
hide potential img and span.dashicon elements, in addition to svg icons
note: link-control likely would never contain a dashicon, and global styles currently seems to only have hard-coded SVG icons
@github-actions
Copy link

github-actions bot commented Oct 15, 2024 •
edited
Loading

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
  • Labels found: Needs Accessibility Feedback.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link

github-actions bot commented Oct 15, 2024

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link

github-actions bot commented Oct 15, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dougwollison <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@dougwollison dougwollison changed the title Fix: Hide non-svg icons when Show Icon Lables is active Fix: Hide non-svg icons when "Show button text labels" is active Oct 15, 2024
@getdave getdave added the Needs Accessibility Feedback Need input from accessibility label Oct 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

@getdave getdave Awaiting requested review from getdave getdave is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@dougwollison dougwollison

Labels

Needs Accessibility Feedback Need input from accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dougwollison @getdave