CODEWITHSUNDEEP
csswordpressperformancewordpress-gutenberggutenberg-blocks
Luca Reghellin
Luca Reghellin

Reputation: 8125

How can I avoid Gutenberg blocks styles be written inline?

I'm currently using the new block registration way, with block.json files.

My issue is that, if I add a style sheet, like:

"style": [ "file:./overlapping-columns.css", "overlapping-columns-style" ],

In the front-end, styles will be written inline instead of loading the overlapping-columns.css file. Why? Is there a way to make WordPress load them as a file? In the documentation, it's written that it should load as a file, and lazily (only when the block is shown on the page).

Upvotes: 1

Views: 2451

Answers (1)

Will
Will

Reputation: 888

As far as I understand, the conditional loading depends a little bit on what type of theme you are using.

If it's a block-based/FSE theme, the block CSS content will be conditionally loaded by default (I have tested this in a limited manner).

If it's a classic theme (uses PHP templates), you will need to add (sounds like you have already), the following to your theme.

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

That filter is applied to the entire installation, and you would not need to add it to every block.

By default (in block themes) and classic themes that have the should_load_separate_core_block_assets filter enabled, WordPress will also inline the blocks' CSS content, described more in this blog post.

If you wish to load the block CSS as a file, use the following filter:

add_filter( 'styles_inline_size_limit', '__return_zero' );

(there is other WordPress CSS that is loaded on every page)).

Upvotes: 5

Related Questions