ブログ向けWordPressテーマ「SWELL」をリリースしました!

WordPress5.3でのブロックエディターの変更点まとめ【Gutenberg】

WordPress5.3でのブロックエディターの変更点まとめ【Gutenberg】

2019年11月12日、WordPress5.3がリリースされましたね。

今回のアップデートではブロックエディター(Gutenberg)がかなり進化していたので、その辺について(自分が気づいた範囲ですが)変更点をまとめていこうと思います。

了

テーマ開発者としては変更への対処がめちゃくちゃ大変でしたが...笑

まだ「ブロックエディターが使いにくい」とか言ってる人は、まずは黙ってこの記事を読んでみてください。

「バージョンアップデートしたらバグった!」と言ってる人をちょくちょく見かけますが、それはテーマかプラグインが原因の可能性が大きいです。WordPressが悪いみたいな言い方はやめて、テーマ・プラグイン開発者にどうバグったのか報告してあげましょう。

目次

デフォルトスタイルが選べるようになった

頻繁に使うブロックスタイルをあらかじめセットできるようになりました。

例えば、『SWELL』では画像ブロックに影をつけたり線をつけたりできるスタイルが選択できるのですが、「影あり」のスタイルをデフォルトスタイルに登録することで、次回以降、初めから影が付いた状態で画像ブロックが配置されるようになります。

デフォルトスタイルをセットしている様子
デフォルトスタイルをセットしている様子

ブロックの移動にアニメーションがついた

ブロックを移動させる時にアニメーションがつき、移動がすごく心地よくなりました。

移動用のコントロールバー自体の使いやすさも向上してます

ブロックを移動させるコントロールバー自体もデザインが見やすくなっていたり、「幅広」・「全幅」のブロックでは配置が変わったりもしています。

さらに、インラインブロックの移動がしやすくなりましたね。

例えばカラムブロックでは2個以上ブロックがある状態でブロックの左側までカーソルを動かさないとコントロールバーが出てこなかったのですが、その辺の使い勝手も改善されてます。

新ブロック、「グループブロック」の追加

複数のブロックを一つにまとめるための「グループブロック」が登場しました。

グループブロック
グループブロック

これにより、グループ化したブロック群全体に背景色をつけたりボーダーをつけたりということが簡単にできるようになりました。

コアブロックそのままの状態ではまだ「背景色」の設定だけしかできませんが、SWELLでは、他にもスタイルを追加しています。

WordPressテーマSWELLでのグループブロック

WordPress5.3での各ブロックごとの変更点

ここからは、個別のブロックごとに変更点をまとめていきます。

見出しブロックの変更点

ブロックアイコンが T から H に変わっています。笑

見出しブロックのアイコンの変化
見出しブロックのアイコンの変化

ボタンブロックの変更点

  • 角丸の度合いを自由に指定できるようになりました。
  • その代わり、ブロックスタイルから「角」が消えた。

画像ブロックの変更点

  • 丸系マスク」というスタイルが追加された。
  • 画像の再編集時のUIが改善。
  • ツールバーからリンクをつけることが可能に。
WordPress5.3での画像ブロック

リストブロックの変更点

  • 番号付きリストで、始まりの番号が設定可能に。
  • 番号付きリストで、番号を逆順にすることが可能に。
WordPress5.3でのリストブロック

カラムブロックの変更点

カラムブロックはがっつり変わってますね。

  • 挿入時にある程度のレイアウトを選べるように。
  • 各項目の横幅 (flex-basisの値) を設定できるように。
  • 各項目の垂直方向の配置(align-self)を指定できるように。
WordPress5.3でのカラムブロック
開発者向けのお話

項目ブロックに関するクラス(.wp-block-column)などのクラスがエディター上でもでてくるようになりました。

テーブルブロックの変更点

<thead><tfoot>がサイドバーから簡単に追加できるように。

WordPress5.3でのテーブルブロック
了

これは個人的にかなり嬉しいアップデートでした!

開発者向けのお話

<table>タグが<figure>タグで囲まれるようになりました。

ギャラリーブロックの変更点

順番の並び替えが非常に簡単になりました。

WordPress5.3でのギャラリーブロック
開発者向けのお話

<ul>タグが<figure>タグで囲まれるようになりました。

メディアと文章ブロックの変更点

  • テキスト側で全ブロックつかえるようになりました。
    (これまでは「段落・ボタン・見出し・リスト」だけだった)
  • 画像エリアとテキストエリアの割合をマウスドラッグで簡単に変更できるように。
  • 垂直方向の配置を選択できるように。
  • 「カラム全体を塗りつぶすように画像を切り抜く」という設定が追加。
WordPress5.3でのメディアと文章ブロック

カバーブロックの変更点

  • 全ブロックつかえるようになりました。
    (これまでは「段落・ボタン・見出し」だけだった)
  • ブロック挿入時、背景に画像を使うか色だけを使うか選択できるように。

Before

カバーブロックの初期画面(5.2)
WordPress5.2

After

カバーブロックの初期画面(5.3)
WordPress5.3

その他、地味な変更点

ブロックスタイルのプレビュー画面が変更

全体的に小さく表示されるようになり、コアブロックではあらかじめ決められた内容がプレビュー画面内に表示されるようになっています。

Before

WordPress5.2時のスタイルプレビュー画面
WordPress5.2

After

WordPress5.3時のスタイルプレビュー画面
WordPress5.3
開発者向けのお話
  • registerBlockTypeexample:{}にプレビューの内容を指定できるようになったっぽい。
  • また、インラインブロックを含むブロックにスタイルを登録してもバグらないようになった。

見出しタグのプレビューが「見出し2」に強制されてしまうのは少し嫌だったので、issueは投げてます。

インラインブロックにガイド線が表示されるようになった

「カラム」・「メディアと文章」・「カバー」・「グループ」ブロックなど、ブロックの中にブロックを配置できるようなブロックでは、ネストされたブロックたちにガイド線がつくようになりました。

インラインブロックにガイド線が付いている様子
インラインブロックにガイド線が付いている様子

見出しブロックの先頭で改行した時の挙動の変化

見出しブロックの先頭で改行した時に見出しブロックのまま下に移動できるようになっています。

ツールバーが一部ドロップダウンメニュー化

テキストの右寄せ・左寄せ画像の右寄せ・左寄せなどのツールボタンがドロップダウンメニューから選択する形式になっています。

ツールバーのBefore After
ツールバーの Before / After
了

これは頻繁に使っていた人にとっては「使いにくくなった」と感じる人もいるかもしれませんね。

開発者向けのお話

registerFormatTypeDropdownMenuを使った時の「▼」のアイコンが表示されなくなりました。(アイコン + spanタグを追加する形でこれまで通りの見た目にできる)

開発者目線での地味な変更点

  • テキストの中央寄せなどがインラインスタイルではなく.has-text-align-centerなどのクラスで制御されるようになった
  • ブロックスタイルがPHP側からも登録できるようになったらしい(未検証)
  • wp.editorwp.blockEditorへ置き換わった。(現在はまだ非推奨の警告文がコンソールに出るだけ)
    他にも置き換わるものがあるので、Gutenbergカスタマイズしている人は警告文が出ていないかチェックしましょう。
  • deprecatedでのブロックの置き換え時、コンソールでアラートじゃなくただのメッセージで知らせてくれるようになった

HTMLはもう書かなくていい時代になっている

ざっと僕が気づいた範囲だけでも、こんなにもたくさんの改善・変更がありました。

もはやブロックエディターを使えば、もはやコーディングなんて不要になってきましたね。

もちろんコアブロックだけではまだまだ限られたデザインしか組むことはできませんが、ある程度整った状態のHTMLがクリックしていくだけで簡単に生成できる、というのは非常に便利です。

クラス名をつけることも非常に簡単なので、あとはCSSでちょちょいっと調節するだけでかなり柔軟なデザインも組むことが可能です。

そこまで凝ったサイトじゃなければ数日でサイトが出来上がる時代になってきたんじゃないかなと、個人的には感じています。

Gutenbergはまだまだ進化していくと思うので、これからが非常に楽しみですね。

この記事が気に入ったら
フォローしてね!

目次
目次