Fix Global styles panel header buttons text overlap for 'Show button text labels'

[afercia]

Temporary fix for https://github.com/WordPress/gutenberg/issues/61761

A more solid solution should be implemented by changing the design and not placing buttons in the panels header in the first place. This PR overrides the Button component CSS, which isn't ideal but it is worth noting the 'Show button text labels' feature itself overrides the base component CSS. An alternative solution is being explored in https://github.com/WordPress/gutenberg/issues/61763

Additionally, makes the size of the Close button consistent with the size of the other buttons.

What?

The buttons text overlaps.

Why?

Overlapping text isn't readable.

How?

Makes the button width be auto when 'Show button text labels' is enabled. Makes the Close button use the compact size so that it is consistent with the other buttons.

Testing Instructions

• Go to the Site Editor > Styles
• In Options > Preferences > Accessibility, enable the 'Show button text labels' preference.
• Alternatively, issue this command in your browser dev tools console: window.wp.data.dispatch( 'core/preferences' ).set( 'core', 'showIconLabels', true )
• Observe the text of the buttons in the Styles panel header don't overlap any longer.
• Test with the admin language set to languages that may provide longer strings e.g. German, Spanish, Italian.
• Disable 'Show button text labels' from the preferences modal or alternatively issue this command in the console: window.wp.data.dispatch( 'core/preferences' ).set( 'core', 'showIconLabels', false )
• Observe the size of the X close button is 32 by 32 pixels.
• Install a plugin that adds its own settings panel e.g. Yoast SEO.
• Go to the Post Editor.
• Open the Plugin sidbar from the Options dropdown menu.
• Observe the Plugin panel Close button size is 32 by 32 pixels.

Testing Instructions for Keyboard

Screenshots or screencast

Overlapping text - Before: English and italian

After:

Close button size before (all buttons focused to better illustrate):

After:

[github-actions[bot]]

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: afercia <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>

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

[github-actions[bot]]

Size Change: -3 B (0%)

Total Size: 1.77 MB

Filename	Size	Change
build/edit-site/index.min.js	218 kB	+4 B (0%)
build/edit-site/style-rtl.css	12.6 kB	+17 B (+0.13%)
build/edit-site/style.css	12.6 kB	+13 B (+0.1%)
build/edit-widgets/style-rtl.css	4.18 kB	-8 B (-0.19%)
build/edit-widgets/style.css	4.18 kB	-10 B (-0.24%)
build/editor/style-rtl.css	9.36 kB	-8 B (-0.09%)
build/editor/style.css	9.36 kB	-11 B (-0.12%)

ℹ️ View Unchanged

Filename	Size
build-module/a11y/index.min.js	482 B
build-module/block-library/file/view.min.js	447 B
build-module/block-library/image/view.min.js	1.78 kB
build-module/block-library/navigation/view.min.js	1.16 kB
build-module/block-library/query/view.min.js	742 B
build-module/block-library/search/view.min.js	616 B
build-module/interactivity-router/index.min.js	3.03 kB
build-module/interactivity/debug.min.js	17.2 kB
build-module/interactivity/index.min.js	13.6 kB
build/a11y/index.min.js	952 B
build/annotations/index.min.js	2.26 kB
build/api-fetch/index.min.js	2.32 kB
build/autop/index.min.js	2.12 kB
build/blob/index.min.js	579 B
build/block-directory/index.min.js	7.26 kB
build/block-directory/style-rtl.css	1 kB
build/block-directory/style.css	1 kB
build/block-editor/content-rtl.css	4.46 kB
build/block-editor/content.css	4.45 kB
build/block-editor/default-editor-styles-rtl.css	394 B
build/block-editor/default-editor-styles.css	394 B
build/block-editor/index.min.js	255 kB
build/block-editor/style-rtl.css	15.3 kB
build/block-editor/style.css	15.3 kB
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	90 B
build/block-library/blocks/archives/style.css	90 B
build/block-library/blocks/audio/editor-rtl.css	149 B
build/block-library/blocks/audio/editor.css	151 B
build/block-library/blocks/audio/style-rtl.css	132 B
build/block-library/blocks/audio/style.css	132 B
build/block-library/blocks/audio/theme-rtl.css	134 B
build/block-library/blocks/audio/theme.css	134 B
build/block-library/blocks/avatar/editor-rtl.css	115 B
build/block-library/blocks/avatar/editor.css	115 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/button/editor-rtl.css	265 B
build/block-library/blocks/button/editor.css	265 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	291 B
build/block-library/blocks/buttons/editor.css	291 B
build/block-library/blocks/buttons/style-rtl.css	345 B
build/block-library/blocks/buttons/style.css	345 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	139 B
build/block-library/blocks/code/style.css	139 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-author-name/style-rtl.css	72 B
build/block-library/blocks/comment-author-name/style.css	72 B
build/block-library/blocks/comment-content/style-rtl.css	120 B
build/block-library/blocks/comment-content/style.css	120 B
build/block-library/blocks/comment-date/style-rtl.css	65 B
build/block-library/blocks/comment-date/style.css	65 B
build/block-library/blocks/comment-edit-link/style-rtl.css	70 B
build/block-library/blocks/comment-edit-link/style.css	70 B
build/block-library/blocks/comment-reply-link/style-rtl.css	71 B
build/block-library/blocks/comment-reply-link/style.css	71 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	228 B
build/block-library/blocks/comments-pagination/editor.css	217 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	641 B
build/block-library/blocks/cover/editor.css	642 B
build/block-library/blocks/cover/style-rtl.css	1.64 kB
build/block-library/blocks/cover/style.css	1.63 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	331 B
build/block-library/blocks/embed/editor.css	331 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/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	357 B
build/block-library/blocks/form-input/style.css	357 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	946 B
build/block-library/blocks/gallery/editor.css	951 B
build/block-library/blocks/gallery/style-rtl.css	1.83 kB
build/block-library/blocks/gallery/style.css	1.82 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	334 B
build/block-library/blocks/group/editor.css	334 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	785 B
build/block-library/blocks/image/editor.css	787 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/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	179 B
build/block-library/blocks/latest-posts/editor.css	179 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	321 B
build/block-library/blocks/media-text/editor.css	320 B
build/block-library/blocks/media-text/style-rtl.css	558 B
build/block-library/blocks/media-text/style.css	556 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	644 B
build/block-library/blocks/navigation-link/editor.css	645 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.2 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/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-biography/style-rtl.css	74 B
build/block-library/blocks/post-author-biography/style.css	74 B
build/block-library/blocks/post-author-name/style-rtl.css	69 B
build/block-library/blocks/post-author-name/style.css	69 B
build/block-library/blocks/post-author/editor-rtl.css	107 B
build/block-library/blocks/post-author/editor.css	107 B
build/block-library/blocks/post-author/style-rtl.css	188 B
build/block-library/blocks/post-author/style.css	189 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/style-rtl.css	61 B
build/block-library/blocks/post-content/style.css	61 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	347 B
build/block-library/blocks/post-featured-image/style.css	347 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	162 B
build/block-library/blocks/post-title/style.css	162 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	154 B
build/block-library/blocks/query-pagination/editor.css	154 B
build/block-library/blocks/query-pagination/style-rtl.css	237 B
build/block-library/blocks/query-pagination/style.css	237 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/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	199 B
build/block-library/blocks/search/editor.css	199 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/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	85 B
build/block-library/blocks/site-title/editor.css	85 B
build/block-library/blocks/site-title/style-rtl.css	143 B
build/block-library/blocks/site-title/style.css	143 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	729 B
build/block-library/blocks/social-links/editor.css	727 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	144 B
build/block-library/blocks/tag-cloud/editor.css	144 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	368 B
build/block-library/blocks/template-part/editor.css	368 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	396 B
build/block-library/blocks/video/editor.css	397 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.08 kB
build/block-library/common.css	1.08 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.7 kB
build/block-library/editor.css	11.7 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/index.min.js	220 kB
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/style-rtl.css	14.9 kB
build/block-library/style.css	14.9 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.5 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	227 kB
build/components/style-rtl.css	12.4 kB
build/components/style.css	12.4 kB
build/compose/index.min.js	12.7 kB
build/core-commands/index.min.js	3.11 kB
build/core-data/index.min.js	73.4 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.97 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.66 kB
build/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	580 B
build/edit-post/index.min.js	13.7 kB
build/edit-post/style-rtl.css	2.76 kB
build/edit-post/style.css	2.75 kB
build/edit-site/posts-rtl.css	7.32 kB
build/edit-site/posts.css	7.32 kB
build/edit-widgets/index.min.js	17.7 kB
build/editor/index.min.js	103 kB
build/element/index.min.js	4.82 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.04 kB
build/format-library/style-rtl.css	476 B
build/format-library/style.css	476 B
build/hooks/index.min.js	1.65 kB
build/html-entities/index.min.js	445 B
build/i18n/index.min.js	3.58 kB
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.13 kB
build/list-reusable-blocks/style-rtl.css	852 B
build/list-reusable-blocks/style.css	852 B
build/media-utils/index.min.js	3.2 kB
build/notices/index.min.js	946 B
build/nux/index.min.js	1.62 kB
build/nux/style-rtl.css	749 B
build/nux/style.css	745 B
build/patterns/index.min.js	7.34 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	960 B
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.7 kB
build/reusable-blocks/index.min.js	2.55 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.04 kB
build/token-list/index.min.js	581 B
build/url/index.min.js	3.9 kB
build/vendors/react-dom.min.js	41.7 kB
build/vendors/react-jsx-runtime.min.js	556 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.16 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}

[afercia]

@WordPress/gutenberg-core I'd appreciate a review, when you have a chance.

[afercia]

@t-hamano thanks for testing in Japanese. I'd love to see all designers and developers test often with other languages in their daily workflow.

There's really no ideal solution to this layout issue other than changing a design that is problematic in the first place. The panel header can't contain all that content and the length of the content is unpredictable. The original design must be reconsidered. See https://github.com/WordPress/gutenberg/issues/63251

What we can do now is to try the best compromise for a temporary improvement. In the last commit I've refactored a bit the flexbox implementation of this specific panel header.

Is this wrapping acceptable in Japanese @t-hamano? Screenshots with various languages:

As I mentioned earlier, this can't be perfect for all cases but I think it's an improvement compared to trunk.

[t-hamano]

Is this wrapping acceptable in Japanese @t-hamano?

Yes. In Japanese, there are no spaces between words, and it is quite common for words to wrap mid-word depending on the width of the container.

So I think this is not unnatural and is acceptable (and probably Chinese as well).

[afercia]

Thanks @t-hamano. As mentioned, this is only a temporary fix. The design needs to be changed anyways, including the styling of the buttons. From an accessibility perspective, they are not distinguishable from normal text. While this can be acceptable in the top bar or the block toolbar, where the context and additional shapes clarofy those are buttons, in this case these buttons look like normal text:

A final review and approval would be appreciated. Thanks.

[jameskoster]

The revisions button invokes a drilldown, which feels strange given the access point (panel header toggle button). I wouldn't object to moving this to the panel footer, similar to the Styles sidebar:

This would create some extra space for the other buttons which might help?

[t-hamano]

Those two margin-lefts should no longer be necessary:

https://github.com/WordPress/gutenberg/blob/245176e0afa5b0f235aa1cad55f7db376f598bc4/packages/interface/src/components/complementary-area-header/style.scss#L29-L33

Also, I noticed that the button is not sized correctly in the block sidebar:

Additionally, I remember that the center of this close button might be expected to be aligned with the center of the Options button:

trunk	This PR

Therefore, I lean toward leaving the button size at 24px.

[afercia]

The revisions button invokes a drilldown, which feels strange given the access point (panel header toggle button). I wouldn't object to moving this to the panel footer,

@jameskoster interesting point. To me all those buttons shouldn't be in the Styles panel header in the first place. For example, also the ellipsis button is arguably consistent. I'd expect an ellipsis button to always be the last button in a set of controls. Rearranging these buttons is out of the scope of this PR though. We agreed in past conversations to avoid scope creep so I'd encourage you to create a new issue.

I adjusted the Close button size to 'small', as requested. However, I disagree with the recent change that made these buttons smaller. The target size of any control should be as large as possible, I'm not sure that intentionally (and unnecessarily) reducing the target size is a good strategy to provide a bettter user experience. I will create a new issue.

[aaronrobertshaw]

I'd expect an ellipsis button to always be the last button in a set of controls.

There's also a separate expectation around where a close button is positioned. I definitely agree these are in conflict with each other and a factor in why the UI here feels a bit off.

If I had to pick one to take precedence, I'd think the expectation around the close button would be strongest. So I can understand the past reasoning that lead us here.

Rearranging these buttons is out of the scope of this PR though. We agreed in past conversations to avoid scope creep so I'd encourage you to create a new issue.

A different perspective here (well, mine specifically 🙂) is that the scope of the PR was to fix the overlapping headings. The proposed relocation of the revisions button/options is a potential part of a solution to that. Sometimes, we can do both things i.e. be cautious of true scope creep and remain flexible.

Correct me if I'm wrong but the overlapping isn't a new bug? So perhaps we can afford to take a moment to hone in on a better solution?

[afercia]

If I had to pick one to take precedence,

Thanks @aaronrobertshaw for bringing in additional considerations. I'm not sure trying to establish which one of these buttons has precedence to be relocated as last would solve the actual issue. There are arguments for both cases. To me, relocating would cure only the symptom. The root cause is that the additional buttons should not be placed in the panel header in the first place.

The panel header should conly contain:

• Title
• X close button

Any other content should be moved to a 'sub-header' as proposed on https://github.com/WordPress/gutenberg/issues/63251

Correct me if I'm wrong but the overlapping isn't a new bug?

Correct, it's a long standing issue. A previous PR tried to improve things but it's still not ideal. I'd like to unblock this PR to solve an issue that has been reported on May, that's a few months ago already and it's a bit too much time to fix such a small issue. Of course, this is a temporary improvement. I'd encourage further discussion on the overall design that, in my opinion, should be changed to address the root cause.

[aaronrobertshaw]

I'm not sure trying to establish which one of these buttons has precedence to be relocated as last would solve the actual issue

My comment wasn't intended as a solution, just a counter point to the expectation of the ellipsis button being last. It was also aimed at understanding the problem space and the context behind the current situation.

The root cause is that the additional buttons should not be placed in the panel header in the first place.

True.

We are where we are though so relocating a button to the bottom of the panel is a good first step towards an ideal scenario. Whether that is moving all buttons outside the header or into a sub-header as proposed.

it's a bit too much time to fix such a small issue

Understood. Sometimes things need time though.

I'd encourage further discussion on the overall design that, in my opinion, should be changed to address the root cause.

I agree that a holistic solution is best left for a separate discussion.

My two cents on the current approach though is that while it is an improvement on the overlapping labels, is it that much extra to move the button to the bottom of the panel for a much bigger payoff?

This branch could still result in overlapping labels, removing a button helps mitigate the chance of that.

[aaronrobertshaw]

the moving of revisions can trigger way more discussions, as it did with post revisions. ... What do you say

Fair enough, if that was the experience of moving the post revisions 👍

[afercia]

Thanks everyone. I'll create the new issue to consider relocating the revisions toggle if it hasn't been created yet.

For the future: the only way to prevent this kind of layout issues is that the design team must provide design also for the 'Show button text labels' preference. New UIs should not be merged without accounting for 'Show button text labels'. I'd love to see this point added to the design guidelines and workflow. Thanks. Cc @WordPress/gutenberg-design

[jasmussen]

That's a note for all contributors to the project, it's not useful to single out one group of contributors.

[afercia]

it's not useful to single out one group of contributors.

@jasmussen can you please add more context and clarify? Thanks.

[mtias]

It also seems the "show button text labels" is being applied too broadly to areas where it was not intended to be, like utility actions in panel headers and inspector tabs.

[afercia]

It also seems the "show button text labels" is being applied too broadly to areas where it was not intended to be, like utility actions in panel headers and inspector tabs.

I kindly disagre. Rather, the "show button text labels" preference should be appliet to all icon buttons and any design should take it into account.

[mtias]

Yeah, I don't think we'll agree on that :) Expanding the application of this preference beyond toolbars is a stretch and would need to be done thoughtfully for each context. Cases like this one cannot be trivially turned into text actions:

[afercia]

Yeah, I don't think we'll agree on that :)

Indeed, we don't agree. I'm aiming to make the UI as accessible as possible. I can only note that it seems that's not the focus for everyone in this project.

Cases like this one cannot be trivially turned into text actions:

I would argue that cases like this one (that example is from the data views) are just a less than ideal design that I'd call a 'wrong' design, not to blame anyone. And it's it wrong because it didn't take into consideration the preference since the beginning.

I do realize that organizine the complexity of the editor UI is challenging but hiding content, removing or truncating visible text and the like. isn't a good strategy to make the UI usable for everyone.