WPのブロックエディタでブロック追加用ボタンを表示させる:メモ

理解しきれていませんがエラーなく動作するところまで作れたのでメモとして。

実現したいこと

• ブロックエディタでブロック追加用ボタンを表示させる

少々わかりにくいと思いますが、ブロックエディタでカラムやグループなど枠を作るブロックを入れると、十字マークのついた空のブロックが表示されると思います。
この十字マークをクリックすることでブロック追加用のポップアップが表示されます。

今回作成したいのはこの初期ブロックのようなブロックです。

サンプルコード

import {
  InnerBlocks,
  store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';

export default function Edit() {
  const hasInnerBlocks = useSelect(
    ( select ) => {
      const { getBlock } = select( blockEditorStore );
      const block = getBlock( clientId );
      if ( block && block.innerBlocks.length ) {
        return undefined;
      }
      return InnerBlocks.ButtonBlockAppender;
    },
    [ clientId ]
  );

  return (
    <div {...blockProps}>
      <InnerBlocks renderAppender={ hasInnerBlocks } />
    </div>
  );
}

ボタン自体はButtonBlockAppenderが該当しますが、そのままではInnerBlocksの外側に追加されてしまいます。そこでInnerBlocks.ButtonBlockAppenderという形で用いることで、InnerBlocksの内側に表示させることができました。

なお、ブロックが一つでもあればボタンブロックが不要な場合、該当ブロックのInnerBlocks内にブロックがあるかどうかを判定する必要があります。
後述するページのコードを参考にして、InnerBlocksの有無を調べるhasInnerBlocksを作成して用いています。

参考資料

• gutenberg/edit.js at trunk · WordPress/gutenberg
  今回は主にこちらのコードを読んで作り方を学べた。ブロックの有無を判定するコードもこちらに。
• admin css – How to add a class to the element in a custom Gutenberg block – WordPress Development Stack Exchange
  情報は古いがInnerBlocks.ButtonBlockAppenderという書き方を知るきっかけになった
• @wordpress/data | Block Editor Handbook | WordPress Developer Resources
  useSelectに関して
• @wordpress/block-editor | Block Editor Handbook | WordPress Developer Resources
  buttonblockappenderに関して
• gutenberg/README.md at dbf9167a084cd666a9edb42737f36c3727a51b45 · WordPress/gutenberg
  buttonblockappenderに関して
• gutenberg/README.md at trunk · WordPress/gutenberg
  renderappenderに関して
• ブロックエディター – Autumnsky
  renderappenderに関して

結び

今回のブロックの大元の目的は、InnerBlocksをdivなどのラッパー要素で囲んだだけのブロックが必要だったためです。

グループブロックがあるのになぜ作るのかと思われるかもしれませんが、グループブロック内にさらにdivがもう一つ加わったことで、CSSのflexやgridが使いにくくなったためです。

無意味にインナー要素を作ったとは考えていませんが、レイアウト用にただの枠が欲しいという時には邪魔になり、使えるブロックがないなら作るしかないと考えた次第です。