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

Tabs: Try a simpler tab focus style, alt #46276

Merged
merged 7 commits into from
Dec 8, 2022
Merged

Tabs: Try a simpler tab focus style, alt #46276

merged 7 commits into from
Dec 8, 2022

Conversation

jasmussen
Copy link
Contributor

What?

Alternative to #46030. Explores a simpler tab focus style that isn't as heavy as it currently is.

Before:

After:
tabs

Testing Instructions + Testing Instructions for Keyboard

Navigate through tabs in the inspector and inserter and observe the simpler focus style. Be sure to test also the vertical orientation: https://wordpress.github.io/gutenberg/?path=/story/components-tabpanel--default&args=orientation:vertical — focus style should be the same.

@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. [Feature] UI Components Impacts or related to the UI component system [a11y] Keyboard & Focus CSS Styling Related to editor and front end styles, CSS-specific issues. labels Dec 2, 2022
@jasmussen jasmussen requested a review from ciampo December 2, 2022 12:19
@jasmussen jasmussen requested a review from ajitbohra as a code owner December 2, 2022 12:19
@jasmussen jasmussen self-assigned this Dec 2, 2022
@github-actions
Copy link

github-actions bot commented Dec 2, 2022

Size Change: -6.23 kB (0%)

Total Size: 1.32 MB

Filename Size Change
build/block-directory/style-rtl.css 1.04 kB +1 B (0%)
build/block-directory/style.css 1.04 kB +2 B (0%)
build/block-editor/content-rtl.css 2.71 kB +1 B (0%)
build/block-editor/default-editor-styles-rtl.css 403 B +2 B (0%)
build/block-editor/default-editor-styles.css 403 B +2 B (0%)
build/block-editor/index.min.js 181 kB +246 B (0%)
build/block-editor/style-rtl.css 14.5 kB +22 B (0%)
build/block-editor/style.css 14.5 kB +22 B (0%)
build/block-library/blocks/archives/editor-rtl.css 61 B -46 B (-43%) 🎉
build/block-library/blocks/archives/editor.css 60 B -46 B (-43%) 🎉
build/block-library/blocks/archives/style-rtl.css 90 B -39 B (-30%) 🎉
build/block-library/blocks/archives/style.css 90 B -39 B (-30%) 🎉
build/block-library/blocks/audio/editor-rtl.css 150 B -35 B (-19%) 👏
build/block-library/blocks/audio/editor.css 150 B -35 B (-19%) 👏
build/block-library/blocks/audio/style-rtl.css 122 B -36 B (-23%) 🎉
build/block-library/blocks/audio/style.css 122 B -36 B (-23%) 🎉
build/block-library/blocks/audio/theme-rtl.css 138 B -34 B (-20%) 🎉
build/block-library/blocks/audio/theme.css 138 B -34 B (-20%) 🎉
build/block-library/blocks/avatar/editor-rtl.css 116 B -38 B (-25%) 🎉
build/block-library/blocks/avatar/editor.css 116 B -38 B (-25%) 🎉
build/block-library/blocks/avatar/style-rtl.css 84 B -42 B (-33%) 🎉
build/block-library/blocks/avatar/style.css 84 B -42 B (-33%) 🎉
build/block-library/blocks/block/editor-rtl.css 305 B -33 B (-10%) 👏
build/block-library/blocks/block/editor.css 305 B -33 B (-10%) 👏
build/block-library/blocks/button/editor-rtl.css 485 B -32 B (-6%)
build/block-library/blocks/button/editor.css 485 B -32 B (-6%)
build/block-library/blocks/button/style-rtl.css 532 B -34 B (-6%)
build/block-library/blocks/button/style.css 532 B -34 B (-6%)
build/block-library/blocks/buttons/editor-rtl.css 337 B -36 B (-10%) 👏
build/block-library/blocks/buttons/editor.css 337 B -36 B (-10%) 👏
build/block-library/blocks/buttons/style-rtl.css 332 B -36 B (-10%) 👏
build/block-library/blocks/buttons/style.css 332 B -36 B (-10%) 👏
build/block-library/blocks/calendar/style-rtl.css 239 B -31 B (-11%) 👏
build/block-library/blocks/calendar/style.css 239 B -31 B (-11%) 👏
build/block-library/blocks/categories/editor-rtl.css 84 B -41 B (-33%) 🎉
build/block-library/blocks/categories/editor.css 83 B -41 B (-33%) 🎉
build/block-library/blocks/categories/style-rtl.css 100 B -38 B (-28%) 🎉
build/block-library/blocks/categories/style.css 100 B -38 B (-28%) 🎉
build/block-library/blocks/code/editor-rtl.css 53 B -49 B (-48%) 🎉
build/block-library/blocks/code/editor.css 53 B -49 B (-48%) 🎉
build/block-library/blocks/code/style-rtl.css 121 B -38 B (-24%) 🎉
build/block-library/blocks/code/style.css 121 B -38 B (-24%) 🎉
build/block-library/blocks/code/theme-rtl.css 124 B -36 B (-22%) 🎉
build/block-library/blocks/code/theme.css 124 B -36 B (-22%) 🎉
build/block-library/blocks/columns/editor-rtl.css 108 B -39 B (-27%) 🎉
build/block-library/blocks/columns/editor.css 108 B -39 B (-27%) 🎉
build/block-library/blocks/columns/style-rtl.css 406 B -36 B (-8%)
build/block-library/blocks/columns/style.css 406 B -36 B (-8%)
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B -38 B (-23%) 🎉
build/block-library/blocks/comment-author-avatar/editor.css 125 B -38 B (-23%) 🎉
build/block-library/blocks/comment-content/style-rtl.css 92 B -42 B (-31%) 🎉
build/block-library/blocks/comment-content/style.css 92 B -42 B (-31%) 🎉
build/block-library/blocks/comment-template/style-rtl.css 199 B -38 B (-16%) 👏
build/block-library/blocks/comment-template/style.css 198 B -38 B (-16%) 👏
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B -36 B (-23%) 🎉
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B -36 B (-23%) 🎉
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B -36 B (-14%) 👏
build/block-library/blocks/comments-pagination/editor.css 209 B -40 B (-16%) 👏
build/block-library/blocks/comments-pagination/style-rtl.css 235 B -37 B (-14%) 👏
build/block-library/blocks/comments-pagination/style.css 231 B -37 B (-14%) 👏
build/block-library/blocks/comments-title/editor-rtl.css 75 B -43 B (-36%) 🎉
build/block-library/blocks/comments-title/editor.css 75 B -43 B (-36%) 🎉
build/block-library/blocks/comments/editor-rtl.css 840 B -35 B (-4%)
build/block-library/blocks/comments/editor.css 839 B -35 B (-4%)
build/block-library/blocks/comments/style-rtl.css 637 B -35 B (-5%)
build/block-library/blocks/comments/style.css 636 B -35 B (-5%)
build/block-library/blocks/cover/editor-rtl.css 612 B -34 B (-5%)
build/block-library/blocks/cover/editor.css 613 B -34 B (-5%)
build/block-library/blocks/cover/style-rtl.css 1.57 kB -36 B (-2%)
build/block-library/blocks/cover/style.css 1.56 kB -36 B (-2%)
build/block-library/blocks/embed/editor-rtl.css 293 B -34 B (-10%) 👏
build/block-library/blocks/embed/editor.css 293 B -34 B (-10%) 👏
build/block-library/blocks/embed/style-rtl.css 410 B -36 B (-8%)
build/block-library/blocks/embed/style.css 410 B -36 B (-8%)
build/block-library/blocks/embed/theme-rtl.css 138 B -34 B (-20%) 🎉
build/block-library/blocks/embed/theme.css 138 B -34 B (-20%) 🎉
build/block-library/blocks/file/editor-rtl.css 300 B -35 B (-10%) 👏
build/block-library/blocks/file/editor.css 300 B -35 B (-10%) 👏
build/block-library/blocks/file/style-rtl.css 253 B -35 B (-12%) 👏
build/block-library/blocks/file/style.css 254 B -34 B (-12%) 👏
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB -30 B (-1%)
build/block-library/blocks/freeform/editor.css 2.44 kB -29 B (-1%)
build/block-library/blocks/gallery/editor-rtl.css 984 B -3 B (0%)
build/block-library/blocks/gallery/editor.css 988 B -5 B (-1%)
build/block-library/blocks/gallery/style-rtl.css 1.55 kB -34 B (-2%)
build/block-library/blocks/gallery/style.css 1.55 kB -33 B (-2%)
build/block-library/blocks/gallery/theme-rtl.css 122 B -35 B (-22%) 🎉
build/block-library/blocks/gallery/theme.css 122 B -35 B (-22%) 🎉
build/block-library/blocks/group/editor-rtl.css 654 B -33 B (-5%)
build/block-library/blocks/group/editor.css 654 B -33 B (-5%)
build/block-library/blocks/group/style-rtl.css 57 B -48 B (-46%) 🎉
build/block-library/blocks/group/style.css 57 B -48 B (-46%) 🎉
build/block-library/blocks/group/theme-rtl.css 78 B -47 B (-38%) 🎉
build/block-library/blocks/group/theme.css 78 B -47 B (-38%) 🎉
build/block-library/blocks/heading/style-rtl.css 76 B -52 B (-41%) 🎉
build/block-library/blocks/heading/style.css 76 B -52 B (-41%) 🎉
build/block-library/blocks/html/editor-rtl.css 332 B -33 B (-9%)
build/block-library/blocks/html/editor.css 333 B -33 B (-9%)
build/block-library/blocks/image/editor-rtl.css 829 B -32 B (-4%)
build/block-library/blocks/image/editor.css 828 B -31 B (-4%)
build/block-library/blocks/image/style-rtl.css 627 B -35 B (-5%)
build/block-library/blocks/image/style.css 630 B -36 B (-5%)
build/block-library/blocks/image/theme-rtl.css 137 B -35 B (-20%) 🎉
build/block-library/blocks/image/theme.css 137 B -35 B (-20%) 🎉
build/block-library/blocks/latest-comments/style-rtl.css 298 B -35 B (-11%) 👏
build/block-library/blocks/latest-comments/style.css 298 B -35 B (-11%) 👏
build/block-library/blocks/latest-posts/editor-rtl.css 213 B -37 B (-15%) 👏
build/block-library/blocks/latest-posts/editor.css 212 B -37 B (-15%) 👏
build/block-library/blocks/latest-posts/style-rtl.css 478 B -36 B (-7%)
build/block-library/blocks/latest-posts/style.css 478 B -36 B (-7%)
build/block-library/blocks/list/style-rtl.css 88 B -47 B (-35%) 🎉
build/block-library/blocks/list/style.css 88 B -47 B (-35%) 🎉
build/block-library/blocks/media-text/editor-rtl.css 266 B -34 B (-11%) 👏
build/block-library/blocks/media-text/editor.css 263 B -35 B (-12%) 👏
build/block-library/blocks/media-text/style-rtl.css 507 B -33 B (-6%)
build/block-library/blocks/media-text/style.css 505 B -34 B (-6%)
build/block-library/blocks/more/editor-rtl.css 431 B -34 B (-7%)
build/block-library/blocks/more/editor.css 431 B -34 B (-7%)
build/block-library/blocks/navigation-link/editor-rtl.css 716 B -30 B (-4%)
build/block-library/blocks/navigation-link/editor.css 715 B -29 B (-4%)
build/block-library/blocks/navigation-link/style-rtl.css 115 B -38 B (-25%) 🎉
build/block-library/blocks/navigation-link/style.css 115 B -38 B (-25%) 🎉
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B -34 B (-10%) 👏
build/block-library/blocks/navigation-submenu/editor.css 299 B -34 B (-10%) 👏
build/block-library/blocks/navigation/editor-rtl.css 2.15 kB -32 B (-1%)
build/block-library/blocks/navigation/editor.css 2.16 kB -33 B (-2%)
build/block-library/blocks/navigation/style-rtl.css 2.23 kB -36 B (-2%)
build/block-library/blocks/navigation/style.css 2.21 kB -36 B (-2%)
build/block-library/blocks/nextpage/editor-rtl.css 395 B -33 B (-8%)
build/block-library/blocks/nextpage/editor.css 395 B -33 B (-8%)
build/block-library/blocks/page-list/editor-rtl.css 363 B -34 B (-9%)
build/block-library/blocks/page-list/editor.css 363 B -35 B (-9%)
build/block-library/blocks/page-list/style-rtl.css 175 B -37 B (-17%) 👏
build/block-library/blocks/page-list/style.css 175 B -37 B (-17%) 👏
build/block-library/blocks/paragraph/editor-rtl.css 174 B -40 B (-19%) 👏
build/block-library/blocks/paragraph/editor.css 174 B -40 B (-19%) 👏
build/block-library/blocks/paragraph/style-rtl.css 279 B -42 B (-13%) 👏
build/block-library/blocks/paragraph/style.css 281 B -40 B (-12%) 👏
build/block-library/blocks/post-author/style-rtl.css 175 B -37 B (-17%) 👏
build/block-library/blocks/post-author/style.css 176 B -36 B (-17%) 👏
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B -41 B (-30%) 🎉
build/block-library/blocks/post-comments-form/editor.css 96 B -41 B (-30%) 🎉
build/block-library/blocks/post-comments-form/style-rtl.css 501 B -35 B (-7%)
build/block-library/blocks/post-comments-form/style.css 501 B -36 B (-7%)
build/block-library/blocks/post-date/style-rtl.css 61 B -46 B (-43%) 🎉
build/block-library/blocks/post-date/style.css 61 B -46 B (-43%) 🎉
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B -46 B (-39%) 🎉
build/block-library/blocks/post-excerpt/editor.css 73 B -46 B (-39%) 🎉
build/block-library/blocks/post-excerpt/style-rtl.css 69 B -47 B (-41%) 🎉
build/block-library/blocks/post-excerpt/style.css 69 B -47 B (-41%) 🎉
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B -34 B (-5%)
build/block-library/blocks/post-featured-image/editor.css 584 B -34 B (-6%)
build/block-library/blocks/post-featured-image/style-rtl.css 318 B -31 B (-9%)
build/block-library/blocks/post-featured-image/style.css 318 B -31 B (-9%)
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B -37 B (-19%) 👏
build/block-library/blocks/post-navigation-link/style.css 153 B -36 B (-19%) 👏
build/block-library/blocks/post-template/editor-rtl.css 99 B -41 B (-29%) 🎉
build/block-library/blocks/post-template/editor.css 98 B -41 B (-29%) 🎉
build/block-library/blocks/post-template/style-rtl.css 282 B -35 B (-11%) 👏
build/block-library/blocks/post-template/style.css 282 B -35 B (-11%) 👏
build/block-library/blocks/post-terms/style-rtl.css 96 B -40 B (-29%) 🎉
build/block-library/blocks/post-terms/style.css 96 B -40 B (-29%) 🎉
build/block-library/blocks/post-title/style-rtl.css 100 B -38 B (-28%) 🎉
build/block-library/blocks/post-title/style.css 100 B -38 B (-28%) 🎉
build/block-library/blocks/preformatted/style-rtl.css 103 B -36 B (-26%) 🎉
build/block-library/blocks/preformatted/style.css 103 B -36 B (-26%) 🎉
build/block-library/blocks/pullquote/editor-rtl.css 135 B -35 B (-21%) 🎉
build/block-library/blocks/pullquote/editor.css 135 B -35 B (-21%) 🎉
build/block-library/blocks/pullquote/style-rtl.css 326 B -31 B (-9%)
build/block-library/blocks/pullquote/style.css 325 B -32 B (-9%)
build/block-library/blocks/pullquote/theme-rtl.css 167 B -34 B (-17%) 👏
build/block-library/blocks/pullquote/theme.css 167 B -34 B (-17%) 👏
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B -36 B (-23%) 🎉
build/block-library/blocks/query-pagination-numbers/editor.css 121 B -35 B (-22%) 🎉
build/block-library/blocks/query-pagination/editor-rtl.css 221 B -37 B (-14%) 👏
build/block-library/blocks/query-pagination/editor.css 211 B -36 B (-15%) 👏
build/block-library/blocks/query-pagination/style-rtl.css 288 B -38 B (-12%) 👏
build/block-library/blocks/query-pagination/style.css 284 B -38 B (-12%) 👏
build/block-library/blocks/query-title/style-rtl.css 63 B -45 B (-42%) 🎉
build/block-library/blocks/query-title/style.css 63 B -45 B (-42%) 🎉
build/block-library/blocks/query/editor-rtl.css 440 B -35 B (-7%)
build/block-library/blocks/query/editor.css 440 B -37 B (-8%)
build/block-library/blocks/quote/style-rtl.css 213 B -40 B (-16%) 👏
build/block-library/blocks/quote/style.css 213 B -40 B (-16%) 👏
build/block-library/blocks/quote/theme-rtl.css 223 B -32 B (-13%) 👏
build/block-library/blocks/quote/theme.css 226 B -33 B (-13%) 👏
build/block-library/blocks/read-more/style-rtl.css 132 B -36 B (-21%) 🎉
build/block-library/blocks/read-more/style.css 132 B -36 B (-21%) 🎉
build/block-library/blocks/rss/editor-rtl.css 202 B -37 B (-15%) 👏
build/block-library/blocks/rss/editor.css 204 B -36 B (-15%) 👏
build/block-library/blocks/rss/style-rtl.css 289 B -34 B (-11%) 👏
build/block-library/blocks/rss/style.css 288 B -35 B (-11%) 👏
build/block-library/blocks/search/editor-rtl.css 165 B -40 B (-20%) 🎉
build/block-library/blocks/search/editor.css 165 B -40 B (-20%) 🎉
build/block-library/blocks/search/style-rtl.css 409 B -32 B (-7%)
build/block-library/blocks/search/style.css 406 B -33 B (-8%)
build/block-library/blocks/search/theme-rtl.css 114 B -35 B (-23%) 🎉
build/block-library/blocks/search/theme.css 114 B -35 B (-23%) 🎉
build/block-library/blocks/separator/editor-rtl.css 146 B -38 B (-21%) 🎉
build/block-library/blocks/separator/editor.css 146 B -38 B (-21%) 🎉
build/block-library/blocks/separator/style-rtl.css 234 B -35 B (-13%) 👏
build/block-library/blocks/separator/style.css 234 B -35 B (-13%) 👏
build/block-library/blocks/separator/theme-rtl.css 194 B -35 B (-15%) 👏
build/block-library/blocks/separator/theme.css 194 B -35 B (-15%) 👏
build/block-library/blocks/shortcode/editor-rtl.css 474 B -34 B (-7%)
build/block-library/blocks/shortcode/editor.css 474 B -34 B (-7%)
build/block-library/blocks/site-logo/editor-rtl.css 490 B -32 B (-6%)
build/block-library/blocks/site-logo/editor.css 490 B -32 B (-6%)
build/block-library/blocks/site-logo/style-rtl.css 203 B -35 B (-15%) 👏
build/block-library/blocks/site-logo/style.css 203 B -35 B (-15%) 👏
build/block-library/blocks/site-tagline/editor-rtl.css 86 B -43 B (-33%) 🎉
build/block-library/blocks/site-tagline/editor.css 86 B -43 B (-33%) 🎉
build/block-library/blocks/site-title/editor-rtl.css 116 B -39 B (-25%) 🎉
build/block-library/blocks/site-title/editor.css 116 B -39 B (-25%) 🎉
build/block-library/blocks/site-title/style-rtl.css 57 B -44 B (-44%) 🎉
build/block-library/blocks/site-title/style.css 57 B -44 B (-44%) 🎉
build/block-library/blocks/social-link/editor-rtl.css 184 B -35 B (-16%) 👏
build/block-library/blocks/social-link/editor.css 184 B -35 B (-16%) 👏
build/block-library/blocks/social-links/editor-rtl.css 674 B -35 B (-5%)
build/block-library/blocks/social-links/editor.css 673 B -35 B (-5%)
build/block-library/blocks/social-links/style-rtl.css 1.4 kB -36 B (-3%)
build/block-library/blocks/social-links/style.css 1.39 kB -36 B (-3%)
build/block-library/blocks/spacer/editor-rtl.css 332 B -40 B (-11%) 👏
build/block-library/blocks/spacer/editor.css 332 B -40 B (-11%) 👏
build/block-library/blocks/spacer/style-rtl.css 48 B -48 B (-50%) 🏆
build/block-library/blocks/spacer/style.css 48 B -48 B (-50%) 🏆
build/block-library/blocks/table/editor-rtl.css 457 B -34 B (-7%)
build/block-library/blocks/table/editor.css 457 B -34 B (-7%)
build/block-library/blocks/table/style-rtl.css 636 B -34 B (-5%)
build/block-library/blocks/table/style.css 635 B -34 B (-5%)
build/block-library/blocks/table/theme-rtl.css 184 B -36 B (-16%) 👏
build/block-library/blocks/table/theme.css 184 B -36 B (-16%) 👏
build/block-library/blocks/tag-cloud/style-rtl.css 251 B -36 B (-13%) 👏
build/block-library/blocks/tag-cloud/style.css 253 B -35 B (-12%) 👏
build/block-library/blocks/template-part/editor-rtl.css 403 B -33 B (-8%)
build/block-library/blocks/template-part/editor.css 403 B -33 B (-8%)
build/block-library/blocks/template-part/theme-rtl.css 101 B -38 B (-27%) 🎉
build/block-library/blocks/template-part/theme.css 101 B -38 B (-27%) 🎉
build/block-library/blocks/text-columns/editor-rtl.css 95 B -40 B (-30%) 🎉
build/block-library/blocks/text-columns/editor.css 95 B -40 B (-30%) 🎉
build/block-library/blocks/text-columns/style-rtl.css 166 B -32 B (-16%) 👏
build/block-library/blocks/text-columns/style.css 166 B -32 B (-16%) 👏
build/block-library/blocks/verse/style-rtl.css 87 B -43 B (-33%) 🎉
build/block-library/blocks/verse/style.css 87 B -43 B (-33%) 🎉
build/block-library/blocks/video/editor-rtl.css 691 B -29 B (-4%)
build/block-library/blocks/video/editor.css 694 B -29 B (-4%)
build/block-library/blocks/video/style-rtl.css 179 B -39 B (-18%) 👏
build/block-library/blocks/video/style.css 179 B -39 B (-18%) 👏
build/block-library/blocks/video/theme-rtl.css 139 B -32 B (-19%) 👏
build/block-library/blocks/video/theme.css 139 B -32 B (-19%) 👏
build/block-library/classic-rtl.css 162 B -31 B (-16%) 👏
build/block-library/classic.css 162 B -31 B (-16%) 👏
build/block-library/editor-elements-rtl.css 75 B -51 B (-40%) 🎉
build/block-library/editor-elements.css 75 B -51 B (-40%) 🎉
build/block-library/editor-rtl.css 11.7 kB +1 B (0%)
build/block-library/elements-rtl.css 54 B -51 B (-49%) 🎉
build/block-library/elements.css 54 B -51 B (-49%) 🎉
build/block-library/index.min.js 196 kB +24 B (0%)
build/block-library/reset-rtl.css 478 B -36 B (-7%)
build/block-library/reset.css 478 B -36 B (-7%)
build/block-library/style-rtl.css 12.4 kB -35 B (0%)
build/block-library/style.css 12.4 kB -36 B (0%)
build/block-library/theme-rtl.css 716 B -33 B (-4%)
build/block-library/theme.css 721 B -32 B (-4%)
build/components/index.min.js 204 kB +109 B (0%)
build/components/style-rtl.css 11.7 kB +85 B (+1%)
build/components/style.css 11.7 kB +86 B (+1%)
build/customize-widgets/style-rtl.css 1.41 kB +1 B (0%)
build/data/index.min.js 8.14 kB +27 B (0%)
build/edit-navigation/style-rtl.css 4.14 kB +55 B (+1%)
build/edit-navigation/style.css 4.15 kB +61 B (+1%)
build/edit-post/classic-rtl.css 571 B +2 B (0%)
build/edit-post/classic.css 571 B +1 B (0%)
build/edit-post/index.min.js 34.5 kB +11 B (0%)
build/edit-post/style-rtl.css 7.49 kB +53 B (+1%)
build/edit-post/style.css 7.48 kB +53 B (+1%)
build/edit-site/index.min.js 62.6 kB +1.62 kB (+3%)
build/edit-site/style-rtl.css 8.76 kB +206 B (+2%)
build/edit-site/style.css 8.75 kB +202 B (+2%)
build/edit-widgets/style-rtl.css 4.48 kB +46 B (+1%)
build/edit-widgets/style.css 4.49 kB +47 B (+1%)
build/editor/index.min.js 44 kB +33 B (0%)
build/editor/style-rtl.css 3.69 kB +37 B (+1%)
build/editor/style.css 3.68 kB +36 B (+1%)
build/format-library/style-rtl.css 598 B +2 B (0%)
build/format-library/style.css 597 B +1 B (0%)
build/list-reusable-blocks/style-rtl.css 865 B +7 B (+1%)
build/list-reusable-blocks/style.css 865 B +8 B (+1%)
build/nux/style-rtl.css 775 B +3 B (0%)
build/nux/style.css 771 B +3 B (0%)
build/reusable-blocks/style-rtl.css 283 B +2 B (+1%)
build/reusable-blocks/style.css 283 B +2 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 7.16 kB
build/block-editor/content.css 2.71 kB
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
build/block-library/common-rtl.css 1.05 kB
build/block-library/common.css 1.05 kB
build/block-library/editor.css 11.7 kB
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 50.4 kB
build/compose/index.min.js 12.3 kB
build/core-data/index.min.js 15.9 kB
build/customize-widgets/index.min.js 11.6 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.74 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-widgets/index.min.js 16.7 kB
build/element/index.min.js 4.72 kB
build/escape-html/index.min.js 548 B
build/experiments/index.min.js 882 B
build/format-library/index.min.js 6.96 kB
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.86 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 977 B
build/nux/index.min.js 2.07 kB
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.59 kB
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/rich-text/index.min.js 10.7 kB
build/server-side-render/index.min.js 2.19 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.51 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.7 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.23 kB
build/widgets/style-rtl.css 1.21 kB
build/widgets/style.css 1.21 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@ciampo ciampo requested review from mirka, chad1008 and brookewp December 2, 2022 17:19
@ciampo ciampo added the [Package] Components /packages/components label Dec 2, 2022
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

This is testing well for me 💯

I just want to clear up the z-index stuff, because there are some anti-patterns here that I'd like to address before merging if the z-index styles are really necessary.

And if you could add a brief changelog for the TabPanel component, that would be great.

// See: https://github.com/WordPress/gutenberg/pull/9793
&:focus:not(:disabled) {
position: relative;
z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
Copy link
Member

Choose a reason for hiding this comment

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

I don't quite understand the purpose of all the z-index styles. Could you explain the intent?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm actually not sure — I know it was necessary at one point, but I think the tabs have been refactored enough that it might not be needed anymore. When I tried removing it just now, it worked fine without it. I'll try and remove it and see if that helps.

packages/components/src/tab-panel/style.scss Outdated Show resolved Hide resolved
packages/components/src/tab-panel/style.scss Outdated Show resolved Hide resolved
@jasmussen
Copy link
Contributor Author

Thanks so much for the review, and for the suggestions. I've removed the z-index, and updated the changelog. I also noticed that the site editor had its own copy of the tab styles, so I updated them there as well.

One thing I noted, and could use your advice on, is that the separate navigation screen code is apparently still in the codebase, and uses the old styles. I don't think this code is meant to be used anymore, so I didn't update it. @Mamaduka do you have any insights on what to best do here? Without updating that code, we can't remove the z-index layer from base-styles, this one: ".edit-post-sidebar__panel-tab.is-active": 1, — so it might be best to update the code after all? 🤔

@Mamaduka
Copy link
Member

Mamaduka commented Dec 7, 2022

Thanks for the ping, @jasmussen. Can you give me a link to the navigation screen code in question?

@jasmussen
Copy link
Contributor Author

Sorry I should've included that: https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-navigation/src/components/sidebar/style.scss#L57

In fact most of the tab code there is again just a verbatim copy of tab code being updated in this PR. It'd be nice to find a way to do more code reuse in the future, so it doesn't drift.

Speaking of, I'll look into the widgets screen, I can't recall if it has tabs 🙈

@jasmussen
Copy link
Contributor Author

I actually went ahead and updated both the widget and navigation screen tabs. It's unfortunate there's so much code duplication, but it doesn't seem like there's great value in holding on to the z-index layer if just obsolete code uses it. Let me know what you think and I can revert.

@Mamaduka
Copy link
Member

Mamaduka commented Dec 7, 2022

Thanks, Joen. I saw the latest commit, so I guess that resolves the z-index issue :)

The Navigation Screen is no longer maintained (#43620), and I believe there's no way to access it via UI. So it's probably okay to break styles there.

@jasmussen
Copy link
Contributor Author

Thanks for the sanity check.

I wasn't able to check, but the CSS I pushed shouldn't actually break anything, it's just that no-one will see it. But I had to make a change, because the code still gets compiled, and if it references a missing SCSS variable it breaks.

Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Looks good! 🚢 Thanks for the z-index clean up.

We'll be tackling the code duplication soon (#43414).

@jasmussen
Copy link
Contributor Author

I'll trust these reviews then, thank you!

@jasmussen jasmussen merged commit 2b27027 into trunk Dec 8, 2022
@jasmussen jasmussen deleted the try/tab-focus-alt branch December 8, 2022 08:26
@github-actions github-actions bot added this to the Gutenberg 14.8 milestone Dec 8, 2022
@afercia
Copy link
Contributor

afercia commented Dec 14, 2022

Nice improvement! I'd suggest to move also the transparent outline used to support Windows High Contrast Mode from the button to the pseudo element, otherwise it's cut-off because one of the ancestors uses overflow: auto. See the screenshot below, where I made the outline red for clarity.

Worth reminding in Windows High Contrast Mode the CSS box-shadows aren't visible. The outline is.

Screenshot 2022-12-14 at 09 02 38

@jasmussen
Copy link
Contributor Author

I'll do that in a followup when I get a moment.

@mtias
Copy link
Member

mtias commented Dec 21, 2022

Thanks for working on this one!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] UI Components Impacts or related to the UI component system [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants