WordPress新エディタ「Gutenberg」を考察

wordpress5.0のメジャーアップデートで導入された新エディタ「Gutenberg(グーテンベルク)」。長らく親しまれてきたwordpressの旧エディタですが、ブログ用途で使うには十分だとしても、コーポレートサイトなどで使うには正直問題もありました。たしかに「サイトを自分でカスタマイズできる」と謳って構築するCMS(コンテンツ・マネジメント・システム)も実際、管理画面はHTMLタグだらけで、Webに精通していないクライアントがむやみに触れられない問題は長らくwordpressを利用するWebサイトにとって憑いて回る悩みでした。

ただ、果たしてこの新エディタ「Gutenberg(グーテンベルク)」なるものが、どこまでこういった問題を解決してくれるのか。「誰でも簡単にホームページをつくれる(弄れる)」という、今まで何年も謳われ続けては廃れてきた人類の永遠のテーマ(?)に近づくことができるのでしょうか

パッと見のUIがだいぶフラットデザイン風の近寄りがたい雰囲気だったので、ひとまずは蓋をそっと閉め、見ぬふりをしてきましたがここらで重い腰を上げて、近代文明に触れていきたいと思います。

コンテンツ要素が分離されたビジュアルエディタ

いきなりざっくり触れてみての結論から言うと、旧エディタに比べ、より初心者がサイトを崩れさせないように、要素をコントロールできるエディタという印象でした。たしかに今までのビジュアルエディタではテキストと一緒にHTMLタグを弄れてしまうことが問題(弄るつもりじゃないが)でした。
そういったことで言えば、「Webに詳しくない人が触れる部分」が、「ブロック」という一塊として独立されたので今までのように、ビジュアルエディタでテキストを編集していたらHTMLタグの一部が消えてしまったという問題は解消されそうです。

ざっくりなレイアウト説明

旧エディタと同様の記事設定です。

現在、選択しているブロックの設定です。違うブロックを選択するとここの項目も変わります。

ブロックと、ブロックの入れ子

Gutenberg(グーテンベルク)では「ブロック」というパーツとして、要素を扱います。ここでいう要素とはタイトル、テキスト、段落や、画像、テーブル(表)やボタンなど様々なパーツをブロックとして扱います。下の画像のように「ブロック」を追加したり削除したり、順番を入れ替えたりして、まさしくレゴ・ブロックみたいにガチャガチャと組み替えて編集します。

また、このブロックの中にブロックを入れ子にもできるので、より複雑なレイアウトを組むことができます。各ブロックが用途に特化した部品として独立しているので、旧エディタに比べると少し回りくどい気もしますが、結果としては確実に記事を操作できそうです。

ｐとかbr問題

エディタ上での改行をp(段落)とするか、そのままbr(改行)にするかという問題も、段落もブロックとして独立しているので、解決されるかもしれません。

エディタがシンプル過ぎて見にくい

フラットデザインらしいシンプルでミニマムなエディタの見た目が、少しハショリ過ぎているような印象はあります。最低限、ブロックの枠線は欲しい気がしますがどうなんでしょうか。管理画面の見え方をcssでカスタマイズできるかとは思うので、Gutenberg(グーテンベルク)をクライアント案件で採用する場合は少しカスタムしてあげると親切かもしれません。

デフォルトのブロック全てに対してデザインを用意する必要性

デフォルトで用意されているブロックには、「wp-block-●●●」というクラスが付与されていますので、サイトのデザインを作成する段階で、このブロックパーツすべてにデザインを用意し、上記のルールで付与されたcssを組んでいくことが、必要になってくると思います。そうしないと後述するようにサイト公開後にサイトデザインが破綻する可能性が出てくるからです。
あと少し気になったのが、ブロックとしてフォントサイズ、色の属性を設定するとHTMLタグに直接cssが記載される点ですが、まぁこれは今回に限ったことではないのか。。

自由な編集 = デザインの破綻

これはGutenberg(グーテンベルク)以前からの問題ではありますが、デザイナー以外の人間による自由な編集は、デザインの破綻につながります。優れたデザインであればあるほど、サイト全体を通しての統一感はシビアに計算されています。フォントサイズや色を記事の投稿者が自由に決定できるということは、よっぽど慎重にやらなければ全体的なデザインの統一性は崩れていきます。

エディタの進化でレイアウト(列や行)は崩れなくなったとしても、本来必要なパーツは事前にサイトに合ったデザインのものを用意し、それを使用するべきだとは思います。(カスタムブロック*これはまた別の機会に) ルールなどが曖昧なまま、様々な人の手が加わった結果、ダサくなってしまったサイトをよく見かけます。

感想

ざっと見た限りでは、ブログとしてwordpressを使う人にとってはかなり使いやすくなったと思います。当然、はじめは慣れが必要ですが、ブログやCMSといったものが今後Gutenberg(グーテンベルク)の方式に移行していく可能性は大いにあり得るので、学習して損はないのではないかと思います。(wordpressは今後、旧エディタのサポートをしなくなるという情報もチラッと耳にしたので)

しかし、冒頭でも書いたブログ以上の使い方をするには、まだ不十分です。「もう少し複雑なレイアウトのページ編集を、デザインの破綻なしに、クライアント自身でできるようにする」には「カスタムブロック」という機能が必要になりそうです。
次回はGutenberg(グーテンベルク)の「カスタムブロック」を考察していきたいと思います。