知っておきたいワードプレス5.9の変更点と要注意点【ブロックエディター関連】
FSE（フルサイトエディター）以外にワードプレス5.9で導入されたブロックエディター周りの気になる新機能を紹介します。
便利になった反面、これは大丈夫なのだろうか？と要注意な点も・・・。
ワードプレス5.9でのブロックエディター関連の変更点と要注意点。
（非ブロックテーマを使用の場合）
- 見出しブロックの自動id付与（これが要注意点）
- 新規追加されたブロック
- より使いやすくなったリスト表示の仕様
- タイポグラフィーの機能強化
- ブロックのドラッグ＆ドロップ操作感の強化
上記以外にギャラリーブロックの画像取り扱い自由度が上がったとか、メディアとテキストブロックの画像入れ替えが便利になったとかありますが、個別ブロックについては各ブロックの記事更新で紹介する予定です。
見出しブロックのid自動付与（要注意点）
まずはversion5.9で導入された要注意な新機能から紹介します。
各ブロックのHTMLアンカー（ブロック設定サイドパネルの高度な設定の中にある）は、idを付与するのに使いますが、version5.9の見出しブロックについては自動的にHTMLアンカーが付与されるようになりました。
この機能は、ワードプレスversion5.9.1でデフォルトでは無効化されました。
ただし、functions.phpへのコード記述によってアンカーの自動付与を有効化することはできます。こちらの記事を参照ください。
https://web-children.com/2022/02/23/wp5_9_1-title-block-anch...ここから先の記事は、アンカーの自動付与を有効化した場合と考えてお読みください。
見出しに入力したテキストがそのままHTMLアンカーになります。
試しに、見出しH2、見出しH2、見出しH3、見出しH4と作成してHTMLを確認したところ、それぞれidが自動付与されました。同じ見出しテキストの場合、idも同じになってしまいます。
ちなみにリスト表示してみるとHTMLアンカーも表示される仕様となっています。
ここで素朴な疑問が生じました。
①日本語をidとしても問題ないのか？
②同じページ内に同一idが２つ存在するのはルール違反ではないのか？
そこでHTML Living Standardのid定義を確認してみました。
When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any ASCII whitespace.
HTML Living Standardのid定義
The id attribute specifies its element’s unique identifier (ID).
There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.
An element’s unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragments, as a way to target an element when scripting, and as a way to style a specific element from CSS.
Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.
（日本語訳）
HTML要素に指定する場合、id属性の値は、その要素のツリー内の全てのIDの中でユニークでなければならず、少なくとも1文字を含まなければならない。値には、ASCIIのホワイトスペースを含んではいけません。
id属性は、その要素の一意な識別子（ID）を指定します。
IDの形式には特に制限はなく、数字だけ、数字で始まる、アンダースコアで始まる、句読点だけで構成される、などの形式があります。
要素の一意な識別子は、様々な目的で使用することができます。特に、フラグメントを使用して文書の特定の部分にリンクする方法として、スクリプトを実行する際に要素をターゲットにする方法として、またCSSから特定の要素にスタイルを設定する方法として使用することが可能です。
識別子は不透明な文字列である。id属性の値から特定の意味を導き出してはいけません。
とりあえず、idに日本語を使ってはダメというわけではなさそうですが、idはユニークなものでなければならない、ということでページ内に同じid名があってはいけません。
同じid名が２つ以上存在する場合、これが単にCSSのセレクター指定やjavascriptでのDOM指定がうまく機能しないだけならばまだマシですが、SEO上の評価が落ちる可能性については不明です。
なのでとりあえずの自衛策としては次のように注意しておくのがよいでしょう。
１つのページ内に同じ見出し名は使わない
見出しブロックへのid自動付与は、すでに公開済のページでも更新すると自動付与されてしまうので注意が必要です。既存ページをエディターで開けた段階で見出しのHTMLアンカーが自動入力されてしまうのです。
また当然ですが、見出しをコピーする場合でも同じid名となります。
HTMLアンカーを消去しようとしてもできません（消しても自動的に再入力される）。別のidに書き換えることは可能です。
この影響でテーマやプラグインによっては『目次がうまく機能しなくなった』といった報告もありますので、version5.9へのアップデートはローカル環境でテストして問題ないかどうかを確認してからの方がよいでしょう。
次のマイナーアップデートで改善されることを期待します。
新規追加されたブロック
ワードプレスversion5.9で新規追加されたブロックは以下の通りです。
| ブロック名 | カテゴリー | 機能 |
|---|---|---|
| 行 | デザイン | ブロックを横並びにレイアウトする |
| ナビゲーション | テーマ | ナビゲーションメニューを表示 |
| 投稿者 | テーマ | 投稿者名を表示 |
| 次の投稿 | テーマ | 次の投稿へのリンク |
| 前の投稿 | テーマ | 前の投稿へのリンク |
| 投稿コメント | テーマ | 投稿のコメント欄の表示 |
| タームの説明 | テーマ | アーカイブページのカテゴリ・タグ等の説明を表示 |
テーマカテゴリーの６個のブロックについては、FSEの導入に備えたものなので詳しい説明は省略します。
ブロックカテゴリー：デザイン
新規追加されたのは”行ブロック”だけですが、もともとあったサイトロゴブロックなど６個のブロックがテーマカテゴリーに移動しました。
行ブロックは、ブロックを横並びにレイアウトしたいときに便利なブロックです。
ブロックカテゴリー：テーマ
新規追加されたブロックが６個、デザインカテゴリーから移動してきたブロックが6個と、テーマカテゴリーのブロック数はトータル20個にもなりました。
ブロック名を見ればわかりますが、いずれもフルサイト編集で力を発揮するブロックです。
クエリーループとその関連ブロックについては、version5.9で変更になったポイントも含めてこちらの記事で紹介しています。
不要なブロックは非表示にしよう
しかしテーマカテゴリーのブロックはフルサイト編集でなく、投稿や固定ページでコンテンツを作成する場合にはあまり使うことはないでしょう。なので次の手順でブロックを非表示にしておくと使い勝手がよくなります。
①画面右上の3点メニューをクリック
②設定をクリック
③ブロックタブに切り替え
④不要なブロックのチェックを外す
使い勝手がよくなったリスト表示とオプションメニュー
リスト表示に次の機能が追加されました。
- 階層化したブロックを折りたためる
- ブロックのオプションメニューが使える
- ブロックのドラッグ＆ドロップができる
リスト表示というのはブロックのアウトラインを表示してくれる機能です。
①エディター画面左上のリスト表示ボタンをクリック
②画面左にブロックのアウトラインが表示される
上のように、カラムブロックにカラム＞見出し・段落・・・ボタン＞ボタンなど複数のブロックが階層化されているときでも、ひと目でブロックの構造がわかります。
ワードプレスversion5.9ではリスト表示に折り畳みボタンとオプションメニューが表示されるようになりました。
リストの折り畳み
子ブロックのあるブロックにはリストを折り畳み表示できるようになりました。
オプションメニューへアクセス
ブロックのオプションメニューには、もともとブロック内ツールバーの３点メニューからアクセスできましたが、リスト表示からもアクセスできるようになりました。
ちなみにこのオプションメニュー内のブロックの削除の表記には、頭にブロック名が付いたのもversion5.9の変更事項です。
（従来）”ブロックを削除” ⇒ （version5.9）”段落を削除”
リスト表示のドラッグ＆ドロップが可能となった
ドラッグ＆ドロップでリスト表示内でブロックの移動が可能になりました。
パターンが大きく表示される
ブロックパターンは従来は次のような表示でした。
ワードプレスversion5.9では、この状態でパターンタブのすぐ下にある参照ボタンをクリックすると別windowが開いてパターンが大きく表示されます。
テキスト関連ブロックのタイポグラフィー強化
見出しや段落ブロックなど、テキスト入力ができるブロックについてはタイポグラフィー設定が強化されました。
- 太字・細字のバリエーションが増えた
- 行高さが指定できるようになった
- 大文字・小文字・先頭だけ大文字 の選択ができるようになった
（ローマ字表記の場合） - 文字間隔を指定できるようになった
タイポグラフィ設定手順（段落ブロックの事例）
①画面右の設定パネルでタイポグラフィー横の+マークをクリックしてメニューを開く
②各項目の右横にチェックを入れると対応する設定ボックスが開くので設定する
ブロックのドラッグ＆ドロップ操作感が向上
ブロックをドラッグ＆ドロップで移動するとき、移動が終了するまでは元のブロックの位置が薄い青で表示されます。
まとめ
ワードプレスversion5.9でのブロックエディター周辺の変更点について紹介してきました。
- 見出しブロックの自動id付与
同じ見出しテキストだとidも同じになるので注意が必要 - 新規追加されたブロック
行ブロック以外のFSE関連の６個のブロックは使わないので非表示とするのがおすすめ - リスト表示に以下の操作が追加され使いやすくなった
リスト表示を畳み込む、オプションメニューへのアクセス、ドラッグ＆ドロップによる移動 - タイポグラフィーの機能強化
外観（太字・細字）、行の高さ、大小文字選択（ローマ字表記）、文字間隔 - ブロックのドラッグ＆ドロップ操作感の強化
移動前のブロック位置を薄い青で表示
上記以外の個別ブロック機能強化は各ブロックの記事で別途紹介しています。
グループブロックの変更点
theme.jsonがあるとレイアウト設定などが追加され、HTML構造もシンプル化します。
カバーブロックの変更点
背景色指定の場合でもカラーオーバーレイの不透明度を変更可となりました。
クエリーループブロックの変更点
ページネーションが自動表示されるなど、フルサイト編集に向けて使い勝手が向上しています。
ブロックベースのウィジェットの変更点
ウィジェットグループブロックが使用可能となりました。
