Patterns tab is empty until all the user created patterns (Reusable blocks) are fetched

[sathyapulse]

Description

When the remote patterns, core, and theme patterns are disabled, the patterns tab shows empty until all the user patterns have been fetched from the server.

This is not a problem for websites with fewer user patterns. However, it significantly increases the loading time for websites with more user patterns(reusable blocks). For instance, an application with ~4K user patterns must make 40 remote Rest API calls before displaying the categories in the patterns tab.

Disable non-user patterns with the below code.

/**
 * Restricts block editor patterns in the editor by removing support for all patterns from:
 *   - Dotcom and plugins like Jetpack
 *   - Dotorg pattern directory except for theme patterns
 */
function remove_non_user_created_patterns( $dispatch_result, $request, $route ) {
    if ( strpos( $route, '/wp/v2/block-patterns/patterns' ) === 0 ) {
        $patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();


        if ( ! empty( $patterns ) ) {
            // Remove theme support for all patterns from Dotcom, and plugins. See https://developer.wordpress.org/themes/features/block-patterns/#unregistering-block-patterns
            foreach ( $patterns as $pattern ) {
                unregister_block_pattern( $pattern['name'] );
            }

            // Remove theme support for core patterns from the Dotorg pattern directory. See https://developer.wordpress.org/themes/features/block-patterns/#removing-core-patterns
            remove_theme_support( 'core-block-patterns' );
        }
    }


    return $dispatch_result;
}

 
 
// Remove and unregister patterns from core, Dotcom, and plugins. See https://github.com/Automattic/jetpack/blob/d032fbb807e9cd69891e4fcbc0904a05508a1c67/projects/packages/jetpack-mu-wpcom/src/features/block-patterns/block-patterns.php#L107
add_filter( 'rest_dispatch_request', 'remove_non_user_created_patterns', 12, 3 );
 
 
// Disable the remote patterns coming from the Dotorg pattern directory. See https://developer.wordpress.org/themes/features/block-patterns/#disabling-remote-patterns
add_filter( 'should_load_remote_block_patterns', '__return_false' );

I have tried some potential solutions locally, but I'm not sure that would be scalable for smaller and larger sites.

1. Currently, the user pattern categories are fetched through a separate API call. We could display the categories first and load the user patterns in the background.
2. The patterns and pattern categories are displayed after all the 4K patterns are loaded from the server. We could implement lazy loading to show the patterns immediately after each page is fetched.

Step-by-step reproduction instructions

1. Create 4000+ reusable blocks with the CLI using

wp eval 'for ($i = 1; $i <= 4000; $i++) { wp_insert_post(["post_title" => "Reusable Block " . $i, "post_content" => "<!-- wp:paragraph --><p>This is block " . $i . "</p><!-- /wp:paragraph -->", "post_status" => "publish", "post_type" => "wp_block"]); }'

2. Open the Browser developer tools => Network tab
3. Open the post Editor and open the Inserter.
4. The user pattern will start fetching from the server
5. The patterns tab will be empty until the patterns are loaded from the server

Screenshots, screen recording, code snippet

Screen.Recording.2024-08-05.at.20.38.06.-.COMPRESS.mp4

Environment info

• WordPress 6.6
• macOS Sonoma 14.6
• wp-env and all other environments

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[Mamaduka]

Probably related #64219.

[sathyapulse]

@kevin940726 I want to bring this to your attention since you are looking into the related issue #64219.

[kevin940726]

Seems like this is the intended behavior introduced in #61513. @ellatrix and @scruffian might know better about the background here.

I think it's not ideal to load all the patterns before showing anything in the patterns tab. Could we show the available categories and move the loading state to the patterns inserter instead? IIRC, the categories are from a much cheaper API call.

[sathyapulse]

Thank you for looking into it.

If we could make the following changes, it would be ideal.

1. The patterns category is not displayed in the patterns tab until the user patterns are loaded. We could display the patterns category as soon as it is loaded.
2. We could start displaying the patterns as soon as each page is loaded, rather than waiting for all patterns to be loaded.
3. Don't fetch the default pattern categories if the remote patterns are disabled.

[jsnajdr]

When looking at the video in the issue report, I see one unusual thing: the "Initiator" of the requests is some ajaxRequestInterceptor.ps.js script:

This must be a plugin or maybe a browser extension. In plain WordPress with Gutenberg the initiator would be api-fetch/index.min.js or something like that.

So I'm wondering which plugins are active on the offending site?

[ellatrix]

I cannot reproduce the bug as described above. Here's what I'm seeing: when opening the patterns tab, all categories immediately load, and the "My patterns" tab only pops in after all user patterns (reusable blocks) have been fetched.