Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add reusable block icon. #23552

Merged
merged 8 commits into from
Sep 3, 2020
Merged

Add reusable block icon. #23552

merged 8 commits into from
Sep 3, 2020

Conversation

jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Jun 29, 2020

This adds a reusable block icon to the menu.

It also:

  • Moves icons to the right. You can still show shortcut and icon.
  • 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.

Before:

Screenshot 2020-06-29 at 10 49 27

After:

Screenshot 2020-08-28 at 11 28 54

Screenshot 2020-08-28 at 11 25 30

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):

Screenshot 2020-08-28 at 11 17 10

@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) labels Jun 29, 2020
@jasmussen jasmussen requested a review from mtias June 29, 2020 08:57
@jasmussen jasmussen self-assigned this Jun 29, 2020
@github-actions
Copy link

github-actions bot commented Jun 29, 2020

Size Change: +209 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/block-editor/index.js 128 kB +10 B (0%)
build/block-editor/style-rtl.css 11 kB -12 B (0%)
build/block-editor/style.css 11 kB -12 B (0%)
build/block-library/index.js 137 kB +6 B (0%)
build/components/index.js 200 kB +11 B (0%)
build/components/style-rtl.css 15.5 kB -42 B (0%)
build/components/style.css 15.5 kB -39 B (0%)
build/edit-post/index.js 305 kB +8 B (0%)
build/edit-post/style-rtl.css 6.26 kB +1 B
build/edit-post/style.css 6.25 kB +2 B (0%)
build/edit-site/index.js 17.1 kB +71 B (0%)
build/edit-widgets/index.js 12 kB +9 B (0%)
build/editor/index.js 45.6 kB +196 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.41 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.99 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-library/editor-rtl.css 8.55 kB 0 B
build/block-library/editor.css 8.55 kB 0 B
build/block-library/style-rtl.css 7.47 kB 0 B
build/block-library/style.css 7.47 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 742 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.7 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.48 kB 0 B
build/edit-navigation/index.js 11.7 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/style-rtl.css 2.46 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@jasmussen jasmussen added the [Status] In Progress Tracking issues with work in progress label Jun 29, 2020
@jasmussen
Copy link
Contributor Author

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

@jasmussen jasmussen removed the [Status] In Progress Tracking issues with work in progress label Jul 9, 2020
@jasmussen
Copy link
Contributor Author

I moved the icon to the right, in the spot of the shortcut, as outlined in #18667. Screenshots:

Screenshot 2020-07-09 at 12 31 10

This also affects other menu items:

Screenshot 2020-07-09 at 12 31 00

Screenshot 2020-07-09 at 12 31 17

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.

@shaunandrews
Copy link
Contributor

shaunandrews commented Jul 10, 2020

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?

@jasmussen
Copy link
Contributor Author

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.

@jasmussen
Copy link
Contributor Author

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.

@MichaelArestad
Copy link
Contributor

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

image

@jasmussen
Copy link
Contributor Author

Ugh we need a new icon for that :D great call, let me take a look at that one. Thank you Michael!

@shaunandrews
Copy link
Contributor

image

There's something off about the alignment of the icon when compared to the shortcuts and the focus ring. Otherwise, I dig it.

@jasmussen
Copy link
Contributor Author

I optically spaced the icon a bit more:

Screenshot 2020-09-02 at 09 59 13

The idea is that all icons have a little bit of clearance:

Screenshot 2020-09-02 at 10 00 53

It's now 2px compared to 4 before. What do you think?

@jasmussen
Copy link
Contributor Author

Regarding the Export icon in the site editor, I found this icon:

Screenshot 2020-09-02 at 10 06 09

That's upload. I took inspiration from that to create a new "Download":

Screenshot 2020-09-02 at 10 06 06

So here's before:

Screenshot 2020-09-02 at 10 09 58

Here's after:

Screenshot 2020-09-02 at 10 10 07

I added the new icon to the Figma WordPress Design Library also.

@jasmussen jasmussen merged commit 3e57ffd into master Sep 3, 2020
@jasmussen jasmussen deleted the add/reusable-icon branch September 3, 2020 06:38
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 3, 2020
@mtias
Copy link
Member

mtias commented Sep 3, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Accessibility Feedback Need input from accessibility [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants