WordPress 新エディタ Gutenberg

WordPress 新エディタ Gutenberg

2018年12月7日に WordPress の新バージョン5.0がリリースされたので、アップデートを実行。アップデート完了後の上記の画面を見て「ああ、そういえばエディタが変わるんだったな」と思い出しました。

新エディタ「Gutenberg」

WordPress の新しい エディタ「Gutenberg」についての情報は、2018年8月ごろ(WordPress 4.9.8 リリース時)から管理画面のダッシュボードに表示されるようになりました。私のようにすぐ試さなかった方も少なくないかと思いますが、今後はこの「Gutenberg」がWordPressの標準のエディタとなるとのこと。

「Gutenberg」では、段落、見出し、画像などをブロックという要素として追加します。編集画面を見てみると、以前のエディタと比べてかなり印象が変わりましたね。

Gutenberg 編集画面

具体的な使用方法等は他のサイトを見ていただければと思いますが、以下のURLでも実際の操作を体感することができます。

https://ja.wordpress.org/gutenberg/

まだ「Gutenberg」をさわっていない方はぜひこのページを見てみてください。

ビジュアルエディタとコード(テキスト)エディタ

さて、以前の WordPress では

  • WYSIWYG形式のビジュアルエディタ
  • HTMLコードを直接入力するテキストエディタ

を切り替えて使うことができました。

エディタ変更

「Gutenberg」でも同様にビジュアルエディタとテキストエディタが用意されています。
※「Gutenberg」では、テキストエディタはコードエディタという名称に変更されました。以下ではコードエディタと記載します。

「Gutenberg」では、右上のアイコンからビジュアルエディタ/コードエディタを切り替え可能。キーボードショートカットでも切り替えることができます。

Gutenberg エディタ変更

ブロックベースで作業する場合はビジュアルエディタを、コンテンツ全体のソースを直接修正したい場合はコードエディタを使用することになるようです。


私が普段 WordPress を使用する場合、コンテンツは WordPress 外で作成します。WordPress上でコンテンツを書くことはなく、ビジュアルエディタも使用していません。管理画面 > ユーザー >「ビジュアルリッチエディターを使用しない」にチェックを入れています。

ビジュアルエディタを使用しない

エディタが「Gutenberg」に変わったとしても、コードエディタだけ使っていれば特に作業に大きな影響はないだろうなと思ってました。

「Gutenberg」では「メディアを追加」ボタンがなくなった

今回 WordPress を 5.0 にアップデートしたことによって初めて「Gutenberg」を目にしたんですが、ひとつ困ったことがありました。これまで本文入力欄上部に配置されていた以下のようなメディアを追加ボタンが見当たりません。どっかに隠れてるんじゃないかと探したり検索したりしましたが、「Gutenberg」では削除されたとのこと。

私は使ってませんがクイックタグ機能(ボタンをクリックするとなどのタグが挿入される)もなくなったようです。

メディアを追加 クイックタグ

前述のように、私はコードエディタしか使用できないよう管理画面 > ユーザー >「ビジュアルリッチエディターを使用しない」にチェックを入れています。

以前のエディタと同じように「Gutenberg」でも

  1. WordPress 外でコンテンツ(html形式)を作成
  2. コード(テキスト)エディタにソースをコピペ
  3. 画像だけはメディアを追加ボタンから追加

という流れを想定していました。

しかし「Gutenberg」でコードエディタのみを使用する場合、「メディアを追加」ボタンもなくボックスの追加もできないので、本文に画像を追加する手段がありません。困った。

もちろんコードエディタでもimgタグを手打ちすれば画像を追加することはできますが、URLやwidth、height をいちいち入力するのはかなり面倒です。この作業を簡略化するためにメディアライブラリを使用していました。

ボックスベースでの作業はしないのに、画像を追加するためだけにビジュアルエディタに切り替えるのも釈然としないので(ビジュアルエディタでHTMLコードを入力することもできますが)、結果「Gutenberg」の使用はあきらめました。残念。

エディターを元に戻す

「Gutenberg」を使用しないことにしたので、エディタを以前のものに戻すことにしました。「Classic Editor」というプラグインをインストール/有効化すれば以前のエディタを使うことができます。

クラシックエディタ

「Classic Editor」インストール後、WordPress管理画面の 設定 > 投稿設定 に以下のような項目が追加されます。この画面から、簡単にエディタを「Gutenberg」に戻すこともできます。

投稿設定 エディタ変更

ユーザーごとに使用するエディタを選択することも可能。設定 > ユーザー で任意のユーザーをクリックすると、以下のようにエディタの項目が増えていました。

ユーザー エディタ変更

「Gutenberg」を使ってみて

私のようにコードエディタのみを使用しているユーザーは「Gutenberg」についてどう感じてるのかなと検索してみると、以下のページ(英語ですが)が見つかりました。やはり「メディアを追加」ボタンやクイックタグを惜しむユーザーもいるようです。

https://wordpress.org/support/topic/they-intentionally-crippled-the-text-editor/

このページによれば
コードエディタを使用しているユーザーは全体の35%。そのうち、コードエディタ上で「メディアを追加」ボタンを使用しているのは52% = 全体の18%とのこと。

初期の「Gutenberg」のコードエディタでは「メディアを追加」ボタンは搭載されていたが、使用している人が非常に少ないので削除された という内容の記載もありました。まあ18%が多いか少ないかは置いといて、まだ使ってる人がいるんだったら消さなくてもいいのに…と私も思います。 コードエディタのみを使う私にとってもレイアウトやプレビューボタンの挙動は「Gutenberg」の方が好みだったのでちょっと残念。

ビジュアルエディタについては大きな変更に対して戸惑う声もありますが、慣れればより作業効率があがるだろうなと思います。 今のところ私はビジュアルエディタを使う予定はありませんが、今後どのように変わっていくのかアップデートを楽しみにしています。