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

Redesign the main pattern inserter #44028

Merged
merged 34 commits into from
Oct 18, 2022
Merged

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Sep 9, 2022

What?

See #41379

This PR redesigns the patterns inserter. The first step is just to show the categories before actually rendering the patterns.
Here's the current state

pattern-inserter.mov

As you can see it's still very rough but we can get an idea of what we're trying to achieve, here are some of the remaining challenges:

  • Address keyboard navigation properly.
  • Potentially render a different component in mobile (Navigation pattern like the styles sidebar).
  • Design tweaks: It's proving challenging to position the "explore all" button at the bottom of the inserter consistently.
  • Tests.

Testing Instructions

  • Open the inserter
  • Open the patterns tab
  • Play with it

@youknowriad youknowriad added [Type] Enhancement A suggestion for improvement. [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Sep 9, 2022
@youknowriad youknowriad self-assigned this Sep 9, 2022
@github-actions
Copy link

github-actions bot commented Sep 9, 2022

Size Change: +665 B (0%)

Total Size: 1.27 MB

Filename Size Change
build/block-editor/index.min.js 168 kB +820 B (0%)
build/block-editor/style-rtl.css 15.8 kB +305 B (+2%)
build/block-editor/style.css 15.8 kB +311 B (+2%)
build/block-library/blocks/paragraph/editor-rtl.css 174 B -143 B (-45%) 🎉
build/block-library/blocks/paragraph/editor.css 174 B -143 B (-45%) 🎉
build/block-library/editor-rtl.css 11.2 kB -54 B (0%)
build/block-library/editor.css 11.2 kB -54 B (0%)
build/block-library/index.min.js 191 kB -352 B (0%)
build/blocks/index.min.js 49.8 kB +3 B (0%)
build/components/index.min.js 202 kB -187 B (0%)
build/components/style-rtl.css 11.3 kB +70 B (+1%)
build/components/style.css 11.3 kB +70 B (+1%)
build/edit-navigation/index.min.js 16.1 kB +1 B (0%)
build/edit-post/index.min.js 31.8 kB +1 B (0%)
build/edit-site/index.min.js 57.8 kB +9 B (0%)
build/edit-site/style-rtl.css 8.37 kB +5 B (0%)
build/edit-site/style.css 8.35 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 7.09 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 482 B
build/block-library/blocks/button/editor.css 482 B
build/block-library/blocks/button/style-rtl.css 523 B
build/block-library/blocks/button/style.css 523 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 187 B
build/block-library/blocks/comment-template/style.css 185 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 834 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 630 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.55 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 394 B
build/block-library/blocks/group/editor.css 394 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 884 B
build/block-library/blocks/image/editor.css 882 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.02 kB
build/block-library/blocks/navigation/editor.css 2.03 kB
build/block-library/blocks/navigation/style-rtl.css 2.17 kB
build/block-library/blocks/navigation/style.css 2.16 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 493 B
build/block-library/blocks/post-comments-form/style.css 493 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 315 B
build/block-library/blocks/post-featured-image/style.css 315 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 282 B
build/block-library/blocks/query-pagination/style.css 278 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 190 B
build/block-library/blocks/table/theme.css 190 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 691 B
build/block-library/blocks/video/editor.css 694 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.02 kB
build/block-library/common.css 1.02 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.3 kB
build/block-library/style.css 12.3 kB
build/block-library/theme-rtl.css 719 B
build/block-library/theme.css 722 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/compose/index.min.js 12.2 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.08 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.7 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 4 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/style-rtl.css 7.13 kB
build/edit-post/style.css 7.13 kB
build/edit-widgets/index.min.js 16.7 kB
build/edit-widgets/style-rtl.css 4.34 kB
build/edit-widgets/style.css 4.34 kB
build/editor/index.min.js 41.6 kB
build/editor/style-rtl.css 3.62 kB
build/editor/style.css 3.61 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/experiments/index.min.js 868 B
build/format-library/index.min.js 6.95 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.83 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 963 B
build/nux/index.min.js 2.06 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.33 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 1.58 kB
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.77 kB
build/shortcode/index.min.js 1.53 kB
build/style-engine/index.min.js 1.46 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@youknowriad youknowriad added Needs Design Feedback Needs general design feedback. Needs Accessibility Feedback Need input from accessibility labels Sep 12, 2022
@jasmussen
Copy link
Contributor

This is glorious, and I look forward to reviewing and helping in any way I can. This would be excellent to land soon!

I'm encountering this issue testing the branch:

Fatal error: Cannot redeclare wp_add_global_styles_for_blocks() (previously declared in /Users/joen/Local Sites/local-wordpress/app/public/wp-includes/global-styles-and-settings.php:202) in /Users/joen/GIT/gutenberg/lib/compat/wordpress-6.1/get-global-styles-and-settings.php on line 11

Screenshot 2022-09-12 at 11 26 46

Any thoughts?

@youknowriad
Copy link
Contributor Author

@jasmussen I think that issue is unrelated, probably due to some on going core merges. So try to destroy your environment or use WP 6.0 as a base WP install.

@jasmussen
Copy link
Contributor

As an environmentalist, I prefer not to destroy the environment 😜 — however I was able to downgrade, and yes, 6.0 works great. Diving in, thanks.

@jasmussen
Copy link
Contributor

As a single PR, this feels incredible already:

status

A few small tweaks I think we can make. The "Explore all patterns" button:

Screenshot 2022-09-12 at 11 35 08

can we make it more like the "Manage your library" button here?

Screenshot 2022-09-12 at 11 35 29

The button style feels like a nice bookend to the list.

I happen to be running a light-gray theme, so the light gray background makes things blend in here a bit:

Screenshot 2022-09-12 at 11 36 31

I'm going to explore what we can do here to separate things out a bit better.

One open question is whether we can improve some of the space usage. I think it's okay that the pattern flyout covers content, but I wonder if we could reduce the width of the inserter when the pattern is opened 🤔

@jasmussen
Copy link
Contributor

Alright a couple of quick mockups.

V1

  • Shows how the background color of the overlay actually isn't a gray color, but a 95% opaque white color with a backdrop-filter: blur(8px).
  • Adds a gray border left of the flyout.
  • Has 2px border radii around each pattern preview
  • Nice to have: shows how the default 350px inserter scales down whe the flyout is opened.

One cool thing would be to leverage the recently merged zooming, and invoke that when this pattern library is opened:

V2

Let me know if you'd like me to try and push some of the border/background-color/filter tweaks!

@youknowriad
Copy link
Contributor Author

@jasmussen Feel free to push the design tweaks.

can we make it more like the "Manage your library" button here?

I tried this but the way the inserter is styled / organized, it's not straight forward. I'll get it another try though.

@jasmussen
Copy link
Contributor

I pushed a little bit of polish around paddings, border, background colors, styles. It now looks like this:

update

This adds a backdrop-filter which works decently well for making the patterns feel separate from the content, yet still overlay them. However I want to note a performance concern here, blur is expensive to animate. Seems like we could either remove the blur (the blur especially becomes useless if we zoom out), or we can remove the initial animation, which would also be unfortunate. Any alternatives?

One thought on the animation, though — right now it's a bit bouncy. If we can choose a "ease-out" that would likely feel better.

Did you have any thoughts on whether we could animate the main inserter to be smaller?

@youknowriad
Copy link
Contributor Author

youknowriad commented Sep 12, 2022

blur is expensive to animate. Seems like we could either remove the blur (the blur especially becomes useless if we zoom out)

What's the "blur" that you're talking about here?

One thought on the animation, though — right now it's a bit bouncy. If we can choose a "ease-out" that would likely feel better.

Yes, we can tweak it, that's just the default slide in from framer motion.

Did you have any thoughts on whether we could animate the main inserter to be smaller?

I'm hopeful that we can do that. I'll try a bit later. I'm focused on this for now #44088 which is a blocker to move the "browse patterns" to the bottom.

@jasmussen
Copy link
Contributor

What's the "blur" that you're talking about here?

I lowered the opacity of the white bg color to make this more visible:

Screenshot 2022-09-12 at 16 04 14

It's mostly visible when the pattern flyout covers a wide range of content. We want to find a balance between the blur being visible and the content inside being legible. We can also drop that blur. CC: @SaxonF.

@youknowriad
Copy link
Contributor Author

I tested the last changes a bit, I personally preferred the gray background over the blurry white, especially in white bg themes (which I think are probably the most common). I also like the contrast between the inserter tabs (white) and the patterns list (gray)

@jasmussen
Copy link
Contributor

Alright, I restored the gray background for now, we can always revisit:

Screenshot 2022-09-13 at 08 36 01

@jameskoster
Copy link
Contributor

Quick note that this isn't working properly in the Site Editor. The pattern panel doesn't appear when clicking a category, unless you first navigate away from the Patterns tab (to Blocks for example) in the Inserter.

@jameskoster
Copy link
Contributor

A right border could help separate the pattern panel from the canvas?

Screenshot 2022-09-13 at 10 45 09

@jasmussen
Copy link
Contributor

Agreed. Let's add the right border for now:
Screenshot 2022-09-13 at 11 48 55

We can always revisit.

@youknowriad
Copy link
Contributor Author

Quick note that this isn't working properly in the Site Editor. The pattern panel doesn't appear when clicking a category, unless you first navigate away from the Patterns tab (to Blocks for example) in the Inserter.

I was not able to reproduce this.

@jameskoster
Copy link
Contributor

Here's what I'm seeing in case it helps:

bug.mp4

@youknowriad
Copy link
Contributor Author

@jameskoster yeah nvm, I managed to break it now :)

@youknowriad
Copy link
Contributor Author

@jameskoster the bug should be fixed.

@jasmussen The inserter scales down a bit now

@jasmussen
Copy link
Contributor

This is excellent!

status

I notice that there's also animation on the sidebar as it appears initially. The animation from the left side seems okay enough to indicate directionality, and it's a nice little bit of flair. However it would be good to test the performance of this with very long and complex pages, as it essentially also animates the viewport/iframe itself — I don't know if that should be expensive, it might not be? But worth testing.

But in any case, we should replace the bouncy animation with a simpler ease-out, or it becomes a bit disorienting.

Really nice work, I honestly think we can land this in short order! 🔥

@youknowriad
Copy link
Contributor Author

The only thing that I'm uncertain about and to be honest, not sure how to solve is keyboard navigation. What should be the behavior here?

@alexstine
Copy link
Contributor

@youknowriad Okay, awesome.

Focus did not end up working as I thought. You placed focus on the first item of the category list which should have worked, but sadly, it does not work due to how NVDA has changed the screen reader to behave in these situations.

The navigation landmark is a much better idea. Following improvements are needed.

  1. Remove the tabindex. Since we are working in buttons, buttons have tabindex 0 by default. Negative tabindex is breaking the ability to tab to the next button since arrow key navigation for screen readers in this context is not possible.
  2. Is there a way you can put the Explore all patterns button in the same list?

Other than that, I would be okay doing a final check after this and then green lighting it.

For the future, I guess we're going to have to wrap the inserter in a role="application" so that way we can handle the native keyboard events to Gutenberg without one of the screen readers breaking because it is deciding to not follow ARIA spec.

Nice work.

Thanks.

@youknowriad
Copy link
Contributor Author

Remove the tabindex. Since we are working in buttons, buttons have tabindex 0 by default. Negative tabindex is breaking the ability to tab to the next button since arrow key navigation for screen readers in this context is not possible.

I'm not entirely certain what tabindex are you talking about, also it seems that you're saying that we should remove the "arrow key navigation" (Composite items) from here right? Do you think you would be able to make the change as I'm not 100% clear?

Is there a way you can put the Explore all patterns button in the same list?

We can, it's close in the component tree, but it does feel very different to me in terms of interaction and behavior, in this sense, it doesn't feel like it belongs to the same list as the "categories".

@alexstine
Copy link
Contributor

@youknowriad More info.

I'm not entirely certain what tabindex are you talking about, also it seems that you're saying that we should remove the "arrow key navigation" (Composite items) from here right? Do you think you would be able to make the change as I'm not 100% clear?

You just need to remove the wrapping composite component from the pattern categories.

It's inspired by the WAI-ARIA Composite Role and implements all the keyboard navigation mechanisms to ensure that there's only one tab stop for the whole Composite element.

This is not necessary since we now have a list of buttons in a <nav> tag.

I think moving the Explore all patterns button will help out. I know it is not really a category, but we are trying to communicate relationship between navigation and what will soon be the rendered categories. The WordPress add plugins page follows the same model I think? Showing all plugins but then it is filterable? Even though all is not technically a category, it is still grouped together for better screen reader relationship.

Thanks.

@youknowriad
Copy link
Contributor Author

@alexstine I've removed the composite items, let me know how it feels now. Thanks

@alexstine
Copy link
Contributor

@youknowriad Okay, time to get picky.

<h4 data-wp-c16t="true" data-wp-component="Heading" class="components-truncate components-text components-heading css-1yv8prr e19lxcc00">Featured</h4>

Is it really necessary to have a heading here?

The pattern category links need aria-current="true".

After these two issues, we can refine some other stuff in another PR and get this one in. I mainly want to find out why constrained tabbing is acting a little weird with the role="listbox" but I would not consider that a blocker since the escape key or tab key can navigate out.

Thanks.

@youknowriad
Copy link
Contributor Author

Is it really necessary to have a heading here?

I'm following the design mockups here, that said, I can definitely make it a regular div or role="presentation" or something like that

@youknowriad
Copy link
Contributor Author

I added the aria-current

@alexstine
Copy link
Contributor

@youknowriad Regular div instead of the heading would be good. I try to avoid role="presentation" as most people do not understand it especially given how limited of a use-case it has. I would vote for clearer code if it is not too much work.

After that, this is good to go.

@youknowriad
Copy link
Contributor Author

Heading removed.

@alexstine
Copy link
Contributor

@youknowriad Signing off on the A11Y review. We'll make further improvements to the UX in the future but this now has know blocks from being tested and eventually released.

Thanks.

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥 🔥

@pierre-dickinson
Copy link

Hi @jameskoster
I'm trying to find a way to reorder the inserter tabs as seen on your screenshot. Please help me find a php or js filter to have this new default tabPanel order :

  1. Patterns
  2. Blocks
  3. Images

pattern panel from the canvas in first place ?

Screenshot 2022-09-13 at 10 45 09

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants