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

Block lazy loading #51778

Draft
wants to merge 3 commits into
base: trunk
Choose a base branch
from
Draft

Block lazy loading #51778

wants to merge 3 commits into from

Conversation

jsnajdr
Copy link
Member

@jsnajdr jsnajdr commented Jun 22, 2023

This is the current state of my async block loading experiment. What I try to achieve is:

On initial load of the post editor, never load any block edit scripts, or anything else that calls registerBlockType. The only information about blocks is the bootstrap info in wp.blocks.unstable__bootstrapServerSideBlockDefinitions. From the bootstrap info, we know that a block exists, but everything else should be dynamically loaded.

Then we setup webpack to build each Core block editor script individually, as editor.min.js and editor.min.asset.php. Until now they were all bundled in one block-library package script.

Instead of enqueuing the editor script, I output an "importmap". It could be a real native ES importmap, or just a plain JSON object assigned to a global wp.importmap variable. I'm doing the JS variable now. To use a native importmap and import() statements, we'll have to overcome one limitation: for each block, we can register multiple editor scripts and multiple stylesheets. The importmap can specify all of them in an array, and then wp.importBlock( 'core/paragraph' ) can load all the registered files at once. JS, CSS, and maybe translations in the future. On the other hand, native importmap can only map 1:1, one module name to one JS script.

Now, the unfinished part is to dynamically load the block scripts in the browser. The idea is to change getBlockType to throw an error when a block definition is not found. And replace the failing calls with a new function, async loadBlockType, which will dynamically load the missing block. The first place to do this will be the block parser.

@jsnajdr jsnajdr self-assigned this Jun 22, 2023
@github-actions
Copy link

github-actions bot commented Jun 22, 2023

Size Change: +540 B (0%)

Total Size: 2.05 MB

Filename Size Change
build/block-editor/index.min.js 245 kB +285 B (0%)
build/block-library/index.min.js 214 kB -189 B (0%)
build/blocks/index.min.js 51.7 kB +415 B (+1%)
build/components/index.min.js 257 kB +11 B (0%)
build/core-data/index.min.js 72.7 kB +35 B (0%)
build/edit-post/index.min.js 31.7 kB -19 B (0%)
build/edit-site/index.min.js 194 kB +12 B (0%)
build/editor/index.min.js 54.6 kB +7 B (0%)
build/widgets/index.min.js 7.17 kB -17 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 590 B
build/block-directory/index.min.js 7.25 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.29 kB
build/block-editor/content.css 4.28 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/style-rtl.css 15.2 kB
build/block-editor/style.css 15.2 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/editor.min.js 1.39 kB
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/editor.min.js 3.91 kB
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/editor.min.js 2.88 kB
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/block/editor.min.js 2.86 kB
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/editor.min.js 5.61 kB
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 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/editor.min.js 3.81 kB
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/editor.min.js 1.68 kB
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/editor.min.js 2.47 kB
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/editor.min.js 1.63 kB
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/column/editor.min.js 2.33 kB
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/editor.min.js 4.88 kB
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-author-avatar/editor.min.js 1.46 kB
build/block-library/blocks/comment-author-name/editor.min.js 2.2 kB
build/block-library/blocks/comment-content/editor.min.js 1.62 kB
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-date/editor.min.js 1.76 kB
build/block-library/blocks/comment-edit-link/editor.min.js 1.68 kB
build/block-library/blocks/comment-reply-link/editor.min.js 1.76 kB
build/block-library/blocks/comment-template/editor.min.js 2.26 kB
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-next/editor.min.js 977 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-numbers/editor.min.js 978 B
build/block-library/blocks/comments-pagination-previous/editor.min.js 980 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/editor.min.js 1.35 kB
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-title/editor.min.js 2.24 kB
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/editor.min.js 3.73 kB
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/editor.min.js 16.3 kB
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/editor.min.js 1.55 kB
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 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/editor.min.js 13.1 kB
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 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/editor.min.js 4.35 kB
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 322 B
build/block-library/blocks/footnotes/editor.min.js 2.73 kB
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 229 B
build/block-library/blocks/form-input/editor.css 228 B
build/block-library/blocks/form-input/editor.min.js 4.31 kB
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 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 B
build/block-library/blocks/form-submission-notification/editor.min.js 1.78 kB
build/block-library/blocks/form-submit-button/editor.min.js 586 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/editor.min.js 2.32 kB
build/block-library/blocks/form/view.min.js 452 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/freeform/editor.min.js 2.69 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/editor.min.js 11.5 kB
build/block-library/blocks/gallery/style-rtl.css 1.75 kB
build/block-library/blocks/gallery/style.css 1.75 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/editor.min.js 4.87 kB
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/editor.min.js 5.1 kB
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/home-link/editor.min.js 1.79 kB
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/html/editor.min.js 1.53 kB
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/editor.min.js 9.63 kB
build/block-library/blocks/image/style-rtl.css 1.61 kB
build/block-library/blocks/image/style.css 1.6 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 2.02 kB
build/block-library/blocks/latest-comments/editor.min.js 1.32 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 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/editor.min.js 4.49 kB
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-item/editor.min.js 3.13 kB
build/block-library/blocks/list/editor.min.js 4.16 kB
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/loginout/editor.min.js 1.06 kB
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/editor.min.js 6.27 kB
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/missing/editor.min.js 1.17 kB
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/more/editor.min.js 1.3 kB
build/block-library/blocks/navigation-link/editor-rtl.css 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/editor.min.js 6.55 kB
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 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-submenu/editor.min.js 5.4 kB
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/editor.min.js 13.8 kB
build/block-library/blocks/navigation/style-rtl.css 2.27 kB
build/block-library/blocks/navigation/style.css 2.26 kB
build/block-library/blocks/navigation/view.min.js 1.04 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/nextpage/editor.min.js 842 B
build/block-library/blocks/page-list-item/editor.min.js 2.06 kB
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/editor.min.js 3.53 kB
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/editor.min.js 4.08 kB
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/pattern/editor.min.js 1.29 kB
build/block-library/blocks/post-author-biography/editor.min.js 1.53 kB
build/block-library/blocks/post-author-name/editor.min.js 1.83 kB
build/block-library/blocks/post-author/editor.min.js 2.41 kB
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-comment/editor.min.js 1.14 kB
build/block-library/blocks/post-comments-count/editor.min.js 1.7 kB
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/editor.min.js 2.14 kB
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-comments-link/editor.min.js 1.89 kB
build/block-library/blocks/post-content/editor.min.js 1.58 kB
build/block-library/blocks/post-date/editor.min.js 2.96 kB
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/editor.min.js 2.42 kB
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 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/editor.min.js 4.09 kB
build/block-library/blocks/post-featured-image/style-rtl.css 345 B
build/block-library/blocks/post-featured-image/style.css 345 B
build/block-library/blocks/post-navigation-link/editor.min.js 2.18 kB
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/editor.min.js 2.8 kB
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/editor.min.js 2.6 kB
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/editor.min.js 1.8 kB
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/editor.min.js 2.31 kB
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/editor.min.js 1.58 kB
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/editor.min.js 3.19 kB
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 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-no-results/editor.min.js 1.21 kB
build/block-library/blocks/query-pagination-next/editor.min.js 997 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-numbers/editor.min.js 1.24 kB
build/block-library/blocks/query-pagination-previous/editor.min.js 1 kB
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/editor.min.js 1.48 kB
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/editor.min.js 2.34 kB
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/editor.min.js 11.4 kB
build/block-library/blocks/query/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 647 B
build/block-library/blocks/quote/editor.min.js 3.02 kB
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/editor.min.js 1.17 kB
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 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/editor.min.js 2.01 kB
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/editor.min.js 3.88 kB
build/block-library/blocks/search/style-rtl.css 613 B
build/block-library/blocks/search/style.css 613 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 475 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/editor.min.js 1.89 kB
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/shortcode/editor.min.js 1.03 kB
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/editor.min.js 4.57 kB
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 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-tagline/editor.min.js 2.04 kB
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/editor.min.js 2.66 kB
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-link/editor.min.js 24.2 kB
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/editor.min.js 3.14 kB
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.49 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/editor.min.js 2.88 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-of-contents/editor.min.js 3.1 kB
build/block-library/blocks/table/editor-rtl.css 399 B
build/block-library/blocks/table/editor.css 399 B
build/block-library/blocks/table/editor.min.js 6.01 kB
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 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/editor.min.js 1.89 kB
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/editor.min.js 8.22 kB
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/term-description/editor.min.js 1.45 kB
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/editor.min.js 1.38 kB
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/editor.min.js 2.46 kB
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/editor.min.js 6.42 kB
build/block-library/blocks/video/style-rtl.css 191 B
build/block-library/blocks/video/style.css 191 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.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.4 kB
build/block-library/editor.css 12.4 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.7 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.8 kB
build/core-commands/index.min.js 2.73 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.94 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/style-rtl.css 7.16 kB
build/edit-post/style.css 7.15 kB
build/edit-site/style-rtl.css 14.7 kB
build/edit-site/style.css 14.7 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.71 kB
build/edit-widgets/style.css 4.71 kB
build/editor/style-rtl.css 4.38 kB
build/editor/style.css 4.38 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.76 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/file.min.js 442 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/index.min.js 12.5 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 791 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.49 kB
build/list-reusable-blocks/index.min.js 2.11 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.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 5.27 kB
build/patterns/style-rtl.css 564 B
build/patterns/style.css 564 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 1.85 kB
build/preferences/index.min.js 1.26 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 994 B
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.74 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.5 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 1.98 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.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
build/viewport/index.min.js 967 B
build/warning/index.min.js 259 B
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Jun 22, 2023

Flaky tests detected in efac9eb.
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/6036439195
📝 Reported issues:

Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

This is exciting to see! I'm dropping some comments as I'm passing by, but I'm looking forward to the work to make the block parser asynchronous.

It looks like this PR can serve as a primary PR and then we can land pieces from it separately. One obvious piece for example can be the part where we extract the editor entrypoints to separate modules.

Anyway, I wonder if we should think about a centralized importmap mechanism that uses the native browser import maps. It could be something that can be separately landed, but centralization will be needed, since browsers currently only support a single import map. Or do you intend to use the webpack runtime instead?

lib/init.php Outdated

function disable_scripts() {
// disable loading and enqueuing block editor scripts and styles
// can't be `__return_false` because this function is already registered for this filter
Copy link
Member

Choose a reason for hiding this comment

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

Perhaps if we add it with a different priority (the third add_filter() argument)?

lib/init.php Outdated
Comment on lines 73 to 71
if ( ! isset( $metadata['editorScript'] ) ) {
if ( isset( $metadata['file'] ) && strstr( $metadata['file'], 'gutenberg') ) {
Copy link
Member

Choose a reason for hiding this comment

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

Nit: maybe these should be combined in a single if or we could invert the top one to avoid deep nesting.


function emit_importmap() {
wp_register_script( 'wp-importmap', '');
wp_add_inline_script( 'wp-importmap', 'wp.importmap = ' . wp_json_encode( get_block_importmap() ) . ';' );
Copy link
Member

Choose a reason for hiding this comment

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

wp_localize_script() could be an easier way to pass raw data from PHP to JS.

}

function emit_importmap() {
wp_register_script( 'wp-importmap', '');
Copy link
Member

Choose a reason for hiding this comment

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

Since we're calling wp_enqueue_script() down there, we don't need to register it at all. This line can be removed. We might only need to call the wp_add_inline_script() or wp_localize_script() after the wp_enqueue_script.


function emit_importmap() {
wp_register_script( 'wp-importmap', '');
wp_add_inline_script( 'wp-importmap', 'wp.importmap = ' . wp_json_encode( get_block_importmap() ) . ';' );
Copy link
Member

Choose a reason for hiding this comment

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

Are we aiming to use webpack and not native ES modules and import maps? I'd love to hear what your thoughts are about this choice.

Copy link
Contributor

Choose a reason for hiding this comment

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

Same here, would love to understand why we're reinventing import maps?

Comment on lines 575 to 582
const src = mod.src;
const newNode = document.createElement( 'script' );
newNode.src = src;
newNode.onload = () =>
console.log( 'loaded', name, mod.handle, src );
newNode.onerror = () =>
console.log( 'failed to load', name, mod.handle, src );
document.body.appendChild( newNode );
Copy link
Member

Choose a reason for hiding this comment

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

This could just be an ES import if we use the native import maps. It could be easier to make it async, too, since we can chain additional actions import( 'mod' ).then(() => { ... } );

lib/init.php Outdated
if ( ! empty( $metadata['name'] ) && str_starts_with( $metadata['name'], 'core/' ) ) {
$block_name = str_replace( 'core/', '', $metadata['name'] );
if ( ! isset( $metadata['editorScript'] ) ) {
if ( isset( $metadata['file'] ) && strstr( $metadata['file'], 'gutenberg') ) {
Copy link
Member

Choose a reason for hiding this comment

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

This may need some additional logic for when it's ported to core.

@jsnajdr jsnajdr force-pushed the feat/async-block-loading branch 2 times, most recently from 333c37a to 80cc489 Compare June 30, 2023 07:20
@jsnajdr
Copy link
Member Author

jsnajdr commented Jul 4, 2023

Going to report on the current status.

The first step is to register all blocks, on the server, without enqueing any actual block scripts and styles. We just need to declare them in a block.json's editorScript and editorStyle fields. Then they will be registered (but not enqueued), and we are able to create an import map. The PHP server will then send two pieces of bootstrap information to the browser, as static scripts in the initial HTML:

  • basic block info in the object passed to unstable__bootstrapServerSideBlockDefinitions. This should eventually include all the non-code information, like the name, parent, supports fields. From this basic info, the editor should be able to figure out many values like canIncludeBlockTypeInInserter or canInsertBlockType, without having to load the block code and styles. To make this work, blocks will have to be more diligent about registering server-side info. For example, Jetpack's server registration is currently truly minimalistic, registering just the block type and render_callback.
  • import map with information that the browser needs to load editor_script and editor_style handles, registered with a block, dynamically. I.e., the server, instead of enqueing the scripts and styles, sends the browser the information needed by the browser to load them itself.

This server-side registration and dynamic loading now mostly works, especially for Core blocks. One thing that doesn't work well is dynamically loading styles. To register the block styles at all, I have to enable the should_load_separate_core_block_assets filter (set the return value to true), but this filter then disables many other places where the same filter is used, like enqueuing global and theme styles. The result is that the editor loads and works, but has broken (missing) styles.

The next step is to make the block parser (the parse function) asynchronous. Initially the editor doesn't have code for any blocks, but as the parser encounters new blocks, it loads their code dynamically before proceeding.

This dynamic parsing also already mostly works. I can open post editor for an existing block, and all the blocks that it uses will be loaded, their editor UI rendered, and they can be edited.

Another important place where HTML content is being parsed into blocks are block patterns. It's the __experimentalGetParsedPattern selectors. Until now this selector has been completely synchronous, could be used in a useSelect callback, and the caller would get the parsed blocks immediately. Now this process becomes async, and we'll need to introduce an async selector that has a resolver. And the calling code will need to wait for the parsing to finish. This conversion is currently not finished at all, there is still a lot of work remaining.

The next place that is currently broken and needs work is the block inserter. Currently it displays only the blocks that have been already loaded, triggered by the post content, and other places that trigger block loading. Therefore, it displays a rather random subset of registered blocks, not all of them. Here, it would be nice if the block inserter could do all its work with just the server-sent bootstrap info about the block. What does it need? The block name, description, icon, and information needed to determine which blocks can be inserted at a particular place. I.e., the parent or supports fields. This, just like block patterns parsing, is currently a work in progress.

We'll see what other issues with async block loading will come up.

@jsnajdr jsnajdr force-pushed the feat/async-block-loading branch 2 times, most recently from 0f3fa80 to 283e25a Compare July 5, 2023 12:22
@jsnajdr
Copy link
Member Author

jsnajdr commented Jul 10, 2023

We are now in a state where performance tests can run successfully, all the editor features that the tests use are working. The improvements in various initial load metrics are very significant and nice:

┌──────────────────────┬──────────────────────────────────────────┬───────────────┐
│       (index)        │ c1d4cd17b4aabf05986d41cdeeba166f7e6d625d │     trunk     │
├──────────────────────┼──────────────────────────────────────────┼───────────────┤
│    serverResponse    │               '233.96 ms'                │  '267.52 ms'  │
│      firstPaint      │               '274.16 ms'                │  '310.68 ms'  │
│   domContentLoaded   │                '491.1 ms'                │  '773.12 ms'  │
│        loaded        │               '491.96 ms'                │  '773.94 ms'  │
│ firstContentfulPaint │               '825.42 ms'                │ '1433.34 ms'  │
│      firstBlock      │               '1624.28 ms'               │ '12628.06 ms' │

@jsnajdr jsnajdr force-pushed the feat/async-block-loading branch 2 times, most recently from 4053716 to 1dde417 Compare July 21, 2023 11:16
@github-actions
Copy link

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files
❔ lib/blocks.php
❔ lib/init.php

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

It's great to see this prototype. Help move things forward.

It's clear from the changes, that a lot of breaking changes are happening, most actions need to be "awaited" for now if we make parsing blocks... async. How do you see us handling this? Is there a potential path forward here without breaking changes? (To be honest, it seems very hard to me)

Is there an alternative where lazy loading blocks could happen at the block level instead. For instance, the block registration itself might be small enough (not 0) but the dependencies are the biggest part, it might be possible to extract the heavy dependencies to external lazy loaded scripts (think image editor, resizable stuff, syntax highlighting script, ...) without breaking changes.

The last thing is about the "import map" and "loader", what are your thoughts on trying import maps and I also feel that we should probably extract this from this PR and potentially try it with a new very small script like I did in #34172 before actually making the higher level abstraction (block lazy loading)


function emit_importmap() {
wp_register_script( 'wp-importmap', '');
wp_add_inline_script( 'wp-importmap', 'wp.importmap = ' . wp_json_encode( get_block_importmap() ) . ';' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here, would love to understand why we're reinventing import maps?

@gziolo gziolo changed the title Async block loading Block Lazy Loading Sep 5, 2023
@gziolo gziolo added the [Feature] Blocks Overall functionality of blocks label Sep 5, 2023
@gziolo gziolo added the [Feature] Block API API that allows to express the block paradigm. label Sep 5, 2023
@gziolo gziolo changed the title Block Lazy Loading Block lazy loading Sep 5, 2023
if ( ! empty( $block_type->editor_script_handles ) ) {
foreach ( $block_type->editor_script_handles as $editor_script_handle ) {
if ( str_starts_with( $editor_script_handle, 'wp-block-' ) ) {
wp_deregister_script( $editor_script_handle );
Copy link
Member

Choose a reason for hiding this comment

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

To connect the efforts. I was looking in WordPress/wordpress-develop#5118 at ways to allow referencing the same file path by multiple blocks by storing a handle name in the asset file to use it as a way to prevent registering the same file under different names. As of today, WP core would register the same script file under different handles because the name is generated based on the block name.

@luisherranz
Copy link
Member

One question about backward compatibility. To make the transition to async APIs, ideally, we would need to support:

  • Client-side registered blocks (no info about them in the server)
  • That could use the wp globals directly (don't declare dependencies)
  • And could print scripts directly to the page (don't use wp_enqueue_scripts)

That is the most extreme case, right?

Something like this:

// some plugin function...
echo "
  <script>
    const { registerBlockType } = wp.blocks;
    registerBlockType( 'my-plugin/block', {
      // ...
    } );
  </script>
";

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 [Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants