Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#41074 closed enhancement (fixed)

Create new Dashicons (4.9-5.2)

Reported by: empireoflight's profile EmpireOfLight Owned by: desrosj's profile desrosj
Milestone: 5.2 Priority: normal
Severity: normal Version: 4.9
Component: Administration Keywords: has-patch has-dev-note
Focuses: ui Cc:

Description (last modified by liljimmi)

This ticket is for new Dashicons for the 4.9 release cycle.
It is a continuation of the ticket https://core.trac.wordpress.org/ticket/39296

The following icons has been requested:

Flip of Editor-RTL: https://github.com/WordPress/dashicons/issues/111
A reverse of https://developer.wordpress.org/resource/dashicons/#editor-rtl

Rest API: https://github.com/WordPress/dashicons/issues/152

Variation on earth/world icon (admin-site): https://github.com/WordPress/dashicons/issues/95

Yes Alt: https://github.com/WordPress/dashicons/issues/108

Attachments (12)

icon-font.zip (127.1 KB) - added by EmpireOfLight 7 years ago.
Contains font files with new icons for 4.9 release.
41074.diff (94.4 KB) - added by netweb 7 years ago.
icon-font.2.zip (124.6 KB) - added by EmpireOfLight 7 years ago.
Dashicons Icon font files with new dashicons for 4.9.
new-dashicons.41074.diff (374.3 KB) - added by EmpireOfLight 7 years ago.
Diff file for new dashicons for 4.9
41074.3.diff (69.5 KB) - added by netweb 7 years ago.
41074.4.diff (261.4 KB) - added by netweb 7 years ago.
41074.2.diff (386.1 KB) - added by EmpireOfLight 6 years ago.
files-for-patch.zip (167.2 KB) - added by EmpireOfLight 6 years ago.
Contains new icon font files and svg-sprite
instagram.png (14.1 KB) - added by desrosj 6 years ago.
41074.5.diff (293.0 KB) - added by desrosj 6 years ago.
41074.6.diff (292.1 KB) - added by desrosj 6 years ago.
fonts.zip (96.3 KB) - added by desrosj 6 years ago.
Updated wp-includes/fonts folder.

Change History (127)

This ticket was mentioned in Slack in #design-dashicons by empireoflight. View the logs.


7 years ago

#2 @liljimmi
7 years ago

  • Description modified (diff)
  • Focuses ui added; rtl removed

#3 @liljimmi
7 years ago

  • Description modified (diff)

#4 @liljimmi
7 years ago

  • Description modified (diff)

This ticket was mentioned in Slack in #design-dashicons by liljimmi. View the logs.


7 years ago

#6 @jaymanpandya
7 years ago

Flip of Editor-RTL: PR submitted - https://github.com/WordPress/dashicons/pull/227

Rest API: PR submitted - https://github.com/WordPress/dashicons/pull/226

Variation on earth/world icon (admin-site): PR merged - https://github.com/WordPress/dashicons/pull/204

Let me know if anything else is needed.

#8 @jaymanpandya
7 years ago

Flip of Editor-RTL, Addition of Editor-LTR and Yes Alt icons: PR submitted - https://github.com/WordPress/dashicons/pull/229

#9 in reply to: ↑ description @netweb
7 years ago

  • Milestone changed from Awaiting Review to 4.9

Replying to EmpireOfLight:

This ticket is for new Dashicons for the 4.9 release cycle.

Per above, moving to 4.9 milestone for visibility / consideration

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 years ago

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


7 years ago

#12 follow-up: @netweb
7 years ago

Per the latest bug scrub https://wordpress.slack.com/archives/C02RQBWTW/p1506529060000272

@EmpireOfLight Is there anything I can help with? It would be great to get these Dashicon updates into 4.9 please

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


7 years ago

#14 in reply to: ↑ 12 @EmpireOfLight
7 years ago

Replying to netweb:

Per the latest bug scrub https://wordpress.slack.com/archives/C02RQBWTW/p1506529060000272

@EmpireOfLight Is there anything I can help with? It would be great to get these Dashicon updates into 4.9 please

Uploading the latest .zip files of the font an css now; I might need help making a patch though...

@EmpireOfLight
7 years ago

Contains font files with new icons for 4.9 release.

#15 follow-up: @EmpireOfLight
7 years ago

Having trouble creating the patch / .diff ifle. Also, there's a .woff file in /wp-includes/fonts that we don't make with the new repository (see https://github.com/WordPress/dashicons/tree/master/icon-font) ; should this be removed or should we be building a .woff file?

@netweb
7 years ago

#16 in reply to: ↑ 15 ; follow-up: @netweb
7 years ago

Replying to EmpireOfLight:

Having trouble creating the patch / .diff ifle. Also, there's a .woff file in /wp-includes/fonts that we don't make with the new repository (see https://github.com/WordPress/dashicons/tree/master/icon-font) ; should this be removed or should we be building a .woff file?

Likewise, having trouble here also creating a patch file to upload here, most likely this will need to be performed diretly during commit for these binary files /shrug

What I have done in 41074.diff is:

  • Copy the dashicons.css file over the existing and manually tweak the formatting to match the coding standards.
  • I used SVN to rename dashicons.woff to dashicons.woff2 and then copied over the new dashicons.woff2 from icon-font.zip.
  • dashicons.eot and dashicons.ttf` are also replaced with the new versions from icon-font.zip.
  • dashicons.svg remains unchanged, should anything be done to this SVG file? There is no SVG in icon-font.zip
  • The remaining files in icon-font.zip I've not added to the /wp-includes/fonts folder, should they?

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 years ago

#18 @melchoyce
7 years ago

@EmpireOfLight Could you create a list of new or updated dashicons, similar to this? https://core.trac.wordpress.org/ticket/30902#comment:61

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


7 years ago

#20 @EmpireOfLight
7 years ago

I think the problem is that the dashicons grunt build doesn't create a .woff file, just a .woff2 file. But there is a .woff file in wp-includes. Should the build be making a .woff file, or can we take it out?

#21 in reply to: ↑ 16 ; follow-up: @EmpireOfLight
7 years ago

Replying to netweb:

Replying to EmpireOfLight:

Having trouble creating the patch / .diff ifle. Also, there's a .woff file in /wp-includes/fonts that we don't make with the new repository (see https://github.com/WordPress/dashicons/tree/master/icon-font) ; should this be removed or should we be building a .woff file?

Hoping someone can answer this...

Likewise, having trouble here also creating a patch file to upload here, most likely this will need to be performed diretly during commit for these binary files /shrug

What I have done in 41074.diff is:

  • Copy the dashicons.css file over the existing and manually tweak the formatting to match the coding standards.
  • I used SVN to rename dashicons.woff to dashicons.woff2 and then copied over the new dashicons.woff2 from icon-font.zip.

I'm confused about what you did here...does this mean there's no longer a .woff file?

  • dashicons.eot and dashicons.ttf` are also replaced with the new versions from icon-font.zip.
  • dashicons.svg remains unchanged, should anything be done to this SVG file? There is no SVG in icon-font.zip
  • The remaining files in icon-font.zip I've not added to the /wp-includes/fonts folder, should they?

I think you're referring to the .html files... dashicons.html is just for previewing the font, and I'm not sure what demo-template.html does, but they don't need to be included. Maybe the grunt build process should be updated to create a directory with just the font files, and have the html/css files go somewhere else.

#22 follow-up: @Joen
7 years ago

I was asked whether we can ditch the WOFF file. The answer is "almost certainly yes". The nuance is that IE11 doesn't support WOFF2 (see https://stackoverflow.com/questions/37086562/what-kind-of-font-files-do-i-need-for-modern-browsers-android-and-ios and https://caniuse.com/#feat=woff2), but then it should just fall back to using the .ttf font which is bundled with it.

The only way to be sure is to test https://github.com/WordPress/dashicons/blob/master/icon-font/dashicons.html in IE11 (and other browsers) and see if they show up fine. My Windows VM was lost recently, so I can't easily test.

#23 @folletto
7 years ago

A few more details that I got from when I created the current Dashicons build script

  1. The build script can generate either a file or embedded (not both), in the discussion we chose to use the embedded one ([chat](https://wordpress.slack.com/archives/C03EESJAW/p1499451473651201)):
  2. Which means: dashicons.css is generated with embedded WOFF, so there's no file used ([source](https://github.com/WordPress/dashicons/blob/master/icon-font/dashicons.css#L15)).

Which means that the new CSS from the Dashicon repository includes the WOFF content inline, making no use of the WOFF file as a separate file.

Note that some requirements might be dealt with changes in the build script — from the discussion above doesn't seem we have any need, but I wanted to clarify that just in case. :)

Version 0, edited 7 years ago by folletto (next)

#24 in reply to: ↑ 21 @netweb
7 years ago

Replying to EmpireOfLight:

I'm confused about what you did here...does this mean there's no longer a .woff file?

Yes, I'd replaced the .woff with the .woff2, that won't work though based on the need to keep .woff support for IE11 per the Slack chat

Maybe the grunt build process should be updated to create a directory with just the font files, and have the html/css files go somewhere else.

Yes, I think this is the best solution, get the dashicons grunt build to build a "package" that can be "dropped" into core.

#25 in reply to: ↑ 22 @netweb
7 years ago

Replying to Joen:

I was asked whether we can ditch the WOFF file. The answer is "almost certainly yes". The nuance is that IE11 doesn't support WOFF2 (see https://stackoverflow.com/questions/37086562/what-kind-of-font-files-do-i-need-for-modern-browsers-android-and-ios and https://caniuse.com/#feat=woff2), but then it should just fall back to using the .ttf font which is bundled with it.

The only way to be sure is to test https://github.com/WordPress/dashicons/blob/master/icon-font/dashicons.html in IE11 (and other browsers) and see if they show up fine. My Windows VM was lost recently, so I can't easily test.

Here's https://github.com/WordPress/dashicons/blob/master/icon-font/dashicons.html on Windows 10:

@EmpireOfLight
7 years ago

Dashicons Icon font files with new dashicons for 4.9.

@EmpireOfLight
7 years ago

Diff file for new dashicons for 4.9

#26 follow-up: @EmpireOfLight
7 years ago

Just uploaded the latest icon font and got a diff created. Please test.

This includes new icons for 4.9:
Dashicons: Update to the latest files.
New icons:
.dashicons-editor-rtl (f320)
.dashicons-rest-api (f124)
.dashicons-admin-site-alt (f11d)
.dashicons-admin-site-alt2 (f11e)
.dashicons-admin-site-alt3 (f11f)
.dashicons-yes-alt (f12a)

props liljimmi, melchoyce, empireoflight, netweb , folletto, joen

This ticket was mentioned in Slack in #core by melchoyce. View the logs.


7 years ago

#28 @melchoyce
7 years ago

  • Keywords has-patch added

#29 @melchoyce
7 years ago

@netweb does new-dashicons.41074.diff look good to you?

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 years ago

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


7 years ago

#32 @westonruter
7 years ago

  • Owner set to netweb
  • Status changed from new to reviewing

@netweb
7 years ago

#33 in reply to: ↑ 26 @netweb
7 years ago

Replying to EmpireOfLight:

New icons:
.dashicons-editor-rtl (f320)
.dashicons-rest-api (f124)
.dashicons-admin-site-alt (f11d)
.dashicons-admin-site-alt2 (f11e)
.dashicons-admin-site-alt3 (f11f)
.dashicons-yes-alt (f12a)

This is an updated list revising on the above list:

  • Icons Added
    • .dashicons-admin-site-alt - f11d
    • .dashicons-admin-site-alt2 - f11e
    • .dashicons-admin-site-alt3 - f11f
    • .dashicons-editor-ltr - f129
    • .dashicons-email-alt2 - f10a
    • .dashicons-menu-alt - f10b
    • .dashicons-plus-light - f10c
    • .dashicons-rest-api - f124
    • .dashicons-yes-alt - f12a
    • BuddiIcons - These were previously only in the icon font, now they're publicly exposed in dashicons.css
  • Icons Removed:
    • .dashicons-plus-alt2 - f543
    • .dashicons-share1 - f237
  • Icons Changed:
    • .dashicons-trash - Previously f182, now f10d

#34 @netweb
7 years ago

The review also discovered instances of missing classes no longer generated by the Dashicons build script/tools, these have been manually added back in 41074.3.diff, the source repo needs updating to accommodate these classes:

  • .dashicons-format-links:before and .dashicons-format-standard:before
    /* Both Admin Menu and Post Formats */
    
    .dashicons-admin-links:before,
    .dashicons-format-links:before {
            content: "\f103";
    }
    
    .dashicons-admin-post:before,
    .dashicons-format-standard:before {
            content: "\f109";
    }
    
  • .dashicons-welcome-edit-page:before
    /* Welcome Screen Icons */
    
    .dashicons-welcome-write-blog:before,
    .dashicons-welcome-edit-page:before {
            content: "\f119";
    }
    
  • .dashicons-editor-distractionfree:before

#35 @netweb
7 years ago

Patch notes for 41074.3.diff

  • Leaves the WOFF Base64 in dashicons.css
  • No changes to the existing WOFF src/wp-includes/fonts/dashicons.woff file
  • No changes to the existing WOFF src/wp-includes/fonts/dashicons.svg file - See Note 1
  • Updated dashicons.css manually to match WP CSS Coding Standards
  • Updated dashicons.css manually to sorting CSS classes to reduce churn and cleaner blame

Edit: Updated the SVG in 41074.4.diff

Last edited 7 years ago by netweb (previous) (diff)

This ticket was mentioned in Slack in #design-dashicons by netweb. View the logs.


7 years ago

#37 follow-up: @Joen
7 years ago

Note that if an icon shifted Unicode addresses in the new build process, this can be corrected and we can rebuild the font to include icons in the right location. You can let me know any icons that need shifting.

@netweb
7 years ago

#38 @netweb
7 years ago

Per https://wordpress.slack.com/archives/C03EESJAW/p1508860337000166

The only thing that might be an issue is the dashicons.svg file. I didn't include a new one in my patch basically, https://github.com/WordPress/dashicons/tree/master/svg-sprite should replace https://github.com/WordPress/WordPress/blob/master/wp-includes/fonts/dashicons.svg

I've updated the patch in 41074.4.diff to include this SVG now

#39 in reply to: ↑ 37 @netweb
7 years ago

Replying to Joen:

Note that if an icon shifted Unicode addresses in the new build process, this can be corrected and we can rebuild the font to include icons in the right location. You can let me know any icons that need shifting.

Excellent, there is only 1 in need of this: .dashicons-trash from f10d back to it's original f182

#40 @netweb
7 years ago

  • Keywords needs-refresh added; has-patch removed
  • Milestone changed from 4.9 to 5.0

Per https://wordpress.slack.com/archives/C03EESJAW/p1508909585000101

" I don't think the Dashicons SVG can replace the old SVG. Pretty sure the old SVG is an SVG font, whereas the new is a sprite "

In that case, ignore 41074.4.diff and let's stick with 41074.3.diff


Also per Slack discussion just now, as none of the new icons are currently used in core and to allow some time for testing and fixing the build script to fix the issues I've outlined above we are going to punt this to 5.0.

This ticket was mentioned in Slack in #core by netweb. View the logs.


7 years ago

#42 @Joen
7 years ago

I have made a PR upstream in the dashicons repo to adjust the build process per feedback here. Please see https://github.com/WordPress/dashicons/pull/246

This ticket was mentioned in Slack in #design-dashicons by empireoflight. View the logs.


7 years ago

#44 @netweb
7 years ago

A new dashicon for [make.wordpress.org/tide Tide] is also being worked on in dashicons/issues/248, refreshed patch will also need to include this.

#45 @bahia0019
7 years ago

I've added an SVG icon for Instagram. It's formatted like the other SVGs.
I don't know the build process for the set. But I figure those smarter than me can finalize the adoption of it.
I recently had a need for it, and noticed that FB, Twitter, and G+ are all there, but Instagram wasn't. Figured it should be.

https://github.com/WordPress/dashicons/pull/272

Other people have asked for it as well:
https://github.com/WordPress/dashicons/issues/63
https://github.com/WordPress/dashicons/issues/12
https://github.com/WordPress/dashicons/issues/136
https://core.trac.wordpress.org/ticket/34166
https://core.trac.wordpress.org/ticket/32568

This ticket was mentioned in Slack in #design-dashicons by empireoflight. View the logs.


7 years ago

#47 follow-up: @EmpireOfLight
7 years ago

There are lots of new icon requests on github. Here they are so we can comment on whether any should be included in the next release:

Folder icons: https://github.com/WordPress/dashicons/issues/273
Broken heart: https://github.com/WordPress/dashicons/issues/271
Coffee bean: https://github.com/WordPress/dashicons/issues/270
Printer: https://github.com/WordPress/dashicons/issues/268
Various: https://github.com/WordPress/dashicons/issues/266
Beer: https://github.com/WordPress/dashicons/issues/256
Tide team Icon: https://github.com/WordPress/dashicons/issues/248
RTL ordered list icon: https://github.com/WordPress/dashicons/issues/250
Code Standards icon: https://github.com/WordPress/dashicons/issues/263

Tide Team and RTL have been discussed and will be included in the next version of Dashicons. Printer seems pretty critical, but the rest are probably extraneous as we're trying to limit new icons until a better implementation/delivery method is finished. Any thoughts?

Edit: Also here: https://github.com/WordPress/dashicons/pull/265 is a resized a stats Gridicon that could be used as a top level menu icon.

Last edited 7 years ago by EmpireOfLight (previous) (diff)

This ticket was mentioned in Slack in #design by empireoflight. View the logs.


7 years ago

This ticket was mentioned in Slack in #design by boemedia. View the logs.


7 years ago

This ticket was mentioned in Slack in #design-dashicons by empireoflight. View the logs.


7 years ago

#51 @jbpaul17
7 years ago

@EmpireOfLight I'm biased (on the Tide dashicon), but I concur with your analysis of which should be included.

#52 @netweb
7 years ago

Can we also get the coding-standards icon in as this is now an official WordPress team please :)

#53 follow-up: @jbpaul17
7 years ago

@netweb is there someone working on the coding-standards icon?

@Joen are there any Gutenberg-related icons that would be good to land before 5.0 or are you all ok waiting for those icons to land alongside Gutenberg in 5.0?

#54 in reply to: ↑ 53 @netweb
7 years ago

Replying to jbpaul17:

@netweb is there someone working on the coding-standards icon?

It is attached to the https://github.com/WordPress/dashicons/issues/263 issue

#55 follow-ups: @Joen
7 years ago

@Joen are there any Gutenberg-related icons that would be good to land before 5.0 or are you all ok waiting for those icons to land alongside Gutenberg in 5.0?

We don't need any icons to land before 5.0, no. In fact, for now and because we've needed to be able to create icons for Gutenberg fast, every new icon created for Gutenberg are in a separate directory: https://github.com/WordPress/dashicons/tree/master/sources/svg/gutenberg

Icons in that directory are not added into the icon font, they are added only to the react component. Gutenberg doesn't use the icon font at all. But anyone should feel free to comment on their design.

I think the most important thing to review, though, is the new build process. Recent work was done in https://github.com/WordPress/dashicons/pull/246. The build process means that creating new icons is not an arduous process, which is important so as to keep the project alive. It comes with only two changes per how it's been done in the past:

  1. we can't edit url("...") to be url( "..." ) without hacking core files.
  2. we can't customize the order of the icons, nor add "grouping" headers. Icons are output alphabetically

1 I don't care about, it seems a trivial price to pay for taking the vinegar and human error aspect out of adding icons. 2 I personally think is a benefit. But nonetheless these are aspects that should be considered before switching to the process-built icon font, which I believe still hasn't happened?

Last edited 7 years ago by Joen (previous) (diff)

#56 in reply to: ↑ 55 @netweb
7 years ago

Replying to Joen:

I think the most important thing to review, though, is the new build process. Recent work was done in https://github.com/WordPress/dashicons/pull/246. The build process means that creating new icons is not an arduous process, which is important so as to keep the project alive. It comes with only two changes per how it's been done in the past:

  1. we can't edit url("...") to be url( "..." ) without hacking core files.
  2. we can't customize the order of the icons, nor add "grouping" headers. Icons are output alphabetically

1 I don't care about, it seems a trivial price to pay for taking the vinegar and human error aspect out of adding icons. 2 I personally think is a benefit. But nonetheless these are aspects that should be considered before switching to the process-built icon font, which I believe still hasn't happened?


I've just created https://github.com/WordPress/dashicons/pull/298, this PR updates the CSS template that generates dashicons.css to meet WordPress CSS Coding Standards. As noted in the PR I've added stylelint support so that it ignores the spacing and quotes around the URLs.

The above makes 1. above no longer a concern once stylelint is added and 2. I'm happy if your happy 🎉

#57 @Joen
7 years ago

💥

Amazing. Sometimes the best way to get something fixed is to proclaim it as impossible.

#58 @JeffPaul
7 years ago

@netweb @Joen is there a way to utilize the Tide dashicon before this ticket gets committed in a major release? I'm asking as we'd start using it on make/tide, for contributor day pins/stickers, and for profile badges (among other places I'm not yet reminded of).

#59 @Joen
7 years ago

is there a way to utilize the Tide dashicon before this ticket gets committed in a major release? I'm asking as we'd start using it on make/tide, for contributor day pins/stickers, and for profile badges (among other places I'm not yet reminded of).

Does the release of the updated icon font have to wait for a new release? Keep in mind I'm still relatively new to Dashicons, so forgive me if that was an obvious question.

You could do something like this:

https://codepen.io/joen/pen/jxQXvB?editors=1100 — that is, if it's largely used on P2s, you could paste the CSS into the custom CSS pane and utilize it as a class.

#60 @obenland
7 years ago

Is there a reason this can't go into 4.9.7?

#61 in reply to: ↑ 55 @netweb
6 years ago

Replying to Joen:

@Joen are there any Gutenberg-related icons that would be good to land before 5.0 or are you all ok waiting for those icons to land alongside Gutenberg in 5.0?

We don't need any icons to land before 5.0, no. In fact, for now and because we've needed to be able to create icons for Gutenberg fast, every new icon created for Gutenberg are in a separate directory: https://github.com/WordPress/dashicons/tree/master/sources/svg/gutenberg

Icons in that directory are not added into the icon font, they are added only to the react component. Gutenberg doesn't use the icon font at all. But anyone should feel free to comment on their design.

Do we need to change by way of moving these above mentioned Gutenberg icons for the 5.0 release @Joen ?

#62 follow-up: @Joen
6 years ago

Do we need to change by way of moving these above mentioned Gutenberg icons for the 5.0 release @Joen ?

We don't need to, no. I suppose there's a larger question here of SVG support in the rest of the admin, and I have a slight preference for keeping the icons as they are today — gutenberg specific SVGs in a separate folder — until such a time as we have a better plan for moving onwards from the icon-font.

But if we need to do some rearranging, let me know and I'll try and see about a PR.

#63 in reply to: ↑ 62 @netweb
6 years ago

Replying to Joen:

Do we need to change by way of moving these above mentioned Gutenberg icons for the 5.0 release @Joen ?

We don't need to, no. I suppose there's a larger question here of SVG support in the rest of the admin, and I have a slight preference for keeping the icons as they are today — gutenberg specific SVGs in a separate folder — until such a time as we have a better plan for moving onwards from the icon-font.

This sounds good for 5.1 👍

But if we need to do some rearranging, let me know and I'll try and see about a PR.

I'm not sure if it is actually required, though for now I'll leave this ticket in the 5.0 milestone for merge visibility

#64 @JeffPaul
6 years ago

@netweb @Joen if this doesn't land in 5.0, it would be great to find another way to get the Tide dashicon available so it can be used in various community and marketing locations on make. https://github.com/WordPress/dashicons/issues/248 has been waiting patiently and would be ideal to have that landed ahead of this years' WCUS.

#65 @EmpireOfLight
6 years ago

The tide icon is in the current master branch of dashicons... what else needs to happen?

#66 @Joen
6 years ago

if this doesn't land in 5.0, it would be great to find another way to get the Tide dashicon available so it can be used in various community and marketing locations on make. https://github.com/WordPress/dashicons/issues/248 has been waiting patiently and would be ideal to have that landed ahead of this years' WCUS.

The tide icon is in the current master branch of dashicons... what else needs to happen?

So because of all the changes that's happened to Dashicons in the past year, it might be worth a quick summary.

  • Dashicons are now automatically built using a build process. Grunt is used as a tool to convert a folder full of SVG files into an icon font, an SVG sprite, a folder of minimized and optimized SVG files, and a React component.
  • Development happens in https://github.com/WordPress/dashicons
  • The SVG files converted, one 20x20px SVG for each icon, are stored in the sources/svg folder: https://github.com/WordPress/dashicons/tree/master/sources/svg — any SVG file in that folder goes into the icon font.
  • SVG files stored in the sources/svg/gutenberg do not go into the icon font. These only go into the React component.

So Ben is right. The tide icon is part of the icon font.

So what needs to happen? Well, we need to use the new icon font that's built from the SVG files, https://github.com/WordPress/dashicons/tree/master/icon-font, in WordPress, and replace the old icon font files. @netweb do you have more info on how to make this happen?

This ticket was mentioned in Slack in #meta-devhub by coffee2code. View the logs.


6 years ago

#68 @desrosj
6 years ago

  • Milestone changed from 5.0 to 5.0.1

Talked this over with @Joen today.

This still needs a new patch and testing. With 5.0 RC imminent, going to punt this.

#69 @desrosj
6 years ago

  • Keywords has-patch added

#70 @pento
6 years ago

  • Milestone changed from 5.0.1 to 5.0.2

#71 @pento
6 years ago

  • Milestone changed from 5.0.2 to 5.0.3

#72 @audrasjb
6 years ago

  • Milestone changed from 5.0.3 to 5.1

Hello,

5.0.3 is going to be released in a couple of weeks.

It doesn't appear this ticket can be handled in the next couple of weeks. Let's address it in 5.1 which is coming in February. Feel free to ask for changing the milestone if you think this issue can be quickly resolved.

Cheers,

Jb

This ticket was mentioned in Slack in #meta by cathibosco. View the logs.


6 years ago

#74 @pento
6 years ago

  • Milestone changed from 5.1 to 5.2

This ticket was mentioned in Slack in #design-dashicons by jeffpaul. View the logs.


6 years ago

#76 @JeffPaul
6 years ago

@netweb @EmpireOfLight with trunk open for 5.2, any chance someone could work on a patch to land early in the 5.2 release cycle so we can ensure all the newly created Dashicons are available when 5.2 ships? I'm obviously biased on seeing the Tide icon become readily available, but I suspect there are others that would similarly be good to see available. Thanks!

#77 @EmpireOfLight
6 years ago

I'll do whatever I can to get Dashicons ready for 5.2... just need some guidance with the patching part.

This ticket was mentioned in Slack in #meta by folletto. View the logs.


6 years ago

@EmpireOfLight
6 years ago

Contains new icon font files and svg-sprite

#79 @EmpireOfLight
6 years ago

I went ahead and built a fresh set of dashicons files from the github dashicons repo (https://github.com/WordPress/dashicons), after merging 2 prs that requested new icons which appear to be critical for 5.2. I added them to the latest WP trunk github repo (https://github.com/WordPress/WordPress) and tested locally-new icons appear to be working. Latest files and diff have been added attachments to this ticket.

This ticket was mentioned in Slack in #design by empireoflight. View the logs.


6 years ago

#81 @JeffPaul
6 years ago

@melchoyce @jeremyfelt as you've both landed Dashicon updates in previous releases (albeit a while ago for each of you), can you help review this and potentially shepherd for 5.2? Note my bias is trying to see this committed so that Tide's Dashicon is finally available on Make and for marketing effort (e.g., Contributor Day, profile badges). Thanks!

#82 @EmpireOfLight
6 years ago

Can we do this at the next Design Ticket triage (Monday 17:30 UTC)?

This ticket was mentioned in Slack in #design by empireoflight. View the logs.


6 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


6 years ago

This ticket was mentioned in Slack in #core by empireoflight. View the logs.


6 years ago

@desrosj
6 years ago

@desrosj
6 years ago

#86 follow-up: @desrosj
6 years ago

  • Keywords needs-dev-note reporter-feedback added; needs-refresh removed

So I did some investigating. The developer resources Dashicons page uses the Dashicon version shipped in WordPress Core, and the font is not stored on the CDN at all. The new icons do, however, need to be added manually to the developer resources page after that site is updated to 5.2 (or trunk, if it runs the latest commit).

I was having an issue with the most recent patch, so I pulled down the Dashicons GIT repo, built the files, and created a new patch (which does not include the font file changes).

Here is the updated list of additions I see reviewing:

  • .dashicons-admin-site-alt (f11d)
  • .dashicons-admin-site-alt2 (f11e)
  • .dashicons-admin-site-alt3 (f11f)
  • .dashicons-buddicons-activity (f452)
  • .dashicons-buddicons-bbpress-logo (f12b)
  • .dashicons-buddicons-buddypress-logo (f448)
  • .dashicons-buddicons-community (f453)
  • .dashicons-buddicons-forums (f449)
  • .dashicons-buddicons-friends (f454)
  • .dashicons-buddicons-groups (f456)
  • .dashicons-buddicons-pm (f457)
  • .dashicons-buddicons-replies (f451)
  • .dashicons-buddicons-topics (f450)
  • .dashicons-buddicons-tracking (f455)
  • .dashicons-businessperson (f12e)
  • .dashicons-businesswoman (f12f)
  • .dashicons-color-picker (f131)
  • .dashicons-editor-ltr (f129)
  • .dashicons-editor-ol-rtl (f12c)
  • .dashicons-email-alt2 (f10a)
  • .dashicons-instagram (f12d)
  • .dashicons-menu-alt (f10b)
  • .dashicons-plus-light (f10c)
  • .dashicons-rest-api (f124)
  • .dashicons-yes-alt (f12a)
  • .dashicons-tide (f10d)

Overall this is looking good (pending some Windows testing). There are two points I need addressed and this can be committed.

All the icons appear to be displaying correctly except .dashicons-instagram. I have uploaded a screenshot of this for review.

After reading through the ticket, there are a few comments indicating that two icons were removed:

  • .dashicons-plus-alt2 - f543
  • .dashicons-share1 - f237

It is preferable to not remove icons. Once the icon is bundled and released with WordPress, we have to assume it is being used by someone and we should maintain that icon. I can't find any indication that dashicions-share1 was ever shipped in Core, but plus-alt2 was (introduced in [33126]). I have not been able to track down where in the GIT history this icon was removed, though.

Question on the .woff2 file. The .woff file will not be updated and remain as is, but I think that the .woff2 file can be introduced for anyone that wishes to load it as long as this will continue to be maintained (which I think is the intention).

I am also marking this a needs-dev-note so that everyone is aware of the new dashicons, and of the changes specified regarding .woff files in the previous paragraph. Happy to write that up!

#87 @desrosj
6 years ago

  • Component changed from Editor to Administration

#88 @JeffPaul
6 years ago

@desrosj .dashicons-instagram looks like it landed in the GitHub repo here: https://github.com/WordPress/dashicons/pull/272. I see where .dashicons-plus-alt2 was added, but I can't seem to find where it was removed either.

#89 in reply to: ↑ 86 @SergeyBiryukov
6 years ago

Replying to desrosj:

I can't find any indication that dashicions-share1 was ever shipped in Core, but plus-alt2 was (introduced in [33126]). I have not been able to track down where in the GIT history this icon was removed, though.

It appears to be lost during the switch to the new build process. plus-alt2 was added to codepoints.json, but not to icon-font/dashicons.css.

Seems to be an oversight, not an intentional choice. Could we restore it?

#90 @SergeyBiryukov
6 years ago

Same for share1: added to codepoints.json in the commit linked above, but not to icon-font/dashicons.css. Seems to be an oversight as well.

This ticket was mentioned in Slack in #design-dashicons by desrosj. View the logs.


6 years ago

#92 @desrosj
6 years ago

  • Keywords needs-refresh added

Tested this with @ianbelanger on Windows today. The color-picker icon does not work in IE11. I opened this PR to update all files to correctly include the color-picker icon.

I looked through the history for the repo, and I can't find an SVG icon present for the plus-alt2 or the share1 icon.

Marking needs refresh pending that PR being merged.

#93 @Joen
6 years ago

All the icons appear to be displaying correctly except .dashicons-instagram. I have uploaded a screenshot of this for review.

That instagram icon looks like it wasn't fully "flattened". By making it a compound shape in Illustrator, i.e. single path in the SVG, it should probably go over fine.

Seems to be an oversight, not an intentional choice. Could we restore it?
Same for share1: added to codepoints.json in the commit linked above, but not to icon-font/dashicons.css. Seems to be an oversight as well.

Almost certainly an oversight, and thank you for catching this.

Just to clarify how things are _supposed_ to work.

  • sources/svg should include SVGs that are included in both icon font and React component
  • sources/gutenberg are not included in the icon font, these do not get codepoints, and are built only into the react component
  • sources/svg-unused are icons that existed in the past, but were never actually shipped

Around codepoints.json, that file exists so that unicode locations for each icon the font persists across build processes. Many icon fonts rely solely on the CSS classname to reference an icon, and so it doesn't matter that the unicode location swaps places. That's obviously insufficient for the Dashicons font, which is why the codepoints.json file is referenced.

As we moved to a build process from the old manually built system, there was a great deal of manual work in porting existing unicode locations from the manually built font, to the codepoints file. To put it simply, every icon that existed in the font before the build process had to have its unicode location converted to hexadecimal to be included in the JSON file. This is what I referenced in this comment here: https://core.trac.wordpress.org/ticket/41074#comment:37

This is just to give some additional history and clarification. So it's entirely possible that icons that are supposed to be present in the codepoints file were forgotten due to human oversight. Thanks for helping catch these.

It is worth noting, though, that as soon as we ship the icon font that's made from the build process, everything from that point on is automated, which should reduce the chance of such human error in the future.

Hope that helps.

#94 @JeffPaul
6 years ago

@netweb as the owner of this ticket, are you able to help with the patch refresh while time still allows in the 5.2 release cycle?

#95 @folletto
6 years ago

Question: can we open separate Trac tickets for the various releases? This was opened for 4.9 but it seems it's still being used for every release after that. Thanks!

#96 follow-up: @desrosj
6 years ago

  • Keywords reporter-feedback removed
  • Summary changed from Create new Dashicons (4.9) to Create new Dashicons (4.9-5.2)

@JeffPaul Happy to own this. I can commit the changes after the items I listed above are addressed.

@folletto I think that was the previous practice, but the Gutenberg feature focus caused this one to be punted repeatedly. I have adjusted the ticket title to indicate this addition spanned multiple releases. I have some ideas to make this process go more smoothly that I'll be brain dumping and experimenting with after 5.2 beta 1 this week. If you'd like, let's connect separately!

The Instagram icon has been fixed upstream.

That leaves the missing plus-alt2 and the share1 icons as the last two items to resolve.

I have opened a PR to re-add the `share1` icon. I was incorrect in my previous assessment that this icon was never shipped with core, so this should be re-added.

I believe that the reason the plus-alt2 icon is not being included in the build is being caused by the lack of an SVG file in the sources/svg folder. If someone can create an SVG file for this icon, a PR can be opened to re-add it to the built files. For reference, this is the <glyph> included in the current version of the dashicons.svg sprite:

<glyph unicode="&#xf543;" d="M1700 1100v-200h-600v-600h-200v600h-600v200h600v600h200v-600h600z" />

#97 @cathibosco1
6 years ago

@desrosj - I can create the missing

plus-alt2

as an svg today.
Can you point me to the .png or .ai file in github so I can recreate it as an SVG please? Thank you


Last edited 6 years ago by cathibosco1 (previous) (diff)

#98 @cathibosco1
6 years ago

Status update -
@desrosj and I realized there is already a light weight plus-alt icon in the dashicons...

@desrosj created a pull request and is checking with @Joen regarding the impact of the css styles...

So, plus-light looks to be the same as plus-alt2 in terms of the design.

Thanks everyone for pushing this along today. I am here if you need a new .svg drafted.

#99 @Joen
6 years ago

I took a look at https://github.com/WordPress/dashicons/pull/346 and from what I can tell it's all fine. Let me know if there's nuance I missed.

#100 in reply to: ↑ 96 @netweb
6 years ago

  • Owner changed from netweb to desrosj

Replying to desrosj:

@JeffPaul Happy to own this. I can commit the changes after the items I listed above are addressed.

Thanks @desrosj, sorry I've not had much time of late to contribute

@desrosj
6 years ago

@desrosj
6 years ago

Updated wp-includes/fonts folder.

#101 @desrosj
6 years ago

  • Keywords needs-refresh removed

@netweb no worries!

41074.6.diff and fonts.zip are the most recent patches.

Here is the final list of additions:

  • .dashicons-admin-site-alt (f11d)
  • .dashicons-admin-site-alt2 (f11e)
  • .dashicons-admin-site-alt3 (f11f)
  • .dashicons-buddicons-activity (f452)
  • .dashicons-buddicons-bbpress-logo (f12b)
  • .dashicons-buddicons-buddypress-logo (f448)
  • .dashicons-buddicons-community (f453)
  • .dashicons-buddicons-forums (f449)
  • .dashicons-buddicons-friends (f454)
  • .dashicons-buddicons-groups (f456)
  • .dashicons-buddicons-pm (f457)
  • .dashicons-buddicons-replies (f451)
  • .dashicons-buddicons-topics (f450)
  • .dashicons-buddicons-tracking (f455)
  • .dashicons-businessperson (f12e)
  • .dashicons-businesswoman (f12f)
  • .dashicons-color-picker (f131)
  • .dashicons-editor-ltr (f129)
  • .dashicons-editor-ol-rtl (f12c)
  • .dashicons-email-alt2 (f10a)
  • .dashicons-instagram (f12d)
  • .dashicons-menu-alt (f10b)
  • .dashicons-rest-api (f124)
  • .dashicons-yes-alt (f12a)
  • .dashicons-tide (f10d)

Some notes:

  • The .dashicons-share1 - f237 icon has been re-added (see GitHub-346).
  • The .dashicons-plus-light (f10c) icon has been moved back to its original location and name of .dashicons-plus-alt2 - f543 (see GitHub-347).
  • The Instagram icon has been fixed (see GitHub-344).

Going to work with @ianbelanger to double check Windows, but this looks good to go.

Last edited 6 years ago by desrosj (previous) (diff)

#102 @ianbelanger
6 years ago

Everything looks good on Windows @desrosj. I tested in Chrome, Firefox, IE11 and Edge. All icons are now present.

#103 @desrosj
6 years ago

  • Keywords commit added

Thanks, @ianbelanger!

#104 @desrosj
6 years ago

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

In 44940:

Administration: Update Dashicons to the latest version.

This change introduces the following new icons to the Dashicon font:

  • .dashicons-admin-site-alt (f11d)
  • .dashicons-admin-site-alt2 (f11e)
  • .dashicons-admin-site-alt3 (f11f)
  • .dashicons-buddicons-activity (f452)
  • .dashicons-buddicons-bbpress-logo (f12b)
  • .dashicons-buddicons-buddypress-logo (f448)
  • .dashicons-buddicons-community (f453)
  • .dashicons-buddicons-forums (f449)
  • .dashicons-buddicons-friends (f454)
  • .dashicons-buddicons-groups (f456)
  • .dashicons-buddicons-pm (f457)
  • .dashicons-buddicons-replies (f451)
  • .dashicons-buddicons-topics (f450)
  • .dashicons-buddicons-tracking (f455)
  • .dashicons-businessperson (f12e)
  • .dashicons-businesswoman (f12f)
  • .dashicons-color-picker (f131)
  • .dashicons-editor-ltr (f129)
  • .dashicons-editor-ol-rtl (f12c)
  • .dashicons-email-alt2 (f10a)
  • .dashicons-instagram (f12d)
  • .dashicons-menu-alt (f10b)
  • .dashicons-rest-api (f124)
  • .dashicons-yes-alt (f12a)
  • .dashicons-tide (f10d)

These icons were added to the .ttf, and .eot font files, as well as the SVG sprite. However, they were not added to the .woff font file. The new dashicons.woff2 file should be utilized instead.

For instances where IE<11 needs to be supported, the .woff file will remain for backwards compatibility. However, if the new icons are needed in those scenarios, the WOFF format is now included as embedded within the dashicons.css.

Props EmpireOfLight, liljimmi, jaymanpandya, netweb, melchoyce, joen, folletto, nateallen, bahia0019, JeffPaul, desrosj, cathibosco1.
Fixes #41074.

#105 @desrosj
6 years ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Missed @ianbelanger on the props list.

Reopening for the following tasks to be completed:

I am working on both.

#106 @desrosj
6 years ago

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

#107 in reply to: ↑ 47 @netweb
6 years ago

Replying to EmpireOfLight:

There are lots of new icon requests on github. Here they are so we can comment on whether any should be included in the next release:

Code Standards icon: https://github.com/WordPress/dashicons/issues/263

It looks like this new icon for the #wpcs team was missed in the above, before creating a new ticket @desrosj I just want to confirm if that is indeed the case thanks.

#108 @desrosj
6 years ago

@netweb I was unaware that any other icons were in progress. If this can be merged completed prior to the fixes for #46611 are committed, it can be included with those changes.

#109 @desrosj
6 years ago

In 45040:

Administration: Fix Dashicon backwards compatibility issues.

In [44940], the Dashicon files in core were updated to contain the latest version of the font from the GitHub repo. This change follows that up by fixing several backwards compatibility issues caused by the new build process used to generate the font files and fixes the missing menu icon when viewing the admin on small screens.

  • buddicons-bbpress-logo (f12b) was moved back to the correct location of f477.
  • editor-ltr (f129) was moved back to the correct location of f10c.
  • email-alt2 (f10a) was moved to the correct location of f467.

The following icons were restored to their previous locations:

  • camera-alt (f129)
  • edit-large (f327)
  • editor-distractionfree (f211)
  • update-alt (f113)
  • twitter-alt (f302)
  • text-page (f121)
  • plugins-checked (f485)
  • menu-alt3 (f349)
  • menu-alt2 (f329)
  • menu-alt (f228)
  • Duplicate lock icon at location f315
  • Duplicate editor-code icon at location f494
  • arrow-up at f143.

The editor-ltr and editor-rtl icons had also been switched. The arrows now point in the correct directions at the correct Unicode locations (f10c and f320 respectively).

And, lastly, this change also introduces the code-standards (f13a) icon that was not included in the previous build.

Props afercia, earnjam, oztaser, joen, cathibosco1, ianbelanger, desrosj.
See #41074.
Fixes #46611.

#110 @ryno267
6 years ago

rem googleplus?

This ticket was mentioned in Slack in #core-editor by aduth. View the logs.


6 years ago

#112 @builtbynorthby
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

While beta testing 5.2 I noticed a plugin was missing the trash icon in its UI.

It turns out, two of the selectors are missing :before

.dashicons-exerpt-view {
	content: "\f164";
}

https://github.com/WordPress/dashicons/blob/master/icon-font/css/dashicons.css#L1141

and

.dashicons-post-trash {
	content: "\f182";
}

https://github.com/WordPress/dashicons/blob/master/icon-font/css/dashicons.css#L1153

#113 @garrett-eclipse
6 years ago

Another question seeing that CSS for the dashicons should .dashicons-exerpt-view not be .dashicons-excerpt-view for proper spelling of excerpt?

#114 @desrosj
6 years ago

  • Keywords has-dev-note added; needs-dev-note removed

Thanks @builtbynorthby! I have opened a PR upstream to fix this.

@garrett-eclipse both are currently present. .dashicons-exerpt-view is present for backward compatibility. The CSS had previously been released with the typo, so both versions are included. I also added a comment explaining that in the PR above. See #30832.

Also, forgot to mark this as has-dev-note. The note was posted here: https://make.wordpress.org/core/2019/04/11/dashicons-in-wordpress-5-2/.

#115 @desrosj
6 years ago

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

In 45225:

Administration: Add missing :before to two Dashicon class definitions.

Introduced in [45040].

Props builtbynorthby.
Fixes #41074.

Note: See TracTickets for help on using tickets.