WordPress
Use standard button variations for the Post featured image UI.
Addresses part of https://github.com/WordPress/gutenberg/issues/62743
What?
Custom implementations and styling aren't great for the reasons explained in https://github.com/WordPress/gutenberg/issues/62743. This PR aims to use default button variants for the Post featured image buttons 'Replace' and 'Remove'.
Also, as reported several times, controls that appear and disappear are a problem for accessibility and should be avoided.
Lastly, controls for destructive actions in WordPress should be red.
Why?
- WordPress does have a library of reusable UI components. Using ad-hoc implementations and styling defeats the purpose of a reusable components library.
- Consistency is key to provide a cohesive user experience.
- Ad-hoc implementations increase maintenance cost and should be avoided.
- Appearing-disappearing controls should be avoided.
How?
- Uses default secondary buttons with the 'destructive` red color for the 'Remove' button.
- Moves the buttons out of the image preview.
- Makes the buttons always visible (when an image is set).
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Screenshots before and after:
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: richtabor <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: mattrwalker <[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] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Size Change: -186 B (-0.01%)
Total Size: 1.77 MB
| Filename | Size | Change |
|---|---|---|
build/editor/index.min.js |
103 kB | +27 B (+0.03%) |
build/editor/style-rtl.css |
9.27 kB | -102 B (-1.09%) |
build/editor/style.css |
9.26 kB | -111 B (-1.18%) |
ℹ️ 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/index.min.js |
218 kB |
build/edit-site/posts-rtl.css |
7.32 kB |
build/edit-site/posts.css |
7.32 kB |
build/edit-site/style-rtl.css |
12.6 kB |
build/edit-site/style.css |
12.6 kB |
build/edit-widgets/index.min.js |
17.7 kB |
build/edit-widgets/style-rtl.css |
4.19 kB |
build/edit-widgets/style.css |
4.19 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 |
I agree that we should avoid ad hoc customisations of core components. However this doesn't feel like the right solution to me. Both buttons have way too much prominence given they're relatively infrequent actions.
I don't love this, but sharing in case it inspires other ideas... of the existing patterns we might try a toolbar-like approach:
I don't love this, but sharing in case it inspires other ideas... of the existing patterns we might try a toolbar-like approach:
Yea, I don't love this either.
Thinking about this one a little more I think it might make sense to revisit once we've designed an accessible DropZone/Upload component. Ideally that could be used here without any modifications. There's some early discussion in https://github.com/WordPress/gutenberg/issues/65333.
I agree that we should avoid ad hoc customisations of core components. However this doesn't feel like the right solution to me. Both buttons have way too much prominence given they're relatively infrequent actions.
I agree but that's the symptom, not the cause. Setting a featured image is infrequent, that's correct. It's usually an editing flow that is a 'do once and forget'. As such, the new design that moved the featured image at the top of the post Summary is far from ideal in the first place. As a user, I don't need to see the featured image each time I look at the settings panel in such a prominent position. The featured image as too much, unnecessary, prominence. I do think the root cause is in the new design and that should be changed.
Additionally, the new design removed the heading that used to identify the Featured image section. Removing headings is far from ideal. Any section of content and settings should be identified with a clear, meaningful, heading. On top of that, when a featured image is set, there's really nothing to tell users what this image is. I'm planning to create a separate issue to change the whole design of the featured image UI.
It is also worth noting that in other issues, direct feedback from users pointed out that the Status and Publish date should be the first things in the Post Summary. The featured image is certainly an important information but it's less important than Status and Publish date. To me, the new design didn't take into consideration functionality and usability and instead prioritized 'visual appearance' rather than a functional analysis. That's not the kind of design I'd love to see in WordPress.
The visual hierarchy here is off quite a bit when a featured image is applied:
I agree. That's why teh featured image shouldn't be the first thing in the Post Summary in the first place, as I mentioned in my previous comment.
Thinking about this one a little more I think it might make sense to revisit once we've designed an accessible DropZone/Upload component. Ideally that could be used here without any modifications.
@jameskoster the ongoing exploration in https://github.com/WordPress/gutenberg/issues/65333 would certainly help. However, it is important to understand that the 'Replace' and 'Remove' buttons of the Featured Image UI aren't part of the drop zone component. As such, I'm not sure https://github.com/WordPress/gutenberg/issues/65333 would solve the fundamental issue we're discussing here.
I'd appreciate any alternative design as long as the buttons are always visible and use a standard variant. Thanks.
This seems like multiple problems within problems.
The first is hierarchy of information, the second is the featured Image needs a heading with actions having the right prominence. Fixing hierarchy first helps fix the other two.
In the screenshot I've given the Featured Image a heading, moved it lower, and the actions are accessed from an ellipses. This allows us to not have to make a new button variant or make a new component entirely, and in the future if we ever wanted to have more actions like "Generate featured image using AI" or something, it would fit within the menu.
This design decision does come with tradeoffs. The side panel becomes less overwhelmed with buttons, but it makes the actions one additional click to access.
If moving the featured image is on the table, and we feel it is too prominent, then we should also consider grouping it with all the other field rows. This PR is relevant.
Edit: Sharing a design from the aforementioned issue. This is tailored more towards regular image fields, but could also be used for the Featured image.
Edit 2: I should add that this is a pattern we could consider for componentisation so that it can be reused in other areas of the UI where users upload to the media library / set media fields / etc. For example setting the site logo / icon in settings.
I'd agree tha tmoviing the featured image UI down in teh panel helps. But that's a more broader issue that applies to other settings as well. For example, the excerpt. There have been reporst from user that the first things they would like to have in the panel are:
- The post stauts
- The post publish/schedule date
That's a broader issue related to the recent redesign of the Pos tsummary panel that, in my opnion, needs to be deeply revisited. I'd suggest to keep that separated and only address the featured image UI in this PR / issue.
I'd also like to remiind everyone that some parts of the Post summary panel redesign have already been reverted (the trash button, the revisions link) and other ones will be likely reverted as well (the sticky setting) because they were hidden behing an ellipsis menu.
As such, I'm not sure moving the Replace and Remove buttons into an ellipsis menu is the right direction because that's a pattern that direct user feedback reported as problematic and not discoverable. HIding things doesn't make an UI better usable.
One more good reason to make the Replace and Remove buttons always visible is well explained in https://github.com/WordPress/gutenberg/issues/66005.