iFrame版エディタでuseBlockPropsを使わないでもブロックを選択可能にする

IFrame版エディタではuseBlockPropsを使っていないブロックが選択できない

WordPress 7.0から標準実装になるIFrame版エディタでは、useBlockPropsを使っていないカスタムブロックは編集画面で選択ができなくなってしまいます。

サイドバーのリストビューからは選択可能ではあるもののユーザーには優しくありません。
お作法に則らず、useBlockPropを使っていなかったカスタムブロックは使うように書き直していきましょう。

でもuseBlockProps使いたくないケースもある

しかしuseBlockPropsはブロックのwp-block-[blockname]のクラスも補完するため、これによってエディタでは不要なCSSが適用されたりして邪魔になるということがあります。
例えば、簡易なアプリのブロックのように編集画面はデータの編集に徹して、プレビューは要求された時にしか出さないようなブロックや、ブロック全体がSSRで編集画面でのブロック本体は<ServerSideRender/>で出力されるブロックなどです。

ブロックのIDを指定してブロックの選択する

useBlockPropsを使わなくても、クリック時にブロックIDを指定してブロックを選択するようにすれば、ブロックは選択可能です。
core/block-editorのストアのアクションで、ブロックのIDを指定してブロックを選択できます。

wp.data.dispatch("core/block-editor").selectBlock(clientId);

こんな感じでuseBlockPropsを使わずにクリックでブロックを選択可能にできます。

wp.blocks.registerBlockType("my/customblock", {
  /* 略 */
  edit({ clientId }) {
    /* 略 */
    const selectThisBlock = useCallback(() => {
        wp.data.dispatch("core/block-editor").selectBlock(clientId);
    }, [clientId]);
    
    return (
      <div onClick={selectThisBlock}>
        ...
      </div>
    );
  },
  /* 略 */
});