// // Gutenbergエディタにマーカー機能を追加する方法【プラグイン不要／JSX不要で実装】 | 時々コーダー

Category

Contact

Gutenbergエディタにマーカー機能を追加する方法【プラグイン不要／JSX不要で実装】

Gutenberg（ブロックエディタ）で、選択したテキストにマーカー線（蛍光ペン風の背景色）を簡単に付けられるようにするカスタマイズ方法を紹介します。

実現したいこと

  • ブロックエディタのツールバーに「マーカー」ボタンを追加
  • 選択したテキストに <span class=”marker”>～</span> を挿入
  • プラグイン不要。テーマ側のJSとCSSだけで実装
  • カスタマイズしやすく、メンテナンスもしやすい

ブロックエディタをカスタマイズする方法は、公式ドキュメントでは JSX（React構文）で書かれた例が多いため、ビルド環境が前提のように感じるかもしれません。

書式ツールバー API

ですが WordPress は wp.element.createElement() というラッパー関数を用意しており、JSXを使わなくても同じように書ける設計になっています。

そのため、小規模サイトで最小限のカスタマイズをしたい時などは、ビルド不要でテーマに直接JSを書いて拡張することも可能です。

今回は、独立したカスタムブロックを新規作成するのではなく、既存のテキストブロックにインラインコードを追加するので、ビルド不要な方法を採用しました。

JSファイルを作成

marker-format.js を作成し、以下を記述します。

/wp-content/themes/テーマファイル/assets/js/marker-format.js

// WordPressが提供するリッチテキスト関連のAPIから必要な関数を取得
const { registerFormatType, toggleFormat } = wp.richText;

// ツールバーボタン（リッチテキスト用）コンポーネントを取得
const { RichTextToolbarButton } = wp.blockEditor;

// 新しいインラインフォーマットを登録（識別子は 'mytemplate/marker'）
registerFormatType('mytemplate/marker', {
  // ボタンに表示されるラベル
  title: 'マーカー',

  // 適用されるHTMLタグ（ここでは <span>）
  tagName: 'span',

  // 適用されるCSSクラス（マーカー装飾に使う）
  className: 'marker',

  // エディターのツールバーに表示されるボタンの定義
  edit: function(props) {
    return wp.element.createElement(
      RichTextToolbarButton, // ボタンコンポーネントの生成
      {
        // Dashicons の「edit」アイコンを表示
        icon: wp.element.createElement('span', {
          className: 'dashicons dashicons-edit'
        }),

        // ツールチップなどに表示されるボタンの名前
        title: 'マーカー',

        // ボタンクリック時の挙動：toggleFormatでクラスを付与/解除
        onClick: function() {
          props.onChange(
            toggleFormat(props.value, {
              type: 'mytemplate/marker'
            })
          );
        },

        // このフォーマットが現在選択範囲に適用されているかどうか
        isActive: props.isActive
      }
    );
  }
});

functions.php にJSを読み込む処理を追加

functions.phpに以下を追記します。

wordpress/wp-content/themes/テーマファイル/functions.php

// Gutenberg ブロックエディター専用のアセット（JSやCSS）を読み込むフック
add_action('enqueue_block_editor_assets', function () {

    // JSファイルをエディタ画面に読み込ませる
    wp_enqueue_script(
        'marker-format', // ハンドル名（識別子）を指定
        get_template_directory_uri() . '/assets/js/marker-format.js', // 読み込むJSファイルのパス
        array(
            'wp-rich-text',     // リッチテキスト機能を使うので依存に指定
            'wp-block-editor',  // エディタ拡張に必要なモジュール
            'wp-element',       // React要素（createElement）を使うため
            'wp-components'     // WordPress提供のUIコンポーネント
        ),
        null,  // バージョン（nullでキャッシュ無効化など）
        true   // フッターで読み込む（true = bodyの最後）
    );

});


wp_enqueue_script関数の第3パラメータ

リッチテキストのツールバーにカスタムボタンを追加する処理（＝registerFormatType() を使ったインラインフォーマット）では、WordPressが提供する機能を正しく使うために必要な依存スクリプトになるそうです。

依存名機能
wp-rich-texttoggleFormat など、リッチテキスト関連の関数
wp-block-editorRichTextToolbarButton など、エディタUI要素
wp-elementcreateElement() を含む React の抽象ラッパー
wp-componentsボタンやスピナーなどのUIコンポーネント

ツールバーの表示を確認

ここまでのステップを完了したら、ツールバーにボタンが表示されているので、
マーカーを引きたい部分をドラッグし、<span>で囲まれていることを確認してください。

マーカーのスタイルを追加

ブロックエディタ側と、フロント側の構造を検証ツールで確認してみましょう。

ブロックエディタ

<span data-rich-text-format-boundary=”true” class="marker">マーカー</span>

フロント

<span class="marker">マーカー</span>

markerクラスに好みのスタイルをあてれば良いことがわかります。

style.css（サイト全体、フロント側） または editor-style.css（編集画面側）にお好みのスタイルを追加します。

.marker {
  background: linear-gradient(to bottom, #fff176 0%, #ffeb3b 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.5em;
  background-position: 0 100%;
}

この方法なら、プラグインに依存せず、テーマ内で簡潔にカスタマイズ可能です。

別の色マーカーや注釈スタイルなど追加したい場合も、同様の構造でボタンを増やすだけです。

将来カスタムブロックを新規作成する時は、開発ガイドの手法であるReactで構築してみたいと思います。

参考にさせていただいた記事：
Gutenbergにインラインマーカーを追加する方法（eLearn.jp）

PAGE TOP