ポケロペンチオという軍団

日々のあれやこれやをなんやかんや

WEB

【WordPress5.0】新しいエディタGutenberg(グーテンベルク)の「ブロック」とは

gutenbergのブロック

WordPress 5.0にて「Gutenberg」というエディタが標準搭載されました。

Gutenbergには賛否両論ありますが、標準エディタとなってしまったのですから各種プラグインもGutenbergに合わせたアップデートを行っていくでしょう。

個人的には従来のエディタ(クラシックエディタ)のままでよかったのですが、クラシックエディタのサポートは暫定的に2021年までとされています。

つまり、いずれはGutenbergを使わざるをえない状況になります。
それならば早めに使ってしまおうということで、Gutenbergを使ってみました。

Gutenbergの最大の特徴「ブロック」

Gutenbergではブロックという単位を並べていき、記事を作成するという点が最大の特徴であるといえると思います。

ブロックは下のようにプラスボタンから追加することができます。

Gutenbergのブロック追加

段落を二つ追加してみました。

Gutenbergの段落

段落にカーソルを合わせると青枠が表示されますが、これが一つのブロックであることを意味しています。
ブロックはGutenbergにおける記事構造の最小単位ですから、ブロックの中にブロックを作ることはできません。
が、InnerBlockという仕組みによりブロックを入れ子にすることができるようです。

基本的にはブロックという最小単位を並べていくという作りであることがGutenbergの特徴ですので、HTMLの最大の特徴である入れ子構造とは真逆の特徴を持ち合わせていることになります。

その意味では、HTMLの知識がなくても直感的に使いやすいエディタであると言えると思います。

Gutenbergのブロックは移動可能

Gutenbergはブロックを最小単位としており、入れ子構造ではありませんので、ブロックごとに簡単に位置を移動させることができます。

Gutenbergのブロック移動

「上へ移動」をクリックすることで簡単にブロックを移動させることができます。

Gutenbergのブロック移動

また、下図赤枠部によりドラッグアンドドロップによる移動も可能です。

Gutenbergのブロック移動

Gutenbergの「再利用可能ブロック」

Gutenbergの機能をまだ深く把握できてはいないのですが、再利用可能ブロックは便利な機能だと感じました。

再利用可能ブロックは、事前に定型文を登録しておくことで、いつでも簡単にそれを呼び出せるという機能になります。
クラシックエディタではプラグインに頼っていた部分になりますが、それがGutenbergだけで実装できるようになったということになります。

再利用可能ブロックの使い方をみていきましょう。

Gutenbergの再利用可能ブロックの登録

挨拶文など、定型文として使用する機会の多いブロックを再利用可能ブロックとして登録してみましょう。

下のように適当に段落を作成し、赤枠部をクリックするとプルダウンが表示されますので、青枠部「再利用ブロックに追加」をクリックします。

Gutenberg再利用可能ブロック

再利用可能ブロックとして登録するための名前を設定し、保存します。

Gutenberg再利用可能ブロック登録

これで再利用可能ブロックの登録は完了となります。

Gutenbergの再利用可能ブロックの呼び出し

下のようにブロック追加プルダウン内の「再利用可能」から、登録済みの再利用可能ブロックを呼び出せるようになります。

Gutenbergの再利用可能ブロックの登録

下のように何個でも再利用できます。

Gutenbergの再利用可能ブロック

Gutenbergの再利用可能ブロックの内容を変更する

特定の再利用可能ブロックの内容を変更する

一度定義した再利用ブロックはいつでも呼び出すことができるのですが、ある特定のブロックだけは内容を変更したいという場合があるかと思います。

そのような場合は、下図のように「通常のブロックへ変換」を行います。

Gutenbergの再利用可能ブロックの変更

すると、再利用可能ブロックの内容を変更することができるようになりますので、下のように適宜内容を変更しましょう。

Gutenbergの再利用可能ブロックのテキスト変更

全ての再利用可能ブロックの内容を変更する

ある特定のブロックが対象ではなく、全ての再利用可能ブロックの内容を変更することもできます。

「通常のブロックへ変換」されていない再利用可能ブロックの一つを選択し、編集をクリックします。

Gutenbergの全ての再利用可能ブロックの内容を変更する

すると、再利用可能ブロックの定義を変更することができますので、適宜変更を行います。

Gutenberg再利用可能ブロックの定義変更

この状態で保存を行うと、下図のように、「通常のブロックへ変換」されていない再利用可能ブロックの内容が全て更新されます。

Gutenbergの再利用可能ブロック定義変更

他の記事で、同じ再利用ブロックが使用されている場合、ある記事内で再利用ブロックの定義変更を行なった場合は、別の記事にも自動的にその変更が反映されます。(別の記事を更新しなおさなくても反映されます)

これはとてもうれしい機能ですね。クラシックエディタではphpファイルにショートコードを定義しておかなければ実装できなかったような機能が、Gutenbergの機能だけで実装できるようになりました。

定型的ではあるが変更の可能性があるものについては後の変更の労力を考慮したうえでも、ぜひ再利用可能ブロックとして運用していくべきだと言えると思います。

Gutenbergを使ってみた感想

見た目のすっきり感でインパクトがあり、機能面でもプラグインへの依存が少なくなるなど、新世代のエディタであると感じました。

まだ少し触った程度のレベルなので、バグや機能面でも不足が含まれることもあるかと思いますが、Gutenbergはまだまだ発展途上なのでそれも解決されていくでしょう。

文章を中心に組み立てていく使い方がメインになる方は、クラシックエディタよりもGutenbergの方がシンプルで直感的なので、使いやすく感じられると思います。

クラシックエディタで使っていた機能がGutenbergで全てそのまま使えるのか? というとそうではないのですが、Gutenbergならではの機能で従来の機能を代替できる(むしろGutenbergの方が良い)という面も多くあるでしょう。

Gutenbergならではのうれしい機能も存在しますので、Gutenbergへの移行を躊躇されている方は試験環境などで一度使ってみてもいいかもしれませんね。

-WEB