Test Server-Rendered Blocks

A WordPress plugin to reproduce the Gutenberg issue with simultaneous server-rendered block requests.

Related Issue: WordPress/gutenberg#74919

Purpose

This plugin demonstrates how the block editor attempts to render all server-rendered blocks simultaneously, causing server overload on resource-constrained environments.

Installation

1. Copy the test-server-blocks folder to wp-content/plugins/
2. Activate the plugin
3. Configure Nginx to limit concurrent connections (see below)
4. Add multiple test blocks to a post (see below)

Creation via Code Editor

1. Go to Posts → Add New in WordPress admin
2. Click the three dots (⋮) in the top-right corner of the editor
3. Select Code editor from the dropdown menu
4. Paste the following block markup:

<!-- wp:test/server-block {"content":"Server Block #1"} /-->
<!-- wp:test/server-block {"content":"Server Block #2"} /-->
<!-- wp:test/server-block {"content":"Server Block #3"} /-->
<!-- wp:test/server-block {"content":"Server Block #4"} /-->
<!-- wp:test/server-block {"content":"Server Block #5"} /-->
<!-- wp:test/server-block {"content":"Server Block #6"} /-->
<!-- wp:test/server-block {"content":"Server Block #7"} /-->
<!-- wp:test/server-block {"content":"Server Block #8"} /-->
<!-- wp:test/server-block {"content":"Server Block #9"} /-->
<!-- wp:test/server-block {"content":"Server Block #10"} /-->
<!-- wp:test/server-block {"content":"Server Block #11"} /-->
<!-- wp:test/server-block {"content":"Server Block #12"} /-->
<!-- wp:test/server-block {"content":"Server Block #13"} /-->
<!-- wp:test/server-block {"content":"Server Block #14"} /-->
<!-- wp:test/server-block {"content":"Server Block #15"} /-->
<!-- wp:test/server-block {"content":"Server Block #16"} /-->
<!-- wp:test/server-block {"content":"Server Block #17"} /-->
<!-- wp:test/server-block {"content":"Server Block #18"} /-->
<!-- wp:test/server-block {"content":"Server Block #19"} /-->
<!-- wp:test/server-block {"content":"Server Block #20"} /-->
<!-- wp:test/server-block {"content":"Server Block #21"} /-->
<!-- wp:test/server-block {"content":"Server Block #22"} /-->
<!-- wp:test/server-block {"content":"Server Block #23"} /-->
<!-- wp:test/server-block {"content":"Server Block #24"} /-->
<!-- wp:test/server-block {"content":"Server Block #25"} /-->
<!-- wp:test/server-block {"content":"Server Block #26"} /-->
<!-- wp:test/server-block {"content":"Server Block #27"} /-->
<!-- wp:test/server-block {"content":"Server Block #28"} /-->
<!-- wp:test/server-block {"content":"Server Block #29"} /-->
<!-- wp:test/server-block {"content":"Server Block #30"} /-->
<!-- wp:test/server-block {"content":"Server Block #31"} /-->
<!-- wp:test/server-block {"content":"Server Block #32"} /-->
<!-- wp:test/server-block {"content":"Server Block #33"} /-->
<!-- wp:test/server-block {"content":"Server Block #34"} /-->
<!-- wp:test/server-block {"content":"Server Block #35"} /-->
<!-- wp:test/server-block {"content":"Server Block #36"} /-->
<!-- wp:test/server-block {"content":"Server Block #37"} /-->
<!-- wp:test/server-block {"content":"Server Block #38"} /-->
<!-- wp:test/server-block {"content":"Server Block #39"} /-->
<!-- wp:test/server-block {"content":"Server Block #40"} /-->
<!-- wp:test/server-block {"content":"Server Block #41"} /-->
<!-- wp:test/server-block {"content":"Server Block #42"} /-->
<!-- wp:test/server-block {"content":"Server Block #43"} /-->
<!-- wp:test/server-block {"content":"Server Block #44"} /-->
<!-- wp:test/server-block {"content":"Server Block #45"} /-->
<!-- wp:test/server-block {"content":"Server Block #46"} /-->
<!-- wp:test/server-block {"content":"Server Block #47"} /-->
<!-- wp:test/server-block {"content":"Server Block #48"} /-->
<!-- wp:test/server-block {"content":"Server Block #49"} /-->
<!-- wp:test/server-block {"content":"Server Block #50"} /-->

5. Click Exit code editor to return to the visual editor
6. Click Publish to save the post
7. Close the editor tab, then navigate back to Posts → All Posts
8. Click Edit on your test post to reload it in the editor

Note: You need to close and reopen the post for the issue to manifest, as it occurs during the initial load when all blocks attempt to render simultaneously.

Nginx Configuration (to simulate low-resource server)

Replace the contents of tools/local-env/default.template with:

limit_conn_zone $binary_remote_addr zone=blockapi:10m;

server {
    index index.php index.html;

    listen 80 default_server;
    listen [::]:80 default_server;

    server_name localhost;

    client_max_body_size 1g;

    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;

    root /var/www/${LOCAL_DIR};

    absolute_redirect off;

    if (!-e $request_filename) {
        rewrite /wp-admin$ $scheme://$host$request_uri/ permanent;
        rewrite ^(/[^/]+)?(/wp-.*) $2 last;
        rewrite ^(/[^/]+)?(/.*\.php) $2 last;
    }

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    # Special handling for block-renderer with connection limit
    location ~ \.php {
        if ($request_uri ~* "block-renderer") {
            return 418;
        }

        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_pass_header Authorization;
    }

    location @block_limited {
        limit_conn blockapi 3;

        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_pass_header Authorization;
    }

    error_page 418 = @block_limited;
}

Restart: npm run env:restart