Converting Dashicons to SVG

Currently, WordPress uses a font to render all the icons. The goal is to convert to SVG. We’ve started the process, but there’s a lot more work to be done to make sure the SVGs are rendered properly.

Read more about the project’s purpose in a previous post by @melchoyce:

https://make.wordpress.org/core/2015/06/11/moving-dashicons-from-an-icon-font-to-svg/

Since that post, progress has been made on a new GitHub repo at github.com/ryelle/WordPress/ (the ones listed in the previous post are no longer being used). Issues and instructions on how to get started can be found there.

So far, the font code has been replaced with SVG code wherever possible. For the most part, the SVGs are displaying properly. Issues are being posted on the GitHub repo.

To summarize:

  • There are several places where the SVG is still not showing up. The code used to display the font is inconsistent, e.g. in the TinyMCE bar above the visual content editor.
  • There are likely many places that haven’t been discovered that need icons. For the most part, if you see a square, it’s a missing icon. I’ve gone through and noted everywhere that I’ve seen this, but that’s just one person.
  • The CSS styling of the SVGs is fundamentally different that what’s being used to style the font. We need people to style the SVGs so they look and behave the way the font currently does.
  • We need to clean out the old CSS (and HTML) code being used to display and style the font.
  • We need to QA test on a variety of devices and browsers.

Get started by joining the #design-dashicons channel on Slack. Meetings are held there every Friday at 7pm UTC. The next one is on Friday at 19:00 UTC.

#dashicons

Today in the Nightly: Customize in the Toolbar, Passwords UI, List Tables on Phones, Dashicons

Development leading up to the first beta brought several visual changes. These are available right now in the nightly build. Switch a site to nightly builds and try them out.

Customize in the toolbar

To disambiguate between links to the Customizer and links to the Appearance screens from the front-end, Customize now has a top-level toolbar button rather than having links to it mixed with dashboard links in the site menu. This context mixing leads to disrupted user expectations as they navigate, as well as experiences that feel slower or actually are slower in some cases. See #32924.

This means an additional top-level menu item, but the existing links to Widgets and Themes in the dropdown will now point to the admin, as the Dashboard and Menus links do. The advantage and goal for this change is to make it clear that you are about to enter the customizer. Deep links have not been added back in this go-round; this means that direct links to Header and Background are currently absent (with a very narrow exception related to old browsers). Those two deep links are still available in the admin menu under Appearance, which similarly mixes context but has not yet been addressed.

More changes are coming to the toolbar. Peek at a possibility for more general improvements to the toolbar, being discussed in #32678.

Phone friendly list tables

List tables now scale down to phones. The column truncation strategy they used before didn’t scale down to small screens. A single column layout with disclosures is the new strategy. Some of our most important screens use list tables, notably Media and Posts. Truncated columns was number 5 on our top  5 impediments to flow on touch devices list.

After:

Before:

See #32395.

For more screenshots, see these visual surveys of the list table screens.

Toolbar interaction fixes for touch devices

I’ve been wanting this one for a long time.  Toolbar interaction was number 3 on the top  5 impediments to flow on touch devices.

 

Fixed!

Fixed!

See #29906. That ticket is a good read.  It has: Visual feedback and visual surveys. Punting a working fix to the next release so that a new, more future proof approach could be tried. Development of touch capability detection. Working around iOS. Development of testing checklists. Lots of iteration.

Passwords UI

The password set/change UI was updated with these improvements.

  • Generate the password for the user
  • More tightly integrate password strength meter
  • Warn on weak passwords

See #32589 for more screenshots.

Dashicons update

Dashicons received a big update.

New icons:

  • .dashicons-admin-customizer (f540)
  • .dashicons-admin-multisite (f541)
  • .dashicons-editor-table (f535)
  • .dashicons-filter (f536)
  • .dashicons-hidden (f530)
  • .dashicons-image-filter (f533)
  • .dashicons-image-rotate (f531)
  • .dashicons-layout (f538)
  • .dashicons-sticky (f537)
  • .dashicons-thumbs-down (f542)
  • .dashicons-thumbs-up (f529)
  • .dashicons-unlock (f528)
  • .dashicons-warning (f534)

Updated icons:

  • .dashicons-plus (f132)
  • .dashicons-yes (f147)

dashicons-preview

See #30902.

Better styling for .form-invalid inputs

See #32490.

Responsive styling for my-sites.php

My Sites now moves to a single column layout on narrow viewports. Here it is on an iPhone 6, an iPad, and a Macbook, as well as at full-width.

Here’s what it looked liked before.

my-sites-before

See #31685 – Better responsive styling for my-sites.php

Crosslinking Customizer Panels

The graf in the Menus panel details about using the Customize Menu widget now links directly to the widgets panel.

customize menus details

See #32742.

You might notice the misaligned question mark icon on that screenshot. #32733 is tracking that.

 Easy switching between production and nightly builds

The beta tester plugin makes it easy to switch a site to nightly builds. Now switching back to the latest stable build is just as easy. It’s not the prettiest, but it is shown only to beta testers and will suffice until we finally refresh the Grand Unified Updater screen. For info on using the beta tester plugin to test with nightly builds, see the Beta Testing page of the core handbook.

See #32613.

 

Previously: Today in the Nightly: Site Icons, Text Editor in Press This

#beta-testing-flow, #customize, #dashicons, #list-tables, #multisite, #passwords, #today-in-the-nightly, #toolbar

Moving Dashicons from an Icon Font to SVG

In the next couple months, we’re going to focus on converting the Dashicons icon font in core to SVG. The process of adding and updating the Dashicons font is an incredibly labor intensive, tedious process that is currently limited to a small number of people who have the ability to add new characters to the .glyphs source file. By moving to SVG, we’re not only making the process easier for Dashicons maintainers, but also making the process of adding and updating icons easier and more open to the entire design community.

Why SVG?

When we initially built Dashicons, we tried out a couple different methods for including them in the admin. SVG was our preferred method, but due to lack of support and fallbacks for SVG at the time, we opted to go for the more widely support icon font method.

However, there have tremendous strides to improve support and understanding around SVG in the past year and a half, and we think now is a good time to start the transition process in core.

Here are some of the benefits SVG icons provide:

  • The icons are straight up vector — that means no font antialiasing issues when you use the icons outside of their 20×20 pixel grid, making the icons much more versatile
  • Better CSS control — switching to SVG introduces the possibility of multi-color icons
  • Better positioning control than icon fonts
  • SVG won’t fail to load like a font might, because inline SVGs are included right there in the document
  • Potentially better for accessibility [source]
  • Much easier to maintain than the current icon font
  • Easier for plugin and theme authors to add custom SVGs

The cons:

  • Less native browser support (but fallback options exist)
  • Figuring out backwards compatibility in core will be challenging (but not insurmountable)

Chris Coyier has a pretty fantastic rundown on SVG vs. icon fonts.

Just to note: we’re not talking about supporting uploading SVGs in the media library. These would be SVGs built by us, included inline in the WordPress dashboard.

The Roadmap

Here’s the plan:

  • As much as possible, we’re going to attempt to build this as a feature plugin — but we’ve already started running into some issues with what we can and can’t do in a plugin.
  • The MVP will be svg icons being generated into a sprite through a Grunt build process. For the MVP, we’re not going to focus on browser support.
  • Once we have an MVP up, we’re going to explore the best way to provide browser support using techniques outlined by Chris Coyier in Github, as well as figure our backwards compatibility with the icon font.
  • Finally, we’re going to explore breaking up SVGs into different icon “packs” (TinyMCE, admin bar, CPT, etc.) and figure out if we can enqueue them on the fly.

Ideally, we’d like to do as much of this during the 4.3 cycle as possible, with the idea of merging in 4.4. This means we’ll need to have a solid MVP by August, which is feasible if we can get more help. That’s why we’d like you to…

Join us

We would love to get more people involved in this project. Specifically, we’re looking for people to help build out the MVP, and people to work on compatibility issues.

We’re going to be building out the plugin on github:  https://github.com/ryelle/svg-dashicons-plugin. There’s nothing there yet, but we hope to get some early work up soon. (We also did some very early explorations in another repo, if you want to see some of the past conversations and issues.)

Our meetings take place in #design-dashicons every Thursday at 18:30 UTC. Please join in and help us make Dashicons even better.

If you have questions, feel free to leave a comment here or ask in slack.

#dashicons, #roadmaps

Dashicons in WordPress 4.1

WordPress 4.1 includes 20 new fresh and clean icons. Thanks to @liljimmi, @melchoyce and @empireoflight.

Media Icons

Icon CSS Class Code
dashicons-controls-play f522
dashicons-controls-pause f523
dashicons-controls-forward f519
dashicons-controls-skipforward f517
dashicons-controls-back f518
dashicons-controls-skipback f516
dashicons-controls-repeat f515
dashicons-controls-volumeon f521
dashicons-controls-volumeoff f520

Posts Screen (updated)

Icon CSS Class Code
dashicons-align-left f135
dashicons-align-right f136
dashicons-align-center f134
dashicons-align-none f138

Misc

Icon CSS Class Code
dashicons-phone f525
dashicons-building f512
dashicons-store f513
dashicons-album f514
dashicons-palmtree f527
dashicons-tickets-alt f524
dashicons-money f526

To get a complete overview of all icons please visit developer.wordpress.org/resource/dashicons/.

#4-1, #dashicons, #dev-notes, #ui

Dashicons in WordPress 3.9

WordPress 3.8 has introduced an icon font for the WordPress admin, named Dashicons. Dashicons includes 167 icons until now.
WordPress 3.9 includes 30 new fresh and clean icons. Thanks to all contributors to ticket #26936, especially @melchoyce and @empireoflight.

Media Icons

All media file type icons got a huge facelift, see #26936. There are also two new icons for the playlists feature.

Icon CSS Class Code
dashicons-media-archive f501
dashicons-media-audio f500
dashicons-media-code f499
dashicons-media-default f498
dashicons-media-document f497
dashicons-media-interactive f496
dashicons-media-spreadsheet f495
dashicons-media-text f491
dashicons-media-video f490
dashicons-playlist-audio f492
dashicons-playlist-video f493

TinyMCE/Editor

With the update to TinyMCE 4.0 you can now use four new icons for editor related UI.

Icon CSS Class Code
dashicons-editor-contract f506
dashicons-editor-break f464
dashicons-editor-code f475
dashicons-editor-paragraph f476

Sorting

Use dashicons-external for external uses or randomize a list with dashicons-randomize.

Icon CSS Class Code
dashicons-external f504
dashicons-randomize f503

WPorg specific: Jobs, Profiles, WordCamps

We all WordCamps.

Icon CSS Class Code
dashicons-universal-access f483
dashicons-universal-access-alt f507
dashicons-tickets f486
dashicons-nametag f484
dashicons-clipboard f481
dashicons-heart f487
dashicons-megaphone f488
dashicons-schedule f489

Widgets

Have you already tried the live widget previews? You should. The following icons are created for this feature.

Icon CSS Class Code
dashicons-archive f478
dashicons-tagcloud f479
dashicons-text f480

Alerts/Notifications/Flags

The minus icon has an alternative icon, plus now too. Welcome.

Icon CSS Class Code
dashicons-plus-alt f502

Misc/CPT

End of .

Icon CSS Class Code
dashicons-microphone f482

To get a complete overview of all icons please visit http://melchoyce.github.io/dashicons/.

#3-9, #dashicons, #dev-notes, #ui