search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.53k stars 4.21k forks source link

Add reset button to color control #67116

Open juanfra opened 3 days ago

juanfra commented 3 days ago

What?

Add an inline reset button to the color control, shown on hover/focus, if there's a value. Picked changes from this PR with a few tweaks. The original PR was closed as stale, but I believe this is a nice improvement that will improve the overall experience for creators.

Props @kevin940726

Why?

To make it easier to reset a color selection, reduce the number of clicks as it doesn't require opening the color options panel.

Fixes https://github.com/WordPress/gutenberg/issues/41866

How?

Adding a button if there's a color value, and adjusting the CSS so that it looks like the proposed designs.

Testing Instructions

  1. Create a page.
  2. Add a paragraph.
  3. Add some colors to the paragraph (background/text)
  4. Confirm that for the elements that have a color, if you hover/focus you have a "reset" option and that it resets the color selection.

Screenshots or screencast

https://github.com/user-attachments/assets/5e41d3ca-be1c-43ad-980c-c26b07515505

github-actions[bot] commented 3 days ago

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: juanfra <juanfra@git.wordpress.org>
Co-authored-by: dhruvang21 <dhruvang21@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

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

github-actions[bot] commented 3 days ago

Size Change: +184 B (+0.01%)

Total Size: 1.82 MB

Filename Size Change
build/block-editor/index.min.js 255 kB +88 B (+0.03%)
build/block-editor/style-rtl.css 15.4 kB +48 B (+0.31%)
build/block-editor/style.css 15.4 kB +48 B (+0.31%)
ℹ️ 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.42 kB | | `build/block-editor/content.css` | 4.41 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` | 84 B | | `build/block-library/blocks/archives/editor.css` | 83 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` | 555 B | | `build/block-library/blocks/button/style.css` | 555 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` | 837 B | | `build/block-library/blocks/comments/editor.css` | 836 B | | `build/block-library/blocks/comments/style-rtl.css` | 637 B | | `build/block-library/blocks/comments/style.css` | 637 B | | `build/block-library/blocks/cover/editor-rtl.css` | 631 B | | `build/block-library/blocks/cover/editor.css` | 631 B | | `build/block-library/blocks/cover/style-rtl.css` | 1.7 kB | | `build/block-library/blocks/cover/style.css` | 1.69 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` | 799 B | | `build/block-library/blocks/image/editor.css` | 799 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` | 139 B | | `build/block-library/blocks/latest-posts/editor.css` | 138 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` | 552 B | | `build/block-library/blocks/media-text/style.css` | 550 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` | 192 B | | `build/block-library/blocks/page-list/style.css` | 192 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` | 273 B | | `build/block-library/blocks/social-link/editor.css` | 273 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.6 kB | | `build/block-library/editor.css` | 11.6 kB | | `build/block-library/elements-rtl.css` | 54 B | | `build/block-library/elements.css` | 54 B | | `build/block-library/index.min.js` | 221 kB | | `build/block-library/reset-rtl.css` | 472 B | | `build/block-library/reset.css` | 472 B | | `build/block-library/style-rtl.css` | 15 kB | | `build/block-library/style.css` | 15 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.6 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` | 228 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.08 kB | | `build/core-data/index.min.js` | 74.3 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.69 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.5 kB | | `build/edit-post/style-rtl.css` | 2.76 kB | | `build/edit-post/style.css` | 2.75 kB | | `build/edit-site/index.min.js` | 219 kB | | `build/edit-site/posts-rtl.css` | 7.51 kB | | `build/edit-site/posts.css` | 7.51 kB | | `build/edit-site/style-rtl.css` | 13.3 kB | | `build/edit-site/style.css` | 13.4 kB | | `build/edit-widgets/index.min.js` | 17.7 kB | | `build/edit-widgets/style-rtl.css` | 4.09 kB | | `build/edit-widgets/style.css` | 4.09 kB | | `build/editor/index.min.js` | 112 kB | | `build/editor/style-rtl.css` | 9.66 kB | | `build/editor/style.css` | 9.68 kB | | `build/element/index.min.js` | 4.82 kB | | `build/escape-html/index.min.js` | 537 B | | `build/format-library/index.min.js` | 8.05 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.58 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.35 kB | | `build/patterns/style-rtl.css` | 687 B | | `build/patterns/style.css` | 685 B | | `build/plugins/index.min.js` | 1.86 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` | 961 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.2 kB | | `build/router/index.min.js` | 2.11 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/vips/index.min.js` | 36.2 kB | | `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

dhruvang21 commented 2 days ago

I tested this PR in the Gutenberg PR reviewer, and it works perfectly, resetting the color with a single click. I’ve also attached a video of the testing process below for reference.

https://github.com/user-attachments/assets/f16b4035-4af4-4960-b7fc-2b20e094c60e

jasmussen commented 2 days ago

This feels like a good ergonomic addition. However I wonder if this reset button shouldn't be part of the ItemGroup component itself, rather than a separate piece like this. CC: @WordPress/gutenberg-components

jameskoster commented 2 days ago

However I wonder if this reset button shouldn't be part of the ItemGroup component itself

Eventually yes I think so; https://github.com/WordPress/gutenberg/issues/64445.

juanfra commented 2 days ago

@jasmussen @jameskoster should we move forward with this improvement and then eventually implement the changes in the component?

jasmussen commented 2 days ago

Component first or this use case first, I'm personally okay either way. Though I'd love a components-group chime in just to be sure we aren't building up drift.

tyxla commented 2 days ago

I'd lean on going use-case first, and then we can always add it as an API to the ItemGroup.Item component as part of https://github.com/WordPress/gutenberg/issues/64445.