こんにちは、mimiです。

この記事はSnow Monkey / unitone Advent Calendar 2022 – Adventar 22日目の記事です。

2022年はWordPressの新規案件を1本もやっていない私が何故今年ノコノコ手を挙げたかというと去年と違って枠が埋まらないというキタジマさんのツイートを拝見し、ただただ参加賞欲しさで手を挙げましたすみません。

マジで1年間ほとんどWordPressを触っていないので、前回のネタ(この時もピアス欲しさに書いているな)の続きで、Snow MonkeyのCSS変数調査2022年版をやってお茶を濁そうかと思ったのですが。

デモの魔物にネタを貰いました

今年の後半から縁あって、ウェブデザイナー志望の方にWordPressを専門学校で教える講師のお仕事をいただきまして。8月末からの短い間ですが、WordPressってなにそれおいしいの？状態の受講者さんにそれぞれ作りたいサイトをFigmaでデザイン起こしてWordPressで作ってもらう課題を行っています。

出来ればPHPの基礎も、という学校側のご要望だったので、PHPに触れ合うタイミングを何処かで捻り出さねばと頭を転がしたのですが、令和のWordPressのカスタマイズはブロックと追加CSSで、大体やりたいことができちゃうんですよね。基礎のき、はお伝えしたものの、WordPressの6割はPHPで出来ている感があんまり実感として持ってもらえないまま講義も後半を過ぎた頃。

既存のブロックにカスタムしたスタイルを追加する、というウェブデザイナーさんも興味が湧きそうでちょっとのコードで実現できる程よい課題をようやく見つけたので超簡単なデモプラグインを講義当日に30分ぐらいでわーっと書いてファイルの構成とざっくりのPHP側の処理の解説をし、CSSをちょっと書き換えて各々でアップロードして貰ってCSSが反映されているのを確認する、というのをやりました。

・・・否、やろうとしたんですが、本番サーバーでの動作テストをしていなかったせいで、予期せぬエラーでエディタ側にCSSが読み込まれず…！…え？！そ、そういえばローカル環境でしか試して無かった…！ばんじきゅうす。

まあ完全に講義の準備不足なのですが、ローカル環境では普通に動いた

//　前略
add_editor_style('../../plugins/my-custom-block-styles/editor_style.css');
// 後略

がinstaWPでも本番サーバーでも読み込んでくれなかったのでした。なんてこった。

プラグインはちゃんと読み込めて、register_block_styleも、フロント側のCSSもちゃんと読み込んでるのに何故。どうして。神様お願い。

1. add_editor_style() のおさらい

add_editor_style() | Function | WordPress Developer Resources

は add_theme_support('editor-styles'); とセットで使ってテーマディレクトリからの相対パスで指定したファイルをインラインCSSでとしてブロックエディタに読み込んでくれます。

Adds callback for custom TinyMCE editor stylesheets.
カスタムした TinyMCE エディタのスタイルシートのためのコールバックを追加します

という、懐かしさ漂う公式の説明書きからもわかるように、WordPress 3.0からある関数です。

Snow Monkey公式ブログでも紹介されていて、Snow Monkeyユーザーで My Snow Monkey プラグインを使ってスタイルを追加している勢には、たぶんお馴染み？の読み込み方法だと思います。

えーヤバいこのやり方できなくなっちゃったんだどうしようとパニックになり受講生さんにはごめん宿題にさせてとお願いし、大騒ぎして右往左往して検証した結果…別にこのやり方は今でも使えます。

別にこのやり方は今(WordPress 6.1.1)でも使えます（2回書いておく）。

えー。めっちゃ焦って My Snow Monkey 入れてるお客さんの本番サーバー見回ったわ。普通に動いてたわ。

デモしたinstaWPと本番サーバーでも後からもう一度動作確認してみたら普通に動きました。うそやん、と思って2回確かめた。えええ。なんか相対パスがサーバーと相性悪かったとかいうオチでもないのか。

なんならサイトエディタでも普通に動くし。うそん。

うーん…デモした時を思い返すと、プラグインの読み込まれる挙動が何やらおかしかったりしたので、準備は念入りにせよというデモの魔物からのお告げだったんだろうと思います。反省してます。

とはいえ、相対パスで書くこのやり方、ちょっと居心地が悪いなとは前から感じておりまして。確か、6.1な今は他にもいろいろ方法が出てきたよなあ、と思ってこの機会に調べ直すことにしてみました。

2. 相対パスとかインラインCSSはなんかちょっと居心地が悪いよね、というあなたには enqueue_block_editor_assets

Snow Monkeyも採用している enqueue_block_editor_assets です。
unitoneもこちらですね。

Snow Monkey本体ではWordPress5.8対応のSnow Monkey v15以降(2021年7月頃)からこちらに変更されています。詳しくはSnow Monkey v15 をリリースしました – WordPress テーマ Snow Monkey（※ サブスクリプションユーザー特典コンテンツです）をご覧ください。

enqueue_block_editor_assets | Hook | WordPress Developer Resources

Fires after block assets have been enqueued for the editing interface.
ブロックのアセットが編集インターフェースにエンキューされた後に実行

されるフックです。と言われてもなんのこっちゃという感じですが、実際の発火位置はココ。WordPress 5.0 から使えます。

WordPressのコアでSearch · enqueue_block_editor_assetsしたら分かるように、公式の歴代デフォルトテーマたちもクラシックテーマは全てこの方式になってます。

ほほう？公式ドキュメントはadd_editor_style （2022/12/21現在、ja.wordpress.orgのアンカーがぶっ壊れているので該当箇所にアンカー飛びませんけど…「エディタースタイルのエンキュー」の処に書かれています）のまま(原文も)なんですけどね。ダブスタじゃないか。PRのチャンスじゃないか？

2022/12/22 9:24 追記: 【訂正】すみませんココ大嘘でした、歴代のデフォルトテーマたちもこっちの書き方採用している箇所もあるけれど大本のエディター用のスタイルはadd_editor_style()で読み込んでます！
やっぱり公式としてはこっちを使うべし、というのは変わらないみたいです。

・・・というわけで、wp_enqueue_style関数を一緒に使って、プラグインから実行するならこんな感じで書くと動きます。

add_action(
    'enqueue_block_editor_assets',
    function() {
        wp_enqueue_style(
            'my-custom-block-styles-for-editor',
            plugin_dir_url(__FILE__) . 'editor-style.css',
            false,
            filemtime(plugin_dir_path(__FILE__) . 'editor-style.css')
        );
    }
);

これで、

<link rel="stylesheet" id="my-custom-block-styles-for-editor-css" href="https://example.com/wp-content/plugins/my-custom-block-styles/editor-style.css?ver=1671459730" media="all">

という感じで、インラインスタイルにもならず、シンプルにプラグイン内の該当CSSファイルが呼び出されます。ほっとしますね。

違いはフィルタリングされるかされないか

add_editor_styleとの違いのひとつは、.editor-styles-wrapper が勝手に付くか付かないか、ですが、もし必要だったら.editor-styles-wrapper付けてCSS書けば良いだけなので、依存ファイル指定もできるwp_enqueue_styleでの読み込みの方が今や何かと有り難い気がします。

という訳で、件のプラグインはこっちで書き直して、受講者さんには改めて翌週に自作プラグインからのカスタムを体験していただきました。

3. blockのスタイルならblock.jsonにお任せできる

ちょっと話がズレるというか、カスタムブロックな話になっちゃうんですけど、ブロックのスタイルを読み込むならばblock.jsonに指定するだけで読み込めます。

{
    "$schema": "https://json.schemastore.org/block.json",
    "apiVersion": 2,
    //中略
    "editorStyle": "file:./build/index.css"
}

という様に指定すると

<link rel="stylesheet" id="my-test-plugin-my-test-plugin-style-css" href="http://example.com/wp-content/plugins/my-test-plugin/build/style-index.css?ver=0.1.0" media="all">

こんな感じでwp-scripts（に含まれてるwebpack）がいい感じにしてくれて、読み込みます。

block.jsonからの相対パスか、wp_register_styleで読み込んでおいたハンドル名か、または混合した配列でも読み込めます。

この辺り詳しくはblock.json のメタデータ – Japanese Team – WordPress.org 日本語などを参照のこと。

Snow Monkey Blocksもblock.jsonでCSSをハンドル名のほうで読み込んでいますね。

が、あくまでこれはblock.jsonだけで、theme.jsonではないです。

番外編（だけどいずれ本筋になるかも？）：theme.jsonを上書きする（WordPress 6.1から）

最後はCSSファイルを読み込ませる方法ではないのですが、theme.jsonを上書きできるフックが6.1から用意されたので、そちらでテーマのスタイルをカスタムするという方法も試してみました。

例えばSnow Monkey(Version: 18.2.0時点)だとコアのカバーブロックにspacing（余白）が効いていないのですが、こんな感じで子テーマかMy Snow Monkeyから書くと、

function filter_theme_json_default( $theme_json ) {
    $new_data = array(
        'version' => 2,
        'settings' => array(
            'blocks'  => array(
                'core/cover' => array(
                    'spacing' => array(
                        'padding' => true
                    )
                )
            )
        )
    );
    return $theme_json->update_with($new_data);
}
add_filter( 'wp_theme_json_data_default', 'filter_theme_json_default' );

カバーブロックに余白調整のUIが表示されるようになります。

（ただしSnow Monkeyは計算された余白がウリの一つなので、むやみにこの辺りを有効化しないほうがいいとは思いますが）

まだ検証しきれてないのですが、フィルターフックの構造上、theme.jsonで設定できることは全て上書きできるはず。です（ブロックがサポートしていない機能は有効化しても使えません）。

色々できちゃいますね。うふふ。

もちろん、テーマ自作するならtheme.json直接書いたほうが早いと思いますが、プラグインからでも好きにできるのは色々とアレですよね。

言い訳程度に My Snow Monkey Starter Kit を更新しました

というわけで結構だらだら書いた割には、あんまりSnow Monkeyなネタになってない気配がするのですが、全然更新していないMy Snow Monkey Starter Kitを少し更新しました。

https://github.com/miminari/my-snow-monkey-starter/

• エディタスタイルの読み込み方を一応、enqueue_block_editor_assetsへ変更
• カラーパレットのフィルターをsnow_monkey_editor_color_paletteからwp_theme_json_data_themeに変更

すごい久しぶりに動かしたら大体普通に動いた（のにちょっと驚いた）んだけども、今見ると書き方が色々とザワザワするし、phpcs周りが変なのでまた時間作ってお直ししたいな…。案件何かやらねば（鶏が卵的な）…来年はWordPress案件あるかなあ？

明日 23日のSnow Monkey / unitone Advent Calendar 2022 – Adventar はさくら🌸エンジニア・シングルマザーさんです、お楽しみに！