Conditionally Loading JS and CSS only when a Block is Used
Native block library
Important source of information is Block-styles loading enhancements Optimizing the loading of block styles in WordPress 5.8 • WordPress Help Blog
We are introduced to:
styles_inline_size_limitwith the default limit od 20kb inline assets (default: 20000)
add_filter( 'should_load_separate_core_block_assets', '__return_true' ); filter( 'styles_inline_size_limit', '__return_zero' );
WordPress will not load
block-library/style.css file which contains all the styles for every native block, but much smaller
block-library/common.css file which only contains generic common styles. Styles for any specific block will only load if it’s in use on the current page.
In connection to that, Leveraging theme.json and per-block styles for more performant themes
It should be noted that page content is not the only area where blocks can be used. WordPress also has widget-area editor and users are able to add blocks inside a widget area. Checking
the_content in that case won’t be enough. Read the following comment about that.
wp_enqueue_scripts seems like something worth exploring.
Inject the stylesheets in the content, right before the first instance of a block:
Inlining small stylesheets can be disabled just by adding add_filter( ‘styles_inline_size_limit’, ‘__return_zero’ );
How to disable the core style (for example for the gallery block) and load my own gallery style?
wp_deregister_style( 'wp-block-gallery' ); wp_register_style( 'wp-block-gallery', $src, ... );
Explained option to disable default block styles
Not really answers:
In a block theme, all blocks are parsed before the. What that means, is ou can hook in render_block, and enqueue your script if the block exists. Equivalent to has_block for use in templates · Issue #38120 · WordPress/gutenberg
When creating new custom block, we can use the following techniques:
- Conditionally Load Block Assets – mkaz.blog, using
- Conditionally Load Block Assets, Part 2 – mkaz.blog, using
- Conditionally Load Block Assets, Part 3 – mkaz.blog, using style and script attributes of
EditorsKit, Gutenberg Block Editor Toolkit, CakeWP/block-options To je plugin za customizaciju. Ima odličnu foru sa “Better Custom CSS Class(es)": Huge improvement on Additional CSS Class(es) option! EditorsKit provides better UI with classes suggestions while typing. Powered with custom PHP filter, theme developers can include custom Utility Classes for more customization options.
I need a linkable wrapper based on dynamic data
Extend core blocks with click functionality
Add support for linkable column/cover/group blocks | Epiphyt
GenerateBlocks : How to Make Entire WordPress Block Container Clickable
GenerateBlocks had Container block with Dynamic Data
In free version, they turned off Dynamic Data for the link, there’s only for a background image.
The Greenshift Container aka Wrapper also has dynamic data, but it needs to be used with the Query Loop from Greenshift.