Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

カスタムCSSブロック タイプAも欲しい ( ̄人 ̄) #1419

Closed
kurudrive opened this issue Sep 13, 2022 · 3 comments
Closed

カスタムCSSブロック タイプAも欲しい ( ̄人 ̄) #1419

kurudrive opened this issue Sep 13, 2022 · 3 comments

Comments

@kurudrive
Copy link
Member

kurudrive commented Sep 13, 2022

#1342

概要

カスタムHTMLブロックのようにCSSをゴリゴリ書いていくためのブロック

なぜ必要なのか?

あくまでブロックパターンとして提供する事を前提とすると、現状実装中のタイプBの方式の場合

  1. 各ブロックに直接CSSが指定される
  2. そのパターンをユーザーが多用
  3. あとからそのCSSを微調整しようと思うと配置した全ブロックを手動で手直しする必要が発生

という欠点がある。
※ とは言え軽微なカスタマイズでは大変便利なので、現状のタイプBも当然必要です!

カスタムCSSブロック(タイプA)で、パターンで使用しているCSSを一括で提供すれば、
受託案件などのウェブ制作者的にはそのパターンのCSSを子テーマなどのCSSに貼り付けて運用可能なため、

  • 後から一括で再調整が容易
  • パターンのCSSをファイルで管理できるので変更をGit管理が可能になる
  • 同じパターンを多用した際に出力されるCSSを少なくできる

というメリットがある

欲しい機能

これまでのやりとりの中で「編集画面中にコードを書いたブロックが入るので邪魔に思うケースが発生する」という意見が出ている(僕もそう思う)ので、サイドパネルなどからそのブロックを編集画面上で非表示にする機能が欲しい

@shimotmk
Copy link
Contributor

グループ化してそのグループの中にある要素などに限定すれば個人的にはわかりやすいし良いのではと思うのですが、、、
どうでしょうか?

@kurudrive
Copy link
Member Author

@shimotmk
それは例えば

  1. 特定のパターン全体をグループ化
  2. グルーブブロックにそのCSSを書く

という意味ですよね?
確かに...
その運用なら僕が意図している部分の一番のポイントは対応できそうですね...
なるほど...

一旦優先度を下げられます🙌

ただ、

  • 僕も言われて気づいた運用なので、タイプBも慣れればアイコンの色が反転しているのでカスタムCSSの存在に気付くけれど、"慣れてない初見者がいかにそのまま使えるか"というのは重要なので、本文欄にCSSが置いてあるのは「プレビュー上邪魔」というデメリットではあるけれど、直感的に存在がわかるというメリットも大きいかなと思います。
  • 今後デザイン性の高いブロックパターンを提供しようとすると CSS の量が結構多くなるので、本文エリアの方が幅があって作業しやすい / CSSを俯瞰で見やすい
  • ユーザーがグループを解除した時になぜデザインが崩れたのか?どうすれば復旧できるのか?がCSSブロックが独立していればCSSブロック自体は残っているため復旧しやすい

という面は結構あると思っています。

なので僕としてはこっち(タイプA)も欲しいなーと思うのですが、一番の懸念は @shimotmk さんが提案してくれたように 一番外のグループブロックにまとめて書けば確かにいけるので、その方式でまずは運用してみつつ、おいおいパターンのCSSを書く @goutetsuguma さんや @sysbird さんなどみなさんの意見も伺えればと思います。

@goutetsuguma
Copy link
Contributor

goutetsuguma commented Sep 14, 2022

@kurudrive @shimotmk @sysbird

デモサイト工務店のトップページで、ページ全体をグループで囲って、カスタムCSSを使用してみました。
【トップページでの感想です】
数行だととても使いやすいのですが、量が多くなってくると、ちょっと書きずらい感じになってきましたので、一旦カスタムHTMLブロックににstyleを書くことにしました。
クラス名を複数指定した場合も、文字数が長いので幅がないと見えずらい感じがありました。

今後デザイン性の高いブロックパターンを提供しようとすると CSS の量が結構多くなるので、本文エリアの方が幅があって作業しやすい / CSSを俯瞰で見やすい

今回はトップページでCSSの量がありましたので、石川さんのコメントの様に幅があるとやはり書きやすいなと感じました(中ページだとCSSの量が多くないページがあると思いますので、使いやすいと思います)

また気づく点がありましたらコメントします🙇‍♂️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants