Gutenberg(ブロックエディタ)メモ: ラジオボタンでクラスを変更可能なコードエディタブロックを作る

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg
WordPressのGutenberg

WordPressのGutenbergのハンドブックやGitHubの内容などを参考にして、求める機能の実装を試した内容です。

構築環境
WordPress4.9.8
JavaScriptJSX/ESNext
Gutenberg3.9.0

注意点

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

実現したいこと

  • Gutenbergでブロック編集時にサイドバーにラジオボタンを設定
  • ラジオボタンでdivのクラスを変更して、そのdivに囲まれたulを出力する
  • divのクラス名にはwp-block-〇〇のような自動出力のクラスを出力させない
  • 初期値として任意のHTMLを設定する

ハンドブックやGitHubでは以下のページに説明があります。

サンプルコード

ラジオボタンでクラスを操作してdivとulを出力する
ラジオボタンでクラスを操作してdivとulを出力する

以下がサンプルコードです。

なお、限定的な目的のために作っていますので(今回であればliの中にテキストやspanやaが入る程度)、「何を入れても問題なく表示される」かどうかは確認していませんし、そういう用途は意図していません。その点は留意してください。

その他懸念点などは、今回の仕組みの基本部分に触れている「Gutenbergメモ カスタムHTMLを使う」の記事を参照してください。


//初期設定
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 { CodeEditor, PanelBody, RadioControl } = wp.components;
const { RawHTML, Fragment } = wp.element;
const { InspectorControls } = wp.editor;

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

  supports: {
    className: false,
  },
  attributes: {
    content: {
      type: 'string',
      //初期値が要らない場合はdefaultなしでよい
      default: '<ul>\n\t<li>default HTML</li>\n</ul>',
    },
    option:{
      tuype: 'string',
      default: 'block-a',
    }
  },
  edit( { attributes, setAttributes } ) {
    const { content, option } = attributes;

    const onChangeContent = newContent => {
      setAttributes( { content: newContent } );
    };
    const onChangeOption = newOption => {
      setAttributes( { option: newOption } );
    };

    return(
      <Fragment>
        <InspectorControls>
          <PanelBody title="クラス名">
            <RadioControl
              label="任意のクラス付きdivで囲んだul"
              help="種類(クラス名)を選んでください"
              selected={ option }
              options={ [
                { label: '種類A(block-a)', value: 'block-a' },
                { label: '種類B(block-b)', value: 'block-b' },
                { label: '種類C(block-c)', value: 'block-c' },
              ] }
              onChange={ onChangeOption }
            />
          </PanelBody>
        </InspectorControls>
        <div className="wp-block-html">
          <p>{ attributes.option }クラスを設定</p>
          <CodeEditor
              value={ attributes.content }
              onChange={ onChangeContent }
            />
        </div>
      </Fragment>
    );
  },
  save( { attributes } ) {
    const { content, option } = attributes;

    return (
      <div className={ attributes.option }>
        <RawHTML>{content}</RawHTML>
      </div>
    );
  },
} );

投稿画面表示時に内容がわかるように、この部ブロックの真上に「block-aクラスを設定」という文言を出力しています。

supportsでclassNameをfalseにすることにより、自動で追加されるクラス名の出力を停止させています。

ひな形(初期値)を作る

今回の重要ポイントの１つが、ひな形を用意することでした。

運用を考えた場合、使うブロックに0からHTMLを入れるのは手間がかかりすぎますし、基本形となる構造を全て覚えているのでもなければどう書けば良いか忘れることも十分考えられます。

この問題を解決するために、追加したブロック自体にひな形としてのHTMLを用意できれば良いのではと考え、コードを作成しました。

具体的には、前述のコードの以下の部分です。


attributes: {
    content: {
      type: 'string',
      //初期値が要らない場合はdefaultなしでよい
      default: '<ul>\n\t<li>default HTML</li>\n</ul>',
    },

defaultの値を他のHTML構造に丸ごと変えて対応もできるため、色々と便利に使えるのではと思います。

なお、defaultの\r\tは、一応コードエディタの挙動に合わせてliの前に改行とタブスペースを１つ分入れるためにつけています。

\rも\tも取れば隙間なく1行で表示させることもできます。

関連記事

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

3人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄