[read]

【お使いの Snow Monkey のバージョン】27.3.5
【お使いの Snow Monkey Blocks のバージョン】 22.2.2
【お使いの Snow Monkey Editor のバージョン】10.0.5
【お使いの PHP のバージョン】8.2.22
【お使いのブラウザ】Google Chrome
【当該サイトのURL】

### 発生している問題

お世話になります。
本日のアップデートより、エディター画面用cssが反映されなくなりました。

なお、ここにエディター画面用cssを反映させているMy Snow monkeyのコードを記述したところ
「このサイトへのリクエストで潜在的に安全でない操作が検出されました。このサービスへのアクセスは制限されています。(HTTP 応答コード 403)」となってしまい、投稿できないようです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

なお、ここにエディター画面用cssを反映させているMy Snow monkeyのコードを記述したところ
「このサイトへのリクエストで潜在的に安全でない操作が検出されました。このサービスへのアクセスは制限されています。(HTTP 応答コード 403)」となってしまい、投稿できないようです。

Notion や Gist 等で共有してもらうことはできますか？

♥ 3

いいねをした人:

[read]

お世話になります。ご返信ありがとうございます。

以下のページに記載されているものと同じです。

Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ！プラグインの雛形をダウンロードできるようにしました

子テーマの問題点 一般的に、テーマの設定では対応できないカスタマイズについては、子テーマを用意し、コードを書い…

snow-monkey.2inc.org

以下の部分の下にある「add_action」から始まるコードです。
// エディター用の CSS 読み込み
//クラシックエディターとブロックエディターの両方に CSS が読み込まれます。
// ブロックエディターの場合は自動的に .editor-styles-wrapper でラップされます。
// 依存関係は指定できません。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

確かに反映されなくなってますね…。6.7 で挙動が変わったのかもしれません。

下記のように変更してみるとどうでしょうか？

add_action(
	'enqueue_block_assets', // フロントでもエディターでも実行される
	function() {
		// エディター以外では何もせずに終了させる
		if ( ! is_admin() ) {
			return;
		}

		// CSS を読み込み
		wp_enqueue_style(
			'my-snow-monkey',
			untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( plugin_dir_path( __FILE__ ) )
		);
	},
	11
);

♥ 1

いいねをした人:

[read]

お世話になります。

ご案内いただいたコードに変更し、ブラウザのキャッシュを削除しましたが、cssが読み込まれないようです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

下記のコードに変更して、「HTML ソース上」に「11111」と「22222」が出力されるか確認してください。

add_action(
	'enqueue_block_assets', // フロントでもエディターでも実行される
	function() {
		var_dump(11111);
		// エディター以外では何もせずに終了させる
		if ( ! is_admin() ) {
			return;
		}

		// CSS を読み込み
		var_dump(22222);
		wp_enqueue_style(
			'my-snow-monkey',
			untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( plugin_dir_path( __FILE__ ) )
		);
	},
	11
);

また、下記についても確認をお願いします。

– 読み込もうとしている CSS のパスはあっていますか？
– ブラウザのデベロッパーツールのネットワークタブで、読み込もうとしている CSS がロードされているか・404になっていないか確認してください。
– wp_enqueue_style() のハンドル名の指定を my-snow-monkey-editor に変更したらどうなりますか？
– wp_enqueue_style() の依存関係の指定を [] に変更したらどうなりますか？

♥ 1

いいねをした人:

[read]

お世話になります。ご対応ありがとうございます。

公開画面のソースには、
int(11111)が表示されました。

編集画面のソースには、
int(11111)
int(22222)
が表示されました。

編集画面で、正しいパスでスタイルが読み込まれていました。
<link rel=”stylesheet” id=”my-snow-monkey-css” href=”https://XXX/wp-content/plugins/my-snow-monkey/style.css?ver=XXX” media=”all”>

しかし、!important;にしていますがCSSは適用されていません・・・

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

ありがとうございます。もう var_dump() は消していただいて大丈夫です。

11111 も 22222 も表示されたということはちゃんとフックは通ってるみたいですね…。ブロックエディターは iframe バージョン（標準）と非 iframe バージョン（後方互換性のために残してある）の2つのバージョンがあって、6.7 からは非 iframe で表示される条件が狭くなりました。もし今エディターが ifarme で表示されているのであれば、その iframe の中で CSS が読み込まれている必要があります。enqueue_block_assets + wp_enqueue_style の場合は普通は正しく読み込まれるはずですが…。

エディターが iframe なのかそうでないのか、iframe の場合は iframe の中で my-snow-monkey/style.css が読み込まれているか確認してみてください。

読み込まれていることが確認できた場合、指定したセレクタに CSS が適用されているか確認してみてください（見た目ではなくデベロッパーツールで確認して、他の CSS で上書きされていないか確認してください）。

♥ 1

いいねをした人:

[read]

迅速なご対応をありがとうございます。

カスタムCSSと編集画面用CSSのどちらでもimportantしていたCSSが、6.7からカスタムCSSが優先で上書きされてしまったのが原因だったようです。カスタムCSSのほうのimportantを外したところ解決いたしました。

ボックス全体につけたリンクを、編集画面では全体にリンクしないようにしていましたが、
リンクにdisplay:inline-blockがついたようで、カスタムCSSでdisplay:blockにする必要がありました。

その他に、Snow Monkeyのフレックスボックスを使て画像を並べたところも、画像が縮小（幅100%にならない）になっていましたが、ここはフレックスボックスを使わない事で自己解決しました。

♥ 1

いいねをした人:

[投稿者]

投稿