Custom CSS for Specific Blocks, Loaded Only Where Used
Lets you write extra CSS for individual block types (for example tables or quotes) that WordPress prints only on pages that actually contain those blocks.
Opens WPIDE on
Code
// Block name => CSS for that block.
$wpide_block_css = array(
'core/table' => '.wp-block-table table{font-size:.95em;}.wp-block-table th{text-align:left;}',
'core/quote' => '.wp-block-quote{border-left-width:4px;padding-left:1.25em;font-style:italic;}',
'core/code' => '.wp-block-code{border-radius:6px;padding:1em 1.25em;overflow-x:auto;}',
);
add_action( 'init', function () use ( $wpide_block_css ) {
if ( ! function_exists( 'wp_enqueue_block_style' ) ) {
return;
}
foreach ( $wpide_block_css as $block => $css ) {
$handle = 'wpide-block-' . sanitize_key( str_replace( '/', '-', $block ) );
wp_register_style( $handle, false, array(), '1.0' );
wp_add_inline_style( $handle, wp_strip_all_tags( $css ) );
wp_enqueue_block_style( $block, array( 'handle' => $handle ) );
}
} );Notes
Works best with block themes, or classic themes that load block styles separately. Edit the CSS per block name.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.