WordPressバージョン5.5でのブロックエディター変更点(5.4との比較)

2020年8月にワードプレスのバージョン5.5がリリースされました。

5.4から5.5への変更点は、テーマやプラグインの自動更新、画像のLazy Load、XMLサイトマップの生成など、いろいろと新機能が追加されましたが、使う側から見た一番の注目ポイントは、ブロックエディター(通称Gutenberg)の使い勝手でしょう。

この記事では、ブロックエディターの主な変更点について、バージョン5.4と5.5との比較をしてみます。リリースから間がないので、まだ英語表記のままの部分もありますが、そのまま紹介します。

 

ブロック選択・追加用+マークの外観

まず、タイトル入力部とその下の第1ブロック(段落ブロック)の外観ですが、以下の通りです。ブロック内の+マークが、5.4では〇形状でしたが、5.5では□形状になりました。

ブロック内+マーク比較

これは、画面左上ツールバーにある+マークについても同じことがいえます。

 

 

ブロック選択の方法

そもそも+マークの役割は、クリックするとブロック一覧表が表示され、その中からブロック要素を選択する、というものです。5.5でも同様の役割を持っていますが、若干異なります。

 

ブロック内+マークの役割(バージョン5.4の場合)

①ブロック内の+マークをクリックする②よく使うブロック要素一覧が表示されます。

この中に目的のブロックがあればクリックしてブロックを選択するわけですが、なければ、③スクロールをすると、④全ブロックがグループ分けされて表示されます。それぞれをクリックするとそのグループの一覧表がさらに表示されるというわけです。

5_4でのブロック内+マークをクリックするとよく使うブロックが表示される

画面左上ツールバー内の+マークをクリックしても、同じような表示がされます。したがって、使う人にもよりますが、私は、左上ツールバーの+マークをクリックすることは、ほとんどありませんでした。(左上ツールバーの場合は選んだブロック要素で新規ブロックの追加がされ、ブロック内+マークではそのブロックのブロック要素を決める、という点では違いますが。)

 

ブロック内+マークの役割(バージョン5.5の場合)

バージョン5.5でも同様に見てみましょう。

①ブロック内の+マークをクリックする②よく使うブロック一覧が表示される、という点では5.4と同じですが、その下には全てのブロック一覧はありません。代わりに”Browse all”というボタンが表示されています。

③この”Browse all”をクリックすると、④画面左上ツールバーの下に全ブロックの一覧表が表示されます。スクロールして目的のブロック要素を探すというわけですね。

5_5でのブロック内+マークをクリックすると、よく使うブロックが表示されるが、すべてのブロック一覧はその下にない

 

画面左上ツールバーの+マークの役割(バージョン5.5)

上記の全てのブロック一覧表は、その場所からもわかるように、画面左上ツールバーの+マークをクリックしても表示されます。しかし、この+マークをクリックしても、よく使うブロック一覧は表示されないのです。

したがって、ブロック内+マークと画面左上ツールバーの+マークは、次のように使い分けることになるでしょう。

  • よく使うブロックをサッと選択したい場合は、ブロック内の+マークを使う
  • あまり使わないブロックを選択したい場合は、画面左上ツールバーの+マークを使う

 

5.5で追加されたブロックのプレビュー機能

このように、全ブロック一覧が、ブロック内の一覧表示には表示されなくなったのには理由があります。バージョン5.5からは、ブロックのプレビュー機能が追加されたからです。2通りのプレビューがあります。

 

ブロック要素のプレビュー

まずはブロック要素のプレビューです。例えば、カバーブロックをプレビューしてみましょう

①画面左上ツールバーの+マークをクリックして②カバーブロックにマウスオーバーしてみると、

③すぐ右側にプレビューが表示(説明文つき)されます。

ブロック要素のプレビュー例(カバーブロック)

カバーというブロック要素がどんなものか知らない人にとっては、このプレビューを見れば、どんなコンテンツを作成できるのかイメージが掴めますよね。すごくいい機能だと思います。

ただし、まだ全てのブロックのプレビューが揃っているわけではありません。今後のバージョンアップによって、徐々に準備されていくと期待します。

 

ブロックパターンのプレビュー

先ほどのは、ブロック単体のプレビューですが、ブロックを組み合わせてもう少し複雑なコンテンツを表示させたいときのプレビューも準備されています。

①画面左上ツールバーの+マークをクリックして②タブを”Patterns”に変更してみます。

すると、その下に、様々なコンテンツ例が表示されるのです。

例えば、下記はボタンの例ですが、アウトラインの異なるボタンを2つ並べてみたり、3つ並べたものがプレビューされています。これをクリックすると、実際のコンテンツがそのまま入力される、というわけです。ユーザーは表示されたコンテンツを雛形として、自分のコンテンツに編集してみればよいですね。

ブロックパターンのプレビュー

ブロックを組み合わせると、こんなコンテンツも作成できますよ、ということがわかるようになってるんですね。

 

 

ブロックの種類とグループ分け

ブロックのグループ分けも少し変更されました

5.4では、”一般ブロック”、”フォーマット”、”レイアウト要素”、”ウィジェット”、”埋め込み”の5種類でした。

5.5では、”TEXT(テキスト)”、”MEDIA(メディア)”、”DESIGN(デザイン)”、”WIDGETS(ウィジェット)”、”EMBEDS(埋め込み)”の5種類となり、グループ分けがより直感的にわかりやすくなった感じがします。

 

以下はバージョン5.5のグループごとのブロックです。

TEXTとMEDIA

5.5でのブロックのグループ_テキスト関連・メディア関連

 

DESIGNとWIDGETS

5.5のブロックのグループ_デザイン関連・ウィジェット関連

EMBEDS(埋め込み)については、基本的に5.4と変わらないので割愛します。

 

 

画像ブロックでの画像編集機能

5.5では、画像ブロックのままで画像の編集ができるようになりました。従来も、メディアライブラリの中ではできたのですが、5.5ではブロックに画像を挿入した後、エディター内に画像を表示させた状態で編集ができます

5.4でも、画像挿入後、画像サイズ調整やキャプション(説明文)をつける、といった機能は使えました。

5.5ではさらに、画像ブロック内ツールバーにCROP(切り抜き)ボタンが追加され、これをクリックするとズームや縦横比・回転などの画像編集ができます

5.5での画像ブロックのCROP機能

 

 

段落ブロック内ツールバーの機能

ブロックエディター(Gutenberg)の弱点として、テキストごとの装飾機能がデフォルトでは乏しいということがあげられます。例えば、フォントサイズ・文字色などは、ブロック丸ごとは指定できても、文字毎にはできなかったのです(するためにはプラグインが必要)。

今回、バージョン5.5で私が期待したのは、この文字毎装飾機能の強化でした。以下が、今回の5.5における段落ブロックのツールバーです。

5_5の段落ブロックツールバー

ツールバーでパッと目に入る文字装飾機能は、”B(太字)”、”I(イタリック文字)”しかありません。下矢印マークをクリックして開くメニューの中には、”上付き”、”下付き”、”取り消し線”、”文字色”はありますが、アンダーラインやマーカー、背景色、そしてフォントサイズは見当たらず、相変わらず装飾機能は乏しいままなのが残念です。

さくさくとブログ記事などを書いていくには、装飾機能が豊富なテーマを選ぶか、プラグインで強化する必要がありますね

 

例えば、私が、ブログサイト制作のセミナーや書籍で紹介している”テーマLuxeritas”の段落ブロックツールバーは以下の通りです。編集エリアからはみ出すことがあるほどに豊富です(笑)

テーマLuxeritasの段落ブロックツールバー

 

ブロックの移動

ブロックの移動方法が若干変わりました。5.4では、ブロックの左横の上向き下向きの矢印でブロックを移動しました。

5.5では、移動用矢印が、ブロック内ツールバーの中に入りました

5_5でのブロックの移動

 

まとめ

ざっと私が使ってみて気づいた変更点を上げてみました。まだ他にもあるかもしれませんが、主な使い勝手としては、これだけ把握しておけばよいかな、と思います。

特に大きな変更を上げるとすれば、やはり、ブロックのプレビュー機能かな、と思います。プレビューを見るだけでも、今まで使ったことのないブロックでも、使ってみようかな、と思えるのではないでしょうか?

今後も、ますますGutenbergが使いやすく、機能も豊富になっていくことに期待できるかな、と思います。

 

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!

オンラインで開催して好評だったセミナー”ワードプレス100分体験セミナー(ブログサイト制作)”をamazonキンドルにて書籍化しました。

amazonページはこちら