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

タナビーの高梨です。

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

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

今回はブロックエディタ起動時にwp_localize_scriptで渡す値を変更できるフィルターフック
👉cocoon_gutenberg_param_value
です

フックの概要

条件

ブロックエディタ起動時に無条件で発火します。

使いどころ

wp_localize_script() を利用すると、PHPからJavaScriptへ以下のように値を渡すことができます。

wp_localize_script( 'script-handle', 'ObjectName', $params );

このときの$params にあたる部分が、本フックで変更可能な値です。

ソースを見ると、テーマのデフォルトでは

array(
    'background' => true,
    'title'      => false,
);

を渡しています。

正直なところ、通常利用では変更する理由がほとんど思いつきません。

しかし、次のようなケースでは活用の余地があるかもしれません。

・ブロックエディタ側の挙動を独自に制御したい場合
・Cocoon標準機能のON/OFFを強制的に切り替えたい場合
・独自拡張スクリプトに追加パラメータを渡したい場合

javascript側との整合性を取りながら設定する必要があるため、テーマデフォルトの値を変更したり削除するのは慎重にすべきです。

下記の記事で紹介したcocoon_gutenberg_param_nameではwp_localize_script()に渡す変数名を編集することができるので合わせてご確認ください。

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

cocoonフック調査～cocoon_gutenberg_param_nameの使い方と活用例は、WordPressのテーマ「cocoon」で提供されているフック。使いどころ、使い方等調査しました。

引数

$value：（array）wp_localize_script()に渡す値

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

$value = apply_filters( 'cocoon_gutenberg_param_value', array(
    'background' => true,
    'title'      => false,
) );

カスタマイズコード例

以下は、title の値を強制的に true に変更する例です。

function customize_cocoon_gutenberg_param_value ( $value ) {

    $value['title'] = true;

    return $value;

}
add_filter('cocoon_gutenberg_param_value', 'customize_cocoon_gutenberg_param_value' );

注意点

・JS側の参照コードも必ず整合性を取って変更する必要がある
・Cocoon本体や将来的なアップデートとの整合性にも注意が必要
・無闇に変更すると既存機能が動作しなくなる可能性があるかも

まとめ

・cocoon_gutenberg_param_valueは、ブロックエディタ用スクリプトに渡す値を変更できるフィルターフック
・利用シーンは限定的だが、JavaScript設計を厳密にコントロールしたい場合に活用できるかも