WordPress 5.8 で気になるブロックエディタ周りのアレコレ

たくさんある変更・追加・修正の中から、個人的に気になった部分を淡々とピックアップしていきます。ほんとは気になってるのもっとあるけど書ききれなかった模様。FSE（テンプレートエディタ）関連もスキップしています。また、Vektorの各種製品でどこまで対応するかはまだ検討中ですので、ご了承ください。

まずは公式のリンクのまとめから。

5.8に入るGutenbergのバージョンは 10.0 から 10.7 です。ちなみにGutenbergの最新バージョンは10.9.1（2021/07/01現在）です。
https://developer.wordpress.org/block-editor/handbook/versions-in-wordpress/

WordPress 5.8 Must Haves のボード
https://github.com/WordPress/gutenberg/projects/55

それぞれの公式ブログ記事がこちら。

• Gutenberg 10.0 https://wp.me/p2AvED-mGu
• Gutenberg 10.1 https://wp.me/p2AvED-mNG
• Gutenberg 10.2 https://wp.me/p2AvED-mSZ
• Gutenberg 10.3 https://wp.me/p2AvED-mWI
• Gutenberg 10.4 https://wp.me/p2AvED-mZM
• Gutenberg 10.5 https://wp.me/p2AvED-n33
• Gutenberg 10.6 https://wp.me/p2AvED-n9q
• Gutenberg 10.7 https://wp.me/p2AvED-ncV

ではバージョンごとに見ていきましょう。

Gutenberg 10.0

Show block patterns in the inserter for non-root level insert position. (28459)
ルートの位置でなくてもインサーターでブロックパターンが表示される

つまり、カバーブロックとかの中にぽこぽこ、パターンを入れ込めちゃいます。

わーい！1ユーザーとしては嬉しい反面、開発者としては眩暈がしてきます。

Allow transforming Paragraph blocks to Buttons block. (28508)
段落ブロックからボタンブロックに変換が可能に 🎉

段落ブロックで作成したリンク文字列をさくっとボタンブロックに変換出来る！リンクになって無くても変換できます。

これは地味だけど、手放しで嬉しい変更だと思います。知らないと気がつけないアップデートですがｗ

Gutenberg 10.1

Add Items Justification to Social Links. (28980)
ソーシャルアイコンブロックに位置揃え機能が追加

位置揃え機能が追加されて、また使い勝手が良いブロックになっていますね。フッターやヘッダーに出すソーシャルアイコンはこれで行けそうなので、お決まりのセットをパターンで作りたいですね。

Buttons: Add space-between justification controls. (29160)
ボタンブロックに位置揃え機能が追加

同じく位置揃え機能がボタンブロックにも追加されました。

Gutenberg 10.2

Restore the margins of blocks relying on the figure element. (29517)
figure要素のブロック（など）のマージンに微調整

Gutenbergの開発チームは、フロントとエディタでの視覚的な差異の無いように調整し続けているので、そのための変更の一つです。.wp-block-embedなどのマージンがmargin: 0 0 1em 0;となっています。地味だけど個人的に気になる。微調整が必要な場合があるかもです。

Add Columns transform from Media & Text. (29415)
メディアとテキストブロックをカラムに変換できるように 🎉

普通に嬉しい変更ですね。メディアとテキストで作ってみたブロックをやはりカラムに変更したいケースはたまにあると思います。今回は他にも変換できるブロックが増えています。

Add expandOnFocus, showHowTo and validateInput experimental props to FormTokenField. (29110)
FormTokenFieldにexpandOnFocus, showHowTo と validateInputのpropsが追加

これは完全に開発者向けのアップデート。experimentalですが良さそうなpropsが追加されてました。

• expandOnFocus：入力フィールドにフォーカスが当たっている間、提案リストを展開したままにすることができます。
• showHowTo：falseに設定すると、使用方法のテキストを隠すことができます。
• validateInput: 入力が受け入れられ、トークンに変換される前に、入力を検証します。これは、候補のいずれかにマッチする入力のみを受け付ける場合などに便利です。

Hide writing prompt from subsequent empty paragraphs. (28275)
空の段落の連続時には「文章を入力、または…」を非表示に

空の段落が連絡しても何も表示されないようになりました。個人的には微妙な気がしますｗ

Gutenberg 10.3

Add since versions to the deprecated features. (30072)
deprecatedにsinceでバージョンが追加

開発者向け。どのバージョンから非推奨になったのか分かるようになりました。

Add drag handle to select mode. (28815)
選択モードの時にもドラッグ可能に 🎉

選択モードの時にも、ブロックをドラッグすることが出来るようになりました。いいね！

Cover: Allow drag and drop media replacement. (29813)
カバーブロックの背景画像をドラッグ・アンド・ドロップで差し替え可能に

良い変更だと思いますが、画像ブロックは出来ないのでちょっと戸惑うかも。

Components: Allow multiple words in the autocomplete phrase matcher. (29939)
オートコンプリートのコンポーネントが改良（複数の単語にマッチングするように）🎉

一見地味ですが、利便性をぐっとあげるアップデートです。LGTMすぎる。RC1か5.8の正式版を入れたら、みなさんにもちょっと試して欲しい。

Media: Use image default size from settings. (29966)
image_default_sizeの指定をちゃんと反映するように 🎉

画像挿入時にimage_default_sizeを指定していても、無視してLargeになっちゃってた問題が解消しました。個人的にとても嬉しい。

Gutenberg 10.4

10.4の以降の変更量がぐっと増えています。なぜなのか。FSE系の変更はスキップしているんですがそれでも多い…。厳選？5つで許してください。

Preformatted: Add color controls. (28396)
整形済みブロックに色指定が出来るように

色のコントロールがとうとう整形済みブロックまで。私には出番がなかなかないのですが、使う人は使いそうですね。

RichText: Always show placholder on focus. (30393)
段落ブロックでフォーカス時も常にプレースホルダーを表示

段落ブロックの挙動が少し変わっています。

Add site icon and name to the publish flow. (30231)
サイトのアイコンと名前が公開時のフローに追加

公開する時にサイトのアイコンと名前が表示されます。他にもタグを追加してなかったら提案とかしてくれるようになっています。

Writing Flow: Use a shorter writing prompt. (29611)
段落ブロックのプレースホルダーの文章が簡潔に

「文章を入力、または」が無い形になったのですが、日本語だとあんまり長さ変わりません。翻訳って難しい。

Remove small APIs deprecated in WordPress 5.2. (30283)
5.2で非推奨になったちょっとしたAPIを削除

開発者向け。サラッと書いているのですが、非推奨のAPIが削除になっています。本当に今は全然使われていないAPIで、登録されているプラグインで数人いた使ってるっぽい作者に連絡を取ってから削除していて、とても慎重に事をすすめていて素晴らしいと思いますし削除は当然の方向だなとは思います。と同時に身の引き締まる思い。

Gutenberg 10.5

10.5の変更は大きいものが多いので、他のブログとかでも取り上げられそうですが、一応書き出してみます。

Buttons Block:Add Typography support. (30394)
ボタンブロックにタイポグラフィ（文字の大きさとか）のサポート追加

ボタンブロックで、同じButtons（一番外側のボタンブロック）に含まれるボタンで文字サイズ変更も可能に。

File Block: Add support for embedding PDFs. (30857)
ファイルブロック：PDFを埋め込み出来るように

これは色んな人に喜ばれる気がします。

Block Patterns: Revisit the bundled block patterns. (29973)
ブロックパターン：バンドルされたブロックパターンを調整など

10.5でブロックパターンがごそっと様変わりしました。

ブロックパターンの選び方のUIもアップデートされて使いやすくなっていますが、今の処クエリループブロックだけでしか有効化されていないのかな…？

Add border color, style, and width support. (30124)
ボーダーの色、スタイル、幅のサポートが追加

ボーダーのスタイルも自在になりそう、なのですが、まだ実験的で不安定な様子です。5.9ぐらいにはちゃんと動くようになるかな？

BoxControl: Allow configurable sides. (30606)
横の間隔も個別に制御可能に

コアのブロックだとグループブロックなどに適用されている、間隔のアップデートです。このPRだと、縦横の2つになってますが、最終的に間隔を4方向全部コントロール出来るようになっています。

Gutenberg 10.6

10.6はコンポーネントのアップデートが色々入っていますがそのひとつから。FSE関連が多いので、ここに挙げるのは少なめになりました。ブロックパターンの変更は取り込まれ方が微妙なので割愛。

Use UnitControl for font-size. (31314)
font-sizeでUnitControlを使用

開発者向け。ではありますが、結果、案外影響範囲広いかも？フォントサイズの単位指定について。

フォントサイズにpx以外の値を使用できるようにするもので、これまで使用していたカスタム数値入力の代わりにUnitControlを使用します。
フォントサイズは以前、ハードコードされた単位としてpxを使用して保存されていたため、後方互換性の問題はありません。これにより、em/rem単位の使用が可能になりました。

Add duotone block supports. (26752)
デュオトーンフィルターがサポートされます

これは目玉的に紹介されていると思います。画像ブロックとカバーブロックにデュオトーンフィルターがかけられるようになりました。

Display most used terms in term selector. (30598)
タグの選択肢に最も使われているタグが表示されるように

タグを選択する際に、タグの候補として最も使用されている10個のタグが「よく使うもの」として表示されるようになりました。

Gutenberg 10.7

Normalize theme block toolbars. (31952)
ブロックのツールバーを標準化

各種ブロックのツールバーの並び順などが整備され、ルール化されました。カスタムブロックもこれに沿ってね、ということみたいです。

Column: Add color and padding support to individual column block. (31778)
カラムブロック：個々のカラムブロックに色とパディングの指定が可能に

カラムブロックに色とパディングの指定が入るようになりました。重ね合わせ、というスタイルもあるので、色んなスタイルが自在ですね（白目）

Media & Text: Add media width control. (31002)
メディアと文章ブロック：横幅指定可能に

画像の横幅指定が簡単にできるようになって、メディアと文章ブロックの使い勝手がまたアップしています。

UnitControl: Add support for unit step per unit type. (30376)
UnitControl: ユニット単位毎にステップ値を指定可能に

開発者向け。10.3、コンポーネントのアップデートも沢山ありました。その一つですが、ユニット単位毎にステップ値を指定可能に出来るようになっています。地味に嬉しいアップデートな気がします。

Add option to disable duotone. (32002)
デュオトーンの無効化オプションが追加

開発者向け。デュオトーンの無効化ができるオプションが追加されました。settingsのcolorに"duotone": nullを指定する模様。

Blocks: Deprecate registerBlockTypeFromMetadata in favor of registerBlockType. (32030)
registerBlockTypeFromMetadataを非推奨とし、registerBlockTypeを採用

開発者向け。コレまでの経緯を知っている人はきっと…え？てなるんですけれど、ややこしいから結局registerBlockTypeへ統一されるそうです。

---

この記事を書いた人

mimi

フリーランスのWeb デザイナー・開発者。

2020年9月からVektorチームにて主にデザイン、WordPressのブロック開発に関わっています。

最近の投稿

• ウェブ制作・IT2021年12月16日VektorチームでFigmaを1年使ってみての所感と、Vektorブランドガイドラインのリリース
• WordPress2021年7月2日WordPress 5.8 で気になるブロックエディタ周りのアレコレ
• ウェブ制作・IT2020年12月23日2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現してみよう Part3
• ウェブ制作・IT2020年12月10日Figmaでデザインを起こしてみよう – 2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現 Part2