DragHandle Icon Request
mrpritchett opened this issue · comments
We need the dragHandle icon from Gutenberg added to dashicons.
Is there a specific reason for this? We're only adding icons to the dashicons icon font if they're necessary for new WP versions
That the Drag Handle is an SVG icon in Gutenberg/WP Admin already, but isn't handled by Dashicon and also isn't abstracted so it's not available to anyone outside of Gutenberg itself. Were it a Dashicon, it would be.
What's the file path to the icon? I'll add it to the font.
Can't seem to find an icon other than svg. Hope that is helpful.
https://github.com/WordPress/gutenberg/blob/62c527f89ac28467db6a8cbb50a188f4377a897a/packages/editor/src/components/block-mover/icons.js
<AccessibleSVG width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"> <path d="M13,8c0.6,0,1-0.4,1-1s-0.4-1-1-1s-1,0.4-1,1S12.4,8,13,8z M5,6C4.4,6,4,6.4,4,7s0.4,1,1,1s1-0.4,1-1S5.6,6,5,6z M5,10 c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,10,5,10z M13,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S13.6,10,13,10z M9,6 C8.4,6,8,6.4,8,7s0.4,1,1,1s1-0.4,1-1S9.6,6,9,6z M9,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S9.6,10,9,10z" /> </AccessibleSVG>
About the drag handle — the reason that it's not part of any icon set, is that it's more or less a custom illustration to fit in the tight and specific space on the side of the blocks. In that vein it's actually on an 18x18px which makes it incompatible with Dashicons.
I understand the desire to have this available "outside Gutenberg", and I want to add it to an icon set. But right now there's not really a set capable of receiving this. In #255 (comment) we are discussing how we can take Dashicons into the future and be capable of handling an icon like this, but it's not quite there yet.
As such, the icon is being made available from the Gutenberg source code itself, and here's the specific file:
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" role="img" aria-hidden="true" focusable="false"><path d="M13,8c0.6,0,1-0.4,1-1s-0.4-1-1-1s-1,0.4-1,1S12.4,8,13,8z M5,6C4.4,6,4,6.4,4,7s0.4,1,1,1s1-0.4,1-1S5.6,6,5,6z M5,10 c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,10,5,10z M13,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S13.6,10,13,10z M9,6 C8.4,6,8,6.4,8,7s0.4,1,1,1s1-0.4,1-1S9.6,6,9,6z M9,10c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S9.6,10,9,10z"></path></svg>
So how is Gutenberg using this icon? Well, in the same way, it's being used as an inline SVG. For now, I would suggest that's the best way to use this icon.
To answer the question from Slack (https://wordpress.slack.com/archives/C03EESJAW/p1540341175000100) — if we were to add it to Dashicons, it would have to be redesigned to fit on a 20x20 grid, and put in the sources/svg folder to be part of the icon font. But it wouldn't be used anywhere in WordPress, because as noted Gutenberg would be using the inline SVG version.
Is there a different way we can make this more accessible to plugins and "outside of Gutenberg", than adding it to the icon font?
That's helpful to understand. While inline SVG is better than nothing, the component is more helpful as it is cleaner to read/use in the code. If Dashicon is not necessarily the way forward, I'd love to see an icon component used (if it already isn't, I can't remember if I've seen this or not) and abstracted to be useful for plugins and themes on top of Gutenberg. Overall, my philosophy when approaching Gutenberg has been that ALL THE THINGS should be abstracted for use elsewhere if possible/secure/useful. We are working on a series of components that need the ability to drag/drop/reorder within the inspector and having similar iconography represent similar (but not exactly the same) functionality through the UI is beneficial for multiple reasons.
Dashicons could absolutely be the way forward. I agree it would be nice to have this in the component. What I'm suggesting is exactly that: we need a better icon component, and already now the steps are being taken to move Dashicons into that future. Sadly we aren't there quite yet, which is why we can't yet add the drag handle. One day though!
@jasmussen Is there a way to contribute to the "better icon component?" I'd be happy to contribute code, design, whatever I can. Not specifically for dragHandle, but just to help move things forward.
Thank you for your interest and desire to contribute. With WordPress 5.0 out the door, one of the things I would love to think about is exactly that, how do we make the icon process better for 5.1. That likely means further improvements to the icon component, more or less like talked about here. I think a good kickoff meeting is likely the next action point. Given the holidays are coming up, perhaps some time early next year?
There is a new icon component in Gutenberg: https://wordpress.github.io/gutenberg/?path=/story/components-icon--default — you can report any challenges you have with icons in https://github.com/WordPress/gutenberg. In that vein, I'm closing this one as it pertains to the block editor!