cocoonフック調査～cocoon_gutenberg_stylesheetsの使い方と活用例

タナビーの高梨です。

WordPressのテーマ「Cocoon」には、テーマ改変なしでデザインや動作を拡張できる豊富なアクション・フィルターフックが用意されています。

分かる範囲で内容を調査したのでブログにまとめていこうと思います。

今回はブロックエディタ起動時に読み込まれるスタイルシート（CSS）を編集できるフィルターフック
👉cocoon_gutenberg_stylesheets
です

フックの概要

条件

cocoon設定＞エディタータグ＞エディタースタイルにチェックが入っている場合、ブロックエディタ起動時に発火します。

使いどころ

WordPressが提供するエディタ設定を変更できるフック「block_editor_settings_all」と「block_editor_settings」で呼び出されます。

ブロックエディターで追加で使いたいCSSをCSSファイルで準備すれば展開してくれるようになります。

ブロックエディターに独自のスタイルを当てたい場合に使えるフックです。

引数

$stylesheets：(array)CSSファイルのURLの配列

子テーマの状況などにより若干変わりますが、デフォルトでは以下のようになっています。

array(5) {
  [0]=>
  string(88) "http://xxxxx.com/wp-cocoon/wp-content/themes/cocoon-master/style.css?fver=20251128051958"
  [1]=>
  string(92) "http://xxxxx.com/wp-cocoon/wp-content/themes/cocoon-master/keyframes.css?fver=20251128051956"
  [2]=>
  string(117) "http://xxxxx.com/wp-cocoon/wp-content/uploads/cocoon-resources/css-cache/visual-color-palette.css?fver=20260220022718"
  [3]=>
  string(95) "http://xxxxx.com/wp-cocoon/wp-content/themes/cocoon-master/editor-style.css?fver=20251128051956"
  [4]=>
  string(107) "http://xxxxx.com/wp-cocoon/wp-content/uploads/cocoon-resources/css-cache/css-custom.css?fver=20260215013915"
}

カスタマイズコード例

https://hogehoge.com/hogehoge.cssのスタイルを当てる場合の例です。

自ドメインの他、外部ドメインのURLも指定できるようです。

function customize_cocoon_gutenberg_stylesheets ( $stylesheets ) {

    $stylesheets[] = 'https://hogehoge.com/hogehoge.css';

    return $stylesheets;

}
add_filter('cocoon_gutenberg_stylesheets', 'customize_cocoon_gutenberg_stylesheets' );

注意点

・エディタ側のスタイルのみが対象で、フロント側には影響しない
・CSSの記述ミスやテーマで設定している内容との整合性に矛盾があったりするとエディタ表示に影響する可能性がある

まとめ

・cocoon_gutenberg_stylesheets は、Cocoonがブロックエディタ用に読み込むスタイルシートを制御できるフィルターフック
・ブロックエディタの表示を細かく調整したい場合に有効な拡張ポイントであり、テーマ改変なしでエディタをカスタマイズできる