WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 3 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 3 months ago.
Contains font files with new icons for 4.9 release.
41074.diff (94.4 KB) - added by netweb 3 months ago.
icon-font.2.zip (124.6 KB) - added by EmpireOfLight 2 months ago.
Dashicons Icon font files with new dashicons for 4.9.
new-dashicons.41074.diff (374.3 KB) - added by EmpireOfLight 2 months ago.
Diff file for new dashicons for 4.9
41074.3.diff (69.5 KB) - added by netweb 8 weeks ago.
41074.4.diff (261.4 KB) - added by netweb 8 weeks ago.

Download all attachments as: .zip

Change History (49)

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


6 months ago

#2 @liljimmi
6 months ago

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

#3 @liljimmi
6 months ago

  • Description modified (diff)

#4 @liljimmi
6 months ago

  • Description modified (diff)

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


6 months ago

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


3 months ago

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


3 months ago

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


3 months ago

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

Contains font files with new icons for 4.9 release.

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

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


2 months ago

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


2 months ago

#20 @EmpireOfLight
2 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
2 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
2 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
2 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 2 months ago by folletto (previous) (diff)

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

Dashicons Icon font files with new dashicons for 4.9.

@EmpireOfLight
2 months ago

Diff file for new dashicons for 4.9

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


2 months ago

#28 @melchoyce
2 months ago

  • Keywords has-patch added

#29 @melchoyce
2 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 weeks ago

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


8 weeks ago

#32 @westonruter
8 weeks ago

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

@netweb
8 weeks ago

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

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


8 weeks ago

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

#38 @netweb
8 weeks 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 weeks 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 weeks 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 weeks ago

#42 @Joen
6 weeks 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.


3 days ago

Note: See TracTickets for help on using tickets.