この記事は約 10 分で読めます。
WordPress5.0から標準搭載された新エディター「Gutenberg」の便利な機能や使い方について、簡単ではありますが検証してみました。
基本的なWPの操作方法や扱いにある程度理解のある人向けの内容ですが、これから新しくWPサイトを構築する際やエディターの乗り換えを検討されている方への参考となれば幸いです。
※本記事は事業統合前のブルーアンドアソシエイツ社のエンジニアによって書かれた記事であり、本記事内で使用されている検証データ等は当時の内容となっておりますことをご了承ください。
Gutenbergとは？
GutenbergはWordPressのここ数年で最も重要な変更の1つで、WPのベースにある記事を書く、ページを作成する、という体験をよりシンプルで楽しいものにするために改良されたエディターです。
WPやシステムの仕組みに精通していないユーザーにとってもより直感的・視覚的に記事を作成できることを目的として作られており、従来のテキスト・コードベースの編集方法から要素を「ブロック」単位に分けて管理する構造になっています。（ブロックはコンポーネントと言い換えることもできるかもしれません）
ちなみにGutenbergという名前は1439年頃にヨーロッパで初めて活字による印刷を行い、その後活版印刷技術を発明したヨハネス・グーテンベルクというドイツ人の名前にちなんで命名されたそうです。
Gutenbergと従来のClassicEditerの主な違いについて
WPを長く使っている人にとっては慣れ親しんだ従来のエディターやTinyMCEのようなWYSIWYGエディターの使い勝手に満足している、という人も多いと思います。
本記事を書いている2019年2月時点では、筆者自身も現状はClassic Editor+TinyMCEで運用しているウェブサイトが大半ですが、本サイトで初めてGutenbergに乗り換えてみて気付いた点や違いをいくつか上げてみたいと思います。
※インストール方法についてはここでは触れませんのでセットアップが完了している前提で読み進めていただければと思います。
記事編集画面全体のUI変更
まず記事編集画面ですが、従来の雰囲気は若干残しつつ、よりUIが整理された印象です。
上部ツールバー
上部はツールバー的な役割を果たし、一般的な編集メニューに加えて、ブロック選択時は該当ブロック内の要素に対しての調整項目が表示されます。
下記の図1はInfoメニューからコンテンツ構造を表示した例ですが、記事全体の文字数や見出し・段落・ブロック数などが確認できます。
文字数をカウントできるツールはいろいろありますが、編集画面で確認できるのは便利ですよね。
図2はブロックを選択した時に表示される詳細設定メニューからブロック編集項目を表示しています。ブロック要素を個別にHTMLで編集したり、後述する再利用ブロックに変更することができます。
UIは多少変更されているものの、見慣れたアイコンや操作メニューが並んでいるので、10分程操作すれば解説書を読まなくても基本的な編集方法は理解できると思います。
サイドバー
サイドバーはタブ構成で「文書」と「ブロック」タブに分かれており、文書タブでは従来のサイドバーにあったような公開やカテゴリなどを設定する場所で、パーマリンクもこの文書タブ内で設定します。
ブロックタブでは該当ブロックに対しての様々な設定を行うことが可能です。
一部は上部ツールバーから調整できる項目と重複する箇所もありますが、上部ツールバーがブロック内の要素に対する調整であるのに対して、ここではブロック全体にかかる調整や追加CSSクラスを設定できたりします。
ツールと設定をさらに表示
上部ツールバーの一番右端のメニューからは編集時のビジュアルエディターとコードエディターの切り替えや記事編集画面のUI操作に関わる様々な項目が選択できます。
ビジュアルエディター上では調整が難しい場合、コードから編集したい場合などは 全体をコードエディターに切り替えて編集することが可能となっています。
ブロック要素という概念
GutenbergではClassic Editorのようにひとつの入力ブロック内で記事を書くのではなく、見出しやテキスト、画像といった要素がそれぞれひとつのブロックとして扱われます。
例えばこの章の見出し「ブロック要素という概念」はひとつの見出しブロックであり、このテキストの段落もひとつの独立した段落ブロックとして扱われます。
従来のClassic Editorの場合だとエディター内の入力ボックスは基本的にひとつしかなく、その中でWYSIWYGエディターを使ったり、編集モードを切り替えて直接HTMLコードを書いて編集を行っていたと思います。
それに対してGutenbergでは見出しブロック、段落ブロック、画像ブロックといった具合で各要素をブロックとして配置してコンテンツを形成していくイメージになります。 （当然必要に応じてHTML編集モードに切り替えて書くことも可能です）
公式サイトやFrontenbergというデモサイトで新しいエディターの操作感を一通り体験できますので、一度触ってみると感覚が掴みやすいかと思います。
ブロックを配置して編集していく、という概念はWPBakery Page Builder (旧Visual Composer) やUX Builderといったような海外の高品質テーマに組み込まれているページビルダーと使い方が似ているため、海外テーマを扱ったことがある人であれば理解が早いかもしれません。
現時点ではWPBakery Page Builderの方が編集自由度は高いですが、プラグインに依存しないWPの基本エディターで同様のことが実現できるようになるとすれば、非常に喜ばしい限りです。（プラグインが吐き出すコードはあまりキレイとは言えないのでw）
※これらのページビルダーと併用する際の注意点は後述するGutenbergに乗り換える際の注意点に書いています
Gutenbergの便利な機能
ここではGutenbergの便利な機能をいくつか紹介したいと思います。
再利用ブロック
読んで字の如く再利用することが可能なブロックです。
前述の通りGutenbergでは全ての要素がブロック単位で管理されるため、何度も使いそうなパーツや文章を再利用ブロックに登録しておいて、必要な時に呼び出して使い回すことが可能となっています。
WPの概念で言うとショートコード的な役割でもあり、PhotoshopやIllustratorのスマートオブジェクトやリンク配置、古くはFireworksのライブラリ・シンボルのような概念と言い換えるとピンと来る人も多いかも知れませんね。
さらに別の言葉で表現すると、厳密には少し意味合いが異なりますが、エイリアスやシンボリックリンクという概念とも似ているかもしれません。
再利用ブロックへの登録方法は該当ブロックが選択された状態で上部ツールバーの「再利用ブロックに追加」を選択するだけです。
また、配置した再利用ブロックは配置後に個別編集可能な「通常ブロックへ変換」することが可能なため、そのまま使う装飾用のブロックから一部カスタムして使うようなテンプレ用のパーツまで使い方には様々な応用が効くと思います。
Gutenbergの新機能である再利用ブロックは作業効率化のためにも是非上手く活用したいですね。
ちなみに変換した再利用ブロックの一覧表示や再編集については、編集画面右上にある「・・・」（ツールと設定をさらに表示）の「ツール ＞ すべての再利用ブロックを管理」からしか遷移できないようです。
比較的重要なパーツなのでメインサイドバーの管理項目に追加されてもよいと思うのですが、 今後のアップデートに期待しましょう。
豊富な編集機能
各要素をブロック単位で扱うことによるメリットのひとつとして、要素のコピペや並び替えなどの記事作成を行う上での基本的な編集機能が大幅に改善されています。
記事編集画面比較
Classic Editorの場合ボリュームのあるページだと、 Gutenbergで言う所のひとつのブロック内で全てのコードを入力していく形になるため、一部要素だけ消したい、移動したい、コピペ再配置したい、といった際にコピペミスやソース崩れを招く恐れもありましたが、ブロック単位の管理になってそのリスクも減りました。
地味によく使うブロックの並び替えも、ソース単位でコピペしていたことを考えると、複製＆ドラッグ＆ドロップベースで操作可能なため、コード編集に伴うミスも減り作業効率も上がります。
UI的にはまだまだ改善の余地がありますが、ソースを直接触るのが怖いという方でもより安心して編集しやすい環境になっていくのではないかと思います(笑)
高度な設定
また、 各ブロック単位毎にサイドバー内の「高度な設定」から文字組や色の細かい調整を行ったり、「追加CSSクラス」を割り振ったり、ということがより容易に行えるようになっています。
特定のブロックだけに特定のCSSクラスを適用したい、JSで操作したいといった際に便利な機能だと思います。
追加CSSクラスは半角スペースを空けて複数追加することも可能です。
メディアと文章
下のブロックは「ブロックの追加＞レイアウト要素＞メディアと文章」を挿入した例ですが、 レスポンシブに対応した横並びの画像とテキストの2カラム配置などもブロックのおかげで簡単に対応できるようになりました。
デフォルトでは50％50％のカラムに分割されますが、ブロックを選択した状態でカーソルをカラム中心に合わせるとドラッグでカラム比率を調整することが可能です。
サイドバーの項目で「メディアと文章の設定」で「モバイルで重ねる」をONにするとスマホで見た時は画像とテキストブロックが縦に並びます。（ここではONにしています）
OFFだと編集画面上の見た目通りそれぞれ横に並びます。
現時点ではビジュアルエディターの編集メニューから数値を入れてカラム比率を調整する箇所は見当たりませんでしたが、コードエディターに切り替えてカラム比率の数値を調整することは可能です。
カラム周りの細かい調整については現時点では対応していませんが、今後 Gutenbergのバージョンアップやプラグインで編集機能は改善されていくことでしょう。
個人的には再利用可能ブロックと組み合わせての記事やページ作成時のテンプレート設計がやりやすくなったので使い方によっては今後の制作や管理効率が格段に向上すると予想しています。
HTMLアンカー
従来はプラグインを使ったりHTMLソースを直接記述して個別に対応する必要があったページ内リンクですが、Gutenbergでは簡単に設定することが可能となりました。
設定方法はまずジャンプ先の該当ブロックを選択して、サイドバーの「ブロック＞高度な設定＞HTMLアンカー」から任意の名前（先頭に#不要）を設定します。
そしてリンク元となるテキストリンクなどに先ほど設定したHTMLアンカーリンクを貼れば設定完了です。
例えばこの章の「HTMLアンカー」見出しブロックには 「ブロック＞高度な設定＞HTMLアンカー」から 「s3-03」を設定しており、リンク元テキストには「#s3-03」を設定しています。
従来まではページ内リンクを単独で機能させるにはアレコレする必要があったので、これは地味に便利な機能と言えるでしょう。
Gutenbergに乗り換える際の注意点
新規プロジェクトで開発当初からGutenbergを採用する前提で進める分には大きな問題は発生しないと思われますが、既存サイトにおいて乗り換えを検討する際は以下に注意してください。
- 必ずステージング環境（テスト環境）で事前にWPの最新版への更新も含めて動作検証をする
- 使用テーマとの相性を確認する
- 使用プラグインとの相性や後方互換性を確認する
- テーマにビルトインされたWPBakery Page Builder (旧Visual Composer) やUX Builderなどのページビルダーと併用する場合、編集画面を切り替えた際に高確率で一部ソースが崩れる（もしくは消失する）バグが発生する可能性がある
- 固定ページ、投稿ページで使用しているショートコードやプラグインが正常に出力、動作しているか確認する
- コンソールやネットワークでエラーが出ていないか確認する
- サイト全体を確認する
特に4番目に挙げたページビルダーとの併用は気を付けたい所です。
筆者の別サイトでも先日WP5.1への更新を行いGutenbergエディターに乗り換えた所、既存テーマにビルトインされているページビルダーとの相性が悪く併用ができない状態でした。
具体的な挙動としてはページビルダーとGutenbergを切り替えた際にソース崩れやソース消失が発生してしまいました。※崩れてもリビジョンで元の状態に復帰できます。
結果、一部サイトではClassic-Editorを入れて使っています・・・。
Gutenbergへの乗り換えには各種検証の工数が発生するので、できればWPの最新版への更新や他のプラグイン更新とタイミングを合せて行った方が効率がよいでしょう。
但し全部まとめて更新してしまうと不具合が発生した際の原因特定が難しくなるので、ある程度フェーズを分けて更新することをオススメします。
しばらく本格的なメンテナンスをしてないなー、という方はこれを機にWPの他のプラグインの見直しやセキュリティ対策、メンテナンス体制を強化する機会にしてみてもよいかもしれません。
時代の進化には柔軟にキャッチアップして、より便利で効率良く作業を進められる環境を整えて、本業の成果を上げるために専念できる体制を作っていけるといいですね。
まとめ
公式のプラグイン評価やネット上のユーザーの感想を見ていると、評価が割れるどころか低評価が多かったのでどうなんだろう？と積極的に導入するには疑問符が付く感じではありましたが（昨年時点のベータ版や改良前のデモ版を使った人の感想なのかもしませんが・・・）、実際に使ってみると、まだまだ完成系とは言えないGutenbergですが、ブロックの概念と使い方を覚えれば従来のClassic Editorより格段に使いやすい印象です。
かくいう私もまだそこまで使いこなせていないのですが、 ブロック単位で管理しているため、記事を量産していく上での作業効率のよさやレスポンシブ対応の向上など良い点ばかりが目立ちました。
但し、既存テーマにビルトインされているページビルダーとGutenbergを切り替えて併用する場合はソース崩れやソース消失が発生しやすいので、十分検証を行った上で乗り換えを検討するのが無難でしょう。
新規開発案件ではGutenbergを使用する前提で開発をしてよいと思います。（後からClassic-Editorプラグインを入れて給編集画面に対応させることも可能です）
今後より改良を重ねて素晴らしいエディターになるのでは、という期待感も込めて星4.5を付けてもよいのかなという印象でした。
現時点でClassic Editorのサポートは2021年末までとなっており、今後WordPressでコアとなるエディターは確実にGutenbergに移行するため、ギリギリになって慌てることのないように余裕を持ってしっかりテストを行い対応することが望ましいですね。
追伸：「Gutenbergにもそろそろ慣れてきたよ」という人は・・・ブロック系エディタの便利なプラグインについて記事を書きましたので参考までにどうぞ！
![[Stackable]Gutenbergエディタに便利なブロックを簡単に追加する方法【記事作成効率大幅アップ】](https://dis-play.net/wp-content/uploads/2019/06/la-rel-easter-1139552-unsplash-300x168.jpg)
弊社では、企業サイトや採用サイトの制作、WordPress構築、shopifyを活用したECサイト構築を得意としています。ホームページ制作やリニューアル、サイト運用に関する無料相談を承っていますのでお気軽にご相談ください。
無料で相談してみる
