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

Inserter: show all blocks (alternative) #62169

Merged
merged 10 commits into from
May 31, 2024
Merged

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented May 31, 2024

What?

Fixes #60991
This is an alternative to #61873.

This PR changes getInserterItems to always return all items, but each item defines at which root client ID it can be inserted.

Inside the inserter, when a block is selected, there's a list for blocks that can be inserted at the selection, and a list with remaining blocks. Since each of these blocks have a root client ID, we know where to show the insertion point. The index at which to insert is derived from the selection.

Why?

See #60991.

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Copy link

github-actions bot commented May 31, 2024

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: ellatrix <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: SaxonF <[email protected]>
Co-authored-by: annezazu <[email protected]>

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

Copy link

github-actions bot commented May 31, 2024

Size Change: -29 B (0%)

Total Size: 1.74 MB

Filename Size Change
build/block-editor/index.min.js 262 kB +600 B (+0.23%)
build/block-editor/style-rtl.css 15.6 kB +37 B (+0.24%)
build/block-editor/style.css 15.6 kB +32 B (+0.21%)
build/block-library/index.min.js 219 kB +69 B (+0.03%)
build/components/index.min.js 222 kB +12 B (+0.01%)
build/core-data/index.min.js 72.5 kB -1 B (0%)
build/edit-post/index.min.js 12.5 kB +7 B (+0.06%)
build/edit-post/style-rtl.css 2.32 kB -33 B (-1.4%)
build/edit-post/style.css 2.31 kB -34 B (-1.45%)
build/edit-site/index.min.js 208 kB -1.01 kB (-0.48%)
build/edit-site/style-rtl.css 11.9 kB +45 B (+0.38%)
build/edit-site/style.css 11.9 kB +44 B (+0.37%)
build/edit-widgets/index.min.js 17.6 kB +21 B (+0.12%)
build/editor/index.min.js 95.6 kB +193 B (+0.2%)
build/editor/style-rtl.css 9.23 kB -4 B (-0.04%)
build/editor/style.css 9.24 kB -4 B (-0.04%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.27 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.29 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.58 kB
build/block-editor/content.css 4.57 kB
build/block-editor/default-editor-styles-rtl.css 395 B
build/block-editor/default-editor-styles.css 395 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 126 B
build/block-library/blocks/audio/theme.css 126 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 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 307 B
build/block-library/blocks/button/editor.css 307 B
build/block-library/blocks/button/style-rtl.css 539 B
build/block-library/blocks/button/style.css 539 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 421 B
build/block-library/blocks/columns/style.css 421 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 667 B
build/block-library/blocks/cover/editor.css 670 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 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 312 B
build/block-library/blocks/embed/editor.css 312 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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 327 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 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 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 962 B
build/block-library/blocks/gallery/editor.css 965 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 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 403 B
build/block-library/blocks/group/editor.css 403 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 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 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 891 B
build/block-library/blocks/image/editor.css 891 B
build/block-library/blocks/image/style-rtl.css 1.52 kB
build/block-library/blocks/image/style.css 1.52 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.54 kB
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 205 B
build/block-library/blocks/latest-posts/editor.css 205 B
build/block-library/blocks/latest-posts/style-rtl.css 512 B
build/block-library/blocks/latest-posts/style.css 512 B
build/block-library/blocks/list/style-rtl.css 102 B
build/block-library/blocks/list/style.css 102 B
build/block-library/blocks/media-text/editor-rtl.css 306 B
build/block-library/blocks/media-text/editor.css 305 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 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 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 193 B
build/block-library/blocks/navigation-link/style.css 192 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
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 377 B
build/block-library/blocks/page-list/editor.css 377 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 341 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 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 734 B
build/block-library/blocks/post-featured-image/editor.css 732 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 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 397 B
build/block-library/blocks/post-template/style.css 396 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 125 B
build/block-library/blocks/preformatted/style.css 125 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 344 B
build/block-library/blocks/pullquote/style.css 343 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 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 140 B
build/block-library/blocks/read-more/style.css 140 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 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 690 B
build/block-library/blocks/search/style.css 689 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 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 194 B
build/block-library/blocks/separator/theme.css 194 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 805 B
build/block-library/blocks/site-logo/editor.css 805 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 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 124 B
build/block-library/blocks/site-title/editor.css 124 B
build/block-library/blocks/site-title/style-rtl.css 70 B
build/block-library/blocks/site-title/style.css 70 B
build/block-library/blocks/social-link/editor-rtl.css 335 B
build/block-library/blocks/social-link/editor.css 335 B
build/block-library/blocks/social-links/editor-rtl.css 683 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.51 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 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 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 265 B
build/block-library/blocks/tag-cloud/style.css 266 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 B
build/block-library/blocks/template-part/theme-rtl.css 112 B
build/block-library/blocks/template-part/theme.css 112 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12 kB
build/block-library/editor.css 12 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.6 kB
build/block-library/style.css 14.6 kB
build/block-library/theme-rtl.css 703 B
build/block-library/theme.css 706 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 51.7 kB
build/commands/index.min.js 15.2 kB
build/commands/style-rtl.css 953 B
build/commands/style.css 951 B
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.8 kB
build/core-commands/index.min.js 2.71 kB
build/customize-widgets/index.min.js 10.9 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 9.01 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 578 B
build/edit-widgets/style-rtl.css 4.21 kB
build/edit-widgets/style.css 4.21 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.05 kB
build/format-library/style-rtl.css 493 B
build/format-library/style.css 492 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 13.4 kB
build/interactivity/navigation.min.js 1.17 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 2.81 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 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.14 kB
build/list-reusable-blocks/style-rtl.css 851 B
build/list-reusable-blocks/style.css 851 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.58 kB
build/nux/style-rtl.css 748 B
build/nux/style.css 744 B
build/patterns/index.min.js 6.51 kB
build/patterns/style-rtl.css 595 B
build/patterns/style.css 595 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 719 B
build/preferences/style.css 721 B
build/primitives/index.min.js 831 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 629 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.02 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.74 kB
build/vendors/react-dom.min.js 42.8 kB
build/vendors/react-jsx-runtime.min.js 554 B
build/vendors/react.min.js 2.65 kB
build/viewport/index.min.js 964 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.13 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

I like the idea of this PR compared to #61873 it's centralising the decision around where a block should be inserted right at the core of the process, when getting the list of blocks to be shown in the inserter.

There are some missing parts compared to the alternative though:

  • the logic needs to be updated so that the insertion is always visually after the currently selected block, just like normal insertion is
  • for some reason the insertion point for blocks in itemsRemaining shows up in the site editor but not in the post editor
  • this PR does not address the situation when parents cannot be used for insertion so children have to be tested
    • when a page is edited in templated locked mode we cannot find an insertion point up the tree we need to go down the tree, in a way in which we don't specify a block by name (e.g. post-content).
    • the original PR solves it 50% in the sense that the insertion happens in the 1st available spot, which is really not intuitive at all. Maybe we should not fix this yet?

@ellatrix
Copy link
Member Author

the logic needs to be updated so that the insertion is always visually after the currently selected block, just like normal insertion is

Could you elaborate here? I think I am always inserting it after the selected block, I'm not sure what you mean :)

when a page is edited in templated locked mode we cannot find an insertion point up the tree we need to go down the tree, in a way in which we don't specify a block by name (e.g. post-content).

Can we fall back to section root client ID instead of the absolute root ''?

@draganescu
Copy link
Contributor

I think I am always inserting it after the selected block, I'm not sure what you mean

Hmm, in my original testing the block got inserted before the selection 🤷🏻 Now trying to record a video after latest updates it works fine ...

@draganescu
Copy link
Contributor

Can we fall back to section root client ID instead of the absolute root ''?

That could work too yes!

item.rootClientId,
getIndex( {
destinationRootClientId,
destinationIndex,
Copy link
Member Author

Choose a reason for hiding this comment

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

At some point we should remove all this destination stuff from and calculate it here inline, it would simplify things.

item.rootClientId = rootClientId;

while (
! canInsertBlockTypeUnmemoized(
Copy link
Member Author

Choose a reason for hiding this comment

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

Worth noting that, if you can select any block at the selected block, it doesn't impact the performance of this selector (and thus inserter opening) at all, because we already had this check and this loop will stop immediately. For other cases, it will loop up the tree until we find a place where it can be inserted. At some point we should investigate getBlockEditingMode because that's probably a very unperformant selector.

@@ -2039,13 +2039,52 @@ export const getInserterItems = createRegistrySelector( ( select ) =>

Copy link
Member Author

Choose a reason for hiding this comment

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

getInserterItems is a public selector, so we might have to create a private selector and make changes to that one instead 🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

Why? Is this change bound to break anything? It should improve the UX across the board. The normal classic functionality remains as is.

Copy link
Member Author

Choose a reason for hiding this comment

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

If you use getInserterItems it will now show all blocks, but with a rootClientId property, so the handling is different, technically a breaking change.

Copy link
Member Author

Choose a reason for hiding this comment

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

Made it a private option in 9a3f379

@jasmussen
Copy link
Contributor

Great work, this is a substantially better experience.

I’d recommend:

  • Don’t show the subheading for the active selected block. It doesn’t feel needed in practice — the immediate rows of blocks are sorted there because they are relevant to what you have selected. Everything else gets the inserter line to show they’ll be inserted after.
  • Fix the border separator between the in-block suggestions, and the after-block selections.
  • Don’t show patterns in the blocks tab.

With that in place I think we can ship this.

@draganescu draganescu changed the title Inserter: show all block (alternative) Inserter: show all blocks (alternative) May 31, 2024
Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

The code simplifies the approach in the alternative PR (#61873) and from my reading it only adds the least needed amount of work when needed. By using a private option there is no public API change so we can safely land this.

This still introduces patterns in search results for blocks that hid them previously, for instance in a pattern with overrides, but they were allowed in search results in trunk except they were filtered out b/c of no insertion point. Now they can be inserted so they show, it is not a change of behavior.

onInsert
);

export function BlockTypesTabPanel( {
Copy link
Contributor

Choose a reason for hiding this comment

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

This is added because we now split the blocks tab in two panels, one for blocks inserted in the current selection insertion point one that can be inserted in the nearest available insertion point relative to the current selection.

)
.map( buildBlockTypeInserterItem );

if ( options[ withRootClientIdOptionKey ] ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I think adding a comment of how the discovery algorithm works would be great to read in a couple of months :D

@jameskoster
Copy link
Contributor

There's some duplication if you have the 'most used blocks' preference toggled on:

Screenshot 2024-05-31 at 13 18 44

@draganescu draganescu added [Type] Bug An existing feature does not function as intended [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels May 31, 2024
@jameskoster
Copy link
Contributor

This is an edge case, so we might address separately but; if you're editing a page with a template that contains no Content block, then the Inserter will still turn up empty. Ideally there should be some messaging explaining what's going on. Something like:

This template does not display content; blocks cannot be inserted. To insert blocks try switching to a different template.

@richtabor
Copy link
Member

If Most Used is rendered for the allowed blocks, could we not render the second one? Here's the latest with the Nav block:

CleanShot 2024-05-31 at 10 13 53

@draganescu draganescu enabled auto-merge (squash) May 31, 2024 14:46
@richtabor
Copy link
Member

richtabor commented May 31, 2024

@richtabor Then it will also disappear if you have a shorter allowed list.

Right, but even with a long allowedList, there probably shouldn't ever be multiple "Most Used" suggestions.

Let's merge since we don't have much time left before RC

Sounds good, I think tweaking most used in those scenarios with lots of blocks could be a potential follow-up fix.

The HR styling as well (double-border).

@richtabor richtabor self-requested a review May 31, 2024 14:55
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.

A solid experience win. Thanks for everyone who pushed this forward.

@richtabor richtabor added this to the Gutenberg 18.5 milestone May 31, 2024
@draganescu draganescu merged commit 768900f into trunk May 31, 2024
64 checks passed
@draganescu draganescu deleted the try/show-all-block-inserter branch May 31, 2024 15:48
@jsnajdr
Copy link
Member

jsnajdr commented Jun 3, 2024

This PR caused a pretty big regression in the inserterHover metric:

│ inserterHover        │ '44.18 ms +3.85% -5.18%'                 │ '2.06 ms +10.68% -5.83%'   │ '2044.66%' │

It's both on this PR branch and on trunk after merging, so the regression is real, not some random breakdown.

The metric is calculating how long does it take to dispatch the mouseover and mouseout events. Maybe this makes the metric itself questionable, because it's measuring something that the user is not experiencing.

@Mamaduka
Copy link
Member

Mamaduka commented Jun 3, 2024

The useBlockTypesState also seems to return an unstable reference in the first useSelect. I'm not sure if it's related to performance regression.

Screenshot

CleanShot 2024-06-03 at 16 58 49

carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jun 4, 2024
* Inserter: show all block

* Fix parents

* Use section root as fallback

* Remove heading, remove reusable blocks

* Add private selector option

* Fix quick inserter

* Fix appender inserter

* Fix most used, fix quick inserter

* Fix widgets page

* Fix e2e tests

Co-authored-by: ellatrix <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: jeryj <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: SaxonF <[email protected]>
Co-authored-by: annezazu <[email protected]>
@youknowriad
Copy link
Contributor

Looks like this impacted the "inserter hover" metric.

@ellatrix
Copy link
Member Author

ellatrix commented Jun 4, 2024

@youknowriad You're late to the party, it's already been fixed 😛 #62263 (comment)

@youknowriad
Copy link
Contributor

haha :) I wish all perf regressions were like that :P (fixed before I even notice them :P )

@geriux
Copy link
Member

geriux commented Jun 5, 2024

Hey there 👋 We are investigating an issue on the native editor with the Social icons block, when tapping on the inline inserter, all of the blocks are shown with the social icons:

Inserter first blocks After scrolling

When testing the Web editor with these changes, when tapping on "Browse all blocks" all blocks are available as well (although after the social icons). Is this expected?

Web editor (Before)

Before.mov

Web editor (After)

After.mov

Confirming if it is expected would help us move forward with a fix on the native side. Thank you!

@geriux
Copy link
Member

geriux commented Jun 5, 2024

After going through some of the linked issues, it looks like it is indeed the desired behavior 👍 We'll work on how we sort the blocks in the inserter. Sorry for the noise!

patil-vipul pushed a commit to patil-vipul/gutenberg that referenced this pull request Jun 17, 2024
* Inserter: show all block

* Fix parents

* Use section root as fallback

* Remove heading, remove reusable blocks

* Add private selector option

* Fix quick inserter

* Fix appender inserter

* Fix most used, fix quick inserter

* Fix widgets page

* Fix e2e tests

Co-authored-by: ellatrix <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: jeryj <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: SaxonF <[email protected]>
Co-authored-by: annezazu <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve Inserter experience when blocks cannot be inserted
9 participants