WordPress:Gutenbergに便利なブロックを追加してくれるプラグイン 10+

WordPress:Gutenbergに便利なブロックを追加してくれるプラグイン 10+

Gutenbergにはデフォルトでも様々なブロックが用意されていますが、少し凝ったレイアウトを簡単に作成できたり、いろいろと細かく設定ができるブロックをさらに追加してくれるプラグインの備忘録兼ねたまとめです。
中には特定のテーマ向けとして作られているプラグインもあるので一般的なテーマでは一部ブロックが使えないとか機能が制限されている場合もあるものの、基本的にはどのテーマでも利用することができます。
また、容易にブロックを追加できるだけでなく、オリジナルブロックを自作しようと思っているときに作り方などの参考にもなると思います。

※紹介しているブロック数・機能・設定については、このエントリー公開時のものになります。

Snow Monkey Blocks

Snow Monkey Blocks

プラグイン名からもわかるように「Snow Monkey」というテーマ向けとして作成されたプラグインで、作者が日本の方なのでブロックの使い方や更新情報などについても日本語でチェックすることができます。
一部テーマと併用していないと使えないものもありますがブロックは全25種類で、ブロック一覧で「Snow Monkey Blocks [共通ブロック]」と「Snow Monkey Blocks [セクション]」項目内に追加されます。
どのようなブロックがあるかの実際の見栄えや使用時の雰囲気は、プラグイン紹介ページに掲載されている動画でわかります。

Stackable – Gutenberg Blocks

Stackable – Gutenberg Blocks

ブロックは全22種類で、ブロック一覧で「Stackable」項目内に追加されます。
設定ページで各ブロックの説明やデモを見ることができる他、各ブロックの有効・無効についても設定できるようになっており、ここで設定をすることで必要なブロックだけを表示できるように設定できます。

Premium Blocks for Gutenberg

Premium Blocks for Gutenberg

ブロックは全12種類で、ブロック一覧で「Premium Blocks」項目内に追加されます。
各ブロックの有効・無効について設定することができ、ボタンやバナーのブロックではホバー時のエフェクトが用意されていたりもします。
それぞれのブロック使用時の見栄えは、プラグイン紹介ページに記載されているブロック一覧のリンク先で確認することができます。

Page Builder Gutenberg Blocks – CoBlocks

Page Builder Gutenberg Blocks – CoBlocks

ブロックは全16種類で、ブロック一覧で「CoBlocks」項目内に追加されます。
特徴的なものとして、よく見る画像の天地中央にテキスト領域を配置させたレイアウトを作れる「Media Card」やセクションなどを視覚的に区別するものとして8種類の見栄えから選択できる「Shape Divider」などがあります。

Ghost Kit – Blocks Collection

Ghost Kit – Blocks Collection

ブロックは全19種類で、ブロック一覧で「Ghost Kit」項目内に追加されます。
各ブロックの見栄えについては、プラグイン紹介ページに記載されているブロック一覧のリンク先や設定ページのプレビューから確認できます。
また、ブロック追加以外の機能としてデバイスサイズに応じてブロックの表示・非表示を切り替えたり、よく見るスクロールしていくとコンテンツを表示させる動きを実装できるようになっている他、有償にはなりますがさらにブロックや機能を追加することもできます。
気になる点としては、設定ページでデフォルトブロック含め表示・非表示を設定できるような感じですが上手く機能していないようです...。

Editor Blocks for Gutenberg

Editor Blocks for Gutenberg

他のものに比べるとちょっと少なめの全12種類のブロックが用意されており、ブロック一覧で「Editor Blocks」項目内に追加されます。
それぞれのブロック使用時の見栄えは、プラグイン紹介ページに記載されているブロック一覧のリンク先やプラグイン有効時に追加されるページ下部から確認できます。

Stag Blocks

Stag Blocks

こちらもちょっと少なめの全10種類のブロックが用意されているプラグインで、こちらの場合はこれまでのようにブロック一覧で特定の項目内に入るのではなく各項目内にそれぞれ追加されるので、どれがデフォルトなのか追加されたものなのかが少し分かりにくいかもしれません。
設定では各ブロックの有効・無効について設定できるようになっており、デフォルトのブロックの表示・非表示設定についても可能になっています。

Easy Blocks – Gutenberg Blocks Collection

Easy Blocks – Gutenberg Blocks Collection

ブロックは全15種類で、ブロック一覧で「Easy Blocks」項目内に追加されます。
それぞれのブロック使用時の見栄えは、プラグイン紹介ページやプラグイン有効時に追加されるページに記載されているブロック一覧のリンク先から確認できます。

Kadence Blocks – Gutenberg Page Builder Toolkit

Kadence Blocks – Gutenberg Page Builder Toolkit

ブロックは全8種類で、ブロック一覧で「Kadence Blocks」項目内に追加されます。
ブロックの種類としては少ない代わりにそれぞれを細かく設定できるような作りが特徴で、ホバー時にちょっとしたアニメーションを加える、挿入時の要素で使用するタグを設定する、Google Fontsを使用する形でfont-familyの設定などが可能です。
また、設定ページでは各種設定のデフォルト値を設定したり、ブロックの表示・非表示を設定することもできます。

Gutenberg Blocks – Ultimate Addons for Gutenberg

Gutenberg Blocks – Ultimate Addons for Gutenberg

ブロックは全18種類で、ブロック一覧で「Ultimate Addons Blocks」項目内に追加されます。
各ブロックの有効・無効について設定することができ、「Post Grid」「Post Masonry」「Post Carousel」「Post Timeline」などの記事一覧を異なる見せ方で表示するブロックがいくつか用意されています。

Advanced Gutenberg

Advanced Gutenberg

ブロックは全18種類で、こちらの場合はブロック一覧で特定の項目内に入るのではなく各項目内にそれぞれ追加されるタイプのプラグインになります。
投稿画面で各ブロックを細かく指定できる他、設定画面ではデフォルトブロックも含めて表示・非表示の切り替え、カスタムスタイル適応、各ブロックの初期設定などを任意設定などが可能になっています。

Gutenberg Blocks Design Library

Gutenberg Blocks Design Library

最後はこれまでのものとは少し違って新たにブロックを追加するのではなく、デフォルトで用意されているブロックを組み合わせて作成したレイアウトを簡単に呼び出せるというものになります。
プラグインを有効化後、投稿画面右上にある人参アイコンをクリックすると用意されているレイアウトを確認することができ、50種類近いレイアウトを実際にどのような形で表示されるか確認しながら選択することができます。(初回はレイアウトをインポートするためのボタンが表示されていると思うので、ボタン押下してしばらく待ってると表示されると思います。)
プラグイン紹介ページにも記載されているように、無駄にブロックは増やしたくないとか既に何らかのブロックプラグインを使用してレイアウト作成を簡単にしたいだけのときなどに向いています。


全部で12種類のGutenbergブロック関連のプラグインを紹介してきましたが、テーマ併用が必要(特定テーマに最適化されている)なもの、ブロック数は多数あるけど細かい設定ができないもの、逆にブロック数は少ないけど設定が豊富に用意されているものなど様々なタイプがあったので、ひと通り簡単に試してみたものの個人的にはこれが一番おすすめというのは正直現時点ではありませんでした。
ただ、簡単にブロックが追加できて便利なことには変わりないので、今後こういったプラグインを多用していくことを考えている場合はいくつか気になるものを実際に使ってみて、どのようなコンテンツをつくるか・どのようなブロックが必要なのか・更新者が使いやすいかなどを考慮して最適なプラグインを容易に選べるようにしておくといろいろ捗ると思います。

今回は公式にアップされていて且つ個人的に目についたものを紹介しましたが、公式・非公式含めブロック関連のプラグインはまだまだ他にもありますし、今後もより便利なものが出てくるとは思うので、また時間があるときにチェックしておすすめのプラグインを見つけたら紹介したいと思います。

Close the search window,
please press close button or esc key.