WordPress（Gutenberg）のブロックバリエーションを試してみた（実演動画あり）

<?php
/**
 * Plugin Name:       Block Variation Lesson
 * Description:
 * Requires at least: 6.1
 * Requires PHP:      7.2
 * Version:           0.1.0
 * Author:
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       block-variation-lesson
 */

{
  "name": "block-variation-lesson",
  "version": "0.1.0",
  "description": "",
  "author": "",
  "license": "GPL-2.0-or-later",
  "main": "build/index.js",
  "scripts": {
  }
}

npm install @wordpress/scripts --save-dev

		"start": "wp-scripts start",
		"build": "wp-scripts build"

{
  "name": "block-variation-lesson",
  "version": "0.1.0",
  "description": "",
  "author": "",
  "license": "GPL-2.0-or-later",
  "main": "build/index.js",
  "scripts": {
		"start": "wp-scripts start",
		"build": "wp-scripts build"
  }
}

wp.blocks.registerBlockVariation(
	'core/media-text',
	{
		name: 'media-text-custom',
		title: 'Media & Text Custom',
		attributes: {
			align: 'wide',
			backgroundColor: 'accent'
		},
	}
);

function example_enqueue_block_variations() {

	// ビルド時に自動生成される情報を取得
	$variation_asset = require plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
	// ビルド時に自動生成されるバージョン番号を使用する場合
	$version         = $variation_asset['version'];

	wp_enqueue_script(
		'example-enqueue-block-variations',
		plugin_dir_url( __FILE__ ) . '/build/index.js',
		array( 'wp-blocks', 'wp-dom-ready' ),
		$version,
		false
	);
}
add_action( 'enqueue_block_editor_assets', 'example_enqueue_block_variations' );

wp.blocks.registerBlockVariation(
	'core/media-text',
	{
		name: 'media-text-default',
		title: 'Media & Text',
		attributes: {
			align: 'wide',
			backgroundColor: 'accent'
		},
		isDefault: true
	}
);

wp.domReady( () => {
	wp.blocks.unregisterBlockVariation( 'core/group', 'group-stack' );
});

window.addEventListener('load', function () {
	wp.blocks.unregisterBlockVariation( 'core/group', 'group-stack' );
});

window.addEventListener('DOMContentLoaded', function () {
	wp.blocks.unregisterBlockVariation( 'core/group', 'group-stack' );
});

wp.blocks.registerBlockVariation(
	'core/media-text',
	{
		name: 'media-text-default',
		title: 'Media & Text',
		attributes: {
			align: 'wide',
			backgroundColor: 'accent'
		},
		innerBlocks: [
			[
				'core/heading',
				{
					level: 3,
					placeholder: 'Heading'
				} 
			],
			[
				'core/paragraph',
				{
					placeholder: 'Enter content here...'
				} 
			],
		],
		isDefault: true,
	}
);

wp.blocks.registerBlockVariation(
	'core/media-text',
	{
		name: 'text-media',
		title: 'Text & Media',
		attributes: {
			align: 'wide',
			backgroundColor: 'tertiary',
			mediaPosition: 'right'
		},
		isActive: [ 'mediaPosition' ]
	}
);

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 17.5L21 6L13 6L13 17.5L21 17.5ZM10 14.5L3 14.5L3 16L10 16L10 14.5ZM3 11L10 11L10 12.5L3 12.5L3 11ZM10 7.5L3 7.5L3 9L10 9L10 7.5Z"></path>
</svg>

// Define the icon for the Text & Media block variation.
const textMediaIcon = wp.element.createElement(
	wp.primitives.SVG,
	{ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
	wp.element.createElement(
		wp.primitives.Path,
		{
			d: "M21 17.5L21 6L13 6L13 17.5L21 17.5ZM10 14.5L3 14.5L3 16L10 16L10 14.5ZM3 11L10 11L10 12.5L3 12.5L3 11ZM10 7.5L3 7.5L3 9L10 9L10 7.5Z",
		}
	)
);

function example_enqueue_block_variations() {

	// ビルド時に自動生成される情報を取得
	$variation_asset = require plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
	// ビルド時に自動生成されるバージョン番号を使用する場合
	$version         = $variation_asset['version'];

	wp_enqueue_script(
		'example-enqueue-block-variations',
		plugin_dir_url( __FILE__ ) . '/build/index.js',
		array( 'wp-blocks', 'wp-dom-ready', 'wp-element', 'wp-primitives' ),
		$version,
		false
	);
}
add_action( 'enqueue_block_editor_assets', 'example_enqueue_block_variations' );

wp.blocks.registerBlockVariation(
	'core/media-text',
	{
		name: 'text-media',
		title: 'Text & Media',
		icon: textMediaIcon,
		attributes: {
			align: 'wide',
			backgroundColor: 'accent',
			mediaPosition: 'right'
		},
		isActive: [ 'mediaPosition' ]
	}
);

npm install @wordpress/icons --save

// Define the icon for the Text & Media block variation.
import { pullRight } from '@wordpress/icons';

wp.blocks.registerBlockVariation(
	'core/media-text',
	{
		name: 'text-media',
		title: 'Text & Media',
		icon: pullRight,
		attributes: {
			align: 'wide',
			backgroundColor: 'accent',
			mediaPosition: 'right'
		},
		isActive: [ 'mediaPosition' ]
	}
);

// Define the icon for the Text & Media block variation.
import { ReactComponent as Icon } from './icon.svg';

wp.blocks.registerBlockVariation(
	'core/media-text',
	{
		name: 'text-media',
		title: 'Text & Media',
		icon: <Icon />,
		attributes: {
			align: 'wide',
			backgroundColor: 'accent',
			mediaPosition: 'right'
		},
		isActive: [ 'mediaPosition' ]
	}
);