Add reusable block icon. #23552
Add reusable block icon. #23552
Conversation
jasmussen
added
[Type] Enhancement
|
Size Change: +209 B (0%) Total Size: 1.17 MB
ℹ️ View Unchanged
|
|
Adding "in progress" because the icon really needs to be on the right to look balanced, and that needs more work. |
jasmussen
force-pushed
the
add/reusable-icon
branch
from
f79cbd6
to
61d4b05
Compare
jasmussen
requested review from
ajitbohra,
chrisvanpatten,
ellatrix and
youknowriad
as code owners
|
I moved the icon to the right, in the spot of the shortcut, as outlined in #18667. Screenshots:
This also affects other menu items:
I think it adds a nice bit of consistency and balance. I'd like for more work to be done to optimize the code, there's a lot of duplication and it can align to the grid. But it's somewhat deep surgery so probably best done separately. |
|
Does this mean a menu item could have an icon or a shortcut, but not both? What happens when I select Code Editor in the more menu; Does the shortcut get replaced by a check mark? |
Yes and no. You can still add an icon, as shown in the tools menu, but it's a different code syntax for it, not perhaps as such something you should only do if you know what you're doing. Which goes okay with the idea that we should be using less icons overall in menus.
Serendipitiously, this is already the case in the core project, because the shortcut for the active editor view is intentionally hidden. But yes, now that's also technically the case. |
jasmussen
force-pushed
the
add/reusable-icon
branch
2 times, most recently
from
3d0be45
to
feb0354
Compare
|
Refreshed this one, and revisited. It now:
Props to @MichaelArestad for some mockups that inspired these changes. I have updated the screenshots in the PR description to match these changes. |
jasmussen
force-pushed
the
add/reusable-icon
branch
from
532f913
to
4826cbe
Compare
|
@jasmussen This looks and feels solid. I did a bit of clicking around and for the most part, everything worked very well. I see one spot in the site editor where the icon alignment is a little weird. I suspect it is because the component configuration might be custom or something specific to the editor CSS:
|
|
Ugh we need a new icon for that :D great call, let me take a look at that one. Thank you Michael! |
|
There's something off about the alignment of the icon when compared to the shortcuts and the focus ring. Otherwise, I dig it. |
ZebulanStanphill
added
the
Needs Accessibility Feedback
jasmussen
force-pushed
the
add/reusable-icon
branch
from
576baaa
to
a6c908e
Compare
|
I optically spaced the icon a bit more:
The idea is that all icons have a little bit of clearance:
It's now 2px compared to 4 before. What do you think? |
|
Regarding the Export icon in the site editor, I found this icon:
That's upload. I took inspiration from that to create a new "Download":
So here's before:
Here's after:
I added the new icon to the Figma WordPress Design Library also. |
jasmussen
force-pushed
the
add/reusable-icon
branch
from
a228c26
to
6d6a4b6
Compare
|
Thanks @jasmussen ! We might end up removing the reusable block one now that it exists as a tab and is not present elsewhere, but the improvement in the positioning and the other icons is great. |
This adds a reusable block icon to the menu.
It also:
Props to @MichaelArestad for some mockups that inspired these changes.
Before:
After:
In no places (that I could find) do we currently show BOTH a shortcut, and an icon. But since it's theoretically possible this will be necessary (props @shaunandrews), it is accommodated. The following is a fake example (reusable blocks don't have a shortcut):