Gutenberg 12.0 変更内容まとめ

この記事では、Gutenberg ver.12.0 に関する主な変更内容をまとめています。

基本情報

以下、🔁マークは、WordPress 5.9.X系に反映 or バックポートされているものです。

執筆協力:浜野さん ( Github: t-hamano )

機能強化・仕様変更

「ブロックスタイル」のプレビューが仕様変更された

スタイルのプレビュー表示が初期状態ではなくなり、「スタイル名」のテキストボタンだけに。
ボタンにマウスオーバー(or フォーカス)した時にのみブロックのスタイルプレビューを表示するようになっています。

https://make.wordpress.org/core/files/2021/11/Style-Previews@2x.mp4

「投稿のアイキャッチ画像」ブロックのビジュアルの柔軟性アップ

これまでは、高さ固定のプレースホルダが表示されるだけだったが、高さが可変となり、実際の画像を使った場合のイメージに近くなった。

Before

After

36517 (🔁 5.9.0)

「ドロップキャップ」設定がタイポグラフィパネル内へ移動

段落ブロックで使える「ドロップキャップ」の設定が、フォントサイズなどと同様に「タイポグラフィ」パネル内に移動しました。

https://make.wordpress.org/core/files/2021/11/Drop-Cap@2x-1024×458.png

ナビゲーションリンクブロックのリンクにプレビューが付いた

サイトエディターのウェルカムガイドが追加

サイトエディターとグローバルサイドバーの両方に新しいウェルカムガイドが追加された。

https://make.wordpress.org/core/files/2021/11/Site-Editor-Welcome-Guide@2x-1024×575.png

36172 (🔁 5.9.0)

開発者向け

公式JSONスキーマのアップデート

v11.9で導入されていたblock.jsontheme.jsonのJSONスキーマのURLが新しくなった。

  • https://schemas.wp.org/trunk/theme.json
  • https://schemas.wp.org/trunk/block.json


常に最新のJSONスキーマを参照するようになり、trunk の部分を wp/X.X に置き換えると、そのWordPressバージョンのスキーマを参照する事も出来るように。
(例:https://schemas.wp.org/wp/5.8/block.json)

デフォルトカラーパレットがオプトアウト可能に

theme.json で、デフォルトのカラーパレットをオプトアウト出来るようになった。( corePalette:false / coreGradients:false

(🔁 5.9.0) 36492

TypeScriptのビルドをサポート

36260@wordpress/scripts がTypeScriptのビルドをサポートした

セレクタの変更

(🔁 5.9.0) 36282:「コード」ブロックのセレクタが変わった( .wp-block-code.wp-block-code > code