Gutenberg(ブロックエディタ)で初投稿！もっと早く使えばよかったと実感|Knowledge Base

公開日：2020(令和2)年3月19日／最終更新日： 2020(令和2)年3月19日

WordPressでブログやサイトを作っている皆さん、投稿や固定ページのエディタは何を使っていますか？？

最新のGutenberg(ブロック)エディタ？ビジュアルエディタ？それともテキストエディタ？

私はWordPressを使い始めて以来ずーっとテキストエディタを使っています。

そして今までもテキストエディタを使っていました。

なんとなくビジュアルエディタは素人っぽくて（笑）。そして更にGutenbergはおもちゃみたい？なんて思ってました。

そう、私もアンチブロックエディタの一員・・・でした。「Gutenbergが使いやすい」という記事は完全フル無視。逆ネガティブキャンペーンなんじゃないの？と小馬鹿にさえしてました。

でも・・・すみません、実際に使いやすいです、ハイ。

ということで、今回はWordPress歴は長いけど、Gutenbergは初心者の私が、このエディタのすごいところ、テキストエディタとの違い、使いやすいところ、使いにくいところなどを紹介していきます。

なお、本当にこのエディタを使って行う初の投稿ですので、お見苦しい点が多々あろうかと思いますがご容赦ください。

なぜテキストエディタを使い続けていたのか

私は作っては壊しての繰り返しではありましたけど、10年以上、いやもっと前からWordPressでサイト作りをしています。

当時のバージョンは確か1.x。テキストエディタしかなく、今のように便利なプラグインもテーマもなく、動くサーバーすら少ない時代でした。インストールも大変で・・使い始めるのすら苦労する時代でした。

それからバージョンが上がってビジュアルエディタなるものが登場しましたが、すでにテキストエディタに慣れていたこともあり、ちょっと使ってみたものの（何か変）と感じて結局今日まで使いませんでした。

そこに5.0で登場した「Gutenberg」。第一印象は「なんじゃこりゃ！おもちゃじゃないの？」以外のなにものでもありませんでした。

そこで即効で導入したのが「Classic Editor」プラグイン。何気に5.0へ更新したら急にエディタが変わってしまったので、とにかく元のテキストエディタに戻さねば！と有効化し、そのままテキストエディタを継続使用して今日に至ります。

つまり、別に新しいものに飛びつく必要もない、昔から使っているものを使い続ければいいという固定観念でテキストエディタを使い続けていたというのがGutenbergを使わなかった理由です。

ではなぜ今になってGutenbergを使おうと思ったのか

そもそも私はテキストエディタ派。Gutenberg一歩手前のビジュアルエディタの何が不満だったかといえば、

全部がビジュアル表示にならない
エディタ上の表示と実際の表示が違う

こと。結局中途半端にビジュアル化されるなら、最初からテキストエディタで書いてプレビューすればいいのでは？と考え、テキストエディタを使い続けていました。

Gutenbergに変えても同じなんじゃないの？と思っていらっしゃる方もいるかもしれませんが、今思えばビジュアルエディタもGutenbergエディタもエディタの表示を実際の表示に近づけることをすれば十分に有用なエディタだということがわかりました。現在このサイトは自作テーマで運営していますが、表示を近づけるカスタマイズをしたことで本当に使いやすくなりました。

そして、ビジュアルエディタでは表現されにくかったショートコードなどもGutenbergでは「ブロック」として追加することでショートコードを動作させた状態での表示にも対応できるようになりました。もちろんショートコード以外でも数々の専用ブロックがあって本当に便利です。

そして何より、最近どのブロックを使ったのかを記憶して並び替えてくれるので、使えば使うほど自分の使いたいブロックがすぐに挿入できるようになり、効率がどんどん上がります。

さらにブロックの並び替えが簡単にできるので、例えばセクションごとに「クラシックブロック」で内容を書いておき、公開前に並び替えるなんてこともできます。従前のエディタのようにザーーっと切り取って挿入なんてことはしなくてもいいんです。つまり書きたい項目を適当に書いていって、最後に一通りの文章に並び替えればいいということです。私の場合、結構長い文字数の投稿が多いですし、読み返してみたら順番逆でしょ！となることも多かったので、これも大変便利に感じました。

これがGutenbergを使おうと思った大きな理由です。

基本的に「クラシックブロック」が今までのビジュアルエディタと同じものですので、Gutenberg独自のブロックを使わないということであれば「クラシックブロック」だけで書けば済みますから、ビジュアルエディタからの移行をされる方は特に不都合は感じないと思います。

Gutenberg標準のブロックでできること

使ってみればわかることではありますが、ここではGutenberg標準のブロックを使ってできることをいくつか紹介したいと思います。今までテーマやプラグインに頼っていた表現が結構できるようになっています。

RSSフィードの取得とリスト表示

旧エディタでは独自の関数を作るか、プラグインに頼っていた他のブログのRSSフィードを一覧表示できるブロックがあります。これが標準搭載とは・・・ありがたい機能です。

単一のフィードURLのみに対応しますのでプラグインなどにある複数のサイトのフィードを日付順に並び変えて・・・なんてことはできません。

↓が実際に取得した私が管理する別サイトのフィード一覧です

[pc-show]

画像ギャラリー

メディアにある画像やアップロードした画像を複数入れたギャラリーが簡単に作れます。画像の入れ替えなども簡単にできて便利です。設置後に画像を入れ替えられたり並び替えできたり、列数を変えられたりと視覚的な変更ができます。

[/pc-show]

ボタン

いろいろな色のボタンが簡単に作れます。リンクの設定も簡単にできます。ちなみに↓のボタンをクリックすると別タブで当サイトのトップページが表示されます。

このサイトのトップページへ移動します

複数列のコンテンツ

任意の列数を持つコンテンツが作れます。それぞれの列にはGutenbergで利用可能なブロックを挿入できます

３列表示中の左側に表示されるコンテンツ

３列表示中の中央に表示されるコンテンツ

３列表示中の右側に表示されるコンテンツ

特殊ブロックを追加するようなプラグインは使わない方がいいかも

これは今に始まったことではありません。旧エディタでも「Shortcode Ultimate」をはじめとする特殊な表現や機能を簡単に追加できるプラグインがたくさんあります。また、高機能なテーマでは独自のデザインや動作が簡単に追加できるような機能が備わっています。基本的には特殊なブロックを作るものか、クラシックブロックへ表現用のタグを追加するものになります。

一見便利そうに見えるプラグインやテーマですが、１つ注意した方がいい点があります。それは、そのプラグインやテーマを変更したり削除したりした時にすべての投稿や固定ページで見直しが必要な場合があること。

テーマはテーマの機能なのだし、プラグインも有効化しているときだけ動作するわけですから仕方ないといえば仕方ないですし、テーマの機能であればソースを解析して移行することもできますが、Gutenbergは前項で紹介したような表現が標準でできるようになっているのですから、よほど魅力のあるものでなければ使わない方が得策なのかもしれません（以前私もそうしたプラグインやテーマを使っていましたが、変更したり停止したときに結構苦労しました）。

Gutenbergが使いにくいと感じるところ

現行のGutenberg(WordPressバージョン5.3.2)とビジュアル・テキストエディタで決定的に違うのが、文字数の表示。エディタ上のiマークをクリックすれば全体の文字数（ホンマかいな？）やブロック数は表示されますが、重要なタイトルの文字数は表示されません。今ホンマかいな？と書いた本文の文字数に対して誤っているといった記事が結構ありますが、日本語のようなマルチバイト文字列では致し方ないことで、テーマなどで旧エディタ向けに表示しているものも全角文字を１文字として、半角文字に対して0.5をかけるという計算方式のものがほとんどなので、決して正確とは言えず、あくまでも目安でしかありません。でも、現状表示できないタイトルの文字列については今後計算され表示されるようになってくれるとありがたいと感じました。

次に気になったのがテキストの選択。先頭からドラッグしても末尾からドラッグしても先頭文字までをドラッグするのにコツがいる感じがします。私の場合テキストエディタしか使ってきませんでしたから、ビジュアルエディタからこの現象はあったのかもしれませんが改善されるとありがたいです。

そして、ブロックのグループ化機能。複数のブロックをまとめて塊にできる機能ではあるものの、それらを編集しようと思うと一旦解除しなければならないのでちょっと面倒です。他のブロックを中に入れちゃう？的な使い方ができるようになるとうれしいところです。

右に表示される項目の並び順。旧エディタではサイドバーから本文下へ、またその逆、順番の変更など自由にできたのですが、Gutenbergではできないようです（やり方を知らないだけかも・・）。これも改善されると非常に使い勝手が向上すると思います。

最後にエディタそのものではないですが、Classic Editorを導入すると投稿一覧や固定ページ一覧の編集の選択肢が増えます。旧エディタで作ったものを誤ってブロックエディタの編集で開いてしまうと（逆もありき）整形が崩れてしまったりするので、アラートを出す、作られた方のエディタでの編集を強制するなどしてもらえると誤動作防止になるのではないかと思います。

複数のブロックでできた定型の投稿（テンプレート）を使いまわす便利な方法

テキストエディタやビジュアルエディタでは、テーマ内で独自テンプレートを作るか、クイックタグを自分で作るか、

定型タグや定型文をボタン１つで挿入できるプラグイン「AddQuicktag」

を使ってページ全体をテンプレートとして保存して使いまわす方法が主流ですが、Gutenbergを使って複数のブロックを持つ投稿はテンプレートとして使いまわすことができません（正しくは使いまわしにくいです）。Gutenberg標準の方法を使うとすれば、

ブロックをすべてグループ化する
グループ化したブロックを再利用ブロックとして登録する

ようにしておき、新規作成する投稿などで

再利用ブロックを挿入する
グループ化を解除する

といいうのが知られていますが、この方法だとグループ化を解除するという作業が非常に面倒で、複雑なブロック構造だとそればかりに時間を取られてしまいます。

これを解消する方法としてはやっぱりプラグイン！ということになるでしょう。おすすめは

Duplicate Page

です。このプラグインは投稿を複製するためのものですが、テンプレートとしたい投稿を下書き保存＆先頭に固定表示しておいて、複製をクリックすれば、グループ解除という手間をかけることなく投稿することができます。案外知られていない方法のようですので、困っている方にはおすすめです。

ブロックエディタ用ではないため同じ種類のブロックが連続していると連結されて複製されるようですから、テストして使うようにしてください。

今後投稿複製用のプラグインでGutenberg向けのものを探して紹介しようと思いますので、期待せずに待っていてください（笑）。

初投稿の感想ほか

何よりビジュアルエディタに慣れてない！！ので、思ったよりもこの投稿を書くのに時間がかかってしまいました。

でも慣れていけば・・・Gutenbergは私が思っていたよりも断然使いやすいエディタに違いないと実感できました。

今後は徐々にGutenberg化していこうと思っています。

Classic Editorを使う意味、間違ってない？？

文中にも書いた通り、私は今まで「Classic Editor」プラグインを、元のエディタに戻して使い続けるためのものとして使っていました。

でもこうしてGutenbergを使い始めてみると、ひょっとしてプラグイン作者の意図とは違う使い方をしてるんだろうなぁと気づきました。多分本当の意図は以前のエディタで作った投稿や固定ページの編集をGutenbergのみで開いたときに変な変換がされてしまうのを防ぐためなんだろうと思います。

過去記事の修正は大変ですが、「Classic Editor」のサポートは一応2022年までとされていて、延長されなければその後Gutenbergしか使えなくなってしまいますから、今後は「Classic Editor」は移行用に用意されたプラグインと再認識して、徐々にGutenberg化していこうと思います。