WordPress
Redesign the main pattern inserter
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
https://user-images.githubusercontent.com/272444/189339119-c3f787ad-65ae-4af9-af35-3e1936c15c3b.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:
- [x] Address keyboard navigation properly.
- [x] Potentially render a different component in mobile (Navigation pattern like the styles sidebar).
- [x] Design tweaks: It's proving challenging to position the "explore all" button at the bottom of the inserter consistently.
- [x] Tests.
Testing Instructions
- Open the inserter
- Open the patterns tab
- Play with it
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 |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
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
Any thoughts?
@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.
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.
As a single PR, this feels incredible already:
A few small tweaks I think we can make. The "Explore all patterns" button:
can we make it more like the "Manage your library" button here?
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:
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 đ¤
Alright a couple of quick mockups.
- 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:
Let me know if you'd like me to try and push some of the border/background-color/filter tweaks!
@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.
I pushed a little bit of polish around paddings, border, background colors, styles. It now looks like this:
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?
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.
What's the "blur" that you're talking about here?
I lowered the opacity of the white bg color to make this more visible:
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.
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)
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.
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.
Here's what I'm seeing in case it helps:
https://user-images.githubusercontent.com/846565/189886970-edbbd639-0feb-4c8c-aa38-765c9a6e9706.mp4
@jameskoster the bug should be fixed.
@jasmussen The inserter scales down a bit now
This is excellent!
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! đĨ
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?
Would arrow key up/down and left/right work?
https://user-images.githubusercontent.com/1204802/189896206-dcbbd1a1-330f-472a-96f0-e9af76bd5066.mov
@jasmussen I think that's probably the best option but the code will be pretty ugly because the design is not straightforward like regular menus, the panel and the list are a bit separated in the components tree...
Would a modal behavior be simpler? I.e. click the category and focus is set in the flyout?
Would a modal behavior be simpler? I.e. click the category and focus is set in the flyout?
Simpler to implement yes, that's what I've already tried but there's something broken right now. I think
I tried a different transition duration, let me know if the animation is better now.
Button looks good. I'd love to polish it to be the same style as the "Style variation picker" button, but I for simplicity we can keep it like this for now.
The animation looks much better, nice!
Modal behavior for the flyout seems good, though indeed there does seem to be something buggy with it, pressing escape doesn't close it, and it seems like I have to press tab only once and then use arrow keys, lest the thing closes. This seems like the final thing we need to fix then this can land.
I'd love to polish it to be the same style as the "Style variation picker" button
Could we maybe formalize this into a variant or something to avoid reinventing new styles for each UI piece.