Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add block variations transformation in block switcher #50139

Merged
merged 7 commits into from
May 17, 2023

Conversation

ntsekouras
Copy link
Contributor

What?

Resolves: #49891
Resolves: #39066

Some issues below are related and could be resolved with small changes to apply the transform scope to some variations, or small tweaks.
Issues: #40208, #49879, #49584, #49524, #46726, #46195

I don't think we have concluded to a specific design for this, so this PR will help us do so. Also for now I have enabled this only for single selected blocks.

My personal notes would be:

  1. If we have a maximum number(ex 4) we could show them in a list. If there are more, we could show the rest in an extra menu item with a popover - in that case I'm not sure how the deeper nested block preview would work well, but 🤷 .
  2. Do we want to keep the current transform UI in Inspector? I'd say yes, but in some cases we might not want to, so we might consider a flag or something.
  3. Ordering of MenuGroups, etc..
  4. While we're at it, maybe we should consider augmenting the transforms API by adding something like a category(ex layout. I don't have something specific in mind for now, but we'll see based on the main block switcher issue's needs.

Testing Instructions

  1. Insert blocks with transform variations, like Group
  2. Open the block switcher and play around

Screenshots or screencast

Screen.Recording.2023-04-27.at.3.52.17.PM.mov

@ntsekouras ntsekouras added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks [Package] Block editor /packages/block-editor labels Apr 27, 2023
@ntsekouras ntsekouras self-assigned this Apr 27, 2023
@github-actions
Copy link

github-actions bot commented Apr 27, 2023

Size Change: +929 B (0%)

Total Size: 1.39 MB

Filename Size Change
build/block-editor/index.min.js 205 kB -180 B (0%)
build/block-editor/style-rtl.css 15.4 kB +26 B (0%)
build/block-editor/style.css 15.3 kB +26 B (0%)
build/block-library/index.min.js 205 kB +667 B (0%)
build/blocks/index.min.js 51.1 kB -60 B (0%)
build/components/index.min.js 210 kB -51 B (0%)
build/components/style-rtl.css 11.8 kB -20 B (0%)
build/components/style.css 11.8 kB -20 B (0%)
build/core-data/index.min.js 16.6 kB -55 B (0%)
build/edit-site/index.min.js 65.5 kB +818 B (+1%)
build/edit-site/style-rtl.css 10.6 kB -10 B (0%)
build/edit-site/style.css 10.6 kB -12 B (0%)
build/editor/index.min.js 46.1 kB +19 B (0%)
build/i18n/index.min.js 3.75 kB -35 B (-1%)
build/plugins/index.min.js 1.86 kB -82 B (-4%)
build/shortcode/index.min.js 1.42 kB -102 B (-7%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.33 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.05 kB
build/block-directory/style.css 1.05 kB
build/block-editor/content-rtl.css 4.17 kB
build/block-editor/content.css 4.16 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 91 B
build/block-library/blocks/avatar/style.css 91 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 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 409 B
build/block-library/blocks/columns/style.css 409 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 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 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.61 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 159 B
build/block-library/blocks/details/style.css 159 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 379 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
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 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.21 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 401 B
build/block-library/blocks/page-list/editor.css 401 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 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 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 322 B
build/block-library/blocks/post-featured-image/style.css 322 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 281 B
build/block-library/blocks/post-template/style.css 281 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 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 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 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 434 B
build/block-library/blocks/search/style.css 432 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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/editor-rtl.css 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 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 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.12 kB
build/block-library/common.css 1.12 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.8 kB
build/block-library/editor.css 11.8 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/interactive-blocks/interactivity.min.js 2.19 kB
build/block-library/interactive-blocks/navigation.min.js 841 B
build/block-library/interactive-blocks/vendors.min.js 8.15 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.8 kB
build/block-library/style.css 12.8 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/commands/index.min.js 15 kB
build/commands/style-rtl.css 807 B
build/commands/style.css 804 B
build/compose/index.min.js 12.4 kB
build/core-commands/index.min.js 1.84 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 718 B
build/data/index.min.js 8.73 kB
build/date/index.min.js 40.5 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.76 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35.4 kB
build/edit-post/style-rtl.css 7.84 kB
build/edit-post/style.css 7.83 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.58 kB
build/edit-widgets/style.css 4.58 kB
build/editor/style-rtl.css 3.59 kB
build/editor/style.css 3.59 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.8 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 952 B
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 11.1 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 2.09 kB
build/style-engine/index.min.js 1.55 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.74 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Apr 27, 2023

Flaky tests detected in c053a1e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4945275915
📝 Reported issues:

@jameskoster
Copy link
Contributor

Do we want to keep the current transform UI in Inspector?

My instinct is that's something to consider separately. There is an icon-button UI there, and also this dropdown which looks a little tired:

Screenshot 2023-04-27 at 18 43 43

On Group blocks the 'Orientation' UI is also a transform:

Screenshot 2023-04-27 at 19 01 39

It might be good to consolidate all of these different transform methods, but yeah, likely a separate consideration.

If we have a maximum number(ex 4) we could show them in a list

Are we aware of any examples where a block has more than four variations? Do we need to worry about this just yet? Flyouts would probably make sense and afaik the components team are currently researching that.


Looking at a couple of specific blocks:

Group

Screenshot 2023-04-27 at 18 47 32

  1. It's strange to see Quote as a transform option, but I guess that's a separate issue?
  2. 'Variations' is kind of a technical term, I'm not sure we need the heading.
  3. I'd be tempted to prioritise the variations group over the columns/cover/unwrap group. 'Unwrap' should probably be 'Ungroup' but I guess that's separate too.

Terms

Screenshot 2023-04-27 at 18 51 21

  1. Again I'd prioritise the variations – this is probably a good rule of thumb.
  2. It's strange to see the Product taxonomies here. I'm editing my Post template so there's no practical use for them in this context. I appreciate this might be tricky but do you have any ideas how we might exclude contextually incompatible variations? To be clear: Categories ↔ Tags makes sense, as does Product Tags ↔ Product Categories. But Categories ↔ Product Categories doesn't.

I've love to hear thoughts from other @WordPress/gutenberg-design team members.

Thanks for working on this Nik!

@ntsekouras
Copy link
Contributor Author

If we have a maximum number(ex 4) we could show them in a list

Are we aware of any examples where a block has more than four variations? Do we need to worry about this just yet?

Right now in core, no. But this can be the case for Social Icon and probably some other blocks, when we enable this. This is an API that will pick up such variations(transform scoped) and show them there, so if any third party blocks have many of them, will automatically render there.

It's strange to see Quote as a transform option, but I guess that's a separate issue?

Yes

'Unwrap' should probably be 'Ungroup'

This is an API for other blocks too, like Quote and that's the reason for the more generic label.

It's strange to see the Product taxonomies here

That's something different as we don't have any context for variations/blocks right now. I think this is more connected to the issues about where to show specific blocks in all places(even the Inserter).

@paaljoachim
Copy link
Contributor

Adding variations to the Transform to drop down looks like a good idea to me.
As some will use the Transform drop down to make the adjustment, while others will use the top sidebar icons to adjust. There are just different preferences to how to accomplish something. There is also a lot of space in the Transform drop down and can also be easier to use compared to the top sidebar settings area. I would at the moment not set a limit to example 4, but instead see how things develop and change to make the drop down easier to navigate. I like the Transform drop down you have made Nik.

Another aspect with this is if the Transform drop down needs an even bigger redesign which needs to be more thought through, but that is for another time.

@richtabor
Copy link
Member

I’m curious if variations should be treated any differently than transforms.

The experience, and resulting expectation, of using either a transform or a variation is the same. I don’t think it’s necessary to call them out separately; perhaps just prioritized higher than transforms.

“Transform” and “Variation” are more technical terms anyhow (why I suggested “Turn into” previously #42202).

@jasmussen
Copy link
Contributor

I’m curious if variations should be treated any differently than transforms.

In the case of the use case described in this PR, maybe the difference is not useful.

Zooming out a bit, however, I feel like the block transforms interface (both the one in the inspector, but primarily the dropdown from the block toolbar) hasn't been as creatively explored as it might have been. Essentially transforming one block into another can be thought of as an opportunity to view a variety of possible layouts. A quote might get a ton more impact by becoming a pullquote, or an image might benefit from text-overlay of a cover.

We are a bit limited there with transforms, through poor quality block previews, lots of work to still do on flyout menus, and some duplicate interfaces muddling things up. At the same time, this transforms interface also needs to accomplish the most basic writing flow task: transform a paragraph to a heading.

I still think there's an opportunity for a larger creative push on transforms, as described above. But a more useful near term solution there may be to refine pattern transforms first. That is, select 2 paragraphs and an image, and get suggestions for compatible patterns it can transform into. Can be both in the dropdown, but it can also easily be here:

Screenshot 2023-05-02 at 09 18 56

Keeping pattern transforms in mind as probably the first big visual transforms push, maybe single block transforms can just be grouped together? (Also, let's remove "Unwrap" in favor of having only "Ungroup" in the ellipsis menu soon)

@ntsekouras
Copy link
Contributor Author

But a more useful near term solution there may be to refine pattern transforms first. That is, select 2 paragraphs and an image, and get suggestions for compatible patterns it can transform into.

There is no good way to do that easily currently. There is a mechanism for transforming from patterns(implemented here), but there are many boxes to check in order to find matches:

  1. Patterns need to declare the blockTypes prop for blocks they want to support
  2. They need to be simple blocks(no innerBlocks)
  3. All selected blocks are matched with a Pattern's block

So while it's possible for certain cases and already in block switcher, it's quite hard and I don't think there are lots of patterns right now that are made with the above in mind.

Having said that, this PR's main purpose for me is to decide on how to better organize the transforms, even if that would mean to explore augmenting some APIs. I started with the variation transforms, but we should have a clear vision on where we want to go and act accordingly.

@richtabor
Copy link
Member

richtabor commented May 3, 2023

I still think there's an opportunity for a larger creative push on transforms, as described above.

I agree—that'll be very neat—though I lean towards that effort being separate from transforming between a single blocks variations (what this PR is attempting).

I don't think there's a difference experience-wise if I want to change my "Tags" block into a "Categories" block, or even a "Post Date" block. I'm turning one thing into another, at the singular block level. Selecting a variation from that popover isn't transforming the block in a programmatic sense, but it is experientially.

I'm proposing we move forward on this PR, but remove the separate MenuGroup to instead have variations prepended to the list of "transforms".

And as a follow-up consider #42202, as well as removing Columns and Group as editor-wide transforms. We already have Group/Ungroup and columns doesn't seem like a common entry-point after-the-fact.

CleanShot 2023-05-03 at 15 54 40

@richtabor

This comment was marked as resolved.

@ntsekouras ntsekouras force-pushed the add/block-variation-transforms-in-switcher branch from c212e2c to fc743b5 Compare May 4, 2023 07:35
@jasmussen

This comment was marked as off-topic.

@richtabor
Copy link
Member

To be clear, that's entirely separate from this issue, and not blocking or even urgent. But I want to make sure it's ticketed both for separate conversation and followup, so if there isn't yet an issue (anyone know?), I'm happy to create one.

There's this issue here: #45841

@richtabor

This comment was marked as resolved.

@ntsekouras ntsekouras force-pushed the add/block-variation-transforms-in-switcher branch from fc743b5 to c053a1e Compare May 11, 2023 07:42
@ntsekouras
Copy link
Contributor Author

Took this for another spin, I'm getting this error here, on block multi-select:

Fixed! Additionally I prepended the variation transforms to the list. I'll see to the tests now.

@ntsekouras ntsekouras force-pushed the add/block-variation-transforms-in-switcher branch from a311eeb to a71e09d Compare May 11, 2023 14:09
Copy link
Contributor

@mcsf mcsf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks Needs Dev Note Requires a developer note for a major WordPress release cycle Needs User Documentation Needs new user documentation [Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Switch post meta blocks via transform menu Allow Group block to transform to the Row variation
9 participants