createBlock、「ブロックの生成」をするボタンを作る！

ボタンを押す事で、ブロックを生成する方法をこの記事ではInnerBlocks内にあるブロックを使って紹介しています。

InnerBlocks内のブロックのツールバーに、追加ボタンを作ってみよう

InnerBlocks内にあるブロックで、追加したい前のブロックの追加ボタンを押すと、そのブロックの後ろに決められたブロックが追加されるようにしてみましょう。

カスタマイズするのは、追加ボタンを追加するブロックのスクリプトファイルです。
Snow Monkey Blocksの場合、追加ボタンを追加するブロックのblock.jsとなると思います。

まずは、定義を追加します。下記の４行を定義部分に追加してください。すでに定義が存在する場合は既存の定義に合わせて調整してください。

const { createBlock } = wp.blocks;
const { BlockControls } = wp.editor;
const { Toolbar, ToolbarButton } = wp.components;
const { select, dispatch } = wp.data;

この記述を行う事で、ToolbarやToolbarButtonと言ったコンポーネント要素やcreateBlockなどと言ったブロック操作のファンクションを使用することが可能になります。

次に、edit内のreturnに対して、ツールバーの表示用の記述を追加します。

return (
  <Fragment>
    <BlockControls>
      <Toolbar>
        <ToolbarButton className="components-toolbar__control" label="行の追加" title="行の追加" icon="plus" onClick={ onAddRow } />
      </Toolbar>
    </BlockControls>
  <Fragment>
...略...

この記述を追加する事で、ブロックのツールバーに＋（プラス）のボタンが表示されるようになります。

上記のソースコードでは、ツールバーの行の追加ボタンが押されると、 { onAddRow }を実行するようにしていますので、追加ボタンを押された際に実行される、onAddRowイベントの処理を、editの中に記述しましょう。

edit( { clientId } ) {
  // onAddRowの処理
  const onAddRow = () => {
    // 追加するブロックの要素をブロックに定義します
    const block = createBlock( このブロックのType );
    // ルートのブロックのClientIdを取得します
    const rootClientId = select( 'core/editor' ).getBlockRootClientId( clientId );
    // 選択中のこのブロックが何番目かを取得します
    const clientOrder = select( 'core/editor' ).getBlockIndex( clientId, rootClientId );
    // ルートのClientIdに、定義したブロックを取得した順番の次に追加するようにします
    dispatch( 'core/editor' ).insertBlock( block, clientOrder + 1, rootClientId );
  };
...略...

editには clientIdを渡すようにしています。すでにeditが記述されている場合はclientIdの記述を追加するだけで良いです。
「このブロックのType」と記載している箇所にはregisterBlockTypeで設定したブロックのTypeを記述してください。

正常動作する場合は、ツールバーに+（プラス）表示の「ブロックの追加」ボタンが表示され、ボタンを押す事で、記述したブロックが追加されるようになります。

Ghost Kit Blocks Collection – Ghost Kit

19 Blocks and Counting Blocks Extensions

ghostkit.io