「Cocoon Blocks」キタ~!!テーマCocoonのGutenberg:ブロックエディター用プラグイン!!

待ってました~!思ってたより対応早くビックリ!

先日、Gutenberg装飾用プラグイン「Nishiki Blocks」に出会った時は本当に衝撃で、感動の嵐で、改めて、Gutenbergのメリットも感じたし、先記事では以下のように感じていました。

メジャーアップデートによって今までと同じような事ができないではなく、Gutenbergで、より簡単に同じ事ができるようどんどん進化していくんじゃなかろうかと…今後の動きにかなり期待しています。

Gutenberg装飾用プラグイン「Nishiki Blocks」がすごい!!

なので、「Cocoon」もいずれはプラグイン対応となるのではと期待をしてはいたんですが、何せこれでもかというくらいなエディター関連が多機能な「Cocoon」。ブロックエディターの仕様に合わせるには、大変そうだし、お時間がかかるのではと勝手に思い込んでおりましたのに…。

出ました…

「Cocoon」のブロックエディター対応プラグインが公開されました!

現時点で、全てのスタイルに対応されてはいませんが、ワタシが普段利用していて再利用可能ブロックとしてどうにか利用できないかとあれこれ試していたものなので、もうこれだけでも充分なくらいでした。>ありがたや~

「Cocoon Blocks」について

「Cocoon」のCSS拡張機能をブロックエディターで利用できるプラグインです。

この記事時点では、旧エディター(Classic editor)で利用できる全てのスタイルに対応はされていません。対応状況については、以下記事で更新されています。

※注意点

  • 基本、「Cocoon」専用(注1*
  • テーマのバージョンは、「1.4.9」以上を推奨(注2*
  • 現時点では、「ベータ版」となる
  • 全てのスタイルへの対応は難しい可能性がある(仕組みが違うため)

注1*Cocoon以外のテーマでの利用も可能のようですが、CocoonのCSSの記述が必要になります。

注2*「Cocoon」テーマは自動更新なので、Wordpress管理画面の更新ページでマメに更新してれば特に問題ないと思いますが、念のため、確認したい時は、「WordPress管理画面」→「Cocoon設定」→「テーマ情報」から、確認可能です。

注意点については、公式から抜粋して簡素に記載しているだけなので、より詳細の内容については以下公式をご確認ください。

「Cocoon Blocks」の追加方法

  • 上記より、プラグインをダウンロード>Zipファイル
  • WordPress管理から、プラグインの新規追加を開く
  • 「ファイルをアップロード」より、ダウンロードしたZipファイルをアップロード
  • プラグインを「有効」にすることで、ブロックエディターで利用可能になります。

「Cocoon Block」でできること

※この記事をUPした1/6現在の状況になります。

インライン対応

「Cocoon Blocks」プラグインを追加すると、ブロックエディターの「Paragraph」ブロックでインライン装飾ができるようになります。

インライン装飾
インライン装飾が通常に追加

ブロック対応

以下のスタイルでブロック対応されています。

  • ブログカード
  • アイコンボックス
  • タブボックス
  • 案内ボックス
  • 白抜きボックス
  • 付箋風ボックス
  • ボタン
  • 囲みボタン
  • 検索案内

Cocoonブロックの使い方

「+」アイコンをクリックし、「Cocoonブロック」を選択
「Cocoonブロック」一覧が表示されるので、任意のものを選択

例えば、Classicブロック一覧から「アイコンボックス」をクリックすると以下のブロックが追加されます。

アイコンボックス

ブロック内の記述にもありますが、あとは、内容を入力していくだけです。
また、Classicブロック内に別のブロックを入れ込むことも可能です。
以下、サンプルです。

Cocoonブロック内に「+」アイコンが表示されるので、デフォルトブロックと同じようにブロックを追加していくだけです。(これが、「Paragraph」ブロック)

  • ボックス装飾内にリストの追加が可能。
  • これ、すごく欲しかったブロックです!!
  1. もちろん、番号付きリストも
  2. インライン装飾も、可能です。
けろら~です♪
画像ブロックも!!

下記記事で、再利用可能ブロックでボックス系装飾を楽に使えないか考えてましたけど、もう、必要ないですね。

最後に

冒頭でも言いましたが、正直こんなに早く対応してくださるとは思ってなかったんですよね。
Classicブロックを使えば、CocoonのCSS拡張は使えるわけだし、旧エディターのサポート終了まであと2年くらいあるし…。

多機能なスタイルをブロックエディターに対応させるのってかなり手間がかかる作業になると思うんですよね。

だから、無理なさらず、いつまでも待ちますくらいの覚悟でいたのに、「もう対応?」とホント、ビックリしました。

Cocoonテーマの作成者のわいひらさんは、無料でテーマを提供されているにも関わらず、サポートも迅速でいつも丁寧に対応されていて、利用者としてはもう足を向けては寝れないくらいの気持ちでいます。
ありがとうございます!!

さて、「Cocoon Blocks」の登場で他テーマ用プラグイン「Nishiki Blocks」はどうするか…なんですけど…こちらは、このまま利用させていただく予定です。

どのテーマでも使えるプラグインですし、ちょっとした枠をささっと付けたい時に非常に便利です。
ただ、現状、AMPページにスタイルが反映されないので、AMP有効化してるうちは、出番が少ないんですよね。
現在、AMP有効化をやめるか、続けるか悩み中でやめたら出番が多くなるかも…です。(^▽^;)

あと、どのような機能を今後追加されていくのか…というところが、楽しみなんですよね。
もしかすると、追加されるのは、テーマ限定ブロックの可能性もありますが、Gutenbergでどんなことができるのか、に興味津々なんです。

とにかくGutenberg:ブロックエディター大絶賛中のワタクシです。(* ̄∇ ̄*)

それでは、また♪けろら~でした!!

コメント