Make WordPress Core

#53980 closed enhancement (fixed)

Upgrade Site Health “Great job!” Checkmark (Dashicon)

Reported by: jetxpert's profile jetxpert Owned by: clorith's profile Clorith
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.8
Component: Site Health Keywords: has-patch
Focuses: administration Cc:

Description

Good Day!

It would be awesome if you guys can upgrade subject dashicon to a more modern, better looking version as requested below.

https://wordpress.org/support/topic/making-wordpress-better-site-health-status-checkmark/#post-14794976

Thank you!

Attachments (3)

53980.diff (874 bytes) - added by sabernhardt 22 months ago.
heart icon
53980.1.diff (875 bytes) - added by sabernhardt 19 months ago.
smiley icon
smiley-2rem-padding.PNG (17.4 KB) - added by Clorith 19 months ago.

Download all attachments as: .zip

Change History (17)

#1 @sabernhardt
22 months ago

  • Component changed from General to Site Health

#2 @desrosj
22 months ago

  • Focuses administration added
  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Hi @jetxpert,

Thanks for this!

The Dashicons font is no longer accepting requests to add new icons or adjust preexisting ones.

A full breakdown can be found in the blog post. If this changes, this request would need to be submitted on the GitHub repository.

#3 @jetxpert
22 months ago

@desrosj,

Thank you for your guidance.

Created GitHub Issue No. 432.

Cheers!

#4 follow-up: @desrosj
22 months ago

  • Milestone set to Awaiting Review
  • Resolution wontfix deleted
  • Status changed from closed to reopened

Apologies! It seems I misunderstood the suggestion originally. My understanding was that this was a request to add a new icon to the Dashicons font (which would not be considered).

The issue created over on GitHub suggests switching to using a different icon that already exists within the font. Switching an icon used within Core code can be considered. That is a discussion relevant to Trac, so reopening this.

Sorry for the goose chase.

#5 @jetxpert
22 months ago

@desrosj,

You did not misunderstand the original suggestion. We learned from you, so we made an adjustment.

Just updated GitHub Issue No. 432 to suggest using the dashicon: dashicons-heart

Looks great in the backend and suits better the term "Site Health."

https://i.ibb.co/RPFcNZg/wp-site-health-dashicons-heart.png

Hopefully, Team WordPress will approve and make the change.

Cheers!

@sabernhardt
22 months ago

heart icon

#6 @sabernhardt
22 months ago

  • Keywords has-patch added

The heart icon fits well here (or perhaps the smiley).

I made a patch to include aria-hidden with the heart icon. Instead of adding a 20px bottom margin, the height is increased to 150px so that matches the font size and width.

Last edited 22 months ago by sabernhardt (previous) (diff)

#7 @jetxpert
22 months ago

@sabernhardt,

Tested your patch at our end. Everything looks great.

Good to go. Thank you!

Last edited 22 months ago by jetxpert (previous) (diff)

#8 in reply to: ↑ 4 @generosus
19 months ago

Replying to desrosj:

Apologies! It seems I misunderstood the suggestion originally. My understanding was that this was a request to add a new icon to the Dashicons font (which would not be considered).

The issue created over on GitHub suggests switching to using a different icon that already exists within the font. Switching an icon used within Core code can be considered. That is a discussion relevant to Trac, so reopening this.

Sorry for the goose chase.

Hi @desrosj! Stumbled upon this ticket. Any chance this suggestion can be tabled for WP Milestone 5.9? Thank you.

This ticket was mentioned in Slack in #core-site-health by sabernhardt. View the logs.


19 months ago

#10 follow-up: @Clorith
19 months ago

I'm happy to explore different icons to use here, but we need to keep in mind that this needs to be internationally considered "good".

A black heart may be associated with a negative feeling, or in some cases irony, and may not be the best option here.

I can for reference include that the initial icon was the thumbs up dashicon, but this was also dropped because that is a very rude gesture in some parts of the world.

#11 in reply to: ↑ 10 @generosus
19 months ago

Replying to Clorith:

I'm happy to explore different icons to use here, but we need to keep in mind that this needs to be internationally considered "good".

A black heart may be associated with a negative feeling, or in some cases irony, and may not be the best option here.

I can for reference include that the initial icon was the thumbs up dashicon, but this was also dropped because that is a very rude gesture in some parts of the world.

Hi @Clorith!

Excellent feedback.

We reviewed WP's approved list of dashicons. It appears your concern can be solved by using WP's smiley dashicon (dashicons-smiley) https://developer.wordpress.org/resource/dashicons/#smiley.

Would be a nice change to WP's current Site Health dashicon.

https://i.ibb.co/MMxbWbZ/dashicon-smiley.png

@sabernhardt
19 months ago

smiley icon

#12 @generosus
19 months ago

@sabernhardt,

Given the geometry of the smiley dashicon, the following CSS code should make things look a tad better:

margin-bottom: .5rem;

Can you double-check me on that? Thoughts appreciated.

Thank you.

#13 @Clorith
19 months ago

  • Milestone changed from Awaiting Review to 5.9
  • Owner set to Clorith
  • Status changed from reopened to assigned

I like how this looks, the happy little friend there, I'll make some minor adjustments to the margins to make it looks a bit more natural, both on desktop and mobile, but other than that, yeah we'll get this included.

#14 @Clorith
19 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 52018:

Site Health: Update the icon used when no issues are reported.

The icon used to be a rather blocky checkmark, but has now been changed to the more friendly, and less ambiguous, smiley dashicon.

It also helps cover a rare cases where a checkmark, while often used to mark something as done, may also be used to indicate that something is incorrect (many thanks to my 6th grade teacher for this rationale).

As an added bonus, this commit also adjusts the margins used around the icon, to make it fit more nicely on both large and small viewports.

Props sabernhardt, generosus.
Fixes #53980.

Note: See TracTickets for help on using tickets.