Layout content and wide width controls: remove confusing icon and clarify labels

[afercia]

Fixes https://github.com/WordPress/gutenberg/issues/64842 See https://github.com/WordPress/gutenberg/issues/64862

What?

The layout Content width and Wide width controls have icons on the right that are confusing and unnecessary, as they look like clickable buttons but they aren't buttons, thus breaking an establisehed design pattern in the editor. They also prevent these inputs from using the new 40 pixels size. Tha labeling of these inputs is shortened to 'Content' and 'Wide' only because the design wants a two-columns layout. However, the labels are unclear and confusing for users as these settings refer to widths. Additionanlly, the panel to reset these settings incorrectly uses the term 'size' e.g. 'Wide size' while in the block toolbar this is called 'Wide width'.

Why?

• Non-clickable icons on the right of controls have the only effect to confuse users because the editor uses clickable icon buttons in many other cases in the same spot. Design patterns should be consistent and predictable.
• Labels should be consistend to clearly identify settings and features across the editor.

How?

• Remove the icons.
• Use the 40 pixels input size. This also makes the unit control consistent with other inputs.
• Clarifies the input labels:
  • Content → Content width
  • Wide → Wide width
• The new labels are longer and may be even longer in other languages so the two columns layout is removed in favor of vertically stacking the inputs.

A note on labels: I see a trend from the design team to shorten or truncate control labels only to make the controls 'fit' in specific design e.g. a two columns layout. This has the only effect to make the controls unclear for users. Features and settings must have clear, meaningful, understandable names. Please do not ever shorten labels only for visuals reasons. Labeling a control by an adjective e.g. 'Wide' seems to me far from ideal and not the best UI.

Regarding translations, the new labels may be way longer in other languages. For example, in Italian they woul dbe:

Default width > Larghezza predefinita
Wide width    > Larghezza ampia

As such, the two columns layout nheeds to be removed in favor ov vertically stacking the inputs.

Testing Instructions

• Go to Site editor > Styles > Layout > Dimensions
• Observe the two controls labels are now 'Content width' and 'Wide width'.
• Observe the two controls don't use decorative icons any longer.
• Observe the two controls are vertically stacked.
• Observe the two controls use the 40 pixels size.
• Open the Dimensions option panel.
• Observe the settings name is consistent: 'Content width' and 'Wide width'.

Screenshot before and after:

• Go to the post editor.
• Select a Group block.
• In the setttings panel, enable 'Inner blocks use content width'.
• Observe the two controls labels are now 'Content width' and 'Wide width'.
• Observe the two controls don't use decorative icons any longer.
• Observe the two controls are vertically stacked.
• Observe the two controls use the 40 pixels size.

Screenshot before and after:

Worth reminding the names 'Content width' and 'Wide width' are consistent with the pattern of the settings name used in the block toolbar > Align setting, see the 'Wide width' menu item in the screenshot below:

I will creeate a separate issue to consider to rename the 'None' setting, as it is actually the 'content width'.

Testing Instructions for Keyboard

Screenshots or screencast

[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: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: MaggieCabrera <[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: -34 B (0%)

Total Size: 1.78 MB

Filename	Size	Change
build/block-editor/index.min.js	257 kB	+110 B (+0.04%)
build/block-editor/style-rtl.css	16.2 kB	-22 B (-0.14%)
build/block-editor/style.css	16.2 kB	-19 B (-0.12%)
build/block-library/index.min.js	217 kB	+113 B (+0.05%)
build/blocks/index.min.js	52.3 kB	-12 B (-0.02%)
build/components/index.min.js	224 kB	-99 B (-0.04%)
build/compose/index.min.js	12.6 kB	-295 B (-2.29%)
build/core-data/index.min.js	73.2 kB	+61 B (+0.08%)
build/dom/index.min.js	4.66 kB	+14 B (+0.3%)
build/edit-site/index.min.js	217 kB	-4 B (0%)
build/edit-site/posts-rtl.css	7.31 kB	+33 B (+0.45%)
build/edit-site/posts.css	7.31 kB	+29 B (+0.4%)
build/edit-site/style-rtl.css	12.6 kB	+29 B (+0.23%)
build/edit-site/style.css	12.6 kB	+28 B (+0.22%)

ℹ️ 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.32 kB
build/autop/index.min.js	2.12 kB
build/blob/index.min.js	579 B
build/block-directory/index.min.js	7.31 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.57 kB
build/block-editor/content.css	4.56 kB
build/block-editor/default-editor-styles-rtl.css	394 B
build/block-editor/default-editor-styles.css	394 B
build/block-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	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-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-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.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	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/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	198 B
build/block-library/blocks/footnotes/style.css	197 B
build/block-library/blocks/form-input/editor-rtl.css	229 B
build/block-library/blocks/form-input/editor.css	229 B
build/block-library/blocks/form-input/style-rtl.css	342 B
build/block-library/blocks/form-input/style.css	342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	344 B
build/block-library/blocks/form-submission-notification/editor.css	341 B
build/block-library/blocks/form-submit-button/style-rtl.css	69 B
build/block-library/blocks/form-submit-button/style.css	69 B
build/block-library/blocks/form/view.min.js	470 B
build/block-library/blocks/freeform/editor-rtl.css	2.6 kB
build/block-library/blocks/freeform/editor.css	2.6 kB
build/block-library/blocks/gallery/editor-rtl.css	955 B
build/block-library/blocks/gallery/editor.css	958 B
build/block-library/blocks/gallery/style-rtl.css	1.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	344 B
build/block-library/blocks/group/editor.css	344 B
build/block-library/blocks/group/style-rtl.css	103 B
build/block-library/blocks/group/style.css	103 B
build/block-library/blocks/group/theme-rtl.css	79 B
build/block-library/blocks/group/theme.css	79 B
build/block-library/blocks/heading/style-rtl.css	188 B
build/block-library/blocks/heading/style.css	188 B
build/block-library/blocks/html/editor-rtl.css	346 B
build/block-library/blocks/html/editor.css	347 B
build/block-library/blocks/image/editor-rtl.css	894 B
build/block-library/blocks/image/editor.css	892 B
build/block-library/blocks/image/style-rtl.css	1.59 kB
build/block-library/blocks/image/style.css	1.59 kB
build/block-library/blocks/image/theme-rtl.css	137 B
build/block-library/blocks/image/theme.css	137 B
build/block-library/blocks/image/view.min.js	1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css	355 B
build/block-library/blocks/latest-comments/style.css	354 B
build/block-library/blocks/latest-posts/editor-rtl.css	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	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	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/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-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/editor-rtl.css	74 B
build/block-library/blocks/post-content/editor.css	74 B
build/block-library/blocks/post-content/style-rtl.css	79 B
build/block-library/blocks/post-content/style.css	79 B
build/block-library/blocks/post-date/style-rtl.css	62 B
build/block-library/blocks/post-date/style.css	62 B
build/block-library/blocks/post-excerpt/editor-rtl.css	71 B
build/block-library/blocks/post-excerpt/editor.css	71 B
build/block-library/blocks/post-excerpt/style-rtl.css	155 B
build/block-library/blocks/post-excerpt/style.css	155 B
build/block-library/blocks/post-featured-image/editor-rtl.css	729 B
build/block-library/blocks/post-featured-image/editor.css	726 B
build/block-library/blocks/post-featured-image/style-rtl.css	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	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	225 B
build/block-library/blocks/query-pagination/editor.css	215 B
build/block-library/blocks/query-pagination/style-rtl.css	287 B
build/block-library/blocks/query-pagination/style.css	283 B
build/block-library/blocks/query-title/style-rtl.css	64 B
build/block-library/blocks/query-title/style.css	64 B
build/block-library/blocks/query/editor-rtl.css	452 B
build/block-library/blocks/query/editor.css	451 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	238 B
build/block-library/blocks/quote/style.css	238 B
build/block-library/blocks/quote/theme-rtl.css	233 B
build/block-library/blocks/quote/theme.css	236 B
build/block-library/blocks/read-more/style-rtl.css	138 B
build/block-library/blocks/read-more/style.css	138 B
build/block-library/blocks/rss/editor-rtl.css	101 B
build/block-library/blocks/rss/editor.css	101 B
build/block-library/blocks/rss/style-rtl.css	288 B
build/block-library/blocks/rss/style.css	287 B
build/block-library/blocks/search/editor-rtl.css	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/search/view.min.js	475 B
build/block-library/blocks/separator/editor-rtl.css	100 B
build/block-library/blocks/separator/editor.css	100 B
build/block-library/blocks/separator/style-rtl.css	248 B
build/block-library/blocks/separator/style.css	248 B
build/block-library/blocks/separator/theme-rtl.css	195 B
build/block-library/blocks/separator/theme.css	195 B
build/block-library/blocks/shortcode/editor-rtl.css	286 B
build/block-library/blocks/shortcode/editor.css	286 B
build/block-library/blocks/site-logo/editor-rtl.css	806 B
build/block-library/blocks/site-logo/editor.css	803 B
build/block-library/blocks/site-logo/style-rtl.css	218 B
build/block-library/blocks/site-logo/style.css	218 B
build/block-library/blocks/site-tagline/editor-rtl.css	87 B
build/block-library/blocks/site-tagline/editor.css	87 B
build/block-library/blocks/site-tagline/style-rtl.css	65 B
build/block-library/blocks/site-tagline/style.css	65 B
build/block-library/blocks/site-title/editor-rtl.css	85 B
build/block-library/blocks/site-title/editor.css	85 B
build/block-library/blocks/site-title/style-rtl.css	90 B
build/block-library/blocks/site-title/style.css	90 B
build/block-library/blocks/social-link/editor-rtl.css	338 B
build/block-library/blocks/social-link/editor.css	338 B
build/block-library/blocks/social-links/editor-rtl.css	757 B
build/block-library/blocks/social-links/editor.css	756 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.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.8 kB
build/block-library/editor.css	11.8 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/style-rtl.css	14.8 kB
build/block-library/style.css	14.8 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/commands/index.min.js	16.1 kB
build/commands/style-rtl.css	955 B
build/commands/style.css	952 B
build/components/style-rtl.css	12.1 kB
build/components/style.css	12.1 kB
build/core-commands/index.min.js	2.82 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/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	580 B
build/edit-post/index.min.js	12.7 kB
build/edit-post/style-rtl.css	2.31 kB
build/edit-post/style.css	2.31 kB
build/edit-widgets/index.min.js	17.7 kB
build/edit-widgets/style-rtl.css	4.2 kB
build/edit-widgets/style.css	4.2 kB
build/editor/index.min.js	101 kB
build/editor/style-rtl.css	9.28 kB
build/editor/style.css	9.29 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.09 kB
build/format-library/style-rtl.css	476 B
build/format-library/style.css	476 B
build/hooks/index.min.js	1.54 kB
build/html-entities/index.min.js	445 B
build/i18n/index.min.js	3.58 kB
build/interactivity/debug.min.js	16.4 kB
build/interactivity/file.min.js	447 B
build/interactivity/image.min.js	1.78 kB
build/interactivity/index.min.js	13.2 kB
build/interactivity/navigation.min.js	1.16 kB
build/interactivity/query.min.js	742 B
build/interactivity/router.min.js	2.8 kB
build/interactivity/search.min.js	615 B
build/is-shallow-equal/index.min.js	526 B
build/keyboard-shortcuts/index.min.js	1.31 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.18 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.61 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	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.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.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.2 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-components do the inputs on the ToolsPanel story need to be updated to use __next40pxDefaultSize?

[ciampo]

cc @mirka and @WordPress/gutenberg-design who have recently discussed this in https://github.com/WordPress/gutenberg/pull/64520#discussion_r1717314262

[t-hamano]

Remove the icons.

Personally, I don't have a strong opinion on keeping the icons. If the label is clear, I think we can do without them.

It's also worth noting that in a separate issue, the current labels were reported to be confusing (#43468).

Or, if we're stacking vertically anyway, there's plenty of horizontal space, so moving the icons to the prefix might be an option.

Global Styles:

Block Layout:

However, we think we should take into consideration the points mentioned in this comment:

There is hint text below it that applies to both controls, which may be harder to visually grasp when broken up into two rows.

[afercia]

Or, if we're stacking vertically anyway, there's plenty of horizontal space, so moving the icons to the prefix might be an option.

That's an option to consider. However, to me, wherever we try to move the icons they will look like clickable icon buttons anyways because the editor already uses patterns with clickable icon buttons in several spots around inputs (which isn't great anyways IMHO).

To me, the simplest option to make this UI clearer, consistent, and more predictable is to just remove the icons.

[tyxla]

@WordPress/gutenberg-components do the inputs on the ToolsPanel story need to be updated to use __next40pxDefaultSize?

I think @mirka didn't opt for adding the __next40pxDefaultSize prop to the UnitControl in stories (including in UnitControl's own stories) because it's technically not the default yet, so defaulting the stories to that can create confusion. The large size will be the default in a future version, but not just yet.

[jameskoster]

However, we think we should take into consideration the points mentioned in https://github.com/WordPress/gutenberg/pull/64520#discussion_r1717314262:

I reckon it may actually be beneficial for each input to have its own help text.

I will creeate a separate issue to consider to rename the 'None' setting, as it is actually the 'content width'.

A good one to discuss separately, but I wonder if "Default" might be a better name... I find "Content" a bit ambiguous. Most blocks contain content, but they can all have different widths.

wherever we try to move the icons they will look like clickable icon buttons anyways because the editor already uses patterns with clickable icon buttons in several spots around inputs (which isn't great anyways IMHO)

We need to write detailed guidelines to clarify decorative icon usage. Icons as internal prefixes that serve as (additional) visual labels is a fairly established convention, as is internal icon suffixes that serve as interactive elements, some examples:

As long as we're consistent, it could work imo. Perhaps this could be added to Storybook?

[richtabor]

To me, the simplest option to make this UI clearer, consistent, and more predictable is to just remove the icons.

Then you loose the correlation between the wide and content visual queues in the block toolbar.

I'm all for simplifying, but this makes the content/width width input fields lack context (important context). I'd consider this a regression.

Before	After

[richtabor]

I'd like to approach changes with more accountability for the user-experience of the elements in focus.

For example, instead of removing icons and stacking the fields, looking at how this plays into the greater Layout and Dimensions panels. Otherwise, we keep pushing ad-hoc changes that make the greater experience worse.

If there's not a clear experience-forward approach, we start there—not on the other end, making focused changes without accounting for the relative user-experience.

[afercia]

A good one to discuss separately, but I wonder if "Default" might be a better name...

@jameskoster Yeah, I considered to rename it to 'Default' but then reverted. The concept of content_width has been used for ages in WordPress but that is for theme developers. It's certainly not the best terminology to use for users. I'd also like to remind that the current panel to reset the setting calls it 'Content size', which is even more confusing for users. However, I think considering the renaming should go in a separate issue, see https://github.com/WordPress/gutenberg/issues/64906

We need to write detailed guidelines to clarify decorative icon usage. Icons as internal prefixes that serve as (additional) visual labels is a fairly established convention,

I just disagree on this specific usage of decorative icon. We need to distinguish different cases. For example:

• In a menu, using both an icon and a visible text label is the best of both worlds, as it provides visual affordance and clear understandable text.
• In an UI where there is a mix of icon buttons that are clickable and icons that are only decorative, the decorative icons are totally confusing especially when placed by using the same pattern of the icon buttons.

Consider the following screenthos:

In the same panel there's a total of 7 icons. Visually, all of them are placed after a control or a visual label. They look like they have the same functionality. As a user, I would expect all these icons to work the same way.

But no.

Only 5 of them are clickable icon buttons (the ones highlighted with a green circle). The other two ones aren't clickable (the ones highlighted with a red circle).

To be fair, this is less than ideal. It's extremely confusing and I would say not a great design pattern.

Actually, I did try to click those icons. I've been fooled by the look of these icons, more than once.

I'm not sure this pattern contributes to make the user experience better in any way.

A completely different case is the example you provided, where icons are used in a complex form within the input fields. Ideally, meaningful label text should be enough to identify what an input field is about. I do recognize in very limited cases an icon can further help e.g. the lens in a search field. The calendar icon for a date is usually clickable as it usually opens a date picker so it's not decorative, it's a functional button. To me, the link and phone icon are just unnecessary and confusing.

Lastly, the vertical stacking is necessary because the labels need to be more meaningful. The current labels are less than ideal. The new ones are cleared but also longer. when translated in other languages, they may be even longer. As such, the two columns layout is just not appropriate for such inputs. We've had other cases already where a two columns layout was used without taking into consideration the larity of the labels and translations. I would argue that's not a good design.

Content comes first. Clarity of controls labels and functionality come first. The layout should be crafted around the content, not the other way around where most designs in the editor try to 'squeeze' or truncate content just to make it fit into the design.

I'm all for establishing guidelines but those should be based on these basic principles. Design around the content.

Overall, I think this PR is an improvement as it removes ambiguity and potential source of confusion.

I'm all for simplifying, but this makes the content/width width input fields lack context (important context).

I don't think icons establish a clear context for all users. They may help some users. Instead, labels and descriptions should provide context. I do agree both labels and descriptions should be improved as these settings are really unclear for users.

[afercia]

One more thing I haven't mentioned yet: the current icon for the 'Content' input width is the wrong one. If the desire to visually associate these inputs with the settings in the block toolbar is valid, we should at least use the correct icon. Screenshot:

[afercia]

Even if I personally disagree with the usage of decorative icons within input fields, and because it's Friday 🥳 , in the last commit I'm trying to use the icons in the inputs prefix. I also removed the width set on the inputs as we shouldn't use arbitrary widths. The inputs are now full width.

Screenshot:

• Left: the Styles > layout panel.
• Right: The Group block settings panel.

My personal opinion: it's better compared to the current UI. Still, the icons within the inputs may look clickable for users and be potentially confusing.

[jameskoster]

Generally I feel this is a step in the right direction. The labels are clearer, and aligned between control + toolspanel. I appreciate that the icon placement follows a more standard convention.

Separate rows is a tricky one... it does seem a shame to split them when they're so close to fitting on one row. But ultimately my feeling on this subject is that the layout should be governed by a different component—something like the Settings form layout designs we've been exploring in https://github.com/WordPress/gutenberg/issues/63624—rather than forced to work in this one instance via ad hoc styles / overrides. Clearly that is a separate, much larger discussion, and for that reason I don't consider separate rows to be a deal breaker in the short term.

It would be good to adjust the spacing between the rows so that it is consistent across the block inspector and the Layout panel in global styles.

Shouldn't the help text be consistent as well, and potentially polished a bit?

[afercia]

... when they're so close to fitting on one row.

@jameskoster they're not. They are in English. WordPress is translated in many languages though. Design should always take into account that many translations have strings that are way longer. A two columns layout inevitably breaks in many languages e.g. german, Italian, Spanish and many others.

I'd really love the design team to always provide mockups and designs with examples of at least 2-3 languages that are known to be the ones with longer translations.

[afercia]

Re: tweaking descriptions etc. I'd totally agree but prefer to split that in a separate PR. See https://github.com/WordPress/gutenberg/issues/64842#issuecomment-2321027157

[richtabor]

Separate rows is a tricky one... it does seem a shame to split them when they're so close to fitting on one row. But ultimately my feeling on this subject is that the layout should be governed by a different component—something like the Settings form layout designs we've been exploring in https://github.com/WordPress/gutenberg/issues/63624—rather than forced to work in this one instance via ad hoc styles / overrides. Clearly that is a separate, much larger discussion, and for that reason I don't consider separate rows to be a deal breaker in the short term.

I disagree here.

This doesn't seem like a meaningful step forward to warrant a change.

I'd rather think of layout as a holistic control set than ad-hoc changes that likely further confuse users. Otherwise we'll keep shifting the UI around, making the experience less familiar with every change.

[afercia]

I'd rather think of layout as a holistic control set than ad-hoc changes

Rather, I'd argue the current UI is an ad-hoc implementation. Those two icons aren't part of the base component. They're an ad-hoc implementation that only contributes to make the UI inconsistend and confusing.

This pattern is clearly problematic because those icons look clickable. I'd strongly encourage everyone to prioritize simplicity and clarity of the UI. Icons on the right of an input field are already a pattern in the editor and they are meant for icon buttons i.e. for interactive controls. In no case icons that are non-clickable and only have 'visual labeling' purposes should ever be placed in that spot.

[afercia]

It would be good to adjust the spacing between the rows so that it is consistent across the block inspector and the Layout panel in global styles.

The last commit tries to make the vertical spacing more consistent between the two editors. Screenshot:

• Left: Styles panel
• Right: Group block settings panel

Re: labels and help text / descriptions: I'd totally agree they should be improved. I'd prefer to do that in the context of https://github.com/WordPress/gutenberg/issues/64906

[jameskoster]

I'd rather think of layout as a holistic control set

Then we should design a pattern for that purpose, based on the system fundamentals and established conventions. One that will elegantly adapt to different environments.

Thinking further down the road, if/when support for additional custom widths is available, ItemGroup may be a suitable component to use here.

But obviously this needs a dedicated exploration.

[ciampo]

ItemGroup may be a suitable component to use here.

If screen estate was a concern, we could also switch to a icon-based ToggleGroupControl, or a CustomSelectControl

[richtabor]

If there's not a clear experience-forward approach, we start there—not on the other end, making focused changes without accounting for the relative user-experience.

My comment still stands.

This isn't an improvement in user experience, but it is a change—one not worth the change. It's clear this isn't an ideal state of this UI/X.