[elphizu]

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

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.

[github-actions]

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.

[github-actions]

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, fushar, joen, wildworks.

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]

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.

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]

@propsbot add ocean90

[elphizu]

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

[jasmussen]

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

[fushar]

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.

[t-hamano]

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?

In principle, enhancements can't be committed after Beta 1, but I think it depends on the situation. Since #65089 landed in 7.2, the inconsistency with the At a Glance widget was introduced in this release, so I think it's reasonable to treat this as a follow-up.

In my opinion, we should avoid extending APIs at this stage, such as allowing properties that currently accept a Dashicons class to also accept an SVG icon name. However, I think adding new icons and promoting existing ones to the core-admin collection is acceptable, as long as it doesn't change any API.

[jasmussen]

I will note: what was a big unblocking factor for more accessible and hopefully legible icons across the admin, was the main effort to update icons in the navigation and adminbar. The work does not have to stop here, but we also don't have to get everything right in a single release. It's going to be a journey: if we update glance icons in 7.2, that's nice. If we don't, there's going to be another train.

[fushar]

Since #65089 landed in 7.2, the inconsistency with the At a Glance widget was introduced in this release, so I think it's reasonable to treat this as a follow-up.

Makes sense. Then it seems we need to backport these PRs:

• Icons: Add new asterisk icon gutenberg#85442
• Icons: Add error, info and postComments to the core-admin collection gutenberg#85452

, then wait until we sync them for Beta 2, and only then can we use the icons in this PR. Let me know if I understood incorrectly.

[elphizu]

Thanks, @peterwilsoncc and @fushar!

I used content: url(...) instead of a CSS mask so plugins overriding content with a Dashicon continue to work as before.

The core-admin/info, core-admin/error, and core-admin/post-comments icons depend on WordPress/gutenberg#85442 and WordPress/gutenberg#85452, both of which have been merged.

I haven't updated the generated icon files, so for now, the "Comments in moderation" item, the storage-over-quota item, and the search engines notice will continue using their existing Dashicons. Once the SVGs are available, the CSS fallbacks will be hidden automatically using :has( > svg ).

@t-hamano, could these two PRs be included in the Beta 2 sync?