書式ツールバー spanにcssを当てる

書式ツールバー登録確認

エディター側の開発者ツールのコンソールで実行

wp.data.select( 'core/rich-text' ).getFormatTypes();

特定のクラスを持ったspanタグで囲う

src/custom-format/index.js

import { registerFormatType, toggleFormat } from "@wordpress/rich-text";
import { RichTextToolbarButton } from "@wordpress/block-editor";
import "./style.scss";

// ツールバーにボタンを追加;
console.log("test");
const MyCustomButtonSquare = ({ isActive, onChange, value }) => {
	return (
		<RichTextToolbarButton
			icon="border-box-square"
			title="四角い枠で囲う"
			onClick={() => {
				onChange(
					toggleFormat(value, {
						type: "my-custom-format/border-box-square",
					}),
				);
			}}
			isActive={isActive}
		/>
	);
};

const MyCustomButtonRound = ({ isActive, onChange, value }) => {
	return (
		<RichTextToolbarButton
			icon="border-box-round"
			title="丸みのある枠で囲う"
			onClick={() => {
				onChange(
					toggleFormat(value, {
						type: "my-custom-format/border-box-round",
					}),
				);
			}}
			isActive={isActive}
		/>
	);
};

// 新しい書式を登録
registerFormatType("my-custom-format/border-box-square", {
	title: "border-box-square",
	tagName: "span",
	className: "my-custom-border-box-square",
	edit: MyCustomButtonSquare,
});

registerFormatType("my-custom-format/border-box-round", {
	title: "border-box-round",
	tagName: "span",
	className: "my-custom-border-box-round",
	edit: MyCustomButtonRound,
});

src/custom-format/style.scss

.my-custom-border-box-square {
	border: {
		style: solid;
		width: thin;
		color: color-mix(in srgb, currentColor 50%, white);
	}
}

.editor-styles-wrapper.my-custom-border-box-square {
	border: {
		style: solid;
		width: thin;
		color: color-mix(in srgb, currentColor 50%, white);
	}
}

.my-custom-border-box-round {
	border: {
		style: solid;
		width: thin;
		color: color-mix(in srgb, currentColor 50%, white);
		radius: 8px;
	}
}

.editor-styles-wrapper.my-custom-border-box-round {
	border: {
		style: solid;
		width: thin;
		color: color-mix(in srgb, currentColor 50%, white);
		radius: 8px;
	}
}

my-custom-format.php

<?php
/**
 * Plugin Name:       My Custom Format
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-custom-format
 *
 * @package CreateBlock
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

// add_theme_support( 'editor-styles' );

function my_custom_format_load_front(){
	// ビルド時に自動生成される情報を取得
	$assets_file = include plugin_dir_path(__FILE__ ) . "build/index.asset.php";

	wp_enqueue_style(
		"my-custom-format-front-style",
		plugin_dir_url(__FILE__ ) . 'build/style-index.css',
		array(),
	);

	wp_enqueue_script(
		"my-custom-format-front-script",
		plugin_dir_url(__FILE__ ) . 'build/index.js',
		$assets_file["dependencies"],
		// ビルド時に自動生成されるバージョン番号を使用する場合
		$assets_file["version"],
		true
	);
}
//enqueue_block_assets：フロント側とエディター側両方で読み込む
add_action( "enqueue_block_assets", "my_custom_format_load_front" );

// function my_custom_format_load_editor() {
// 	wp_enqueue_style(
// 		'my-custom-format-editor-style',
// 		plugin_dir_url(__FILE__ ) . 'build/style-index.css',
// 		false,
// 		'1.0',
// 		'all'
// 	);
// }
// add_action( 'enqueue_block_editor_assets', 'my_custom_format_load_editor' );