ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する 2

// コントロールパネルjsを読み込む
function block_control_panel($hook) {
    wp_enqueue_script( 'control_p_custom', plugins_url( 'js/control_p_custom.js', __FILE__ ),
    array('wp-blocks','wp-element') // Dependency to include the CSS after it.
     );
}
add_action('enqueue_block_editor_assets', 'block_control_panel');
 
// コントロールパネルcssを読み込む
function style_block_control_panel($hook) {
    wp_enqueue_style( 'style_cp_custom_css', plugins_url( 'css/style_cp_custom.css', __FILE__ ),
    array(),
    filemtime( plugin_dir_path( __FILE__ ) . 'css/style_cp_custom.css' ) // filemtime — Gets file modification time.
     );
}
add_action('enqueue_block_assets', 'style_block_control_panel');

/**
 * コントロールパネルをカスタマイズするブロックを指定
 */

function isValidBlockType(blockName) {

    var validBlocks = [
        'core/paragraph',                          /* 段落 */
        'core/list',                               /* リスト */
        'gutenberg-examples/example-03-editable',  /* 以下 カスタムブロック */
        'gutenberg-examples/example-04-controls',
        'gutenberg-examples/example-05-controls',
    ]
    return validBlockTypes.includes(blockName);
}// end isValidBlockType()

(function () {
    var editor = wp.editor,
        element = wp.element,
        compose = wp.compose,
        components = wp.components,
        addFilter = wp.hooks.addFilter,
        el = element.createElement,
        Fragment = element.Fragment,
        InspectorControls = editor.InspectorControls;
        createHigherOrderComponent = compose.createHigherOrderComponent;

    /* コントロールパネルに項目を追加する関数 */
    var addMyControls = createHigherOrderComponent(function (BlockEdit) {
        return function (props) {

            var myComponent = el(components.PanelBody, {
                title: "装飾設定",
                icon: "admin-customizer", /* アイコンを指定 */
            },
                el(components.SelectControl, {
                    label: "テキスト装飾",
                    options: [{
                        label: "なし",
                        value: ""
                    }, {
                        label: "マーカー（橙）",
                        value: "marker_orange"
                    }, {
                        label: "マーカー（青）",
                        value: "marker_blue"
                    }, {
                        label: "赤太字",
                        value: "s_text_red"
                    }],
                    onChange: function (val) {
                        var selectedText = window.getSelection().toString();
                        document.execCommand("insertHTML", true, '<span class="' + val + '">' + selectedText + "</span>")
                    }
                })
            );

            if ( isValidBlockType(props.name) && props.isSelected ) {
                return el(Fragment, null, el(BlockEdit, props), el(InspectorControls, null, myComponent));
            }
            return el(BlockEdit, props)
        }
    }, "addMyControls");

    /* コントロールパネルに項目を追加するフィルター */
    addFilter("editor.BlockEdit", "my-plugin/my-control", addMyControls);

})();

.marker_orange {
  background:linear-gradient(transparent 60%, #ffd2a5 60%);
  font-weight: bold;
}
.marker_blue {
  background:linear-gradient(transparent 60%, #a5cdff 60%);
  font-weight: bold;
}
.s_text_red {
  color: #ff6666;
  font-weight: bold;
}