Description
When working with large numbers of reusable blocks (thousands), the editor crashes the browser when attempting to access the Reusable tab in the block inserter. I know the number of blocks might seem excessive but we have a large sized site with a lot of content that needs to be distributed across products and post types so we'll need to be able to use many thousands of reusable blocks to keep management of the content sane. 😅
Step-by-step reproduction instructions
- Create a reusable block
- Create 3000 clones of it using the function in this Gist. May need to do this in batches of 1000.
- Create a new page/post and open the inserter using the add block "+" icon in the top left corner.
- Wait while the Reusable tab appears (this takes a while).
- Click on the Reusable tab — this is where the browser tab crashes.
Expected behaviour
I would have expected the reusable block system not to attempt to load all reusable blocks on page load but instead, use an AJAX-based system that shows paginated result sets.
Actual behaviour
The browser appears to attempt to load all reusable blocks on page load, 100 at a time until it eventually hits a RangeError (see screenshot below).
Screenshots or screen recording (optional)
What I'm seeing in Chrome dev tools:
The browsers eventual response:
WordPress information
- WordPress version: 5.7.1
- Gutenberg version: Plugin not installed — using core version.
- Are all plugins except Gutenberg deactivated? Yes.
- Are you using a default theme (e.g. Twenty Twenty-One)? Was using a bare-bones/empty theme but problem also occurs on Twenty Twenty-One.
Device information
- Device: MacBook Pro (2017, 3.1 GHz Quad-Core Intel Core i7, 16 GB 2133 MHz LPDDR3)
- Operating system: macOSS Catalina version 10.15.7
- Browser: Crome Version 90.0.4430.93 (Official Build) (x86_64)
Description
When working with large numbers of reusable blocks (thousands), the editor crashes the browser when attempting to access the Reusable tab in the block inserter. I know the number of blocks might seem excessive but we have a large sized site with a lot of content that needs to be distributed across products and post types so we'll need to be able to use many thousands of reusable blocks to keep management of the content sane. 😅
Step-by-step reproduction instructions
Expected behaviour
I would have expected the reusable block system not to attempt to load all reusable blocks on page load but instead, use an AJAX-based system that shows paginated result sets.
Actual behaviour
The browser appears to attempt to load all reusable blocks on page load, 100 at a time until it eventually hits a RangeError (see screenshot below).
Screenshots or screen recording (optional)
What I'm seeing in Chrome dev tools:
The browsers eventual response:
WordPress information
Device information