ryelle / wordpress

A mirror of the develop.git.wordpress.org repo to collaborate on a Dashicons SVG branch

WordPress

Welcome to the WordPress development repository! Please check out our contributor handbook for information about how to open bug reports, contribute patches, test, documentation, or get involved in any way you can.

Getting Started

WordPress is a PHP/MySQL-based project. We have a basic development environment that you can quickly get up and running with a few commands. First off, you will need to download and install Docker, if you don't have it already. After that, there are a few commands to run:

Development Environment Commands

Running these commands will start the development environment:

npm install
npm run build:dev
npm run env:start
npm run env:install

Additionally, npm run env:stop will stop the environment.

npm run env:cli runs the WP-CLI tool. WP-CLI has a lot of useful commands you can use to work on your WordPress site. Where the documentation mentions running wp, run npm run env:cli instead. For example, npm run env:cli help.

npm run test:php and npm run test:e2e run the PHP and E2E test suites, respectively.

wordpress's Issues

Accessible SVG Icon Markup

To be accessible the following markup should be used…

<svg aria-hidden="true">
  <use xlink:href="sprite.svg#my-icon"></use>
</svg>

Hide a decorative icon from screen readers

<svg role="img">
  <title>Text alternative</title>
  <use xlink:href="sprite.svg#my-icon"></use>
</svg>

Provide accessible text for an icon

These samples are tested and verified for VoiceOver+Safari, NVDA+Fx and JAWS16+IE11

Icons in sidebar and adminbar flip upside down when collapsed

Fix the broken checkmarks and dots that adorn form ui elements

This shouldn’t be difficult, and the fact that we’re using dashicons to put a checkmark on a selected checkbox is pretty bad in the first place. I(Ben Dunkle) made a trac post here:

Dashboard svg styling

Many icons need to be lowered by a few px. In the main area, icons should be #82878c

Check out `twentyseventeen_get_svg`

Twentyseventeen will ship with a function for adding an SVG icon, much like our existing wp_icon. We should probably grab any improvements they've added and bring it into wp_icon.

Media editor

Also note the calendar icon on the right, may be fixed by another issue

Add png fallback for IE

We should create a png sprite for IE users. This requires integrating another grunt task into the current gruntfile, maybe https://www.npmjs.com/package/grunt-svg2png
This will also address #35

Spinny ball "working" icon

When you're doing stuff the spinning ball animated gif appears. We should do this with animated svg.

Lists where "dashicons" and unicode references occur

search-results.txt
search-results2.txt

Maybe a starting point for identifying where/how code has to change for SVG integration?

Comments bubble

This is built with css, not the font. Should we remake it with the comment svg?

Tools page-press this and clipboard icons

The missing icon on the right should be a clipboard

Preserving BWC for Plugins using Dashicon's Icon Font

I've been looking around to see what's being used by plugins and so far this is what I've found…

note: Using All in One SEO and W3 Total Cache plugin as the case studies

markup in use for admin menu:

<div class="wp-menu-image dashicons-before dashicons-admin-generic"></div>

styling selectors in use for admin menu

.dashicons
.dashicons-before
.dashicons-before:before
.dashicons-admin-generic
.wp-menu-image
#adminmenu div.wp-menu-image:before

Fix Safari Bug

See https://core.trac.wordpress.org/ticket/38387
The code for <use tags needs extra spaces added between the < >'s and the ' 's. Easiest to just read what was said there.

Swap icons in TinyMCE

This is in lots of places-anywhere you’re editing/adding a post/page/cpt etc. Need to figure out how to get TinyMCE icons to be SVG. Anyone?

Media Library icons

These need to be svg and styled.

Please convert bbPress dashicons to SVG

Following up from #14 as I see bbPress dashicons were not converted

bbPress' plan is to no longer "hide" these icons, they were originally not published on https://developer.wordpress.org/resource/dashicons/ so they'd be available exclusively to bbPress.

The current bbPress dashicons: https://codex.bbpress.org/official-logos-and-icons/
• bbPress Logo: content: "\f477"; – class="dashicons dashicons-bbpress-logo"
• Forums/Hive: content: "\f449"; – class="dashicons dashicons-bbpress-forum"
• Topics/Honey: content: "\f450"; – class="dashicons dashicons-bbpress-topic"
• Replies/Bee: content: "\f451"; – class="dashicons dashicons-bbpress-reply"

** The bbPress was converted as this icon has always been public

With love and thanks in advance, the bbPress team ❤️

Press this page needs icons

The tinymce ones on the left should be resolved by issue #10 , and the arrows on the right by the issue that deals with customizer icons, so this is probably just the undo/redo icons

New post screen work

Fix icon coloring and positioning in Publish and Format meta boxes. Use svg in Add MEdia button. Note, icons in visual editor are rendered through tinymce, so this screenshot is showing them as a font. See #10

Replace search icon in top admin bar with svg

Add functionality for 3rd-party icons

This came up in #15, where bbPress and BuddyPress want to use icons in their projects. Part of converting to this SVG process was to enable other projects using WordPress greater flexibility: you're not restricted to Dashicons, and you don't need to create an entire font just to use your icons. You can create a small SVG sprite with just your icons, and call on them in your plugin/theme.

Currently we don't have the setup for this, so we should think about how to approach it.

Remove old dashicon boxes in post formats widget

For reference (most likely a case of CSS removal):

Add new theme is missing the plus icon

Should be like the one on the left.

Install plugins icons

We need to animate the svg like those orange arrows. Also, it turns into a checkmark-that needs to be an svg as well. Also, note the checkmark next to "Compatible..." in the bottom

SVG Dash icons not working in Windows XAMPP

Hi,

I am not exactly sure this is issue or a configuration issue, I have forked the repo and cloned in my local dev environment ( XAMPP / Windows ). SVG icons not displaying at all.