Load CSS Conditionally

[kamauwanjoroge]

Is your feature request related to a problem? Please describe.
The block editor loads all of its CSS in the front end rather than conditionally depending on the blocks being used

Describe the solution you'd like
Make the CSS load conditionally depending on the blocks being used and also on the pages and posts they are on, not the whole block CSS font everywhere.

Describe alternatives you've considered
None since this is a core feature. I load all my CSS files conditionally depending on where they are being used, and the block editor is adding two additional files per page! Hence, increasing page weight.

[oxyc]

This was recently fixed #22754

[kamauwanjoroge]

@oxyc has this been merged with the plugin in the repository?
Edit: I see not yet. Will wait and see.

[oxyc]

No it hasn't been released yet. If you want to test it you can either build the plugin locally from master (clone it into the plugins folder and run nvm use; npm install; npm run build or just manually change the files the commit does: https://github.com/WordPress/gutenberg/pull/22754/files

[gziolo]

This was recently fixed #22754

Yes, it should be addressed with this PR. Let’s close this issue. Feel free to reopen next week after the Gutenberg plugin release if it doesn’t work as expected.

[kamauwanjoroge]

@gziolo will do.

[kamauwanjoroge]

It does not work for core blocks.

[gziolo]

Yes, all core blocks have JavaScript and CSS code bundled together. We plan to optimize the whole approach later this year according to the plan shared by @saramarcondes in this comment #2768 (comment). Once we have support for lazy loading blocks we will split core blocks into individual bundles that load only when necessary.

[kamauwanjoroge]

Will be on the lookout. All my (minified) CSS files are below 20kb and the core blocks add 56kb (minified) into my combined CSS file!