サイト内検索
ブロックエディターのスタイルに影響する擬似要素の修正 | 開発者向けフォーラム | Cocoon フォーラム

Topic starter2020年8月16日 21:49
の問題が解決してから新たにトピックを立てようとしていた内容なのですが、
見出しh2の下線の横線が、文字の中央に入り読みにくくなった。
にて先に修正が入ったため、合わせてトピックを立てておきます。
少なくとも
- ほんわかライトニング
- カラフルライン
- Hygiene
- m-系
- Simple系
- ミックス系
- サムライブルー系
- Bizarre-food系
- おでかけ系
- ドット系
以上のスキンでも同様の問題が確認されています。
WordPress5.5では各ブロックの外側にあるタグの擬似要素(after)を用い、ブロックの
- 追加
- 選択
- 移動
などの動作をデザインしているからです。
擬似要素について、
- ブロックエディター側
- テーマ側
どちらのスタイルに寄せるかで修正方法は異なりますが、テーマ側のスタイルに寄せるのであれば、ブロックの動作を邪魔しないよう対策する必要があります。
わいひら 件のいいね!
2020年8月17日 01:21
ローカルのテストサイトで、投稿画面で見出し(h1~h6まで)のデザインがどうなるのか、ロコさんのリストにあったスキンに切り替えてみてみたら、やはり、ちょっと表示がおかしいスキンがあるみたいです。
あまりじっくり見た訳ではないのですが、×印は、明らかに要修正、△は、要検討、〇は、まあまあ、そのままでもイケそうな感じだったような気がします。(大雑把にしか見ていないのですが・・)
いずれにしても、個々のスキンごとに対応するとなると、ちょっと、これは、大変そうですね。
ほんわかライトニング ×
カラフルライン △
Hygiene 〇
m-系 〇
Simple系 ×
ミックス系 ×
サムライブルー系 ×
Bizarre-food系 〇
おでかけ系 〇
ドット系 〇
あまり細かく見ていないので、見落としているかもしれません。
This post was modified 2年前 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のクラスがリセットされる不具合を解決するのが先ですが、本トピックの問題を解決するためには単にテーマ側の擬似要素を見るだけでなく、ブロックエディターがブロックの擬似要素に持たせている諸動作もチェックする必要があります。
ブロックエディターの疑似要素を用いた動作のチェックまでは、私のスキルでは、至らないです。(疑似要素を使ってブロックを操作する仕組みは、全く理解できていません)
トピックに余計な書き込みを増やしてしまったとしたら、ご容赦ください。
ただ、h2等の見出しに入力した文字がエディター上で読めない、というような事があれば、フォーラムに問い合わせが来ることは当然予想されます。
そういった意味では、WordPress5.5へのご対応の優先度の目安にはなるかもしれないと思って書きこませていただいた次第です。
Topic starter2020年12月19日 20:26
こちらの不具合ですが、ブロックのアウトラインをツールバーのようなポップオーバーのコンポーネントに置き換えるなどして、エディター側ブロックのスタイルを移すみたいです。
ただ、テーマ側で指定できる擬似要素がどこまで有効になるのかはまだ分かりません。
わいひら 件のいいね!