WordPress.org

Make WordPress Core

Opened 12 months ago

Last modified 13 days ago

#41074 reviewing enhancement

Create new Dashicons (4.9)

Reported by: EmpireOfLight Owned by: netweb
Milestone: 5.0 Priority: normal
Severity: normal Version: 4.9
Component: Editor Keywords: needs-refresh
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 (6)

icon-font.zip (127.1 KB) - added by EmpireOfLight 9 months ago.
Contains font files with new icons for 4.9 release.
41074.diff (94.4 KB) - added by netweb 9 months ago.
icon-font.2.zip (124.6 KB) - added by EmpireOfLight 8 months ago.
Dashicons Icon font files with new dashicons for 4.9.
new-dashicons.41074.diff (374.3 KB) - added by EmpireOfLight 8 months ago.
Diff file for new dashicons for 4.9
41074.3.diff (69.5 KB) - added by netweb 8 months ago.
41074.4.diff (261.4 KB) - added by netweb 8 months ago.

Download all attachments as: .zip

Change History (66)

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


12 months ago

#2 @liljimmi
12 months ago

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

#3 @liljimmi
12 months ago

  • Description modified (diff)

#4 @liljimmi
12 months ago

  • Description modified (diff)

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


12 months ago

#6 @jaymanpandya
10 months 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
10 months 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
10 months 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.


9 months ago

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


9 months ago

#12 follow-up: @netweb
9 months 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.


9 months ago

#14 in reply to: ↑ 12 @EmpireOfLight
9 months 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
9 months ago

Contains font files with new icons for 4.9 release.

#15 follow-up: @EmpireOfLight
9 months 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
9 months ago

#16 in reply to: ↑ 15 ; follow-up: @netweb
9 months 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.


9 months ago

#18 @melchoyce
9 months 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.


9 months ago

#20 @EmpireOfLight
9 months 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
9 months 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
9 months 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
9 months 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).
  2. Which means: dashicons.css is generated with embedded WOFF, so there's no file used (source).

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. :)

Last edited 9 months ago by folletto (previous) (diff)

#24 in reply to: ↑ 21 @netweb
9 months 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
9 months 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
8 months ago

Dashicons Icon font files with new dashicons for 4.9.

@EmpireOfLight
8 months ago

Diff file for new dashicons for 4.9

#26 follow-up: @EmpireOfLight
8 months 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.


8 months ago

#28 @melchoyce
8 months ago

  • Keywords has-patch added

#29 @melchoyce
8 months ago

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

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


8 months ago

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


8 months ago

#32 @westonruter
8 months ago

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

@netweb
8 months ago

#33 in reply to: ↑ 26 @netweb
8 months 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
8 months 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
8 months 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 8 months ago by netweb (previous) (diff)

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


8 months ago

#37 follow-up: @Joen
8 months 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
8 months ago

#38 @netweb
8 months 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
8 months 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
8 months 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.


8 months ago

#42 @Joen
8 months 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.


6 months ago

#44 @netweb
5 months 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
4 months 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.


4 months ago

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

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


4 months ago

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


4 months ago

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


3 months ago

#51 @jbpaul17
3 months ago

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

#52 @netweb
3 months ago

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

#53 follow-up: @jbpaul17
2 months 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
2 months 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-up: @Joen
8 weeks 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 8 weeks ago by Joen (previous) (diff)

#56 in reply to: ↑ 55 @netweb
8 weeks 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
8 weeks ago

💥

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

#58 @JeffPaul
5 weeks 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
5 weeks 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
13 days ago

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

Note: See TracTickets for help on using tickets.