WordPressでGutenbergを使ってみた！ブロックの使い方が重要！

WordPressのエディタは近いうちにGutenbergという新しいエディタが標準となります。

いつから標準になるのかは確定ではありませんが2018年内目標らしいです。

現在はプラグインでGutenbergを使うことができます。

本記事は試しにGutenbergで記事を書いてみました。標準搭載される時にどうなるかはまだわかりませんが、現時点での使い方をまとめたいと思います。

Gutenbergの導入

現在Wordpressのトップ画面にログインすると↓のような画面が表示されていると思います。

ここに表示されているGutenbergをインストールをクリックすることで使えるようになります。

もし表示されていなかったとしても、何時も通りプラグイン検索でGutenbergと入力すれば探せます。

これでGutenbergを使う準備は整いました。

Gutenbergの最大の特徴はブロック

Gutenbergはブロックという概念を導入しています。

見出し1つ、文章の段落1つ、画像1つがそれぞれ１つのブロックになっておりそれを組み合わせることで記事になります。

とはいえ普通に文章を書くだけなら今までとあまり変わりません。見出しや画像を入れる時がちょっと今までと変わるというイメージです。

ブロックを追加するには左上の＋ボタンをクリックして追加したいものを選ぶだけです。画像も見出しも普通にブログを書くのと変わらないので、操作性が従来より直感的になったという意味ではより使いやすくなったと言えるかもしれません。

Gutenbergはブロックを追加することで表示したいコンテンツを表示できると覚えておけば基本的な操作はできると思います。

また、段落だけは普通に文章を書いている中で改行するだけで新たな段落ブロックが生成されます。この辺りは従来のエディタとほとんど変わらない操作感ですね。

こんな感じで背景色の設定ができたりとかデザイン面では新しい部分も多いです。

ブロックの移動が簡単

特に新しい特徴としてブロックの移動が簡単なことが挙げられます。記事を書いている時に前後関係を入れ替えたいことがありますが、今まではコピペで移動したりしていましたが、Gutenbergではワンクリックで移動することができます。

ブロックの左にカーソルを合わせると下に移動という文字が出ます。これをクリックするだけで2個目のブロックの下に1個目のブロックが移動します。

また、ブロックとブロックの間に別のブロックを追加することもできるので、記事を書いている途中で記事構成を変えたくなっても比較的手軽に変更することができます。

ブロックを再利用できる

ブロックの最大の特徴はブロックを再利用できることです。記事を書く時にいつも書く型がある人は多いと思いますがその型を毎回書かずにコピペみたいな感覚で再利用できます。

特に効果を発揮するのはアドセンス広告やバナーを挿入する時ではないでしょうか？

試しに本ブログで使用しているバナーを再利用ブロックにしてみます。

ブロックを作成したら右側のメニューから再利用ブロックに追加を選択してブロックに名前を付けるだけで再利用ブロックが完成します。再利用ブロック作成後にブロックを編集したら再利用ブロックの内容も更新されます。

再利用ブロックの使い方も簡単です。

ブロックの追加の下の方にある再利用可能から追加したブロックを選択するだけです。これでいつでもバナーを設置することが可能になりました。リンク先を変えたいとなっても再利用ブロックを編集するだけでいいので、記事下などウィジェットに対応した場所以外でも手軽にバナーや広告を設置できるようになりました。

再利用ブロックを使って作ったバナーが↓です。

これと同じものを記事下にも設置しました。ひとまず思いついたのがバナーや広告ですが、工夫すればもっと便利に使えそうです。

いつからGutenbergを使うべきか？

いずれ変更になるなら今からGutenbergを使い始めた方がいいのかな？と思う人も多いと思います。今すぐGutenbergに変えるべきかどうかメリット・デメリットを挙げてみました。

すぐにGutenbergを使うメリット

• 使い方に慣れることができる
• 再利用ブロックを早い段階から蓄積できる
• 従来エディタで書いた記事との競合を減らせる

勿論、Gutenbergの方が綺麗な記事を書きやすいとかもメリットになりますが、あくまで早くから使うメリットはこの辺りになるかと思います。

競合についても多分、Gutenbergで書いた記事が本実装でおかしくなるってことはないと思いますが、テーマとの兼ね合いでデメリットに働く可能性もあるのでなんとも言えない部分ではあります。

すぐにGutenbergを使うデメリット

• 特定の文字だけを色付けできない
• 段落ごとにブロックが変わる
• 本実装で一部の機能が変わる可能性がある
• テーマが未対応の可能性がある

既に気づいている人も多いと思いますが、この記事は文字色を変えていません。理由は文字色を変えるとブロック内の文字全ての文字色が変わるからです。そんな広範囲の色を変えたいことは滅多にないので、これは結構大きなデメリットだと思います。文字色を変えられるようになるまでは従来エディタでいい気がします。

段落ごとにブロックが変わるのもなかなかに厄介です。

ブログは読みやすさ重視で普通の文章より改行が多くなるので、いつも通り文章を書いていると1文毎にブロックを変える必要が出てきます。

そうなるとかなり管理が面倒になりそうなのでデメリットになりうるかなと。

しかし、これは単に私がなれていないだけかもしれません。Gutenbergでは1文ごとに細かく分けた方が管理しやすいというのを理解できてないだけかもしれません。

とはいえ本実装では仕様が変わっている可能性も考えると今慣れるのはデメリットな気がします。

あくまで本実装ではないというのは大きなデメリットですね。せっかくGutenbergに慣れてもまた覚え直さないといけない可能性があるのはかなりデメリットです。覚えるのにそんなに時間がかかるとも思えないので、本実装されてから使い始めた方がいいと思います。

また、テーマが未対応の可能性が高いのも欠点です。せっかくテーマを使うことで綺麗な記事を書けるようにしているのにGutenbergでそれができなくなるのは、テーマを使う意味がありません。いずれテーマもGutenbergに対応するはずなので、それまで待った方が良さそうです。

Gutenbergについてまとめ

Gutenbergは予想以上に使いやすかったです。

ブロックの概念を理解すればすぐに使えるようになると思うので、まずは1回試してみるのがいいと思います。

ただし、メインのエディタとして使うのは本実装された後がいいと思います。先程挙げたデメリットが結構多くGutenbergに早くなれるメリットを凌駕しているからです。

現状、従来エディタで書いた記事もGutenbergで書いた記事も見た目の違いはなさそうなので、1回試した後は、本実装まで待ってからでも遅くないです。