3ヶ月前に投稿

ブロックエディタ (Gutenberg) にボタンを追加する

2019年1月27日

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

4.5

ブロックエディタのツールバーに
ボタンを追加してみます。

ここでは選択した文字列を特定のclassを持った
markタグで囲うボタンの追加方法です。

<mark>タグは、文書内の該当テキストをハイライトして目立たせる際に使用します。 <strong><em>のようにその部分を強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的です。
mark要素は、HTML5から新たに追加された要素です。

<mark>-HTML5タグリファレンス – HTMLクイックリファレンス

はじめに

spanではなくmark

先ずはじめに上記で、
markタグで囲うボタンと書きました。

なぜ?
span】ではなく【mark】なのか、

当ブログでご紹介した
スタイルセレクト機能を実装した場合、
spanが交渉するのを防ぐためです。

https://neco913.kirara.st/post-3723/

導入するにあたり

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

前提としてお話していく事とします。

https://neco913.kirara.st/post-3485/

ボタンを追加する方法

index.phpを編集

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

ここでは「wp_enqueue_script」の依存関係に
「wp-element」「wp-rich-text」「wp-editor」
を追加しておきます。

Important : note that this code is using two new utilities ( wp.element.createElement , and wp.editor.RichTextToolbarButton ) so don’t forget adding the corresponding wp-element and wp-editor packages to the dependencies array in the PHP file along with the existing wp-rich-text.

Add a button to the toolbar

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

// ツールバーボタン script 
function toolbar_btn($hook) {
    wp_enqueue_script( 'toolbar_btn_js', plugins_url( 'js/toolbar_btn.js', __FILE__ ),
    array( 'wp-element', 'wp-rich-text', 'wp-editor' )
       );
}
add_action('enqueue_block_editor_assets','toolbar_btn');

// ツールバーボタン css
function style_toolbar_btn($hook) {
    wp_enqueue_style( 'toolbar_btn_css', plugins_url( 'css/toolbar_btn.css', __FILE__ ),
    array(),
    filemtime( plugin_dir_path( __FILE__ ) . 'css/toolbar_btn.css' )
      );
}
add_action('enqueue_block_assets','style_toolbar_btn');

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

ボタンを追加するjs

( function( wp ) {
    wp.richText.registerFormatType(
    'toolbar-btn/toolbar-btn1', {
     title: 'My-ToolbarBtn',
     tagName: 'mark',
     className: 'marker_tb_btn',
     edit: function( props ) {
           return wp.element.createElement(
           wp.editor.RichTextToolbarButton, {
              icon: 'edit',
              title: 'My-ToolbarBtn',
              onClick: function() {
              props.onChange(wp.richText.toggleFormat(
              props.value,
              { type: 'toolbar-btn/toolbar-btn1' }
              ));
            },
              isActive: props.isActive,
              className: 'btn_bg_class'
            }
          );
        }
      }
    );    
/* ボタンを二個登録する場合は */
/*
     wp.richText.registerFormatType(
    'toolbar-btn/toolbar-btn2', {
     title: 'My-ToolbarBtn-2',
     tagName: 'mark',
     className: 'marker_tb_btn2',
     edit: function( props ) {
           return wp.element.createElement(
           wp.editor.RichTextToolbarButton, {
              icon: 'edit',
              title: 'My-ToolbarBtn-2',
              onClick: function() {
              props.onChange(wp.richText.toggleFormat(
              props.value,
              { type: 'toolbar-btn/toolbar-btn2' }
              ));
            },
              isActive: props.isActive,
              className: 'btn_bg_class2'
            }
          );
        }
      }
    );
/*
/* コメントアウトを外してください */
} )( window.wp );

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

ボタンを複数登録する場合

richText.registerFormatType
を複数回使用すれば複数のボタンを登録することができます。
ただ同じnameやclassNameは登録できません。
これはGutenbergの仕様のようです。
https://github.com/WordPress/gutenberg/blob/master/packages/rich-text/src/register-format-type.js#L55
https://github.com/WordPress/gutenberg/blob/master/packages/rich-text/src/register-format-type.js#L100

https://technote.space/wordpress/add-button-to-gutenberg#comment-6

gistに例を載せました。参考にしてみてください。
https://gist.github.com/technote-space/a9d1ab7154b6e5d372e0aa8b0cd77faa
『tagName』『className』『icon』『title』あたりをいろいろ変えてみてください。
https://technote.space/wordpress/add-button-to-gutenberg#toc2
の『wp_localize_script』はPHPでDBに保存した値を使用したりする場合に必要ですが、管理画面等で変更しない場合は不要です。

https://technote.space/wordpress/add-button-to-gutenberg#comment-9

文字列を装飾(marker)するcss

.marker_tb_btn {
  background: linear-gradient(rgba(255,255,255,0) 0%, #ffffa5 );
  color: #000033;
  padding: 3px 2px 0.5px 2px;
  font-weight: bold;
  border-radius: 6px;
}
/* ボタンの背景色 */
.btn_bg_class {
  background: radial-gradient(ellipse farthest-side,rgba(255,255,165,0.8),rgba(255,255,225,0));
}

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

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

コントロールパネルの
スタイルセレクト機能と
併せるとこんな感じになります。
https://neco913.kirara.st/post-3723/

最後に

Technoteさんの記事が
大変参考になりました。
ありがとうございます。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ブロックエディタ (Gutenberg) にボタンを追加する