子テーマへの追加例2

editor.css

.editor-styles-wrapper .test-class {
    display: inline;
    background-position: left -100% center;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ff6 50%);
    background-size: 200% .6em;
    font-weight: bold;
    padding-bottom: .6em;
}

editor.js

(function (richText, element, editor) {
    const name = 'my-theme/my-theme';
    const title = 'test-title';
    const className = 'test-class';
    richText.registerFormatType(name, {
        title: title,
        tagName: 'span',
        className: className,
        edit: function ({isActive, value, onChange}) {
            return element.createElement(editor.RichTextToolbarButton, {
                icon: 'admin-customizer',
                title: title,
                onClick: function () {
                    onChange(richText.toggleFormat(value, {
                        type: name
                    }));
                },
                isActive: isActive,
            });
        },
    });
}(
    window.wp.richText,
    window.wp.element,
    window.wp.editor
));

functions.php

<?php 

/* ... 省略 ... */

add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_style( 'my-theme-editor-css', get_theme_file_uri( 'editor.css' ) ); // 追加
	wp_enqueue_script( 'my-theme-editor-js', get_theme_file_uri( 'editor.js' ), [
		'wp-element',
		'wp-rich-text',
		'wp-editor',
	] );
} );

style.css

/*
Theme Name: ....


*/

/* ... 省略 ... */

.test-class {
    display: inline;
    background-position: left -100% center;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ff6 50%);
    background-size: 200% .6em;
    font-weight: bold;
    padding-bottom: .6em;
}