サイト内検索
ブロックエディターのスタイルに影響する擬似要素の修正 | 開発者向けフォーラム | Cocoon フォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。
また、有用な返信があった場合は「いいね！」リンクもご活用ください。返信者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。
Topic starter2020年8月16日 21:49
の問題が解決してから新たにトピックを立てようとしていた内容なのですが、
見出しh2の下線の横線が、文字の中央に入り読みにくくなった。
にて先に修正が入ったため、合わせてトピックを立てておきます。
少なくとも
- ほんわかライトニング
- カラフルライン
- Hygiene
- m-系
- Simple系
- ミックス系
- サムライブルー系
- Bizarre-food系
- おでかけ系
- ドット系
以上のスキンでも同様の問題が確認されています。
WordPress5.5では各ブロックの外側にあるタグの擬似要素（after）を用い、ブロックの
- 追加
- 選択
- 移動
などの動作をデザインしているからです。
擬似要素について、
- ブロックエディター側
- テーマ側
どちらのスタイルに寄せるかで修正方法は異なりますが、テーマ側のスタイルに寄せるのであれば、ブロックの動作を邪魔しないよう対策する必要があります。
わいひら 件のいいね！
2020年8月17日 01:21
ローカルのテストサイトで、投稿画面で見出し（ｈ1～ｈ6まで）のデザインがどうなるのか、ロコさんのリストにあったスキンに切り替えてみてみたら、やはり、ちょっと表示がおかしいスキンがあるみたいです。
あまりじっくり見た訳ではないのですが、×印は、明らかに要修正、△は、要検討、〇は、まあまあ、そのままでもイケそうな感じだったような気がします。（大雑把にしか見ていないのですが・・）
いずれにしても、個々のスキンごとに対応するとなると、ちょっと、これは、大変そうですね。
ほんわかライトニング ×
カラフルライン △
Hygiene 〇
m-系 〇
Simple系 ×
ミックス系 ×
サムライブルー系 ×
Bizarre-food系 〇
おでかけ系 〇
ドット系 〇
あまり細かく見ていないので、見落としているかもしれません。
This post was modified 1年前 2回 by リフィトリー
Topic starter2020年8月17日 13:39
×印は、明らかに要修正、△は、要検討、〇は、まあまあ、そのままでもイケそうな感じだったような気がします。
ほんわかライトニング ×
カラフルライン △
Hygiene 〇
m-系 〇
Simple系 ×
ミックス系 ×
サムライブルー系 ×
Bizarre-food系 〇
おでかけ系 〇
ドット系 〇
こちらはブロックにおける擬似要素の挙動をざっと確認した上でということでしょうか？
例えば、
https://github.com/yhira/cocoon/commit/cfdd3dd269978c7cf73459c675e25813d8c23115
で修正が入ったtecurioスキンの見出しタグ（H2）も、現状ではまだ添付画像のようにブロック選択時などで不具合が見られます。
Move Toが擬似要素(::before)を基準にした機能であるため、ブロックエディターに挿入しているCocoonのクラスがリセットされる不具合を解決するのが先ですが、本トピックの問題を解決するためには単にテーマ側の擬似要素を見るだけでなく、ブロックエディターがブロックの擬似要素に持たせている諸動作もチェックする必要があります。
2020年8月17日 14:43
@lococo さん
いつもお世話になっております。
こちらはブロックにおける擬似要素の挙動をざっと確認した上でということでしょうか？
これに関しましては、挙動というか、エディター上の見た目がどうなるのかなと、、ロコさんの書きこまれたリストのスキンに切り替えてみた、という程度です。
Move Toが擬似要素(::before)を基準にした機能であるため、ブロックエディターに挿入しているCocoonのクラスがリセットされる不具合を解決するのが先ですが、本トピックの問題を解決するためには単にテーマ側の擬似要素を見るだけでなく、ブロックエディターがブロックの擬似要素に持たせている諸動作もチェックする必要があります。
ブロックエディターの疑似要素を用いた動作のチェックまでは、私のスキルでは、至らないです。（疑似要素を使ってブロックを操作する仕組みは、全く理解できていません）
トピックに余計な書き込みを増やしてしまったとしたら、ご容赦ください。
ただ、ｈ2等の見出しに入力した文字がエディター上で読めない、というような事があれば、フォーラムに問い合わせが来ることは当然予想されます。
そういった意味では、WordPress5.5へのご対応の優先度の目安にはなるかもしれないと思って書きこませていただいた次第です。
Topic starter2020年12月19日 20:26
こちらの不具合ですが、ブロックのアウトラインをツールバーのようなポップオーバーのコンポーネントに置き換えるなどして、エディター側ブロックのスタイルを移すみたいです。
ただ、テーマ側で指定できる擬似要素がどこまで有効になるのかはまだ分かりません。
わいひら 件のいいね！
フォーラムの統計
14フォーラム
7,402トピック
57.2 K投稿
70オンライン
8,817会員
最新の投稿: フッターに配置したロゴとCopyrightが見切れる 最新のメンバー: ramyaescorts 最近の投稿 未読の投稿
