Load block styles, if and only if the block is present on the page

[mkaz]

Is your feature request related to a problem? Please describe.

I've noticed that block assets enqueued using enqueue_block_assets will be loaded on every page view, regardless if the block is present on that page.

I can see this being a problem if someone loads a lot of plugins because they want numerous block types, not realizing that the additional assets are loaded on every view, regardless if the blocks are included.

The two plugins of mine that this is effecting are:

• Juxtapose block: https://github.com/mkaz/juxtapose-block
• Code Syntax block: https://github.com/mkaz/code-syntax-block

Describe the solution you'd like

Ideally, the editor automatically only loads the block assets that it needs when they are needed.

Describe alternatives you've considered

For my individual case, I noticed when I have an index page which does not load any post content, just the titles; all the assets are still loaded. I was able to check for !is_single() and dequeue the assets by hand. However, this is a hack and doesn't work for single post views that do not include the custom blocks, the additional assets are still loaded though not needed.

[nerrad]

One thing that might work here is to enqueue scripts (won't work for css I think) as a part of the render_callback logic for a block php side. Since that should only be called when the content contains that block - it should be feasible to enqueue any necessary scripts for that block in the callback.

[josephscott]

Yes please. I've now seen multiple blocks loading their own CSS/JS resources on every page view. Which is convenient for devs, but not sustainable at all for sites.

[mkaz]

I wrote up a post about Conditionally Loading Block Assets but that solution only works on a per block basis, and requires looping through all posts. So if every block does the same thing, and you have many blocks installed it will slow down a large index page.

My thought on an ideal solution would be when a block registers an asset using register_block_type function then it would add the block-asset pair to a queue and then a single loop check can confirm if the post has the block and set to require the asset.

Example register_block_type function, this might only work for CSS, as @nerrad mentioned a potential solution for just JS above.

register_block_type( 'gutenberg-examples/example-02-stylesheets', array(
    'style' => 'gutenberg-examples-02',
    'editor_style' => 'gutenberg-examples-02-editor',
    'editor_script' => 'gutenberg-examples-02',
) );

[simison]

One thing that might work here is to enqueue scripts (won't work for css I think) as a part of the render_callback logic for a block php side. Since that should only be called when the content contains that block - it should be feasible to enqueue any necessary scripts for that block in the callback.

Here's an example in Jetpack plugin of that mechanism.. It's quite flexible and thus ergonomic for developers.

In addition to loading assets, it also intercepts the rendering in the AMP context.

[aristath]

There's also another way to do it using the render_block filter, details on this post.

[mtias]

Can we combine this with the original issue at #5445 ?

[skorasaurus]

I think this can be closed now with the work done at #25220

I've installed and activated a couple plugins - ootb-openstreetmap and code-syntax-block

and the javascript used in those blocks is only being loaded on the front-end when a page/post contains those blocks.