画像ブロックを挿入する際、特にコンテンツ幅からはみ出ていない画像を挿入した時に必ず位置の指定をしますね。
本当は、今のテーマでのコンテンツ幅からはみ出てるだけで、コンテンツ幅の広いテーマにしたり、ブロックテーマで1カラムに変更してコンテンツ幅を広げた時には、位置の指定をしていない画像は基本左寄りに設定されるので、後から画像の位置をすべて設定しなおすなんて自体を避けるため、どんな大きさの画像でも位置指定はしておきたいものです。
が、今のテーマでブロックエディターで編集している時には見た目別に左に寄ってるというわけではないため、意外と気づかないことも多いです。
そこで本ページでは、画像ブロック挿入時に自動でひとまず位置の指定をするようにするコードを紹介します。
設定忘れの防止だけでなく、あまりブロックエディターに慣れていない方が、ブロックツールバーから簡単に位置指定できるのにもかかわらず、カラムブロックなどを使って必死に?位置調整、しかもその人が見てる場合はという注釈付き?しなくてもいいようになりますね。
また、このコードにたどり着けず、CSSで無理やり中央揃えなどにしていたサイトで右寄せにするときは..でカスタムCSSクラス付加してごちゃごちゃとやっていた方にとっても有用な情報なのではないかと思います。
画像ブロック挿入時に決まった位置を指定するコード
有効化しているテーマのfunctions.phpへ以下のコードを追加してください。
function pwcn_set_image_default_align( $metadata ) {
// 画像ブロックのみに制限
if ( 'core/image' !== $metadata['name'] ) {
return $metadata;
}
// 1. align が attributes に定義されていなければ、ここで明示的に定義を作る(重要)
if ( ! isset( $metadata['attributes']['align'] ) ) {
$metadata['attributes']['align'] = array(
'type' => 'string',
);
}
// 2. その上で、デフォルト値をセットする
$align = 'center';// 'right', 'center', 'left' 等
$metadata['attributes']['align']['default'] = $align;
return $metadata;
}
add_filter( 'block_type_metadata', 'pwcn_set_image_default_align' );
追加したら、コード内の「$align」の値を「center(中央)」「right(右)」「left(左・・これは標準の値なのでこのコードで指定する必要なし)」へ変え、新規投稿や既存の投稿編集画面を開いて(既に開いていたらリロードして)小さめの画像を挿入してみてください。
うまくいけば幸いです。
実はコード完成にちょっと苦労したという話
ご覧いただいて分かる通り、完成コード自体は「え?これだけ?」という位短いコードで実装できますが、ちょっと詳しい話をするとこれが意外に大変なコードだったんです。
まず始めたのが、block.jsonのattributesにあるだろうから、他の要素のようにblock_type_metadata_settingsに引っ掛けてやれば済むだろうと簡単なコードを作ったものの、..適用されないという状況でした。
そこで見つけたのがblock_type_metadataというフック。このフック、公式ではblock_type_metadata_settingsと同様に、ブロックの設定情報をごにょごにょすると書かれているだけで、この2つの違いについて明記されておらず、検索してもどちらを使っても関係なさそう(というか分からずに使っていることも多いのかも)でした。
がこれが大間違い、調べていくと、WordPressが稼働した時(正確にはブロックを使う機会が来たとき)、以下のように処理されていたのです。
- block.json をサーバーで読み込む
- block_type_metadata フックで生のJSONデータをそのまま配列化する
- WPコアがメタデータを処理(パース、supportsをattributesへ展開など)
- block_type_metadata_settings フックでWordPressコアによって決定された「最終設定」とする
- register_block_type() でブロックの登録が完了し、それをブロックとしてエディターに挿入する
block.jsonを見てもらうと分かりますが、今回の「align」という要素は、画像ブロックで指定できる「位置」の項目ではあるものの、attributesには含まれていません。つまり、設定が羅列された配列には入っていない状態なので、block_type_metadata_settingsへ投げても「設定のないものをこうしてくれと言われましても..」と無視されてしまうのです。
それなら、supportsで利用できるのは分かっているんだから、配列の中に含めて、それに対して変更させればいいのでは?で試行錯誤して適用できるようにしたのが前述のコードです。
このページを見て安易にコピペで「できた!」と思った方はそんな苦労は当然知らないと思いますが、このコードが役に立った方は少なくとも感謝して然るべきだと思います。恐らくCSSで無理やり中央揃えなどにしていたのでしょうから..。
まあ個人的には、この仕組みでsupportsにはあるけどattributesに含まれていないという場合にも初期値の適用ができることが分かったので、いろいろと流用できるなとちょっと勉強になりました。








コメントを残す