Size Change: +209 B (0%)

Total Size: 1.17 MB

_{compressed-size-action}

Adding "in progress" because the icon really needs to be on the right to look balanced, and that needs more work.

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?

Does this mean a menu item could have an icon or a shortcut, but not both?

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.

What happens when I select Code Editor in the more menu; Does the shortcut get replaced by a check mark?

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.

Refreshed this one, and revisited. It now:

• Allows both icon and shortcut
• Harmonizes and simplifies menu item paddings, aligns it to the 12px grid.
• Updates the check icon to match the WordPress design libraries.

Props to @MichaelArestad for some mockups that inspired these changes.

I have updated the screenshots in the PR description to match these changes.

@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.

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.

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.