ブロック作成時のclassNameに関するメモ

調べて出てくる情報と実際の状況とに乖離があって結構悩んだのでメモとして。

前提

• WordPressでブロック作成
• return内のラッパーとなるdivに自動で用意されてているclassを出力する

検索で調べると以下のようなコードが出てきますがこれでは出力できません。

const { className } = props;
return(
  <div className={ className } >
    test
  </div>
)

コード

import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
  return(
    <div {...useBlockProps} >
      test
    </div>
  )
}

端折っていますが上記のような感じで、classNameを使わずにclassを含めた属性をまとめて出力できます。

任意のclassを追加する

デフォルトに加えて任意のclassを追加する場合は以下のようになります。

import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
  const blockProps = useBlockProps({
     className: 'myclass'
  });
  return(
    <div {...blockProp} >
      test
    </div>
  )
}

まとまったサンプルコードを含めて詳細は以下のハンドブックを参照のこと。

• edit と save – Japanese Team — WordPress.org

blockPropsによるid設定の可否

記事本来の趣旨とは違いますがidに関して。

blockPropsの中身をconsole.logで出力すると、idも入っていることが確認できます。

しかしながら、classNameと同様にuseBlockPropsでidを設定することは想定されていないようです。

一応、classNameと同様にidという形で書けば設定はされるのですが、以下のような問題がありました。

• block.jsonのsupportsで"anchor": trueにすると設定されなくなる
• エディタ画面で更新ボタンを押した後であっても、ページを移動しようとすると保存していないデータがあると判定されてアラートが出る(「サイトを離れますか？行った変更が保存されない可能性があります。」のような文言)

該当ブロックを複数配置した際に同じidが並ぶのは問題なので、その意味では今後もidの設定は出来ない可能性は高いですが、以下の"multiple": falseの設定を条件にすれば1つしかブロックを設定できないという制限が可能なり、id重複は発生しないのでどうにかなるのかもしれません。

• サポート – Japanese Team — WordPress.org

そのためidを設定する現実な方法としては、管理画面の「高度な設定」から「HTMLアンカー」の欄にて入力するしかないのかもしれません。

結び

ブロック作成は久しぶりだったので色々忘れている部分もあるので明確には言えませんが、以前はpropsからclassNameを取り出す形でできたと思うのですが。

単純にuseBlockPropsができたからかもしれませんが、props自体が空になっている件などのドキュメントがまだ見つけられずもやもやしています。