Skip to content

Administration: Use SVG icons in the At a Glance dashboard widget - #14548

Open
elphizu wants to merge 2 commits into
WordPress:trunkfrom
elphizu:fix/at-a-glance-svg-icons
Open

elphizu wants to merge 2 commits into
WordPress:trunkfrom
elphizu:fix/at-a-glance-svg-icons

Conversation

@elphizu

@elphizu elphizu commented Oct 20, 2026

Copy link
Copy Markdown

Replace the Dashicons in the “At a Glance” dashboard widget with registered core SVG icons. Preserve warning colors, plugin-added icon fallbacks, and SVG icons when comment counts update via AJAX.

Trac ticket: https://core.trac.wordpress.org/ticket/66347

Screenshots

image

Testing

  • PHP syntax and coding standards checks passed.
  • JavaScript lint checks passed.
  • CSS processing and RTL spacing checks passed.
  • Verified AJAX count updates preserve both comment icons.

Use of AI Tools

AI assistance: Yes
Tool(s): OpenAI Codex
Used for: Icons lookup, PR Desciption, and replacing the icons.

Use registered core icons and preserve them when comment counts update via AJAX.

See https://core.trac.wordpress.org/ticket/66347.
@github-actions

Copy link
Copy Markdown

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

@elphizu
elphizu marked this pull request as ready for review October 20, 2026 13:33
@github-actions

github-actions Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs.

Core Committers: Use this line as a base for the props when committing in SVN:

Props suryakantupadhyay, ocean90, peterwilsoncc, joen.

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


Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

  • @propsbot add <username> to give props to a GitHub user. Requires write access.
  • @propsbot remove <username> to leave a user out of the props. Requires write access.
  • @propsbot refresh to refresh this list. Adding the props-bot label works too.

@peterwilsoncc peterwilsoncc left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's possible for plugin authors to add additional items to the widget using the dashboard_glance_items filter. These items get the dashicons-marker icon.

In this branch they continue to display the dashicon font icon rather than the SVG replacement.

Screenshot 2026-10-23 at 1 56 01 pm

Steps to reproduce:

  1. Add the following as an mu-plugin (the missing opening and closing li are intentional as they are added post filter):
    add_filter( 'dashboard_glance_items', function( $items ) {
     ob_start();
     // Comments.
     $num_comm = wp_count_comments();
    
     if ( $num_comm && ( $num_comm->approved || $num_comm->moderated ) ) {
     	/* translators: %s: Number of comments. */
     	$text = sprintf( _n( '%s Comment', '%s Comments', $num_comm->approved ), number_format_i18n( $num_comm->approved ) );
     	?>
    
     		<a href="edit-comments.php"><?php echo $text; ?></a>
     	</li>
     	<?php
     	$moderated_comments_count_i18n = number_format_i18n( $num_comm->moderated );
     	/* translators: %s: Number of comments. */
     	$text = sprintf( _n( '%s Comment in moderation', '%s Comments in moderation', $num_comm->moderated ), $moderated_comments_count_i18n );
     	?>
     	<li class="comment-mod-count<?php echo ! $num_comm->moderated ? ' hidden' : ''; ?>">
     		<a href="edit-comments.php?comment_status=moderated" class="comments-in-moderation-text"><?php echo $text; ?></a>
    
     	<?php
     }
     $items[] = ob_get_clean();
     return $items;
    } );
  2. Observe that they are still showing the dashicon on this branch.

I think the following will be needed to account for the filter:

  1. If the plugin includes a wordpress/icon icon that will need to be displayed
  2. If the plugin is using CSS to display a dashicon, then use the dashicon (this will require ::before be displayed by default and then :has( svg ) used to hide it.

@peterwilsoncc

Copy link
Copy Markdown
Contributor

@propsbot add ocean90

@elphizu

elphizu commented Oct 23, 2026

Copy link
Copy Markdown
Author

Thanks for pointing this out. I'll fix it.

@jasmussen

Copy link
Copy Markdown

Noting that I created WordPress/gutenberg#85442 for this use case.

@fushar fushar left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR! I discussed with @jasmussen and we are proposing to use the following dashicons -> SVG icon replacement mapping:

Dashicon Suggested SVG Note

dashicons-marker

asterisk
New icon, #85442 (open) adds it to core and core-admin

dashicons-admin-post

pin
Already in core-admin

dashicons-admin-page

page
Already in core-admin

dashicons-admin-comments

comment
Already in core-admin

dashicons-format-chat

post-comments
Needs to be added to core-admin (not in any collection yet)

dashicons-admin-media

media
Already in core-admin

dashicons-dismiss

error
Needs to be promoted from core to core-admin

dashicons-info

info
Needs to be promoted from core to core-admin

There are two issues:

  • We need to add a new icon, and to promote several icons to core-admin/. @t-hamano / @peterwilsoncc, is it still doable in Beta 1?
  • It seems there are currently no good way to insert the new asterisk icon for plugin-added items, via wp_get_icon(). At the best case, we need to use CSS mask and copy-paste the asterisk SVG. Happy to be proven wrong. But it seems we need a more generic way in the existing dashboard_glance_items filter, so that plugins can add proper icons (falling back to asterisk). For this functionality, I think it's clear that it will be after 7.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants