Override blocks style

March 12, 2024

To override block styles for rules that can’t be changed through theme.json (complexe rules or non core blocks) , one can use dev__blocks__enqueue_styles function:

add_action( 'init', 'dev__blocks__enqueue_styles' );

function dev__blocks__enqueue_styles() {
	foreach ( glob( get_stylesheet_directory() . '/assets/css/blocks-overriding/*', GLOB_ONLYDIR ) as $directory) {
		$namespace = substr( strrchr( $directory, '/' ), 1 );
		foreach ( glob( $directory . '/*.css' ) as $file) {
			$filename = pathinfo( $file, PATHINFO_FILENAME );
			wp_enqueue_block_style(
				$namespace . '/' . $filename,
				array(
					'handle'	=> 'dw-override--' . $namespace . '-' . $filename,
					'src'		=> get_stylesheet_directory_uri() . '/assets/css/blocks-overriding/' . $namespace . '/' . $filename . '.css',
					'path'		=> get_stylesheet_directory() . '/assets/css/blocks-overriding/' . $namespace . '/' . $filename . '.css',
					'ver'		=> filemtime( get_stylesheet_directory() . '/assets/css/blocks-overriding/' . $namespace . '/' . $filename . '.css' )
				)
			);
		}
	}
}

Source : https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/

Block styles variations

# block_style, functions.php, theme.json

April 8, 2024

To add a new block style :

<?php

function dsfr_register_block_styles(){

	register_block_style(
		'core/paragraph',
		array(
			'name' => 'highlight',
			'label' => 'Mise en avant',
		)
	);

}

add_action( 'init', 'dsfr_register_block_styles' );

The core styles are editable in the theme.json, but not the custom ones.

{
    "styles": {
        "blocks": {
	    "core/image": {
	        "variations": {
		    "rounded" : {
		        "border": {
			    "radius": ".5rem"
		        }
		    }
		}
	}
}

https://fullsiteediting.com/lessons/modifying-block-style-variations-via-theme-json/