Notes about WordPress Gutenberg themes development.

Block variations

Block styles: create specific look variations with CSS

Block variations: preset a block configuration.

Example:

wp.blocks.registerBlockVariation(
	'core/quote',
	{
		name: 'dev-name',
		title: 'Title',
		icon: 'format-status',
		isDefault: true,
		attributes: {
			templateLock: 'all',
			className: 'dev-classname'
		},
		innerBlocks: [
			[
				'core/image',
				{
					className: 'wp-block-image alignleft'
				}
			],
			[
				'core/paragraph',
				{
					className: 'dev-paragraph'
				}
			]
		]
	}
);

Source:

https://fullsiteediting.com/lessons/block-variations/
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/
https://developer.wordpress.org/news/2023/08/29/an-introduction-to-block-variations/

Variables from WP to JS files

# functions.php, js

July 15, 2023

Server side :

add_action('wp_enqueue_scripts', 'load_scripts');

function load_scripts (){

	$data = array(
		'siteURL' => site_url()
	);
	$data_inline = 'const wpData = ' . json_encode( $data );

	$handle = 'jsfile';

	wp_enqueue_script(
		$handle,
		get_stylesheet_directory_uri() . '/assets/js/script.js',
		array(),
		filemtime( get_stylesheet_directory() . '/assets/js/script.js' ),
		true
	);

	wp_add_inline_script( $handle, $data_inline );

}

Client side :

const siteURL = wpData.siteURL;