現時点のWordPressの最新版であるWordPress 4.9.8に搭載されている新しいエディタ「Gutenberg(グーテンベルク)」を試して見えてきたことをまとめました(以下の内容は2018年10月24日時点のものです)。
本サイトはWordPressをカスタマイズして構築しており、この記事は新エディタのGutenbergで作成して公開しています。
Gutenberg(グーテンベルク)とは、今後リリースが予定されているWordPress 5.0で標準搭載されるビジュアルエディタです。WordPress 4.9.8では事前にテスト利用できます。WordPressによる記事コンテンツの取り扱い方法が、以前のビジュアルエディタと比べて大きく異なるという特徴があります。
GutenbergはこれまでのビジュアルエディタよりもシンプルなUI(ユーザーインターフェイス)デザインになりました。
旧エディタ(これまでのビジュアルエディタを旧エディタと表記します)からの大きな変更点は、コンテンツをブロックと呼ばれる単位で管理する方式になったことです。
見出しは「見出しブロック」、文章は「文章ブロック」、画像は「画像ブロック」というように、ブロックごとのコンテンツとして管理されます。
旧エディタを長く使用していた経験から最初はGutenbergに違和感を感じましたが、使っていくうちに慣れていきました。
重要な点は、今後リリースが予定されているWordPress 5.0の標準ビジュアルエディタがGutenbergになるということです。これまでの旧エディタは、プラグインとしての提供になるとアナウンスされています。
この記事の公開時点(2018年10月24日)では旧エディタと併用できますが、まだGutenbergに切り替えていない状態であれば今後のことを考慮して切り替えの準備を進めておく必要があると考えます。
主観ですが、メリットに感じたことです。
新規でWordPressのサイトを構築する場合は問題ありませんが、既にWordPressでサイトを運用していてGutenbergに切り替える場合は以下の課題が見えてきます。
多くの課題は基本的にCSSの編集で解決できると思いますが、カスタムフィールドを用いて複雑にカスタマイズを施している場合はコンテンツ構造に影響がある可能性もあります。その際はサイトの全体的な調査や検証をしたほうがより安心です。
Gutenbergのブロックとしてコンテンツを登録(記述)すると、ブロックによっては出力されるHTMLタグに独自のclassが付与されます。例えば記事に画像を貼り付けた場合はimg要素の親要素にfigure要素が出力され、そのfigure要素にはwp-block-imageというclassが付与された状態で出力されます。
<figure class="wp-block-image">
<img src="https://yuyakinoshita.com/wp-cms/wp-content/uploads/wordpress-editor-010-1.png" alt="" class="wp-image-3083" srcset="https://yuyakinoshita.com/wp-cms/wp-content/uploads/wordpress-editor-010-1.png 1280w, https://yuyakinoshita.com/wp-cms/wp-content/uploads/wordpress-editor-010-1-531x360.png 531w, https://yuyakinoshita.com/wp-cms/wp-content/uploads/wordpress-editor-010-1-664x450.png 664w, https://yuyakinoshita.com/wp-cms/wp-content/uploads/wordpress-editor-010-1-1062x720.png 1062w" sizes="(max-width: 1280px) 100vw, 1280px">
<figcaption>以前のビジュアルエディタと比べて余白が大きくなり、全体的にすっきりとしたデザインに変わりました。</figcaption>
</figure>
そこで見出しや画像、文章、引用、リスト、動画などの使用頻度の高いHTMLタグは、CSSでデザインを調整しておくと良いです。
Gutenbergでは多くのブロックが登録されています。全てのブロック要素にCSSでデザインを調整しておくことが理想的ですが、要素数が多いことからCSSを用意するのは使用頻度の高いブロックに絞ると良いかもしれません。
運用面を考慮すると、使用頻度が低いブロックはそのブロックを使う段階でCSSを追加していく運用とすることで、改修負荷を抑えながら品質を維持しやすいと思います。
以下のブロックは使用頻度が比較的高いと考えるため、あらかじめCSSを用意しておくと良いと思います。
当サイトでは使用頻度が高いと考える各ブロックを以下のようにデザイン調整しています(一部のブロックを例として表示しています)。
引用元の文章サンプル:ブログを公開しました。IE11でGoogle FontsのNoto Sans JPが反映されないことへの対策
https://yuyakinoshita.com/blog/2018/10/19/font-setting-for-ie11/
GutenbergのUIデザインで、旧エディタに比べて少しわかりにくくなってしまったかなと感じる箇所があります。それは記事のパーマリンク(URL)編集欄です。
Gutenbergでは、記事のタイトル部分を押す(選択する)と記事のURLが表示されるUIに変更されています(旧エディタでは記事の下書き保存後にURLが常時表示されていたと思います)。
推測ですが、おそらく以下のような設計理由によるものかと思います。
WordPress管理画面のUIデザインは今後変更される可能性がありますが、現状ではパーマリンクは標準で隠れた状態になっているため、パーマリンクの確認や編集をする際には記事タイトル部分を押す(選択する)必要があります。
新エディタのGutenbergは旧エディタと比べて、シンプルでより多くの利用者に親しまれやすいUIとして洗練されたと感じました。結果的に記事を書くことにより集中しやすくなったと思います。さらにコンテンツブロックの順序を入れ替えやすくなったこともあり、使いやすさが向上している印象です。
これからも実際に使ってみて、気づいたことがあれば記事としてまとめたいと思います。