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

Remove unwrap from transforms and add ungroup to more blocks #50385

Merged
merged 10 commits into from
May 19, 2023

Conversation

ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented May 5, 2023

What?

Part of: #45841

Regarding the above issue, this PR will not add any shortcuts to reduce its scope. Additionally this PR could (and maybe will) be split in two separate ones. This is because it does two things:

  1. Remove the unwrap from the block switcher for Group, Columns, Quote blocks and essentially partially or fully reverting 1, 2, 3.
  2. Adds a new API for blocks to be able to ungroup

How and Why?

This PR suggests a new transforms API for the ungroup functionality in block settings menu controls(ellipsis menu in block toolbar). If a block, besides the set grouping block(see here), want to render the Ungroup button, should add an ungroup function in their transforms of the block type.

This new function accepts the block's attributes and innerBlocks(although we might consider passing the whole block) and is responsible for returning the new blocks to replace the selected block. This is because blocks can have a different unwrapping handling - ex. Columns need to also remove the core/column blocks etc..

Why in transforms API?
No strong opinions here, but I felt it's less impactful than adding a new Block API and it can make sense semantically. We could do it there too though.

Why we even need a new API?
My first try was just adding the Ungroup button inside the blocks' edit function with BlockSettingsMenuControls. That would be the best option, if we could handle the wanted position of the menu item. Right now the fills are rendered above the Group menu item and creates a disconnect with the rest of the menu items.

Testing Instructions

  1. Insert Group, Quote, Columns blocks
  2. Observe the unwrap option in block switcher is gone
  3. Observe that the Ungroup menu item in the ellipsis menu in block toolbar works as the unwrap button was working. I'm saying this because there is already a flow there in the logic about when to show this button. Checking innerBlocks existence is not enough because for example in an seemingly empty Columns block we have empty core/column blocks.
  4. Observe that transform options in block switcher are not affected besides the removal of unwrap option.

Tasks

  • Agreement on API/approach
  • Add docs
  • Add/update tests
  • Check with mobile as I saw some tests with unwrap

@ntsekouras ntsekouras self-assigned this May 5, 2023
@ntsekouras ntsekouras added [Feature] Blocks Overall functionality of blocks [Type] New API New API to be used by plugin developers or package users. labels May 5, 2023
@github-actions
Copy link

github-actions bot commented May 5, 2023

Size Change: -22.4 kB (-2%)

Total Size: 1.38 MB

Filename Size Change
build/a11y/index.min.js 982 B -11 B (-1%)
build/annotations/index.min.js 2.76 kB -18 B (-1%)
build/api-fetch/index.min.js 2.33 kB -8 B (0%)
build/autop/index.min.js 2.14 kB -8 B (0%)
build/blob/index.min.js 472 B -11 B (-2%)
build/block-directory/index.min.js 7.18 kB -25 B (0%)
build/block-directory/style-rtl.css 1.02 kB -34 B (-3%)
build/block-directory/style.css 1.02 kB -35 B (-3%)
build/block-editor/content-rtl.css 4.12 kB -42 B (-1%)
build/block-editor/content.css 4.12 kB -41 B (-1%)
build/block-editor/default-editor-styles-rtl.css 381 B -22 B (-5%)
build/block-editor/default-editor-styles.css 381 B -22 B (-5%)
build/block-editor/index.min.js 198 kB -6.62 kB (-3%)
build/block-editor/style-rtl.css 15.1 kB -289 B (-2%)
build/block-editor/style.css 15.1 kB -290 B (-2%)
build/block-library/blocks/audio/theme-rtl.css 126 B -12 B (-9%)
build/block-library/blocks/audio/theme.css 126 B -12 B (-9%)
build/block-library/blocks/button/editor-rtl.css 584 B -3 B (-1%)
build/block-library/blocks/button/editor.css 582 B -5 B (-1%)
build/block-library/blocks/button/style-rtl.css 624 B -4 B (-1%)
build/block-library/blocks/button/style.css 623 B -4 B (-1%)
build/block-library/blocks/cover/style-rtl.css 1.61 kB -7 B (0%)
build/block-library/blocks/cover/style.css 1.6 kB -8 B (0%)
build/block-library/blocks/embed/theme-rtl.css 126 B -12 B (-9%)
build/block-library/blocks/embed/theme.css 126 B -12 B (-9%)
build/block-library/blocks/file/view.min.js 375 B -4 B (-1%)
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB -2 B (0%)
build/block-library/blocks/gallery/editor-rtl.css 947 B -10 B (-1%)
build/block-library/blocks/gallery/editor.css 952 B -10 B (-1%)
build/block-library/blocks/gallery/style-rtl.css 1.53 kB -19 B (-1%)
build/block-library/blocks/gallery/style.css 1.53 kB -19 B (-1%)
build/block-library/blocks/gallery/theme-rtl.css 108 B -14 B (-11%) 👏
build/block-library/blocks/gallery/theme.css 108 B -14 B (-11%) 👏
build/block-library/blocks/html/editor-rtl.css 336 B -4 B (-1%)
build/block-library/blocks/html/editor.css 337 B -4 B (-1%)
build/block-library/blocks/image/theme-rtl.css 126 B -11 B (-8%)
build/block-library/blocks/image/theme.css 126 B -11 B (-8%)
build/block-library/blocks/navigation-link/editor-rtl.css 712 B -4 B (-1%)
build/block-library/blocks/navigation-link/editor.css 711 B -4 B (-1%)
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B -3 B (-1%)
build/block-library/blocks/navigation-submenu/editor.css 295 B -4 B (-1%)
build/block-library/blocks/navigation/editor-rtl.css 2.33 kB +200 B (+9%) 🔍
build/block-library/blocks/navigation/editor.css 2.33 kB +199 B (+9%) 🔍
build/block-library/blocks/navigation/style-rtl.css 2.21 kB -13 B (-1%)
build/block-library/blocks/navigation/style.css 2.2 kB -10 B (0%)
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB -1 B (0%)
build/block-library/blocks/navigation/view.min.js 443 B -4 B (-1%)
build/block-library/blocks/post-featured-image/style-rtl.css 319 B -3 B (-1%)
build/block-library/blocks/post-featured-image/style.css 319 B -3 B (-1%)
build/block-library/blocks/shortcode/editor-rtl.css 323 B -6 B (-2%)
build/block-library/blocks/shortcode/editor.css 323 B -6 B (-2%)
build/block-library/blocks/site-logo/editor-rtl.css 754 B -6 B (-1%)
build/block-library/blocks/site-logo/editor.css 754 B -6 B (-1%)
build/block-library/blocks/spacer/editor-rtl.css 348 B -11 B (-3%)
build/block-library/blocks/spacer/editor.css 348 B -11 B (-3%)
build/block-library/blocks/table/style-rtl.css 645 B -6 B (-1%)
build/block-library/blocks/table/style.css 644 B -6 B (-1%)
build/block-library/blocks/table/theme-rtl.css 146 B -11 B (-7%)
build/block-library/blocks/table/theme.css 146 B -11 B (-7%)
build/block-library/blocks/video/style-rtl.css 174 B -5 B (-3%)
build/block-library/blocks/video/style.css 174 B -5 B (-3%)
build/block-library/blocks/video/theme-rtl.css 126 B -13 B (-9%)
build/block-library/blocks/video/theme.css 126 B -13 B (-9%)
build/block-library/common-rtl.css 1.1 kB -20 B (-2%)
build/block-library/common.css 1.1 kB -20 B (-2%)
build/block-library/editor-rtl.css 12 kB +157 B (+1%)
build/block-library/editor.css 12 kB +155 B (+1%)
build/block-library/index.min.js 205 kB +15 B (0%)
build/block-library/interactive-blocks/interactivity.min.js 0 B -2.19 kB (removed) 🏆
build/block-library/interactive-blocks/navigation.min.js 0 B -841 B (removed) 🏆
build/block-library/interactive-blocks/vendors.min.js 0 B -8.15 kB (removed) 🏆
build/block-library/style-rtl.css 12.8 kB -30 B (0%)
build/block-library/style.css 12.8 kB -27 B (0%)
build/block-library/theme-rtl.css 686 B -12 B (-2%)
build/block-library/theme.css 691 B -12 B (-2%)
build/block-serialization-default-parser/index.min.js 1.12 kB -8 B (-1%)
build/blocks/index.min.js 50.9 kB -141 B (0%)
build/commands/index.min.js 15 kB +29 B (0%)
build/commands/style-rtl.css 827 B +20 B (+2%)
build/commands/style.css 827 B +23 B (+3%)
build/components/index.min.js 209 kB -1.12 kB (-1%)
build/components/style-rtl.css 11.7 kB -82 B (-1%)
build/components/style.css 11.7 kB -81 B (-1%)
build/compose/index.min.js 12.4 kB -8 B (0%)
build/core-commands/index.min.js 1.8 kB -36 B (-2%)
build/core-data/index.min.js 16.5 kB -75 B (0%)
build/customize-widgets/index.min.js 12.2 kB -36 B (0%)
build/customize-widgets/style-rtl.css 1.38 kB -26 B (-2%)
build/customize-widgets/style.css 1.38 kB -25 B (-2%)
build/data-controls/index.min.js 708 B -10 B (-1%)
build/data/index.min.js 8.68 kB -46 B (-1%)
build/date/index.min.js 40.5 kB -9 B (0%)
build/deprecated/index.min.js 507 B -11 B (-2%)
build/dom-ready/index.min.js 324 B -12 B (-4%)
build/dom/index.min.js 4.72 kB -39 B (-1%)
build/edit-post/classic-rtl.css 544 B -27 B (-5%)
build/edit-post/classic.css 545 B -26 B (-5%)
build/edit-post/index.min.js 35.3 kB -111 B (0%)
build/edit-post/style-rtl.css 7.76 kB -81 B (-1%)
build/edit-post/style.css 7.75 kB -79 B (-1%)
build/edit-site/index.min.js 64.7 kB -766 B (-1%)
build/edit-site/style-rtl.css 10.6 kB +23 B (0%)
build/edit-site/style.css 10.6 kB +35 B (0%)
build/edit-widgets/index.min.js 17.3 kB -78 B (0%)
build/edit-widgets/style-rtl.css 4.53 kB -50 B (-1%)
build/edit-widgets/style.css 4.53 kB -52 B (-1%)
build/editor/index.min.js 45.8 kB -288 B (-1%)
build/editor/style-rtl.css 3.54 kB -54 B (-2%)
build/editor/style.css 3.53 kB -54 B (-2%)
build/element/index.min.js 4.89 kB -51 B (-1%)
build/escape-html/index.min.js 537 B -11 B (-2%)
build/format-library/index.min.js 7.77 kB -23 B (0%)
build/format-library/style-rtl.css 554 B -23 B (-4%)
build/format-library/style.css 553 B -24 B (-4%)
build/hooks/index.min.js 1.64 kB -28 B (-2%)
build/html-entities/index.min.js 448 B -6 B (-1%)
build/i18n/index.min.js 3.73 kB -20 B (-1%)
build/is-shallow-equal/index.min.js 527 B -8 B (-1%)
build/keyboard-shortcuts/index.min.js 1.78 kB -11 B (-1%)
build/keycodes/index.min.js 1.91 kB -31 B (-2%)
build/list-reusable-blocks/index.min.js 2.14 kB +3 B (0%)
build/list-reusable-blocks/style-rtl.css 836 B -29 B (-3%)
build/list-reusable-blocks/style.css 836 B -29 B (-3%)
build/media-utils/index.min.js 2.97 kB -17 B (-1%)
build/notices/index.min.js 963 B -14 B (-1%)
build/plugins/index.min.js 1.85 kB -13 B (-1%)
build/preferences-persistence/index.min.js 2.22 kB -9 B (0%)
build/preferences/index.min.js 1.33 kB -16 B (-1%)
build/primitives/index.min.js 944 B -16 B (-2%)
build/priority-queue/index.min.js 1.52 kB -2 B (0%)
build/private-apis/index.min.js 939 B -13 B (-1%)
build/react-i18n/index.min.js 696 B -6 B (-1%)
build/react-refresh-entry/index.min.js 8.44 kB -5 B (0%)
build/react-refresh-runtime/index.min.js 7.31 kB +2 B (0%)
build/redux-routine/index.min.js 2.74 kB -10 B (0%)
build/reusable-blocks/index.min.js 2.25 kB -10 B (0%)
build/reusable-blocks/style-rtl.css 243 B -22 B (-8%)
build/reusable-blocks/style.css 243 B -22 B (-8%)
build/rich-text/index.min.js 11 kB -32 B (0%)
build/router/index.min.js 1.78 kB +4 B (0%)
build/server-side-render/index.min.js 2.08 kB -12 B (-1%)
build/shortcode/index.min.js 1.42 kB -6 B (0%)
build/style-engine/index.min.js 1.52 kB -30 B (-2%)
build/token-list/index.min.js 644 B -6 B (-1%)
build/url/index.min.js 3.65 kB -88 B (-2%)
build/viewport/index.min.js 1.08 kB -9 B (-1%)
build/warning/index.min.js 268 B -12 B (-4%)
build/widgets/index.min.js 7.28 kB -15 B (0%)
build/widgets/style-rtl.css 1.15 kB -27 B (-2%)
build/widgets/style.css 1.16 kB -26 B (-2%)
build/wordcount/index.min.js 1.06 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
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/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/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/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/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/interactivity.min.js 395 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/freeform/editor.css 2.44 kB
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/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/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/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation/interactivity.min.js 865 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-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/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/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/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/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/interactivity/runtime.min.js 2.23 kB
build/block-library/interactivity/vendors.min.js 8.15 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-serialization-spec-parser/index.min.js 2.83 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

compressed-size-action

@github-actions
Copy link

github-actions bot commented May 5, 2023

Flaky tests detected in 5c6d77b.
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/5023231722
📝 Reported issues:

@jasmussen
Copy link
Contributor

Thanks for this one!

group with ellipsis menu open, and focus on the ungroup option

Designwise I would suggest this one is good to go, for a few reasons:

  • The transform interface should be a focused overview of other blocks and patterns you can transform to, and ideally not a place for options like "Unwrap".
  • Group already exists in the ellipsis menu, as does "Ungroup".
  • "Unwrap" is not an easy to understand term, and the icon that went with it makes it look like you transform into a group. "Ungroup" is a simpler term, even when it technically unwraps a columns block, which you can still think of as just a group of two columns.

We should follow up with ⌘G and ⌘⇧G for grouping and ungrouping later on.

@gziolo
Copy link
Member

gziolo commented May 8, 2023

This is an interesting idea to extend transforms with a new type ungroup. I'm resharing the same idea in #49464 (comment) in the context of exposing a new way to modify the block when copying it.

Copy link
Member

@richtabor richtabor left a comment

Choose a reason for hiding this comment

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

Works as expected, nice.

@gziolo gziolo added Needs Dev Note Requires a developer note for a major WordPress release cycle [Feature] Block API API that allows to express the block paradigm. labels May 8, 2023
@richtabor
Copy link
Member

The transform interface should be a focused overview of other blocks and patterns you can transform to, and ideally not a place for options like "Unwrap".

I agree. Though it begs to question if transforming to "Group" or "Columns" should be a transform. They're not really transforming. And we already have "Group" as an action within the Block Settings Menu (same as Ungroup).

@jasmussen
Copy link
Contributor

I agree. Though it begs to question if transforming to "Group" or "Columns" should be a transform. They're not really transforming. And we already have "Group" as an action within the Block Settings Menu (same as Ungroup).

Fuzzy separate conversation, yes. I think it can be valid as a transform: transforming a columns block should essentially change the container into a group instead. Whereas if you choose the "Group" item from the ellipsis menu, it should wrap the columns block in a group. That's my instinct: transforms should always transform.

Multi-selection falls under that umbrella, select 3 paragraphs and transform to group or columns, and that should work as it does today.

The main thing I personally find confusing, is when the option listed as a transform actually wraps in a new container instead of actually transforming.

@fluiddot
Copy link
Contributor

fluiddot commented May 9, 2023

Hey @ntsekouras 👋, as we talked internally regarding the mobile native version, it would be great to postpone merging this PR until we implement the mobile native version of ConvertToGroupButton component. This is needed to provide the Group/Ungroup buttons in the app, otherwise, these options won't be available in the app.

I think the implementation shouldn't be complex if we can use the useConvertToGroupButtonProps hook. Although, the way the block menu actions are rendered in the app differs from the web. This part is what might take most of the effort.

I'm afraid I don't bandwidth this week to focus on this, but hopefully, I can spare time next week and unblock the mobile part, as well as address the failure in unit tests. Thanks 🙇 !

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.

This looks great, I have no objections!

@fluiddot
Copy link
Contributor

Hey @ntsekouras 👋, as we talked internally regarding the mobile native version, it would be great to postpone merging this PR until we implement the mobile native version of ConvertToGroupButton component. This is needed to provide the Group/Ungroup buttons in the app, otherwise, these options won't be available in the app.

In #50693, we'll incorporate into this PR the needed changes for the mobile native version (including unit test fixes).

* Add `useConvertToGroupButtons` hook

Most of the logic of this hook has been extracted from `ConvertToGroupButton` component. The main difference is that we return the configuration for the block actions instead of a component.

* Add Group and Ungroup options to block actions menu

* Remove `canUnwrap` option from `getBlockTransformOptions` test helper

* Update tests for Group, Quote and Columns blocks
@fluiddot
Copy link
Contributor

Hey @ntsekouras 👋, as we talked internally regarding the mobile native version, it would be great to postpone merging this PR until we implement the mobile native version of ConvertToGroupButton component. This is needed to provide the Group/Ungroup buttons in the app, otherwise, these options won't be available in the app.

In #50693, we'll incorporate into this PR the needed changes for the mobile native version (including unit test fixes).

The mobile native changes have been incorporating into this PR via 5c6d77b.

@ntsekouras ntsekouras merged commit 7a93783 into trunk May 19, 2023
@ntsekouras ntsekouras deleted the remove/unwrap-transform branch May 19, 2023 11:01
@github-actions github-actions bot added this to the Gutenberg 15.9 milestone May 19, 2023
westonruter added a commit that referenced this pull request May 19, 2023
…dd/static-closures

* 'trunk' of https://github.com/WordPress/gutenberg: (26 commits)
  Add transparent outline to input control BackdropUI focus style. (#50772)
  Added wrapper element for RichText in File block (#50607)
  Remove the experimental flag of the command center (#50781)
  Update the document title in the site editor to open the command center (#50369)
  Remove `unwrap` from transforms and add `ungroup` to more blocks (#50385)
  Add new experimental version of DropdownMenu (#49473)
  Force display of in custom css input boxes to LTR (#50768)
  Polish experimental navigation block (#50670)
  Support negation operator in selectors in the Interactivity API (#50732)
  Minor updates to theme.json schema pages (#50742)
  $revisions_controller is not used. Let's delete it. (#50763)
  Remove OffCanvasEditor (#50705)
  Mobile - E2E test - Update code to use the new navigateUp helper (#50736)
  Try: Smaller external link icon (#50728)
  Block Editor: Remove unused 'useIsDimensionsSupportValid' method (#50735)
  Fix flaky media inserter drag-and-dropping e2e test (#50740)
  docs: Fix change log typo (#50737)
  Edit Site: Fix `useEditedEntityRecord()` loading state (#50730)
  Fix labelling, description, and focus style of the block transform to pattern previews (#50577)
  Fix Global Styles sidebar block selection on zoom out mode (#50708)
  ...
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jun 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [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 [Type] New API New API to be used by plugin developers or package users.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants