[torics]

【Snow Monkey のバージョン】v12.x.x
【Snow Monkey Blocks のバージョン】v10.2.1
【Snow Monkey Editor のバージョン】v4.0.1
【お使いのブラウザ】Chrome

### 目的

ブロックエディタで編集している際、多くCSSを読み込んでいるためフロントとの表示の乖離が激しくなってしまっています。

こちらで作成したブロックを組み替えることで、非技術者でも簡易的な更新を行うことができるようにしたいため、編集画面とフロントを可能な限り見た目を近づけておきたいのです。

### 問題点

フロントと同様のCSSをMy Snow Monkeyより読み込むようにして、ブロックエディタ上であればかなり近い見た目になっています。しかし、上記目的のため、複雑な構造のブロックも事前に作っておきたく、クラシックブロックを利用する必要があると考えています。

gutenbergやWordpress本体の問題でもあるため、本フォーラムが適していないかもしれませんが、SnowMonky側も新旧エディタでCSSの読み込みを分けているようなので、その点でも質問したく投稿いたしました。（不適切であればスルーして頂ければ…！）

下記の方法で、編集画面のheadタグにはCSSのリンクタグが入ってくれたのは確認したのですが、クラシックブロックが編集画面内で生成するiframeの中のheadタグに入れ込んでくれなければスタイルが全く適用されなく、フロントとは全然違って、技術者でもやりづらい感じになってしまっています…

### 試したパターン

１）

add_action(
	'after_setup_theme',
	function() {
		wp_enqueue_style( 'editor-style1', MY_SNOW_MONKEY_URL . '/style.css' );
		【以下複数CSS取り込み】
	}

２）

add_action(
	'after_setup_theme',
	function() {
		add_theme_support( 'editor-styles' );
		add_editor_style( MY_SNOW_MONKEY_URL . '/style.css' );
		【以下複数CSS取り込み】
	}
);

３）

add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style( 'editor-css1', MY_SNOW_MONKEY_URL . '/style.css' );
	【以下複数CSS取り込み】
} );

HTMLをハックしてiflameのヘッダを書き換えるのはスマートではないな、と思いMy Snow Monkey内で終わらせたく思ってるのですが、方法があればご教授ください。

宜しくお願い致します。

♥ 0

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

[まーちゅう]

複雑な構造のブロックを事前に作っておきたいから、クラシックブロックを使用するというのがよくわかりませんが、もしクラシックブロックを使用する目的が、通常のブロックでは表現できない複雑なHTMLを使用したいというのであれば、カスタムHTMLブロックを使用してみてはどうでしょうか？

♥ 1

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

[キタジマ タカシ]

enqueue_block_editor_assets で読み込んだ CSS はブロックエディターにしか適用されません。add_editor_style で読み込んだ CSS はクラシックエディターにもブロックエディターにも適用されます（ただし、依存関係の指定はできません）。

ということで、２）のやり方で読み込まれているのではと思うのですがどうでしょうか。「head タグの中に…」とのことですが、たしか link タグではなくて動的に style タグを生成する方式ではなかったかな？と思うので、読み込まれているかどうかの確認の前に、入力した HTML と CSS が本当にマッチしているか（クラス名が間違っていないか、セレクタが間違っていないか等）を確認したほうが良いかもしれません。

あと、僕もまーちゅうさんが書かれているのと同じ意見で、複雑な構造であればクラシックブロックのほうが運用が難しいのではと思います。独自のブロックをつくったり、いっそカスタムフィールドやショートコードを使ったほうが良いのではと思います。

♥ 1

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

[torics]

まーちゅうさん

ありがとうございます。

ブロックエディタに慣れておらず、”カスタムHTMLブロック”を使用するという認識がそもそもありませんでした。おっしゃるように「複雑なHTML」を使用したい、ということです。

 

キタジマ タカシさん

ありがとうございます。

> 動的に style タグを生成する方式ではなかったかな？と思うので
styleが大量にあるのはわかっていたのですが、クラシックブロックを作るための生成物と思って中身を検証していませんでした。スタイルがあたっていないのか、styleになったため詳細度がブレたのか見てみる必要がありますね…

運用が自分よりさらにWPに疎い（HTMLを少しイジれる程度）の方になりそうなので、独自ブロックは難しそうです。ショートコードはプラグインを利用して簡易に操れる方法を模索中です。

 

お二人からの複数のご提案を検証してまたレスいたします。

♥ 0

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

[torics]

アドバイスをもとに検証しましたが、結果としてはうまくいきませんでした。

複雑な構造のブロックを扱うには、確かにカスタムHTMLブロックのほうが扱いやすかったので、こちらにしようと思いました。

しかし、カスタムHTMLブロック（のプレビュー表示）も、編集中の画面ではiframeで表現されているので、ここにCSSを読み込んでくれないと、デザインをフロントと一致させたい、という目標は達成できません。

検証用に単純なCSSとスタイルを用意し（※例参照）、固定ページの編集中の画面のソースをみましたが、私の挙げたどの方法でも、トップのlinkには読み込まれても、iframe内のヘッダのlinkやstyleタグには読み込まれておらず、結果、素の状態で表示されているといった見た目でした。

※ 例

<ul><li class="sample">TEST</li></ul> <=> editor.css :  ul li.sample{ font-weight: bold; }
<img src="XXX.JPG" /> <=> editor.css :  img{ width: 100px; }

おそらく、HTMLブロックやクラシックブロックの編集画面中にはCSSを適用できない仕様なのかな、といった感触です。
この使い勝手のためにブロック自体を新しく作るのもコストが高いので、ショートコードや、別の回避策を考えたいと思います。

うまく行ったら書き込みたいので、もう少し開けておきますが、かなりSnowMonkyから外れてしまったので、数日でクローズさせていただきます。ありがとうございました。

♥ 1

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

[投稿者]

投稿