Gutenberg(ブロックエディタ)メモ: サイドバーを作ってcheckboxを使う

WordPressのGutenbergハンドブックに載っている記述そのままでは作る方法が分からず、別の方法での実装を試した内容です。

注意点

• Gutenbergがコアに入る前の段階の記事です
• 書き方だけではなく、語句や名称にも問題がある可能性があります
• 私自身の書き方がまだ固まっていないためと参考にしたサンプルの都合上、当ブログ内のサンプルコードにはアロー関数の使用の有無などに表記揺れがあります
• バッドノウハウな状態だと思いますので、読む方は参考程度に考えてください

実現したいこと

• Gutenbergでブロック編集時にサイドバーを付ける
• サイドバー内にcheckboxを付けて動作させる

ハンドブックでは以下のページに説明がありますが、私の能力不足のせいか情報不足でそのままでは作れませんでした。

• Block Controls: Toolbars and Inspector
• CheckboxControl

サンプル

今回重要なのは、ハンドブックにあるwithStateを使っていない点です。
ハンドブックの書き方や仕組みを再現したわけではない点に留意してください。

以下は「checkboxで著者名表示を変える」という動作を目的としたサンプルです。

//初期設定
add_action( 'enqueue_block_editor_assets', function() {
  wp_enqueue_script(
    'myplugin-gutenberge',
    plugins_url( 'block.js', __FILE__ ),
    [ 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ]
  );
} );

const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
const {
    RichText,
    BlockControls,
    AlignmentToolbar,
    InspectorControls,
} = wp.editor;
const {
    PanelBody,
    CheckboxControl,
} = wp.components;

registerBlockType( 'my-plugin/test-inspector-check', {
  title: 'test-inspector-check',
  icon: 'universal-access-alt',
  category: 'layout',

  attributes: {
    content: {
      type: 'array',
      source: 'children',
      selector: 'p',
    },
    alignment: {
      type: 'string',
    },
    check:{
      type:'boolean',
    }
  },

  edit( { attributes, setAttributes } ) {
    const { content, alignment , check } = attributes;

    function onChangeContent( newContent ) {
      setAttributes( { content: newContent } );
    }
    function onChangeAlignment( newAlignment ) {
      setAttributes( { alignment: newAlignment } );
    }
    function onChangeCheck( newCheck ) {
      setAttributes( { check: newCheck } );
    }

    return (
      <Fragment>
        <BlockControls>
          <AlignmentToolbar
            value={ alignment }
            onChange={ onChangeAlignment }
          />
        </BlockControls>
        <InspectorControls>
          <PanelBody title="著者表記">
            <CheckboxControl
              heading="User"
              label="Is author"
              help="Are you human?"
              checked={ check }
              onChange={ onChangeCheck }
            />
          </PanelBody>
        </InspectorControls>
        <RichText
          key="editable"
          tagName="p"
          style={ { textAlign: alignment } }
          onChange={ onChangeContent }
          value={ content }
        />
      </Fragment>
    );
  },

  save( { attributes, className } ) {
    const { content, alignment, check } = attributes;
    return (
      <div className={ className }>
        <RichText.Content
          style={ { textAlign: alignment } }
          value={ content }
          tagName="p"
        />
        <p class="author2">By { attributes.check ? 'HUMAN' : 'NO-HUMAN' }</p>
      </div>
    );
  },
} );

ハンドブックではCheckboxControlの使用に際しwithStateを使っていますが、この形で値を取り出す公式的な方法がわからず断念し、onChangeの値を関数で受け取る形にしています。

説明入りサンプル

以下は上記と同じコードにコメントで説明を入れたものです。

//ブロックが作れるようにregisterBlockTypeを読み込む
const { registerBlockType } = wp.blocks;
//editやsave内で<Fragment>が使えるように、 wp.elementから読み込む
const { Fragment } = wp.element;
//editやsave内で<RichText>などが使えるように、 wp.editorから読み込む
//サイドバー内への配置をしている<InspectorControls>もここで設定
const {
    RichText,
    BlockControls,
    AlignmentToolbar,
    InspectorControls,
} = wp.editor;
//editやsave内で<CheckboxControl>などが使えるように、 wp.componentsから読み込む
const {
    PanelBody,
    CheckboxControl,
} = wp.components;

registerBlockType( 'my-plugin/test-inspector-check', {
  //iconやcategoryなどの設定(今回は適当に決定)
  title: 'test-inspector-check',
  icon: 'universal-access-alt',
  category: 'layout',

  //属性とその値を利用できるように設定。初期設定のようなもの。
  attributes: {
    content: {
      type: 'array',
      source: 'children',
      selector: 'p',
    },
    alignment: {
      type: 'string',
    },
    check:{
      type:'boolean',
    }
  },
  
  //editは投稿画面内の内容を設定
  //上で設定したattributesの値をattributesと書くことでまとめて引数にしている
  //setAttributesは値が変わった場合に使うためにもとから用意されているようなので、それを使うために記述 
  edit( { attributes, setAttributes } ) {
    //attributesでまとめていた各属性を分けて使えるようにする
    //こうしておけば{alignment}と書けばalignment: centerのように出力される
    const { content, alignment , check } = attributes;
    
    //RichTextへの入力内容を取得して更新する
    function onChangeContent( newContent ) {
      setAttributes( { content: newContent } );
    }
    //AlignmentToolbarの値を取得して更新する
    function onChangeAlignment( newAlignment ) {
      setAttributes( { alignment: newAlignment } );
    }
    //CheckboxControlの値を取得して更新する
    function onChangeCheck( newCheck ) {
      setAttributes( { check: newCheck } );
    }

    return (
      <Fragment>
        {//ブロックの上の場所を指定
        }
        <BlockControls>
          {//並び方向を設定するUIをこれだけで出力できる
          }
          <AlignmentToolbar
            value={ alignment }
            onChange={ onChangeAlignment }
          />
        </BlockControls>
        {//サイドバーの場所を指定
        }
        <InspectorControls>
          {/*
          個別に分けるために設定
          titleを設定するとトグルで開閉式にできる。必須ではない。
          */}
          <PanelBody title="著者表記">
            {//チェックボックスの設定
            }
            <CheckboxControl
              heading="User"
              label="Is author"
              help="Are you human?"
              checked={ check }
              onChange={ onChangeCheck }
            />
          </PanelBody>
        </InspectorControls>
        {//リッチテキストエディタの設定
        }
        <RichText
          key="editable"
          tagName="p"
          style={ { textAlign: alignment } }
          onChange={ onChangeContent }
          value={ content }
        />
      </Fragment>
    );
  },

  //saveは保存時の内容を設定。基本的にはそのまま出力されるので、記事表示時の内容とほぼ同義。
  //最初に設定し、edit内で操作したattributesの値をattributesと書くことでまとめて引数にしている
  save( { attributes, className } ) {
    //attributesでまとめていた各属性を分けて使えるようにする
    const { content, alignment, check } = attributes;
    return (
      <div className={ className }>
        <RichText.Content
          style={ { textAlign: alignment } }
          value={ content }
          tagName="p"
        />
        {//今回はattributes.checkでcheckの真偽値のみを出力し、三項演算子で値を変えて出力
        }
        <p class="author2">By { attributes.check ? 'HUMAN' : 'NO-HUMAN' }</p>
      </div>
    );
  },
} );

関連記事

Gutenberg(ブロックエディタ)に関連する記事一覧。

• [Gutenberg対応版]WordPressで複数のCSSをまとめてインラインCSSとして出力する
• @wordpress/create-blockで一つのプラグインに複数のブロックを入れる
• @wordpress/wp-env と @wordpress/create-block で簡単にブロック開発環境を作る
• 3度目のブロック開発環境(Docker Desktopとcreate-block)
• Gutenberg(ブロックエディタ)メモ
• Gutenberg(ブロックエディタ)メモ -Gutenbergの使い方で迷うところ
• Gutenberg(ブロックエディタ)メモ -ハンドブックでわからないところ1
• Gutenberg(ブロックエディタ)メモ -ハンドブックでわからないところ2
• Buttonを使う(MediaUploadとRichTextも含む)
• metaデータを設定する
• Templatesとplaceholderを使う
• Toggleを使う
• カスタムHTMLを使う
• サイドバー(Inspector)を設定する
• サイドバーを作ってcheckboxを使う [現在表示中]
• サイドバーを作ってラジオボタンを使う
• ショートコードの代替案的なブロックを作る
• ラジオボタンでクラスを変更可能なコードエディタブロックを作る
• 登録されているショートコードの一覧を表示したブロックを作る
• AddQuicktagのGutenberg対応に関して
• Classic Editorプラグインに関して
• wp_is_mobile関数を利用して出し分け機能をもったブロックを作る
• 任意のHTMLタグを範囲選択で挿入可能なツールバーを付ける
• 任意のHTMLタグを範囲選択で挿入可能なボタンをRichTextのツールバーに追加する
• 自動でテーマCSSの指定箇所をGutenberg用CSSとして用いる方法の検討
• 自動で出力されるブロック用のCSSを取除く
• Gutenberg関連の参考サイト:メモ
• WPのsetMeta()で複数のキーと値を保存する
• WPのブロックエディタでTypeError: Cannot read property ‘firstChild’ of nullのエラー:メモ
• WPのブロックエディタでUncaught Error: Minified React error #321のエラー:メモ
• WPのブロックエディタでタグをドロップダウンで変更する:メモ
• WPのブロックエディタでブロック追加用ボタンを表示させる:メモ
• WPのブロックエディタで親の値を子に設定する:メモ
• WPのブロック作成メモ
• WPの独自ブロックが設定されている時のみCSSやJSをフロントに表示する方法
• ブロック作成時のclassNameに関するメモ
• ブロック開発の環境構築におけるwp-scriptsとCreate Guten Blockのメモ