ブロックエディター(Gutenberg)でCocoon用ブロックを利用する方法

ブロックエディター
この記事は約3分で読めます。

WordPressも5.0となりブロックエディター(Gutenberg)が標準化されました。

Cocoonテーマでも今後、できる限りブロックエディターに対応していければと思っています。

尚、「ブロックエディターはまだ必要ない」という方は、以下の手順で旧エディター表示にすることも可能です。

ブロックエディター(Gutenberg)を使用しないで旧ビジュアルエディターを利用する方法
投稿画面のGutenbergエディターを無効にして旧式のエディターで編集する方法です。

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

ブロックエディター対応Cocoon Blocks

Cocoon1.6.4以降Cocoon Blocksはテーマ内に組み込まれました。テーマをインストールするだけでCocoon用のブロックを利用できます。
Cocoon Blocksプラグインを利用している場合は、無効にすることをおすすめします

Cocoonでは、ブロックエディターに対応させるために、開発した「Cocoon Blocks」というプラグインをインストールして利用します。

テーマのバージョンチェック

Cocoon Blocksプラグインを利用するには、Cocoon1.4.9.1以上が必要です。

バージョンが満たない場合はWordPress管理画面の「ダッシュボード→更新」からアップデートを行ってください。

Cocoonテーマを最新版に更新する

Cocoon Blocksのインストール

プラグインを利用するには、まず以下からCocoon Blocksプラグインをダウンロードしてください。

ダウンロード後は、WordPress管理画面から「プラグイン → 新規追加 → プラグインのアップロード」からインストールしてください。

WordPress管理画面から「プラグイン → 新規追加 → プラグインのアップロード」からインストール

インストールを終えたら、投稿画面の「+」をクリックして「Cocoonブロック」カテゴリからご利用ください。

Cocoonブロックカテゴリーから利用

Cocoon Blocks現在の対応状況

現在Cocoon Blocksが対応しているブロックデザインはこちら。

Cocoon Blocksの現在の対応状況
Cocoon Blocksが対応している旧ビジュアルエディタースタイルを紹介しています。

Cocoon Blocks利用の注意点

Cocoon Blocksプラグインは、Cocoon1.6.4からテーマ内に正式版として組み込まれました。

まだ不慣れなため、以下の注意点を踏まえた上でご利用ください。

  • Cocoon BlocksはCocoonテーマ専用のプラグインです
  • 他テーマで利用してもエラーは出ませんがスタイルは反映されません
    (※Cocoonスタイルを当てれば利用できるけど)
  • Cocoonテーマのバージョンは常に最新版を推奨します
  • Cocoon Blocksプラグインはベータ版です
  • 今後暫くは仕様が安定しない可能性があります
  • 作り始めたばかりなのでまだ機能は少ないです
  • 必ずしも旧エディターと同じ仕様になるとは限りません(仕組みが違うので)

上記を踏まえた上で、「試しに使って問題があったら報告してあげる」という方がおられれば、是非フォーラムに報告いただければ幸いです。

僕自身、React(JSX)を触ってまだ1週間程度(公開時点)です。

言語の作法など、まだ完全に理解しておらず「もう少しスッキリと書く方法があるのでは」と思いつつも、何となくで書いている部分も多少あります。

ですので、今後開発をしていくい中で、良い方法があれば、出来る限り以前の状態を守りつつも仕様変更する可能性はあるのでをご了承ください。

とりあえず公開して、様々な方のご意見を聞きながら、今後とも発展させていければと思います。

GitHubリポジトリはこちら。

cocoon/blocks at master · yhira/cocoon
100%GPLの無料Wordpressテーマです。開発中の開発バージョンです。安定版をダウンロードする場合は、Cocoon配布サイトからダウンロードしてください。 - cocoon/blocks at master · yhira/cocoon

コメント テーマの質問はフォーラムへ

  1. WP4.9.9ユーザー より:

    「Classic Editor」ではブロック形式のデザインに対応できない
    ということですね

    結構手強そうだな、Gutenberg。

    • わいひらわいひら より:

      「Classic Editor」プラグインを使うと、強制的に旧式のビジュアルエディターになるのでブロックは使えないと思います。

タイトルとURLをコピーしました