WordPress
Move filter UI into a toggle-able panel to improve experience on narrow viewports/containers
Fixes: https://github.com/WordPress/gutenberg/issues/60696
Adds a button to toggle the filter visibility. The button also shows the number of filters applied on the corner.
Screenshot
Testing Instructions
I verified a button to toggle the filter visibility was available and worked as expected. I verified that the count shown on the button matched the number of filters enabled and if there are no filters, the count is not shown.
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: SaxonF <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Size Change: +725 B (+0.04%)
Total Size: 1.77 MB
| Filename | Size | Change |
|---|---|---|
build/edit-site/index.min.js |
215 kB | +273 B (+0.13%) |
build/edit-site/posts-rtl.css |
6.96 kB | +116 B (+1.7%) |
build/edit-site/posts.css |
6.97 kB | +115 B (+1.68%) |
build/edit-site/style-rtl.css |
12.3 kB | +109 B (+0.89%) |
build/edit-site/style.css |
12.3 kB | +112 B (+0.92%) |
ℹ️ View Unchanged
| Filename | Size |
|---|---|
build/a11y/index.min.js |
951 B |
build/annotations/index.min.js |
2.26 kB |
build/api-fetch/index.min.js |
2.31 kB |
build/autop/index.min.js |
2.12 kB |
build/blob/index.min.js |
579 B |
build/block-directory/index.min.js |
7.29 kB |
build/block-directory/style-rtl.css |
1.01 kB |
build/block-directory/style.css |
1.01 kB |
build/block-editor/content-rtl.css |
4.56 kB |
build/block-editor/content.css |
4.56 kB |
build/block-editor/default-editor-styles-rtl.css |
394 B |
build/block-editor/default-editor-styles.css |
394 B |
build/block-editor/index.min.js |
255 kB |
build/block-editor/style-rtl.css |
16.3 kB |
build/block-editor/style.css |
16.3 kB |
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 |
149 B |
build/block-library/blocks/audio/editor.css |
151 B |
build/block-library/blocks/audio/style-rtl.css |
132 B |
build/block-library/blocks/audio/style.css |
132 B |
build/block-library/blocks/audio/theme-rtl.css |
134 B |
build/block-library/blocks/audio/theme.css |
134 B |
build/block-library/blocks/avatar/editor-rtl.css |
115 B |
build/block-library/blocks/avatar/editor.css |
115 B |
build/block-library/blocks/avatar/style-rtl.css |
104 B |
build/block-library/blocks/avatar/style.css |
104 B |
build/block-library/blocks/button/editor-rtl.css |
310 B |
build/block-library/blocks/button/editor.css |
310 B |
build/block-library/blocks/button/style-rtl.css |
538 B |
build/block-library/blocks/button/style.css |
538 B |
build/block-library/blocks/buttons/editor-rtl.css |
336 B |
build/block-library/blocks/buttons/editor.css |
336 B |
build/block-library/blocks/buttons/style-rtl.css |
328 B |
build/block-library/blocks/buttons/style.css |
328 B |
build/block-library/blocks/calendar/style-rtl.css |
240 B |
build/block-library/blocks/calendar/style.css |
240 B |
build/block-library/blocks/categories/editor-rtl.css |
132 B |
build/block-library/blocks/categories/editor.css |
131 B |
build/block-library/blocks/categories/style-rtl.css |
152 B |
build/block-library/blocks/categories/style.css |
152 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 |
122 B |
build/block-library/blocks/code/theme.css |
122 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 |
420 B |
build/block-library/blocks/columns/style.css |
420 B |
build/block-library/blocks/comment-author-avatar/editor-rtl.css |
124 B |
build/block-library/blocks/comment-author-avatar/editor.css |
124 B |
build/block-library/blocks/comment-content/style-rtl.css |
90 B |
build/block-library/blocks/comment-content/style.css |
90 B |
build/block-library/blocks/comment-template/style-rtl.css |
200 B |
build/block-library/blocks/comment-template/style.css |
199 B |
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css |
122 B |
build/block-library/blocks/comments-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/comments-pagination/editor-rtl.css |
221 B |
build/block-library/blocks/comments-pagination/editor.css |
211 B |
build/block-library/blocks/comments-pagination/style-rtl.css |
234 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 |
832 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 |
631 B |
build/block-library/blocks/cover/editor-rtl.css |
668 B |
build/block-library/blocks/cover/editor.css |
669 B |
build/block-library/blocks/cover/style-rtl.css |
1.62 kB |
build/block-library/blocks/cover/style.css |
1.6 kB |
build/block-library/blocks/details/editor-rtl.css |
65 B |
build/block-library/blocks/details/editor.css |
65 B |
build/block-library/blocks/details/style-rtl.css |
86 B |
build/block-library/blocks/details/style.css |
86 B |
build/block-library/blocks/embed/editor-rtl.css |
314 B |
build/block-library/blocks/embed/editor.css |
314 B |
build/block-library/blocks/embed/style-rtl.css |
419 B |
build/block-library/blocks/embed/style.css |
419 B |
build/block-library/blocks/embed/theme-rtl.css |
133 B |
build/block-library/blocks/embed/theme.css |
133 B |
build/block-library/blocks/file/editor-rtl.css |
326 B |
build/block-library/blocks/file/editor.css |
326 B |
build/block-library/blocks/file/style-rtl.css |
278 B |
build/block-library/blocks/file/style.css |
279 B |
build/block-library/blocks/file/view.min.js |
324 B |
build/block-library/blocks/footnotes/style-rtl.css |
198 B |
build/block-library/blocks/footnotes/style.css |
197 B |
build/block-library/blocks/form-input/editor-rtl.css |
229 B |
build/block-library/blocks/form-input/editor.css |
229 B |
build/block-library/blocks/form-input/style-rtl.css |
342 B |
build/block-library/blocks/form-input/style.css |
342 B |
build/block-library/blocks/form-submission-notification/editor-rtl.css |
344 B |
build/block-library/blocks/form-submission-notification/editor.css |
341 B |
build/block-library/blocks/form-submit-button/style-rtl.css |
69 B |
build/block-library/blocks/form-submit-button/style.css |
69 B |
build/block-library/blocks/form/view.min.js |
470 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.6 kB |
build/block-library/blocks/freeform/editor.css |
2.6 kB |
build/block-library/blocks/gallery/editor-rtl.css |
955 B |
build/block-library/blocks/gallery/editor.css |
958 B |
build/block-library/blocks/gallery/style-rtl.css |
1.71 kB |
build/block-library/blocks/gallery/style.css |
1.71 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 |
344 B |
build/block-library/blocks/group/editor.css |
344 B |
build/block-library/blocks/group/style-rtl.css |
103 B |
build/block-library/blocks/group/style.css |
103 B |
build/block-library/blocks/group/theme-rtl.css |
79 B |
build/block-library/blocks/group/theme.css |
79 B |
build/block-library/blocks/heading/style-rtl.css |
188 B |
build/block-library/blocks/heading/style.css |
188 B |
build/block-library/blocks/html/editor-rtl.css |
346 B |
build/block-library/blocks/html/editor.css |
347 B |
build/block-library/blocks/image/editor-rtl.css |
894 B |
build/block-library/blocks/image/editor.css |
892 B |
build/block-library/blocks/image/style-rtl.css |
1.59 kB |
build/block-library/blocks/image/style.css |
1.59 kB |
build/block-library/blocks/image/theme-rtl.css |
137 B |
build/block-library/blocks/image/theme.css |
137 B |
build/block-library/blocks/image/view.min.js |
1.65 kB |
build/block-library/blocks/latest-comments/style-rtl.css |
355 B |
build/block-library/blocks/latest-comments/style.css |
354 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
186 B |
build/block-library/blocks/latest-posts/editor.css |
183 B |
build/block-library/blocks/latest-posts/style-rtl.css |
509 B |
build/block-library/blocks/latest-posts/style.css |
510 B |
build/block-library/blocks/list/style-rtl.css |
107 B |
build/block-library/blocks/list/style.css |
107 B |
build/block-library/blocks/loginout/style-rtl.css |
61 B |
build/block-library/blocks/loginout/style.css |
61 B |
build/block-library/blocks/media-text/editor-rtl.css |
304 B |
build/block-library/blocks/media-text/editor.css |
303 B |
build/block-library/blocks/media-text/style-rtl.css |
516 B |
build/block-library/blocks/media-text/style.css |
515 B |
build/block-library/blocks/more/editor-rtl.css |
427 B |
build/block-library/blocks/more/editor.css |
427 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
663 B |
build/block-library/blocks/navigation-link/editor.css |
664 B |
build/block-library/blocks/navigation-link/style-rtl.css |
192 B |
build/block-library/blocks/navigation-link/style.css |
191 B |
build/block-library/blocks/navigation-submenu/editor-rtl.css |
295 B |
build/block-library/blocks/navigation-submenu/editor.css |
294 B |
build/block-library/blocks/navigation/editor-rtl.css |
2.18 kB |
build/block-library/blocks/navigation/editor.css |
2.19 kB |
build/block-library/blocks/navigation/style-rtl.css |
2.25 kB |
build/block-library/blocks/navigation/style.css |
2.23 kB |
build/block-library/blocks/navigation/view.min.js |
1.03 kB |
build/block-library/blocks/nextpage/editor-rtl.css |
392 B |
build/block-library/blocks/nextpage/editor.css |
392 B |
build/block-library/blocks/page-list/editor-rtl.css |
378 B |
build/block-library/blocks/page-list/editor.css |
378 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/editor-rtl.css |
236 B |
build/block-library/blocks/paragraph/editor.css |
236 B |
build/block-library/blocks/paragraph/style-rtl.css |
341 B |
build/block-library/blocks/paragraph/style.css |
340 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 |
527 B |
build/block-library/blocks/post-comments-form/style.css |
528 B |
build/block-library/blocks/post-content/editor-rtl.css |
74 B |
build/block-library/blocks/post-content/editor.css |
74 B |
build/block-library/blocks/post-content/style-rtl.css |
79 B |
build/block-library/blocks/post-content/style.css |
79 B |
build/block-library/blocks/post-date/style-rtl.css |
62 B |
build/block-library/blocks/post-date/style.css |
62 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
71 B |
build/block-library/blocks/post-excerpt/editor.css |
71 B |
build/block-library/blocks/post-excerpt/style-rtl.css |
155 B |
build/block-library/blocks/post-excerpt/style.css |
155 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
729 B |
build/block-library/blocks/post-featured-image/editor.css |
726 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
341 B |
build/block-library/blocks/post-featured-image/style.css |
341 B |
build/block-library/blocks/post-navigation-link/style-rtl.css |
215 B |
build/block-library/blocks/post-navigation-link/style.css |
214 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 |
399 B |
build/block-library/blocks/post-template/style.css |
398 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-time-to-read/style-rtl.css |
70 B |
build/block-library/blocks/post-time-to-read/style.css |
70 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 |
125 B |
build/block-library/blocks/preformatted/style.css |
125 B |
build/block-library/blocks/pullquote/editor-rtl.css |
134 B |
build/block-library/blocks/pullquote/editor.css |
134 B |
build/block-library/blocks/pullquote/style-rtl.css |
342 B |
build/block-library/blocks/pullquote/style.css |
342 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 |
121 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
118 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
220 B |
build/block-library/blocks/query-pagination/editor.css |
208 B |
build/block-library/blocks/query-pagination/style-rtl.css |
287 B |
build/block-library/blocks/query-pagination/style.css |
283 B |
build/block-library/blocks/query-title/style-rtl.css |
64 B |
build/block-library/blocks/query-title/style.css |
64 B |
build/block-library/blocks/query/editor-rtl.css |
452 B |
build/block-library/blocks/query/editor.css |
451 B |
build/block-library/blocks/query/view.min.js |
958 B |
build/block-library/blocks/quote/style-rtl.css |
238 B |
build/block-library/blocks/quote/style.css |
238 B |
build/block-library/blocks/quote/theme-rtl.css |
221 B |
build/block-library/blocks/quote/theme.css |
225 B |
build/block-library/blocks/read-more/style-rtl.css |
138 B |
build/block-library/blocks/read-more/style.css |
138 B |
build/block-library/blocks/rss/editor-rtl.css |
101 B |
build/block-library/blocks/rss/editor.css |
101 B |
build/block-library/blocks/rss/style-rtl.css |
288 B |
build/block-library/blocks/rss/style.css |
287 B |
build/block-library/blocks/search/editor-rtl.css |
193 B |
build/block-library/blocks/search/editor.css |
193 B |
build/block-library/blocks/search/style-rtl.css |
672 B |
build/block-library/blocks/search/style.css |
671 B |
build/block-library/blocks/search/theme-rtl.css |
113 B |
build/block-library/blocks/search/theme.css |
113 B |
build/block-library/blocks/search/view.min.js |
475 B |
build/block-library/blocks/separator/editor-rtl.css |
100 B |
build/block-library/blocks/separator/editor.css |
100 B |
build/block-library/blocks/separator/style-rtl.css |
248 B |
build/block-library/blocks/separator/style.css |
248 B |
build/block-library/blocks/separator/theme-rtl.css |
195 B |
build/block-library/blocks/separator/theme.css |
195 B |
build/block-library/blocks/shortcode/editor-rtl.css |
286 B |
build/block-library/blocks/shortcode/editor.css |
286 B |
build/block-library/blocks/site-logo/editor-rtl.css |
806 B |
build/block-library/blocks/site-logo/editor.css |
803 B |
build/block-library/blocks/site-logo/style-rtl.css |
218 B |
build/block-library/blocks/site-logo/style.css |
218 B |
build/block-library/blocks/site-tagline/editor-rtl.css |
87 B |
build/block-library/blocks/site-tagline/editor.css |
87 B |
build/block-library/blocks/site-tagline/style-rtl.css |
65 B |
build/block-library/blocks/site-tagline/style.css |
65 B |
build/block-library/blocks/site-title/editor-rtl.css |
123 B |
build/block-library/blocks/site-title/editor.css |
123 B |
build/block-library/blocks/site-title/style-rtl.css |
90 B |
build/block-library/blocks/site-title/style.css |
90 B |
build/block-library/blocks/social-link/editor-rtl.css |
338 B |
build/block-library/blocks/social-link/editor.css |
338 B |
build/block-library/blocks/social-links/editor-rtl.css |
676 B |
build/block-library/blocks/social-links/editor.css |
675 B |
build/block-library/blocks/social-links/style-rtl.css |
1.51 kB |
build/block-library/blocks/social-links/style.css |
1.5 kB |
build/block-library/blocks/spacer/editor-rtl.css |
346 B |
build/block-library/blocks/spacer/editor.css |
346 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-of-contents/style-rtl.css |
83 B |
build/block-library/blocks/table-of-contents/style.css |
83 B |
build/block-library/blocks/table/editor-rtl.css |
394 B |
build/block-library/blocks/table/editor.css |
394 B |
build/block-library/blocks/table/style-rtl.css |
640 B |
build/block-library/blocks/table/style.css |
639 B |
build/block-library/blocks/table/theme-rtl.css |
152 B |
build/block-library/blocks/table/theme.css |
152 B |
build/block-library/blocks/tag-cloud/editor-rtl.css |
63 B |
build/block-library/blocks/tag-cloud/editor.css |
63 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
266 B |
build/block-library/blocks/tag-cloud/style.css |
265 B |
build/block-library/blocks/template-part/editor-rtl.css |
393 B |
build/block-library/blocks/template-part/editor.css |
393 B |
build/block-library/blocks/template-part/theme-rtl.css |
113 B |
build/block-library/blocks/template-part/theme.css |
113 B |
build/block-library/blocks/term-description/style-rtl.css |
126 B |
build/block-library/blocks/term-description/style.css |
126 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 |
165 B |
build/block-library/blocks/text-columns/style.css |
165 B |
build/block-library/blocks/verse/style-rtl.css |
98 B |
build/block-library/blocks/verse/style.css |
98 B |
build/block-library/blocks/video/editor-rtl.css |
541 B |
build/block-library/blocks/video/editor.css |
542 B |
build/block-library/blocks/video/style-rtl.css |
192 B |
build/block-library/blocks/video/style.css |
192 B |
build/block-library/blocks/video/theme-rtl.css |
134 B |
build/block-library/blocks/video/theme.css |
134 B |
build/block-library/classic-rtl.css |
179 B |
build/block-library/classic.css |
179 B |
build/block-library/common-rtl.css |
1.1 kB |
build/block-library/common.css |
1.1 kB |
build/block-library/editor-elements-rtl.css |
75 B |
build/block-library/editor-elements.css |
75 B |
build/block-library/editor-rtl.css |
11.9 kB |
build/block-library/editor.css |
11.9 kB |
build/block-library/elements-rtl.css |
54 B |
build/block-library/elements.css |
54 B |
build/block-library/index.min.js |
217 kB |
build/block-library/reset-rtl.css |
472 B |
build/block-library/reset.css |
472 B |
build/block-library/style-rtl.css |
14.7 kB |
build/block-library/style.css |
14.7 kB |
build/block-library/theme-rtl.css |
702 B |
build/block-library/theme.css |
707 B |
build/block-serialization-default-parser/index.min.js |
1.12 kB |
build/block-serialization-spec-parser/index.min.js |
2.87 kB |
build/blocks/index.min.js |
52.4 kB |
build/commands/index.min.js |
16.1 kB |
build/commands/style-rtl.css |
955 B |
build/commands/style.css |
952 B |
build/components/index.min.js |
224 kB |
build/components/style-rtl.css |
12.1 kB |
build/components/style.css |
12.1 kB |
build/compose/index.min.js |
12.9 kB |
build/core-commands/index.min.js |
2.81 kB |
build/core-data/index.min.js |
73.1 kB |
build/customize-widgets/index.min.js |
11 kB |
build/customize-widgets/style-rtl.css |
1.35 kB |
build/customize-widgets/style.css |
1.35 kB |
build/data-controls/index.min.js |
641 B |
build/data/index.min.js |
8.98 kB |
build/date/index.min.js |
18 kB |
build/deprecated/index.min.js |
458 B |
build/dom-ready/index.min.js |
325 B |
build/dom/index.min.js |
4.65 kB |
build/edit-post/classic-rtl.css |
578 B |
build/edit-post/classic.css |
580 B |
build/edit-post/index.min.js |
12.6 kB |
build/edit-post/style-rtl.css |
2.31 kB |
build/edit-post/style.css |
2.31 kB |
build/edit-widgets/index.min.js |
17.7 kB |
build/edit-widgets/style-rtl.css |
4.2 kB |
build/edit-widgets/style.css |
4.2 kB |
build/editor/index.min.js |
100 kB |
build/editor/style-rtl.css |
9.34 kB |
build/editor/style.css |
9.33 kB |
build/element/index.min.js |
4.83 kB |
build/escape-html/index.min.js |
537 B |
build/format-library/index.min.js |
8.07 kB |
build/format-library/style-rtl.css |
476 B |
build/format-library/style.css |
476 B |
build/hooks/index.min.js |
1.54 kB |
build/html-entities/index.min.js |
445 B |
build/i18n/index.min.js |
3.58 kB |
build/interactivity/debug.min.js |
16.5 kB |
build/interactivity/file.min.js |
447 B |
build/interactivity/image.min.js |
1.78 kB |
build/interactivity/index.min.js |
13.4 kB |
build/interactivity/navigation.min.js |
1.16 kB |
build/interactivity/query.min.js |
742 B |
build/interactivity/router.min.js |
2.8 kB |
build/interactivity/search.min.js |
615 B |
build/is-shallow-equal/index.min.js |
526 B |
build/keyboard-shortcuts/index.min.js |
1.31 kB |
build/keycodes/index.min.js |
1.46 kB |
build/list-reusable-blocks/index.min.js |
2.16 kB |
build/list-reusable-blocks/style-rtl.css |
846 B |
build/list-reusable-blocks/style.css |
846 B |
build/media-utils/index.min.js |
2.92 kB |
build/modules/importmap-polyfill.min.js |
12.3 kB |
build/notices/index.min.js |
946 B |
build/nux/index.min.js |
1.59 kB |
build/nux/style-rtl.css |
749 B |
build/nux/style.css |
745 B |
build/patterns/index.min.js |
7.36 kB |
build/patterns/style-rtl.css |
687 B |
build/patterns/style.css |
685 B |
build/plugins/index.min.js |
1.81 kB |
build/preferences-persistence/index.min.js |
2.06 kB |
build/preferences/index.min.js |
2.9 kB |
build/preferences/style-rtl.css |
554 B |
build/preferences/style.css |
554 B |
build/primitives/index.min.js |
829 B |
build/priority-queue/index.min.js |
1.54 kB |
build/private-apis/index.min.js |
1.01 kB |
build/react-i18n/index.min.js |
630 B |
build/react-refresh-entry/index.min.js |
9.47 kB |
build/react-refresh-runtime/index.min.js |
6.76 kB |
build/redux-routine/index.min.js |
2.69 kB |
build/reusable-blocks/index.min.js |
2.54 kB |
build/reusable-blocks/style-rtl.css |
256 B |
build/reusable-blocks/style.css |
256 B |
build/rich-text/index.min.js |
10.1 kB |
build/router/index.min.js |
1.96 kB |
build/server-side-render/index.min.js |
1.94 kB |
build/shortcode/index.min.js |
1.4 kB |
build/style-engine/index.min.js |
2.03 kB |
build/token-list/index.min.js |
581 B |
build/url/index.min.js |
3.85 kB |
build/vendors/react-dom.min.js |
41.7 kB |
build/vendors/react-jsx-runtime.min.js |
560 B |
build/vendors/react.min.js |
4.02 kB |
build/viewport/index.min.js |
965 B |
build/warning/index.min.js |
250 B |
build/widgets/index.min.js |
7.19 kB |
build/widgets/style-rtl.css |
1.16 kB |
build/widgets/style.css |
1.16 kB |
build/wordcount/index.min.js |
1.03 kB |
The button does suggest a drop-down. I also believe we had a dropdown design for filters somewhere, though there were likely complexity reasons for this. IMO this seems okay to me, as it improves the situation, but I'll defer to Jay or others!
Thanks @jorgefilipecosta, this looks like a good start.
One quick change would be to ensure the panel is closed by default, rather than open. We might also try opening by default when filters are applied, but I don't feel as strongly about that part.
Given the visibility is now toggleable I think we can contain the filter UI within a dedicated row beneath .dataviews-filters__view-actions (we should probably rename that class too :D).
That structural change would decrease the likelihood of wrapping on narrow containers. In other words this:
Instead of this:
It feels a bit weird that we have to click the toggle to then be presented with the add filter button, no? This is in the cases where no filter is active.
Additionally should the text|global search be taken into account the active filters badge?
There is one more nuance with openedFilter. This was added initially to in order to open the filter when we add it for the first time. With these changes, if we add a filter and then toggle the filter visibility, it still opens the last inserted filter.
It feels a bit weird that we have to click the toggle to then be presented with the add filter button, no? This is in the cases where no filter is active.
Yes, I think that's a good point. When no filters are set the filter button could expose the 'Add filter' menu instead. Here's the flow:
Once filters are added it behaves like a toggle for the panel.
There is one more nuance with
openedFilter. This was added initially to in order to open the filter when we add it for the first time. With these changes, if we add a filter and then toggle the filter visibility, it still opens the last inserted filter.
Hi @ntsekouras, I think this issue is fixed.
Yes, I think that's a good point. When no filters are set the filter button could expose the 'Add filter' menu instead. Here's the flow:
Hi @jameskoster, the solution you suggested was implemented, let me know if it looks as expected.
(the end to end tests are not updated yet, but if we agree on this solution I will do the update on this PR)
This tests well and code wise looks good. Let's see the design input and see to update the tests afterwards.
This is working really well!
A couple of tiny visual tweaks:
- The gap between the Layout and Settings icon buttons is 4px. But the gap between those buttons and the Filter button is 8px. Ideally that gap should be 4px too.
- The toggle button is spilling out of its container breaking alignment with the primary action button above.
flex-shrink: 0on.dataviews-filters-toggle__containerseems to fix. - On List layout we can remove the
max-widthapplied to the search container so that it fills the available space.
This PR passed by a big rebase, but it seems now everything is working again.
Hi @jameskoster, thank you for the reviews, the first two tweaks you suggested were applied. The third one is being done on this PR https://github.com/WordPress/gutenberg/pull/63755 as it is a change to a behavior already on the trunk.
Thanks for adding those tweaks :) I'm noticing a small bug; on the Pages table, adding one filter seems to add all filter options:
https://github.com/user-attachments/assets/b1fcf10b-598c-4bed-a230-849eb93b0c49
I'm noticing a small bug; on the Pages table, adding one filter seems to add all filter options:
Hi @jameskoster, thank you for catching this it was an issue introduced during a rebase and is now fixed.
Perfect thank you for reviewing this @jameskoster, I will update the end-to-end tests in this PR to take into account this new UI.
Probably not specific to this branch, but why are we losing filters when switching the layout type (testing on pages dataviews)
I feel like there's something wrong here personally. Too much buttons and controls. Also, the quick edit should probably be last.
I also think it's more logical for the filters toggle to be closer to the "search" input (left of the bar rather than right)
Probably not specific to this branch, but why are we losing filters when switching the layout type (testing on pages dataviews)
Good catch @youknowriad, that's not an issue of this branch. I will try to fix this in a separate PR.
So should we try to reorder the items, making bulk edit the last one and the filters the first one (closer to the search)? Would that work @jameskoster, @youknowriad?
On https://github.com/WordPress/gutenberg/pull/63852 I am also moving the item size picker reducing the number of buttons/controls at the top.
Yeah let's try moving the filter button closer to the search input.
Worth noting that the 'Bulk edit' button will also be moved (https://github.com/WordPress/gutenberg/issues/63193) which will help the the over-crowding.
How do you feel about the button behaving sometimes as a dropdown menu (initial filter) and sometimes as a toggle when a filter is already applied. Should we be consistent and make it always a toggle?
How do you feel about the button behaving sometimes as a dropdown menu (initial filter) and sometimes as a toggle when a filter is already applied. Should we be consistent and make it always a toggle?
Hi @youknowriad, being always a toggle was the initial solution I proposed, but following feedback from @ntsekouras that it felt weird to need to show the filters and then press add filter https://github.com/WordPress/gutenberg/pull/63203#issuecomment-2230922691 we implemented this behavior. I think the behavior works well and is not uncommon, some applications use something similar.
Hi @youknowriad, being always a toggle was the initial solution I proposed, but following feedback from @ntsekouras that it felt weird to need to show the filters and then press add filter https://github.com/WordPress/gutenberg/pull/63203#issuecomment-2230922691 we implemented this behavior. I think the behavior works well and is not uncommon, some applications use something similar.
Ok, I guess we can try and see.
@jorgefilipecosta I reckon we could move it right next to the search input with an 8px gap between:
Hi @jameskoster the filter toggle/add button is now at the side of the search as suggested.
I pushed a tiny style tweak to the count.
There's only one small issue I see outstanding: The filter panel visibility persists as you navigate between different views. IE if I open the panel on one view, it stays open when I navigate to a different view. Ideally each view treats the open/close state dependently. Would that be possible?