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

Graduate data view options out of a menu to allow more design expression #64175

Merged
merged 18 commits into from
Aug 7, 2024

Conversation

jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented Aug 1, 2024

This PR implements the new view config UI proposed at #63872.
To keep this PR manageable and not very big we just port the existing functionality of the old dropdown menu. (Change some parameters, and hide/show fields).
Things like moving the item size picker for the grid into the popover, or sort directly on the field list will come as follow-ups.

This PR tries to implement the patterns specified in #63624.
SettingsSection has container queries to make the component responsive depending on the size of the container.

Screenshots

Screenshot 2024-08-01 at 17 11 34 Screenshot 2024-08-01 at 17 12 04

cc: @jameskoster

Testing Instructions

I verified I could configure all the fields and things worked as expected.
Using the browser inspector I added the following CSS rule:

.dataviews-view-config {
    width: 650px !important;
}

I verified I got the responsive behavior shown above.

Copy link

github-actions bot commented Aug 1, 2024

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 <jorgefilipecosta@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@jorgefilipecosta jorgefilipecosta added the [Type] Enhancement A suggestion for improvement. label Aug 1, 2024
Copy link

github-actions bot commented Aug 1, 2024

Size Change: +1.03 kB (+0.06%)

Total Size: 1.77 MB

Filename Size Change
build/block-editor/style-rtl.css 16.3 kB -34 B (-0.21%)
build/block-editor/style.css 16.3 kB -33 B (-0.2%)
build/components/style-rtl.css 12.1 kB +18 B (+0.15%)
build/components/style.css 12.1 kB +17 B (+0.14%)
build/edit-site/index.min.js 216 kB +386 B (+0.18%)
build/edit-site/posts-rtl.css 7.39 kB +164 B (+2.27%)
build/edit-site/posts.css 7.39 kB +163 B (+2.26%)
build/edit-site/style-rtl.css 12.7 kB +155 B (+1.23%)
build/edit-site/style.css 12.7 kB +158 B (+1.26%)
build/editor/index.min.js 101 kB +41 B (+0.04%)
ℹ️ 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.58 kB
build/block-editor/content.css 4.58 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-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 233 B
build/block-library/blocks/quote/theme.css 236 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 708 B
build/block-library/theme.css 712 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/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.82 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/style-rtl.css 9.36 kB
build/editor/style.css 9.35 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.09 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.3 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.78 kB
build/interactivity/index.min.js 13.2 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.37 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

compressed-size-action

@youknowriad
Copy link
Contributor

Great start. I've been testing this and it works well.

  • Personally, I'm not sure the "layout type" should be part of the dropdown though. It deserves more prominence and also, it will have an impact on the dropdown's content later.
  • I found myself missing the reordering feature (arrows to move fields)
  • Do you expect to implement the grid density slider in the dropdown in a follow-up PR?

font-size: $helptext-font-size;
font-style: normal;
color: $gray-700;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm a bit surprised by the number of styles that we need to make this look correct. Do we need all these "widths", "margins", "paddings"... Why our default components don't work well? What's missing as a UI component to render that dropdown?

Copy link
Contributor

Choose a reason for hiding this comment

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

Reading the code again, it seems mostly about the SettingsSection component. I would suggest extract this component to its own folder dataviews/src/components/fieldset or something to start with and IMO, this should be a UI component like a Fieldset component or something. I also wonder if it should be using a fieldset + legend element (not entirely sure)

Copy link
Member

Choose a reason for hiding this comment

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

We could be able to save some of these styles by using the Text component.

@jameskoster
Copy link
Contributor

Nice work Jorge, this is working really well already imo.

Personally, I'm not sure the "layout type" should be part of the dropdown though. It deserves more prominence and also, it will have an impact on the dropdown's content later.

Yes, I don't think we should remove the top-level layout switcher.

The thinking behind including it in the popover is that it would give context to some of the layout-specific options that appear conditionally, like grid density. However seeing it in practise the jump when switching to list layout is a bit extreme.

Let's leave the layout switcher as it is for now.

I found myself missing the reordering feature (arrows to move fields)

This isn't on trunk, so probably fine to add separately? If we do, we should update the description so it doesn't mention re-ordering :)

@jorgefilipecosta instead of toggling the opacity on the visibility button, could we toggle the icon instead (between seen and unseen)?

The spacing in the ItemGroup is a bit clunky. It's not something to address here, but in the component. I know it's on @WordPress/gutenberg-components' list, but wanted to note another occurrence.


I'd appreciate feedback from @WordPress/gutenberg-design on the idea of referring to fields as 'properties'. It feels more user-friendly to me, especially with one eye on content modelling.

@jameskoster
Copy link
Contributor

I pushed a couple of minor style adjustments.

@jameskoster
Copy link
Contributor

jameskoster commented Aug 2, 2024

@jorgefilipecosta one small styling discrepancy I couldn't figure out... the grid seems to be correct, but the dimensions are off. Notice that the inputs are narrower than the title + description section:

Screenshot 2024-08-02 at 18 03 45

Edit: It seems to be caused by https://github.com/WordPress/gutenberg/pull/64175/files#diff-852fc67313b211cde3af980172ba9c5410fda0faaf11128fe3990a3afb0445b6R34-R36. I'll look into it next week unless you get there first :)

@jorgefilipecosta
Copy link
Member Author

Hi @jameskoster, good catch.
The fields are not using a grid.
But title/description and fields use a grid with 4fr 8fr dimensions. If the fields were correctly divided in two they would also have a 4fr dimension being the same size as title/description. We are probably missing some padding margin on a calculation somewhere I can look into this.

@jameskoster
Copy link
Contributor

Maybe we can use css sub grid? Here's a codepen that seems to work.

Screenshot 2024-08-02 at 20 49 40

Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

I've left some drive-by comments as I was responding to a specific ping.

The spacing in the ItemGroup is a bit clunky. It's not something to address here, but in the component. I know it's on @WordPress/gutenberg-components' list, but wanted to note another occurrence.

@jameskoster could you please elaborate on the spacing issues you're seeing? Yes, we've been meaning to do some unification of the menu and item components (see #35210) plus some general flexibility and integration improvements to ItemGroup (see #34709) but I'm not sure we're aware of any spacing issues, specifically.

...defaultLayouts[ newLayout ],
} );
}
throw new Error( 'Invalid dataview' );
Copy link
Member

Choose a reason for hiding this comment

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

Do we really want to throw errors in an onChange handler? I'd expect a warning() or something less invasive. I see this was here before, so just something to keep in mind.

Copy link
Member Author

Choose a reason for hiding this comment

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

Good point, I followed what we had without thinking much but a warning seems like a better option. The code was updated 👍

@@ -58,6 +58,10 @@ export const sortLabels = {
asc: __( 'Sort ascending' ),
desc: __( 'Sort descending' ),
};
export const sortLabelsShort = {
asc: __( 'ASC' ),
Copy link
Member

Choose a reason for hiding this comment

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

AFAIK we rarely capitalize strings; instead, capitalization is achieved cosmetically with CSS.

Also, note that this can be problematic for translation in some languages. If we can, I'd recommend we use the full words (ascending / descending)

Copy link
Member Author

Choose a reason for hiding this comment

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

I updated the code to use CSS as suggested. Regarding using full words (ascending / descending), in this case, it would break the design:
Screenshot 2024-08-06 at 14 06 21

I added a translation context, that also specifies a character limit for the short labels.

Copy link
Member

Choose a reason for hiding this comment

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

@jorgefilipecosta thanks for the screenshot. This is exactly what will happen with the translations, if folks start translating and there's no good abbreviation in their language.

I wonder if a worthy alternative is to use icons instead of ASC/DESC text labels. We have a few up/down arrow icons available that we could use here. @jameskoster WDYT?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yup, let's try an icon :)

</DropdownMenu>
<Grid columns={ 2 } className="dataviews-settings-section" gap={ 4 }>
<VStack spacing={ 0 }>
<h2 className="dataviews-settings-section__title">{ title }</h2>
Copy link
Member

Choose a reason for hiding this comment

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

Maybe we can use the __experimentalHeading component for these headings? Could perhaps save some custom styles.

Copy link
Member Author

Choose a reason for hiding this comment

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

The code was updated and indeed it allows us to remove some custom css.

font-size: $helptext-font-size;
font-style: normal;
color: $gray-700;
}
Copy link
Member

Choose a reason for hiding this comment

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

We could be able to save some of these styles by using the Text component.

@jameskoster
Copy link
Contributor

@jameskoster could you please elaborate on the spacing issues you're seeing?

@tyxla it relates mostly to the dimensions. Most interactive elements follow a 24/32/40px sizing scale for height, but due to the unconventional padding on Item we often see peculiar heights. In this case each Item is 48.8px. In Global Styles, the Items in shadow management and 'Elements' UIs are 41.8px tall. Items in font lists are 44px. And so on. It's all just very inconsistent.

@tyxla
Copy link
Member

tyxla commented Aug 5, 2024

@tyxla it relates mostly to the dimensions. Most interactive elements follow a 24/32/40px sizing scale for height, but due to the unconventional padding on Item we often see peculiar heights. In this case each Item is 48.8px. In Global Styles, the Items in shadow management and 'Elements' UIs are 41.8px tall. Items in font lists are 44px. And so on. It's all just very inconsistent.

Got it. cc @mirka who has been working on the transition for the 40px component sizes.

@jorgefilipecosta
Copy link
Member Author

Maybe we can use css sub grid? Here's a codepen that seems to work.

Screenshot 2024-08-02 at 20 49 40

Thank you a lot for the grid sample provided @jameskoster. I updated the code to use something similar to what you suggested and the dimensions issue you noticed is now fixed.

@jorgefilipecosta
Copy link
Member Author

Thank you for the review @tyxla, I have addressed the feedback provided.

@jorgefilipecosta
Copy link
Member Author

Great start. I've been testing this and it works well.

  • Personally, I'm not sure the "layout type" should be part of the dropdown though. It deserves more prominence and also, it will have an impact on the dropdown's content later.
  • I found myself missing the reordering feature (arrows to move fields)
  • Do you expect to implement the grid density slider in the dropdown in a follow-up PR?

Hi @youknowriad, the PR was updated and the layout type was left as is.

I will prioritize working on reordering and grid density in the popover as follow-up tasks. The main objective of this PR is to simply implement the popover with the existing functionality of the menu without making it too extensive.

@jorgefilipecosta
Copy link
Member Author

Hi @jameskoster,

@jorgefilipecosta instead of toggling the opacity on the visibility button, could we toggle the icon instead (between seen and unseen)?

I made that update, I think this PR should be ready for another look.

__nextHasNoMarginBottom
__next40pxDefaultSize
isBlock
label={ __( 'Order' ) }
Copy link
Contributor

Choose a reason for hiding this comment

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

If I click the "sort by" label, the select is focused properly, so the label is working properly but it's not the case for "Order" or "Items per page". I expect the button group (or the first button) to be focused. It seems we might have an issue in the component. cc @tyxla

Copy link
Member

Choose a reason for hiding this comment

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

I have thought about this, but I'm not sure on what basis we would want to implement that behavior. Usually we do it for accessibility (i.e. increase the click target on things like checkboxes and radios, or because "the browser does it by default" when an input is properly associated with a label). In the case of compound components like ToggleGroupControl, I don't think there's a click target issue, and since in normal HTML semantics the label would actually be associated with a radiogroup/group, or be a legend in a fieldset, that kind of click-to-focus behavior would not happen.

So the only reason to add click-label-to-focus on compound components would be for UX reasons (consistency), which may possibly be bad for accessibility due to being non-standard 🤔

Copy link
Member

Choose a reason for hiding this comment

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

The behavior here is expected AFAIK, because the underlyingToggleGroupControl behaves like a radiogroup with radio buttons. You can see an example with actual radio buttons here: https://ariakit.org/components/radio where you can tab into and out of the component with Tab / Shift + Tab, and you can use the arrows to select a different radio button.

If you're referencing the focus styles, this is another thing: we've been debating this in #63450 (comment) and decided to not move the focus to the ToggleGroupControlOption because, it a nutshell, it would look odd with the selected style. We can always re-evaluate that if you feel like it was not the best path forward.

Copy link
Contributor

Choose a reason for hiding this comment

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

So the only reason to add click-label-to-focus on compound components would be for UX reasons (consistency), which may possibly be bad for accessibility due to being non-standard 🤔

Yes, that's my point for a user, it's a single control, just like the others in the form. It's not really clear why there's a different between these controls and the "sort by" for instance.

I can live with that for now, but for me it's still a bug and there should be a way to fix the UX without breaking the a11y IMO.

@jameskoster
Copy link
Contributor

One small change; we can probably leave out the descriptions for now. I tried to remove them but got an error. To be clear; in SettingsSection the description should be optional :)

@@ -0,0 +1,43 @@
.dataviews-view-config {
width: 363px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's make this a bit narrower for now, and align to the 4px baseline. 320px works well.


.dataviews-settings-section__title.dataviews-settings-section__title {
line-height: $grid-unit-30;
font-size: 15px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Not something to address here, but it would be great to update the Text / Heading components to support type styles so that we can avoid this kind of css. cc @tyxla.

Copy link
Member

Choose a reason for hiding this comment

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

I believe both the Text and the Heading components accept a size prop that you can use:

<Heading size={ 18 } />My heading</Heading>
<Text size={ 13 } />My text</Text>

Now, I can argue whether doing this is a good idea. Specifying an arbitrary size can work against our efforts to bring consistency across the editor. Ideally, you would use one of the available level values of Heading (1 to 6), and Text would be consistent across the editor.

cc @WordPress/gutenberg-components in case anyone else has further thoughts.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yup, ideally we move away from arbitrary sizes entirely. I know it's no small task though.

Copy link
Contributor

Choose a reason for hiding this comment

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

What @jameskoster said 💯

@jorgefilipecosta jorgefilipecosta merged commit b647825 into trunk Aug 7, 2024
59 of 61 checks passed
@jorgefilipecosta jorgefilipecosta deleted the update/new-view-config-UI branch August 7, 2024 17:35
@jorgefilipecosta jorgefilipecosta added the [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond label Aug 7, 2024
@github-actions github-actions bot added this to the Gutenberg 19.0 milestone Aug 7, 2024
onClick={ () => setIsShowingViewPopover( true ) }
/>
{ isShowingViewPopover && (
<Popover
Copy link
Contributor

Choose a reason for hiding this comment

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

Do you know why we're using Popover (too low level) here, instead of Dropdown ?

The reason I'm asking is that I see a lot of differences between this dropdown and the "layout type dropdown"

  • The spacing is not the same between the anchor and the popover
  • The behavior is not the same: one dropdown disabled everything behind it (inhert, disables scrolling...) and the other doesn't

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants