WPの独自ブロックが設定されている時のみCSSやJSをフロントに表示する方法

Cat WEBサイト構築Tag , by cubismer

いろいろ調べて時間を食いましたがどうにかある程度まで把握できたのでメモとして。
なるべく正規の方法を調べて書いているつもりですが、ドキュメントの読み逃しや勘違い、動作の確認ミスなどがあるかもしれませんのでその点は留意ください。

前提と目標

  • WordPressでwordpress/create-blockによる独自ブロックを作成
  • 独自ブロックに専用のCSSとJSを作成
  • 独自ブロックが配置された時のみ専用CSSとJSを出力させる

対応策

CSSとJSに分けて記載します。
両方ともほぼ同じ方法で実現はできるのですが、少し違う方法で記載したいと思いますので。

大前提

上記で書かれているように、以下のようなshould_load_separate_core_block_assetsを設定することが大前提です。
この記述によって、該当のブロックが設定されている時のみファイルを出力する機能が有効になります。


add_filter( 'should_load_separate_core_block_assets', '__return_true' );

付随して発生する問題

should_load_separate_core_block_assetsを使うと問題が起きる可能性がありますが、問題の詳細と対応策含めて上記記事で紹介されていますので参照が必要です。

なお、一応file_get_contents()ではなくWP_Filesystemを使った形に書き換えて使わせていただくのが良いかなとは思います。

JSの出力

  1. プラグインディレクトリ内に任意のディレクトリを作成しJSファイルを入れる(仮に/js/my-script.jsとする)
  2. プラグイン用PHPファイルにwp_register_script()でmy-script.jsを登録
  3. block.jsonのscriptを設定する

手順は上記で、詳細は下記になります。


// register_block_type_from_metadata( __DIR__ );などを書いているプラグイン用PHPファイルを想定
function my_block_init() {
  if ( !is_admin() ) {
    // 第一引数のmy-scriptがハンドルとなり、このハンドルをblock.jsonでも記載する
    wp_register_script( 'my-script',  plugin_dir_url(__FILE__) . 'js/script.js',[] );
  }
}
add_action( 'init', ' my_block_init' );


// ここまで省略
  "textdomain": "my-block",
  "editorScript": "file:./build/index.js",
  "editorStyle": "file:./build/index.css",
  "script": "my-script"
}

is_admin()の必要性

調査不足なのか設定が間違っているのか把握できていないのですが、以下のような問題が発生しました。

  • フロント側は独自ブロックを設定したページにだけファイルが出力される
  • 管理画面側は独自ブロックの有無に関係なくファイルが出力される

上記の問題を解決するために、is_admin()を使っています。

ただ、以下に記載さているようにWP5.9からはviewScriptが使えるようになるため、この問題はblock.jsonのみで解決可能になるはずです。

出力は外部ファイルの読み込み

成功すればfooterの閉じタグの下あたりに、以下のようなscriptタグのsrcでファイルを読み込む形で出力されると思います。


<script src='https://example.com/wp-content/plugins/my-block/js/my-script.js?ver=5.8.1' id='my-script-js'></script>

調べた範囲では、残念ながらインラインで出力する方法がわからずで、できるのかできないのかも現状不明です。

本来の趣旨とは違いますが、独自ブロックの設定に関して以下のような条件を伴っているのであれば、独自ブロックの有無以外をトリガーにしてインラインで出力させることは可能です。

特定のページにしか独自ブロックを設定しない
is_page()やis_single()などで出力を操作すれば限定可能です。

出力に関してはテンプレートファイルにベタ書きでもなんでも良いので、取れる方法はそれなりに多くあると思います。

独自ブロックを設定したページには別のenqueueされたJSファイルが必ず存在する
独自ブロックを設定したページには別のenqueueされたJSファイルが必ず存在し、かつ、独自ブロックを設定しないページにはこのJSファイルが出力されないのであれば、wp_localize_script()を使用して対応できます。

CSSの出力

  1. プラグイン内のsrcディレクトリのstyle.scssを用いる
  2. block.jsonのstyleを設定する

詳細は下記。


// ここまで省略
  "textdomain": "my-block",
  "editorScript": "file:./build/index.js",
  "editorStyle": "file:./build/index.css",
  "style": "file:./build/style-index.css"
}

CSSも前出のJSと同様の方法で出力できるのですが、srcディレクトリに最初から入っているstyle.scssの中に書くだけで、独自ブロックを設定したページのfooter閉じタグ付近にインラインで出力してくれます。

前出の方法を用いる場合は、srcのstyle.scssは残したままstyleの値を書き換えることで実現できますが、JSと同様にインラインにはなりません。

なお、srcディレクトリのstyle.scssファイルを削除してからbuildを行うとエラーがでるため、少なくともデフォルトではstyle.scssファイルは削除できない模様です。
ただしblock.jsonのstyleに記載されているfile:./build/style-index.cssをJSと同様にハンドルに書き換えるか、styleの項目自体を削除すれば、build時にファイルが出力されなくなるため、srcディレクトリにstyle.scssを残していても問題はないと思われます。

style-index.cssに関して

筆者のメモ目的の記述ですが、style-index.cssと書くのは上記にあるようにデフォルト値だからですが、仮に"style":"file:./build/style.css"と書いても動作はします。
この場合はbuildディレクトリにstyle.cssではなくstyle-index.cssとして出力されるため、出力後だけ見ると特に変化はありませんでした。

参考資料

なお、今回は以下のようにTwitterにて助言いただけたのが大きかったので、末尾にはなりますが感謝を。
こちらでwp_register_script()のことを指摘いただかなければ、諦めていたか相当な遠回りをしていたと思います。

結び

基本的には設定を変更すればいろいろと自由かつ便利に制作できるとは思いますが、簡易に変更する方法や正規の変更方法がわかりませんでした。
そのため、「これはこういうものだ」という認識で制限がある前提で検討を進めています。

工夫すればどうにかなることは多いのですが、本来用意された正規の手法があるならば、まず正規の手法を使うことで多少なりとも安定した動作を保証できると思いますし、知識としても必須だと思いますし、制限を甘受してでも意義はあるかなと。

3人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄