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

2019年2月10日

この記事は約 9 分で読めます。

4.5

前回では、
スタイルセレクト機能とは
どんなものなのかお話しました。
https://neco913.kirara.st/post-3634/

はじめに

先ずはじめに、
導入するにあたり
gutenberg-examples
(カスタムブロック)
のフォルダーで作業する事

前提としてお話していく事とします。
https://neco913.kirara.st/post-3485/

一部のテキストにスタイルを当てる

テキスト装飾機能の実装方法

まず、
カスタマイズするためのファイルを
読み込む記述をします。

gutenberg-examples/index.php
以下のコードを書きます。

// コントロールパネル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');

CSSやJSは上記のファイルに記述するものとします。

コントロールパネルに項目を追加するjs

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

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);

})();

上記jsファイルを
 gutenberg-examples/js 
フォルダーに置きます。

コントロールパネルに項目を追加するcss

.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;
}

上記cssファイルを
 gutenberg-examples/css
フォルダーに置きます。

cssは任意に
変更してください。

解説

細かいことは公式ページ(Gutenberg Handbook:Block Filters )に任せておくとして、大まかな処理の流れだけ説明しておきます。
最上部で定義しているisValidBlockType()という関数は、テキスト装飾機能を使用するブロックを決めておき、そのブロックかどうかを判断するためのものです。
コントロールパネルに項目を追加するためにwp.compose.createHigherOrderComponentというメソッドがあります。
wp.components.PanelBodyがパネル全体の設定です。
wp.components.SelectControlでセレクトボックスを追加できます。
onChangeで選択中のテキストをクラス付きのspanタグで囲む、という処理を加えてあげます。
return時の条件文内、props.isSelected は無くても動作することを確認していますが、おそらく選択中のブロックのみに表示する、という分岐だと思います。
wp.hooks.addFilter"editor.BlockEdit"というフィルターに関数をフックさせます。

テキスト装飾機能の実装方法

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する 2