WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 5 weeks ago

#53980 closed enhancement (fixed)

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

Reported by: jetxpert Owned by: 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 4 months ago.
heart icon
53980.1.diff (875 bytes) - added by sabernhardt 5 weeks ago.
smiley icon
smiley-2rem-padding.PNG (17.4 KB) - added by Clorith 5 weeks ago.

Download all attachments as: .zip

Change History (17)

#1 @sabernhardt
4 months ago

  • Component changed from General to Site Health

#2 @desrosj
4 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
4 months ago

@desrosj,

Thank you for your guidance.

Created GitHub Issue No. 432.

Cheers!

#4 follow-up: @desrosj
4 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
4 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
4 months ago

heart icon

#6 @sabernhardt
4 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 4 months ago by sabernhardt (previous) (diff)

#7 @jetxpert
4 months ago

@sabernhardt,

Tested your patch at our end. Everything looks great.

Good to go. Thank you!

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

#8 in reply to: ↑ 4 @generosus
5 weeks 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.


5 weeks ago

#10 follow-up: @Clorith
5 weeks 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
5 weeks 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
5 weeks ago

smiley icon

#12 @generosus
5 weeks 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
5 weeks 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
5 weeks 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.