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
Option to disable default block styles
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:
plugin development - How to only load css for used blocks on frontend - WordPress Development Stack Exchange
How to only print styles for Gutenberg Blocks used on a page – Ari Stathopoulos
Block-styles loading enhancements in WordPress 5.8 – Make WordPress Core
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.
Responsibe controls on basic core blocks + Block Styles for WordPress Try at https://blockstylesdemo.instawp.link/
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.