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 section styles switch button in block toolbar in zoom out mode #67140

Open matiasbenedetto opened 2 days ago

matiasbenedetto commented 2 days ago

What?

Add section styles switch button in block toolbar in zoom-out mode.

Why?

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

How?

Adding the button to the toolbar.

Testing Instructions

  1. Browser to the editor and open the inserter.
  2. Add a pattern.
  3. If you are not in the zoom-out view select the zoom-out view.
  4. Select the just-added pattern and observe the toolbar. If the block has block style variations available, it should render a new button with the 'Swtich Style' label.
  5. If the block has block variations available, each click on the 'Switch style' button should change the style to the next variation.

Screenshots or screencast

https://github.com/user-attachments/assets/ede56aec-a6db-48f1-9f73-aea007004e31

github-actions[bot] commented 2 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: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: jasmussen <joen@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 2 days ago

Size Change: +450 B (+0.02%)

Total Size: 1.82 MB

Filename Size Change
build/block-editor/index.min.js 255 kB +450 B (+0.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.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-editor/style-rtl.css` | 15.4 kB | | `build/block-editor/style.css` | 15.4 kB | | `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` | 441 B | | `build/block-library/blocks/video/editor.css` | 442 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` | 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.7 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.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.37 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

richtabor commented 2 days ago

I'm not feeling the popover + popovers. Perhaps we just iterate through style variations when you select the control? to not further block the content?

CleanShot 2024-11-19 at 17 11 44

richtabor commented 2 days ago

May be nice to use the current style's background color in the control, like this:

CleanShot 2024-11-19 at 17 14 22

matiasbenedetto commented 2 days ago

May be nice to use the current style's background color

That seems to be pretty specific to variations with background colors specified and the variation can be any style. Could it be confusing to change that color when using a variation with a background color and not when using variations changing other styles/settings?

richtabor commented 2 days ago

That seems to be pretty specific to variations with background colors specified and the variation can be any style. Could it be confusing to change that color when using a variation with a background color and not when using variations changing other styles/settings?

No, I don't think it'd be confusing if it does have a background color and it's used here.

matiasbenedetto commented 2 days ago

I'm not feeling the popover + popovers. Perhaps we just iterate through style variations when you select the control?

Do you suggest removing this part entirely?

image

ntsekouras commented 2 days ago

Do you suggest removing this part entirely?

If the suggestion is indeed to add a shuffle styles here, I don't think it's great. There were reasons we removed the shuffle from patterns to change design. Maybe a list like the change design could be considered.

aaronrobertshaw commented 2 days ago

There were reasons we removed the shuffle from patterns to change design

What were those reasons?

Maybe a list like the change design could be considered.

You mean sorta like the current state of this PR? Maybe just without the preview popover?

ntsekouras commented 2 days ago

What were those reasons?

They were too random, also a user would need to rotate all of them to go back to one they liked, etc..

You mean sorta like the current state of this PR? Maybe just without the preview popover?

I mean like this:

Screenshot 2024-11-20 at 8 33 47 AM
aaronrobertshaw commented 2 days ago

They were too random, also a user would need to rotate all of them to go back to one they liked, etc..

I don't think the "too random" issue is a problem with the section styles being rotated.

I can agree that having to rotate all section styles to get back to the default is a bit annoying though.

You mean sorta like the current state of this PR? Maybe just without the preview popover?

I mean like this:

I see what the "Change design" list is. I was trying to understand what the suggestion was here for section styles.

Is the suggestion that the list contains previews of the block with the different section styles applied? So, no list of buttons like this PR currently has? If I'm now following you correctly, sounds like it's worth a shot.

For discussion purposes in the meantime, here's a quick diff that can be applied to see what cycling section styles through a single button would feel like.

Diff for section styles toolbar button to cycle styles Note: This is just a quick hack so it uses a quick ad hoc SVG icon so that the fill within the teardrop path can be set with the current section style's background color. ```diff diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index ea068d81265..817cfea761d 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -226,7 +226,10 @@ export function PrivateBlockToolbar( { ) } { showSwitchSectionStyleButton && ( - + ) } { shouldShowVisualToolbar && showSlots && ( <> diff --git a/packages/block-editor/src/components/block-toolbar/switch-section-style.js b/packages/block-editor/src/components/block-toolbar/switch-section-style.js index 8e4b9c0b74b..4101b85d3fa 100644 --- a/packages/block-editor/src/components/block-toolbar/switch-section-style.js +++ b/packages/block-editor/src/components/block-toolbar/switch-section-style.js @@ -4,55 +4,110 @@ import { ToolbarButton, ToolbarGroup, - Dropdown, - __experimentalDropdownContentWrapper as DropdownContentWrapper, Icon, + Path, + SVG, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { color } from '@wordpress/icons'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { useContext } from '@wordpress/element'; /** * Internal dependencies */ -import BlockStyles from '../block-styles'; import useStylesForBlocks from '../block-styles/use-styles-for-block'; +import { replaceActiveStyle } from '../block-styles/utils'; +import { store as blockEditorStore } from '../../store'; +import { GlobalStylesContext } from '../global-styles'; +import { globalStylesDataKey } from '../../store/private-keys'; +import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation'; -const POPOVER_PROPS = { - placement: 'bottom-start', -}; +const styleIcon = ( + +); function SwitchSectionStyle( { clientId } ) { - const { stylesToRender } = useStylesForBlocks( { clientId } ); + const { stylesToRender, activeStyle, className } = useStylesForBlocks( { + clientId, + } ); + const { updateBlockAttributes } = useDispatch( blockEditorStore ); + + // Get global styles data + const { merged: mergedConfig } = useContext( GlobalStylesContext ); + const { globalSettings, globalStyles, blockName } = useSelect( + ( select ) => { + const settings = select( blockEditorStore ).getSettings(); + return { + globalSettings: settings.__experimentalFeatures, + globalStyles: settings[ globalStylesDataKey ], + blockName: select( blockEditorStore ).getBlockName( clientId ), + }; + }, + [ clientId ] + ); + + // Get the background color for the active style + const activeStyleBackground = activeStyle?.name + ? getVariationStylesWithRefValues( + { + settings: mergedConfig?.settings ?? globalSettings, + styles: mergedConfig?.styles ?? globalStyles, + }, + blockName, + activeStyle.name + )?.color?.background + : undefined; if ( ! stylesToRender || stylesToRender.length === 0 ) { return null; } + const handleStyleSwitch = () => { + const currentIndex = stylesToRender.findIndex( + ( style ) => style.name === activeStyle.name + ); + + const nextIndex = ( currentIndex + 1 ) % stylesToRender.length; + const nextStyle = stylesToRender[ nextIndex ]; + + const styleClassName = replaceActiveStyle( + className, + activeStyle, + nextStyle + ); + + updateBlockAttributes( clientId, { + className: styleClassName, + } ); + }; + return ( - { - return ( - - onToggle( ! isOpen ) } - aria-expanded={ isOpen } - label={ __( 'Styles' ) } - > - - - - ); - } } - renderContent={ () => ( - - - - ) } - /> + + + + + ); } ```

https://github.com/user-attachments/assets/e7cc8a44-3861-482a-a14d-7418c04faa8e

ntsekouras commented 2 days ago

Is the suggestion that the list contains previews of the block with the different section styles applied?

Sorry for not being clear enough. Yes, exactly that.

richtabor commented 1 day ago

If the suggestion is indeed to add a shuffle styles here, I don't think it's great. There were reasons we removed the shuffle from patterns to change design. Maybe a list like the change design could be considered.

I think we start here first, then explore a similar pattern to "Change design", but with block previews of the actual pattern.

matiasbenedetto commented 1 day ago

I committed the diff proposed by @aaronrobertshaw (Thanks!)

I think we start here first, then explore a similar pattern to "Change design", but with block previews of the actual pattern.

In that case, I think the PR is good to go. We can implement the list of styles applied to the pattern as a follow-up.

matiasbenedetto commented 20 hours ago

As per my https://github.com/WordPress/gutenberg/pull/67140#pullrequestreview-2447221592, can we please add proper test instructions?

Instructions and video updated in the PR's body.

Back to the stroke width, perhaps our design gurus could shed some light on what the exact stroke width should be. It might then be possible to enforce that as well?

I think the stroke should not be defined. At least, that's what I observed in other filled library icons. Examples: https://github.com/WordPress/gutenberg/blob/trunk/packages/icons/src/library/cancel-circle-filled.js https://github.com/WordPress/gutenberg/blob/trunk/packages/icons/src/library/help-filled.js

I submitted a PR adding the icon to the library: https://github.com/WordPress/gutenberg/pull/67202

The main aspect of the diff that was only for demo purposes was the temporary SVG used as the icon.

I think the icon should not stop us to merge this. We can replace it in a follow-up PR with the library version if https://github.com/WordPress/gutenberg/pull/67202 gets merged.

aaronrobertshaw commented 11 hours ago

Thanks for the iterations @matiasbenedetto 🚀

If @richtabor and our design gurus are happy with the interim icon, I'm ok with moving forward as is. That said, it looks like https://github.com/WordPress/gutenberg/pull/67202 already has a code review approval. If it is that close we might as well push that over the line first and tweak this before merging. I don't think it holds up landing this greatly.