- このトピックには7件の返信、3人の参加者があり、最後に
により2年、 4ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】16.5.4
【お使いの Snow Monkey Blocks のバージョン】15.0.6
【お使いの Snow Monkey Editor のバージョン】 7.0.1
【お使いのブラウザ】Chrome【当該サイトのURL】
ローカル環境### 実現したいこと
ページごとに独自のCSSを当てるため、my-snow-monkey.php内にて、フィルターフックbody_classを利用して、bodyタグにslug-{スラッグ名}といったクラスを追加しているのですが、Gutenbergエディター内のbodyタグにはこの方法ではslug-{スラッグ名}クラスが追加されないため、結果的にslug-{スラッグ名}クラス経由で追加したスタイルは、エディター内には反映されません。そこでslug-{スラッグ名}クラスをエディター内にも追加し、エディターにもスタイルを反映させたいと考えております。### 試したこと
ネットにて情報収集を行ったものの、調べ方が悪いせいか上記設定について言及している記事を見つけられませんでした。お手数お掛けし恐れ入りますが、ご教示いただけますと幸いです。何卒宜しくお願い申し上げます。いいねをした人: 居ませんOlein_jp様
ご返信いただき誠にありがとうございます。
ご教示いただきましたadmin_body_classフックを利用することでエディター内のbodyタグにもページごとで固有のslug-{スラッグ名}クラスを追加することができました。
ただし、追加はできたもののslug-{スラッグ名}クラスを経由して指定したスタイルはやはりエディターには反映されておりませんでした。よく考えてみると、現状CSSファイル内でslug-{スラッグ名}クラスを経由してスタイルを設定する際、以下のようにセレクタを組んでいるのですが、body.slug-{スラッグ}{ ... }エディター側では、
editor-styles-wrapperクラスが自動的に挿入されますので、上記のセレクタは以下のように自動的に置換されるかと思います。.editor-styles-wrapper.slug-{スラッグ}{ ... }ただし、
slug-{スラッグ名}クラスはbodyタグのクラスであるため、.editor-styles-wrapper.slug-{スラッグ}というセレクタは存在せず、結果的にslug-{スラッグ名}クラスを経由して指定したスタイルはエディタには反映されていないのかと思います。そのため解決策として、エディター側ではbodyタグに
slug-{スラッグ名}クラスを追加するのではなく、editor-styles-wrapperクラスを持つdivタグにslug-{スラッグ名}クラスを追加することで、上記のセレクタの置換が行われたとしても、エディタ側にフロントと同じスタイルが反映されるようにしようかと考えておりますが、調べたところなかなかこの手の情報がヒットせず、未だ解決に至っておりません。どなたか「
editor-styles-wrapperクラスを持つdivタグに任意のクラス（slug-{スラッグ名}クラスetc）を追加する方法」をご存知の方はいらっしゃいますでしょうか？お手数お掛けし大変恐れ入りますが、ご教示いただけますと幸いです。
何卒宜しくお願い申し上げます。いいねをした人: 居ません.editor-styles-wrapperにクラスを追加するオフィシャルな方法は無いと思います。body.slug-{スラッグ}ではなく.slug-{スラッグ}にしたら良いのではと思ったのですがどうですかね？どうしても
body.slug-{スラッグ}にする必要があるのであれば、追加 CSS やadd_editor_style()ではなくて、enqueue_block_editor_assetsでwp_enqueue_style()すればクラスの置換が行われずに読み込めますよ。いいねをした人: 居ませんキタジマ タカシ様
ご教示いただき誠にありがとうございます。
.editor-styles-wrapperにクラスを追加するオフィシャルな方法は無いと思います。そうなのですね。承知致しました。
body.slug-{スラッグ}ではなく.slug-{スラッグ}にしたら良いのではと思ったのですがどうですかね？そうですね。
bodyを必ずしも入れなければいけないというわけではないのですが、セレクタを.slug-{スラッグ}のみにした場合、以下のように置換がなされます。.editor-styles-wrapper .slug-{スラッグ}{ ... }ただし、
.slug-{スラッグ}は現状bodyタグのクラスであり、エディター内のHTML構造上.editor-styles-wrapperはbodyタグの内側に含有されておりますので、.editor-styles-wrapper .slug-{スラッグ}というセレクタは存在せず、やはりこれでも結果的にエディターにフロントのスタイルは反映されません。どうしても
body.slug-{スラッグ}にする必要があるのであれば、追加 CSS やadd_editor_style()ではなくて、enqueue_block_editor_assetsでwp_enqueue_style()すればクラスの置換が行われずに読み込めますよ。ありがとうございます。確かにご教示いただいたこの方法でクラスの置換が行われなくなるため、
.editor-styles-wrapperセレクタを意識せずにCSSを記述しても、フロント側同様のスタイルをそのままエディターに反映させられるようになるのですが、.editor-styles-wrapperの自動置換が無くなることで、今度は管理画面上のブロックエディター外の部分にもスタイルが反映されるようになるため、この方法を少し躊躇っていました。
その上で、やはり現状「ページごとに個別のCSSをフロントとエディタ側両方に同様に反映させる」ためにはご教示いただいた上記の方法しかなさそうでしょうか？いいねをした人: 居ませんそうですね。bodyを必ずしも入れなければいけないというわけではないのですが、セレクタを.slug-{スラッグ}のみにした場合、以下のように置換がなされます。
あーそうか！確かにそうですね、失礼しました。
確かにご教示いただいたこの方法でクラスの置換が行われなくなるため、.editor-styles-wrapperセレクタを意識せずにCSSを記述しても、フロント側同様のスタイルをそのままエディターに反映させられるようになるのですが、.editor-styles-wrapperの自動置換が無くなることで、今度は管理画面上のブロックエディター外の部分にもスタイルが反映されるようになるため、この方法を少し躊躇っていました。
もしかしたらもっと上手い方法があるかもですが、僕は
add_editor_style()・enqueue_block_editor_assetsで読み込む用の CSS をそれぞれ用意しておいて、適用させたい箇所によって書き分けていますねー。いいねをした人:キタジマ タカシ様
ご返信いただき誠にありがとうございます。
現状、管理運用の手間を減らすためエディタ用とフロント用とを分けずにセレクタを指定しており、かつ最終的に読み込むCSSファイルは１つまとめております。その上でいただきましたご意見を踏まえ、さらに検討した結果、add_editor_style()、enqueue_block_editor_assetsフックの両方で同じ１つのCSSファイルを読み込むことにいたしました。
これによって、CSSファイル側では.editor-styles-wrapperクラスが挿入されることなど特段何も考えずにセレクタ指定をしても、フロント・エディタ側両方で同様のスタイルが反映されるようになりました。
2度同じファイルを読み込むという悪影響もございますが、この方法ではフロントへの表示には大きな影響がなく、影響はエディタ画面が表示されるときだけなので、CSS作成時の手間の軽減とそれによって生じる悪影響・デメリットとを天秤にかけ、手間軽減のメリットの方が大きいと考え一旦この方法を採用しました。
備忘録として残しておきます。お力添えいただき誠にありがとうございました。大変助かりました。
重ねてお礼申し上げます。
トピック閉じておきます。いいねをした人:
- トピック「bodyタグに追加したクラスを、エディター内のbodyタグにも追加したい」には新しい返信をつけることはできません。