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

タナビーの高梨です。

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

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

今回はブロックエディタ起動時にテーマスタイルを当てる際のパラメータを変更できるフィルターフック
👉cocoon_extract_gutenberg_styles
です

フックの概要

条件

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

使いどころ

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

フィルターから渡される$editor_settingsに$editor_settings[‘styles’]という項目があり、ここに追加CSSを配列形式などで追記できます。

この項目の設定方法を知っている必要がありますが、ブロックエディタの柔軟なカスタマイズができます。

引数

$styles：(array)追加したい内容
$editor_settings：（array）block_editor_settings_allとblock_editor_settingsのフックで渡される設定情報
$post：(object)変数するページのポスト情報

apply_filters呼び出し元のソースコード

$styles = apply_filters( 'cocoon_extract_gutenberg_styles', array(), $editor_settings, $post );

カスタマイズコード例

‘:root {–xxx-define: something;}’というスタイルを当てる例です。

function customize_cocoon_extract_gutenberg_styles ( $styles, $editor_settings, $post ) {

    $styles[] = array('css' => ':root {--xxx-define: something;}');
    return $styles;

}
add_filter('cocoon_extract_gutenberg_styles', 'customize_cocoon_extract_gutenberg_styles', 10, 3 );

$postを利用すれば、特定の投稿のみカスタマイズするということが可能です。

注意点

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

まとめ

・cocoon_extract_gutenberg_styles は、Cocoonがエディタースタイルを生成する際に追加CSSを差し込めるフィルターフック
・ブロックエディタの表示を細かく調整したい場合に有効な拡張ポイントであり、テーマ改変なしでエディタをカスタマイズできる