プラグインを自作したときにメインとなるスタイルを読み込ませる時どうしてますか？
できた！と思っても、うまく適用されなかったり、ブロックエディター側に反映されなかったり、適用されてるけど何だかモヤモヤ．．ということありませんか？
ようやく？私もその雲や霧が晴れて、これでしょ！と思えるやり方が見つかり、このサイトで配布している「Hima Art Utility」と「HA Alt Childtheme 」への措置が終わったので、この辺でメモを残しておこうと思います。
「wp_enqueue_scripts」フックは必要ない？
古くから（ブロックエディターが登場するはるか前から）、スタイルシートのエンキュー（読み込ませることね）をしたら、「wp_enqueue_script」へフックさせるのが主流というか当然の作法でした。
コードを例に挙げると以下のような形です。
function sample_enqueue_style_init(){
wp_enqueue_style(.......)
}
add_action('wp_enqueue_scripts','sample_enqueue_style_init');でもこれ、ブロックエディター側（特にタブレット・モバイルプレビュー）には反映されないんですよね。
そして私と同じように古くからWordPressを使っている方ならお分かりかと思いますが、ブロックエディターに反映させるのに、editor-styleを適用してごにょごにょ．．というのをしようにも、プラグインではとってもやりにくかったんです。さらに、どこかのバージョンでモバイル・タブレットプレビューがfigure&iframeタグに内包されるようになってさらに混沌としてて、結構悩みの種でした。
しかし．．．これを解消するために画期的なフックが登場しました。
それが「enqueue_block_assets」というフックです。
何が凄いかというと、これ1つで、フロントエンドとブロックエディター（タブレット・モバイルプレビュー含む）両方に確実に適用してくれるんです。
使い方は簡単で、今まで「wp_enqueue_script」にしていたフックを「enqueue_block_assets」に変えるだけ。
これでブロック側に何だかスタイルが当たらんなぁは即時解決できます。
ただ何点か注意点があります。それは、
- 両方にスタイルが当たる＝ブロック側だけに適用させるためのスタイルがフロントにも出力されてしまうこと
- 「wp_enqueue_scripts」とは別のユーザー定義関数で「enqueue_block_assets」フックを使用すると、当然ながら重複してスタイルが出力されてしまうこと
- 「wp_enqueue_scripts」と「enqueue_block_assets」では微妙に読み込み位置が変わるので、スタイルが適用されない場合があること
です。
1は、スタイルシートを、両方に適用させるものとブロックエディター側だけに適用させるものを分けることで回避できます。
例えば、両方に適用させるファイルを「all-style.css」、エディター側だけに適用させるファイルを「block-style.css」とした場合には、以下のように記述すれば大丈夫です。
//両方にスタイルを適用させる
function sample_all_style_init(){
wp_enqueue_style('all-style'.....)
}
add_action('enqueue_block_assets','sample_all_style_init');
//ブロックエディターのみにスタイルを適用させる
function sample_block_style_init(){
if(is_admin()){
wp_enqueue_style('block-style'.....)
}
}
add_action('enqueue_block_assets','sample_block_style_init');もうお分かりですね。ブロックエディターのみに適用させるものは、is_admin()という条件分岐を使って、管理画面側だったら．．というのを追加してやればいいんです。
次に、2でやらかしがちなのが、時代の変遷に合わせて試行錯誤してきた方でしょう。
うまくいかないなぁ．．と言いながら、同じスタイルシートに対して別のユーザー定義関数を作ってそれぞれに「wp_enqueue_scripts」と「enqueue_block_assets」を使ってしまう、または、1つのユーザー定義関数に対して同時に両方のフックを適用させてしまうという方法のいずれかで回避できたと思ってしまうパターンです。
幸い後者の場合は、「wp_enqueue_style」でつかむハンドルが同じなので、基本先にフックさせた方が適用されるっぽいので重複は回避されるものの、適用されたようなされなかったような．．という状態に陥ることがあります。
そこで、「そうか、ハンドルを別（つまりはユーザー定義関数を別）にすれば、両方適用されるな！」とやってしまうと、当然同じスタイルが2回読み込まれることになるので、特にフロント側には重複してスタイルが出力されてしまうんです。これは多分適用された時点で「よし！」となってしまうので気づかない方も多いと思いますが、出力されるHTMLソースを見れば一目瞭然です。
なので、思い当たる節がある方は、「enqueue_block_assets」だけで、かつ同一のスタイルシートに対して1度だけエンキューとフックがされているかを確認しましょう。
3については、「enqueue_block_assets」の方が順序的に早いので、優先度を「9999」なりにしてやれば、「wp_enqueue_style」とほど近い場所へ移せますから、後は調整ですね。
「enqueue_block_assets」については以下を参照ください。
追加のスタイルはスタイルシートに追記する必要はない？
続いて、スタイルの追加方法について。まあ、スタイルシートが正常に読み込まれていれば、そこへガンガンコードを追加すればいいと言えばいいのですが、もっと効率的な方法があるんです。
それが、「wp_add_inline_style」という関数です。この関数は、エンキューされているスタイルシートのハンドルに対して、インライン（コードをそのまま）でHTML上にスタイルとして出力して適用してくれる優れもの関数で、結構古くからある関数です。
前項で両方に適用する「all-style」というハンドルでエンキューしたスタイルシートに「wp_add_inline_style」を使ってスタイルコードを追加する場合のコード例がこちら。
function sample_add_inline_style_init(){
$custom_css = 'スタイルコード';
wp_add_inline_style('all-style',$custom_css);
}
add_action('wp_enqueue_sctipts','sample_add_inline_style_init');追加後にHTMLをみると、「all-style-inline-css」というIDを持つスタイルタグが出力された下に、入力したスタイルコードが出力されている（つまりはスタイルとして適用されている）ことが確認できます。
これを各所必要な分だけユーザー定義関数を変えて追加すれば、スタイルシートに長いコードを書して探すのが大変になることもなく、さらには、PHPなので変数を渡して出力することも簡単にできて便利です。
ただ、これだとフロントエンド側にしか適用されないので、以下のようにしてブロックエディター側にも適用させてやれば、元のスタイルシートに対して使った「enqueue_block_assets」と同じことになります。
function sample_add_inline_style_init(){
$custom_css = 'スタイルコード';
wp_add_inline_style('all-style',$custom_css);
wp_add_inline_style('wp-edit-blocks',$custom_css);
}
add_action( 'init', 'sample_add_inline_style_init');
add_action('wp_enqueue_sctipts','sample_add_inline_style_init');もちろん、ブロックエディター側だけに適用させたかったら、「all-style」ハンドルに適用させている青字の部分を抜いて、以下のようにしてやればOKです。
function sample_add_inline_style_init(){
$custom_css = 'スタイルコード';
wp_add_inline_style('wp-edit-blocks',$custom_css);
}
add_action( 'init', 'sample_add_inline_style_init');「wp_add_inline_style」については以下を確認ください。
また「wp_add_inline_style」に関して過去に公開したページがありますのでついでにどうぞ。
以上、簡単でしたが、このからくりが分かると、今までいろいろ試行錯誤してたの何だったの？ってなりますよ！！
コメントを残す