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

Try: Improved tabbed sidebar styles #61974

Merged
merged 4 commits into from
Aug 7, 2024

Conversation

DaniGuardiola
Copy link
Contributor

@DaniGuardiola DaniGuardiola commented May 24, 2024

I've removed the "balanced" tabs styles, as it overrides the built-in Tabs styles - we're trying to avoid and remove style overrides in the components package for many reasons. @afercia discussed tabs styles here: #62025

If we want these styles to be an option for Tabs, then it should be proposed, discussed and implemented in the Tabs component directly. These styles, though, present some problems beyond aesthetic concerns, notably it could behave badly in other languages since the length of the labels is unpredictable (see @afercia's comment: #61974 (comment))

Before:

chrome_DItpzeDWwt.mp4

After:

image image

Note that this PR also removes a few styles that were completely redundant (basically all but the negative bottom margin).

Copy link

github-actions bot commented May 24, 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: DaniGuardiola <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: scruffian <[email protected]>
Co-authored-by: ciampo <[email protected]>

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

@DaniGuardiola DaniGuardiola requested review from a team and ramonjd and removed request for a team May 24, 2024 18:22
@DaniGuardiola DaniGuardiola added [Type] Enhancement A suggestion for improvement. [Package] Block editor /packages/block-editor labels May 24, 2024
Copy link

github-actions bot commented May 24, 2024

Size Change: -65 B (0%)

Total Size: 1.76 MB

Filename Size Change
build/block-editor/style-rtl.css 16.1 kB -33 B (-0.2%)
build/block-editor/style.css 16.1 kB -32 B (-0.2%)
ℹ️ 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.59 kB
build/block-editor/content.css 4.59 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 254 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 958 B
build/block-library/blocks/gallery/editor.css 962 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 402 B
build/block-library/blocks/group/editor.css 402 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 862 B
build/block-library/blocks/image/editor.css 861 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 204 B
build/block-library/blocks/latest-posts/editor.css 204 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/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.2 kB
build/block-library/blocks/navigation/editor.css 2.21 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-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 141 B
build/block-library/blocks/post-excerpt/style.css 141 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-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 71 B
build/block-library/blocks/site-title/style.css 71 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/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/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 553 B
build/block-library/blocks/video/editor.css 554 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 216 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.6 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.3 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 221 kB
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.81 kB
build/core-data/index.min.js 72.8 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-site/index.min.js 213 kB
build/edit-site/posts-rtl.css 6.78 kB
build/edit-site/posts.css 6.79 kB
build/edit-site/style-rtl.css 12 kB
build/edit-site/style.css 12 kB
build/edit-widgets/index.min.js 17.6 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/editor/index.min.js 99.3 kB
build/editor/style-rtl.css 9.32 kB
build/editor/style.css 9.32 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 506 B
build/format-library/style.css 505 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

compressed-size-action

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.

To be fair, I prefer how it was before.

From what I understand, we try to keep the tabs occupying all the horizontal space, which made even more visual sense when the X button wasn't there. Even with the X button though, it's OK for them to be wider and occupying more space, there's not much else to do with that space and folks are likely used to have larger inserter category tabs.

This is something @WordPress/gutenberg-design should have a good sense about.

@noisysocks noisysocks added the Needs Design Feedback Needs general design feedback. label May 28, 2024
@noisysocks noisysocks requested a review from jasmussen May 28, 2024 03:07
@jasmussen
Copy link
Contributor

Thanks for your attention to detail. There's an ongoing conversation about these changes, maybe @richtabor has more info.

Base automatically changed from fix/editor-inserted-tabs-indicator to trunk May 28, 2024 14:33
@richtabor
Copy link
Member

There is a discrepancy between the tabs in the Inserter and the Inspector, but I am cautious to reduce the surface area of the Inserter tabs.

Here's the state of the tabs:

Current:

Inserter Inspector
CleanShot 2024-05-30 at 16 47 38 CleanShot 2024-05-30 at 16 47 45

CleanShot 2024-05-30 at 17 03 38

Proposed:

Inserter Inspector
CleanShot 2024-05-30 at 17 00 23 CleanShot 2024-05-30 at 17 00 38

CleanShot 2024-05-30 at 17 01 37

@richtabor
Copy link
Member

And here's a counter, if we applied the same positioning logic that exists in the Inserter to the Inspector tabs:

CleanShot 2024-05-30 at 17 04 51

Not a formal proposal; an exploration.

@DaniGuardiola
Copy link
Contributor Author

Thanks for the visuals, very helpful @richtabor. I think I strongly prefer the first option, personally.

@afercia
Copy link
Contributor

afercia commented Jun 5, 2024

There is a discrepancy between the tabs in the Inserter and the Inspector,

Yes, and I reported the inconsistencies in #62025

To me, tabs should have the same alignment / layout everywhere.

Worth reminding the X close button is candidate to be removed from there, as it breaks the ARIA tabs pattern. See #59013 / #58940

As per @DaniGuardiola proposal in this PR, I support the left alignment option. To me, it doesn't make much sense attempting to have a balanced equal width because the length of the tabs content is not predictable. It may look nice in English, which usually has shorter strings, but it's a bit pointless with longer / uneven strings in other languages.

@tyxla
Copy link
Member

tyxla commented Jun 5, 2024

If the consensus is in favor of the left-aligned instead of balanced-width tabs, I'm fine with that 👍

@scruffian
Copy link
Contributor

To me, tabs should have the same alignment / layout everywhere.

This is the aim of the component I am proposing in #62343

@DaniGuardiola DaniGuardiola changed the title Try: Improved editor inserter tabs styles Try: Improved tabbed sidebar styles Jul 24, 2024
@DaniGuardiola
Copy link
Contributor Author

I've updated the PR after @scruffian's work to unify sidebar, and also edited the description to more clearly state the issues and how this PR addresses it. I'd like to seek some consensus around this to hopefully make a decision.

cc @WordPress/gutenberg-design @WordPress/gutenberg-components @richtabor @tyxla @afercia

@jameskoster
Copy link
Contributor

There are also these tabs in the Inspector:

Screenshot 2024-07-25 at 09 46 48

I agree the behavior should be consistent across. The example above would look quite strange if the icons were aligned left.

Looking at the component objectively, centrally aligning the label seems simplest, likely with a prop to specify when the row should fill the container or not.

Fill Do not fill
Screenshot 2024-07-25 at 09 45 11 Screenshot 2024-07-25 at 09 45 24
Used by: Block settings/styles Used by: Inserter, Document/Block tabs in the Inspector

There could also be a prop to left-align the label/icon, but I'm not entirely convinced it's worth the added complexity.

@afercia
Copy link
Contributor

afercia commented Jul 25, 2024

There are also these tabs in the Inspector:

Screenshot 2024-07-25 at 09 46 48

Yes, and the Navigation block shows 3 icon-tabs:

Screenshot 2024-07-25 at 14 15 21

I have a solution for that: use text instead of icons by default 🥳
That would be better for accessibility and would also be consistent with the tabs at the top of the panel.

Worth reminding that enabling the 'Show button text labels' preference already switches those tab icons to text, and the alignment is still inconsistent:

Screenshot 2024-07-25 at 14 18 51

@DaniGuardiola
Copy link
Contributor Author

DaniGuardiola commented Jul 25, 2024

I think those tabs are a different (but definitely related) issue. This PR focuses on the tabbed sidebar layout, currently only present in inserter and list view, but planned for other similar sidebars across the app (see #62343 for full context). I personally feel like what needs to be consistent is this component (tabbed sidebar), and it doesn't feel weird if other tabs like that example have a different layout (especially since it is already quite different by having icon labels instead of text).

With that in mind, and if we agree on that, I'm happy to discuss more about those tabs. My hunch is that it might justify a "balanced" variant for icon-based tabs, some notes:

centrally aligning the label seems simplest

I agree. I think for this "balanced" variant, labels (in this case icons) should indeed be centered.

Worth reminding that enabling the 'Show button text labels' preference already switches those tab icons to text

Agreed. I think the variant should probably revert to the default "left-aligned" layout when the preference is enabled. Feels like it should be implemented at the usage/product level though, and not at the component level, since the preference is a product-level feature.

@afercia
Copy link
Contributor

afercia commented Jul 26, 2024

I personally feel like what needs to be consistent is this component (tabbed sidebar), and it doesn't feel weird if other tabs like that example have a different layout

I'd agree the inconsistent layout with other tabs isn't a blocker for this PR, which is an improvement. I'd encourage to moev on with this PR as long as there is a follow-up to better consider consistent alignment for all tabs across the entire editor UI.

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'm generally in favor of the approach here, since it contributes to a more consistent tabs behavior across the editor and less custom styles and overrides.

However, before we move forward, it would be nice to have a consensus on the design approach, especially as far as those icon-only tabs.

@ciampo
Copy link
Contributor

ciampo commented Jul 29, 2024

likely with a prop to specify when the row should fill the container or not.

@jameskoster Probably something to add to a hypothetical issue on whether Tabs should allow for tabs overflowing its layout. We need to find the right balance between using props, and just empowering users of the components to apply their layout preferences via CSS to the individual compound components.

@jameskoster
Copy link
Contributor

In terms of design, the question to answer is whether to apply the 'fill' prop in these contexts or not. In other words which is preferred between:

Fill No fill
Screenshot 2024-08-06 at 11 13 22 Screenshot 2024-08-06 at 11 13 51

Personally I wouldn't consider that decision a blocker to this PR.

@jasmussen
Copy link
Contributor

Although for icon-only tabs, they should be centered, the centered text in the fullwide tabs feels awkward. That's either an argument for no fill, or for left-aligned in the tabs by default, with the centered option an exception, or a combination of both.

@jameskoster
Copy link
Contributor

Ideally we should figure out which options the component should offer and go from there.

We know we want fill-with-centered contents for the block settings toolbar so this should be built into the component.

The fill-with-left-aligned-contents is dubious imo. It only really seems to exist to align the tab first label with the contents below in the Inserter / Inspector. This is an exception, which is fine, but doesn't really make sense as a component option.

To unlock this work I'd propose;

  • Update the tab component so consumers are able to use a 'fill' layout.
    • In this layout the tab contents are centrally aligned.
  • By default tabs will 'hug' their contents.
  • Update the Inserter tab instance to either:
    • Use the 'fill' layout with an override to left-align the text.
    • Use the default 'hug' layout.

@DaniGuardiola
Copy link
Contributor Author

DaniGuardiola commented Aug 6, 2024

Thank you for your comments. I like your proposal @jameskoster, though practically speaking if we go for "Update the Inserter tab instance to > Use the default 'hug' layout" then implementing the "fill" variant is not a blocker for this specific PR. I strongly prefer this resolution personally, and it's also the simplest:

image

@jameskoster
Copy link
Contributor

The issue with merging this first is that there will be an interim where the inserter tabs are narrower, which could be seen as a visual regression. Personally I think it's okay, so long as we address the other issues reasonably quickly, but I'd welcome more thoughts from @WordPress/gutenberg-design.

@DaniGuardiola
Copy link
Contributor Author

@jameskoster yes, to be clear I'm proposing that we go with that option ("Update the Inserter tab instance to > Use the default 'hug' layout"), not just temporarily. If so, "fill" is not a blocker here, and tabs being narrower is not a regression but just a "permanent" update. I hope that clarifies what I meant?

@jameskoster
Copy link
Contributor

not just temporarily

Right, that's the part we need design consensus on. Is the following acceptable:

Screenshot 2024-08-07 at 12 41 07

It's fine with me, to be honest, but I don't have a full history around the design of this UI. Hopefully @jasmussen can help make this decision.

@jasmussen
Copy link
Contributor

Sure let's try it.

In general we should avoid centered text, so I think that does need followups. But all these pieces need followup, so that wouldn't be a blocker.

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.

Glad to see some consensus on the design side 👍

Just confirming, while the text tabs are no longer balanced, the tabs with icons remain balanced, which makes sense and looks good IMHO:

Screenshot 2024-08-07 at 16 26 45

Thanks for the cleanup @DaniGuardiola, looks great 🚀

@DaniGuardiola DaniGuardiola merged commit fd540c3 into trunk Aug 7, 2024
64 checks passed
@DaniGuardiola DaniGuardiola deleted the fix/editor-inserter-tabs-styles branch August 7, 2024 15:52
@github-actions github-actions bot added this to the Gutenberg 19.0 milestone Aug 7, 2024
@DaniGuardiola
Copy link
Contributor Author

DaniGuardiola commented Aug 8, 2024

@WordPress/gutenberg-design "fill" implementation #64371

cc @jameskoster @jasmussen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. [Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants