カスタムCSSが欲しい #1342
Comments
デフォルトは黒 |
|
@kurudrive エディタの切り替えオプションは2,3日では実装出来そうになかったので次に回そうという判断です 仕様が想定しているものとあっているか一度ご確認いただけますでしょうか Memo monaco Editor option iframe monaco editor support |
|
@shimotmk 確認しました。ありがとうございます。 |
|
@kurudrive |
|
@shimotmk なるほどー。モバイルの対応かー・・・。了解です。 |
|
@kurudrive |
|
@shimotmk Arkheみたいな入力補助機能つけれませんか？ |
|
@kurudrive 私的には仕様の確認を先にした。 その上で確認していただきたかったのです 私的にはエディタの機能は入れたいと思っていて以前にも書きましたが実装方法は調べかけているので後ほど取り掛かろうと思います |
|
@shimotmk え？ あ、いや、ちょっとまって、100%ぜんぜんおこってないよ！ で、CSSにまわそうかなと思ってあらためて確認したけど今の状態だとやっぱり使い勝手がよくないので、 |
|
@shimotmk |
|
一旦Pro版で作る ブロックとして作るかサイドパネルで作るかサイドパネルの場合メリット
デメリット
→解決策
だたリストビューではどこに記述されているかはわからない ブロックとして登録した場合メリット
デメリット
とりあえずサイドパネルでやることにします 追記 |
|
@kurudrive ブランチ #1395 ※テスト、デプロイなど調整はまだあるので急ぎではありません。 エディターは２つありますがどちらを採用するか迷っているので相談したいです 使ったライブラリ
MonacoEditorでCSSで上書きして調整できなくもなさそうですが、かなり入り組んでいるのでライブラリはCodeMirrorの方でどうでしょうか？ 他の方で「このライブラリ良さそう」みたいなものがあればアドバイスいただければと幸いです。 |
|
@shimotmk 実装ありがとうございます！ 実際に触ってみて以下の点が気になりました。 そもそも論でカスタムCSSは２つの運用がありえた僕がもともと想定していたのは、 A. 特定のパターンを構成する複数のブロックをカスタマイズするCSSを、パターン単位でどこか一箇所にゴリゴリ書いていくというイメージだったのですが、下村さんの実装を見て B. 個別のブロックに対して、そのブロックにだけ追加したいCSSを直接書く（そのブロックに書いたCSSはそのブロックにのみ適用される） という考え方もできて、どっちの需要もあるから最終的には両方あると尚良いのでは？と感じました。 現状さわってみた感想特定のブロックがカスタムCSS情報を持つのでたどり着けない可能性が高いあくまで先述の A の運用の前提での場合 ですが、 コアの方針としての「コード系のブロックを追加するな」という事も踏まえて、既存のブロックに対する追加という形にしてくれたのだと思いますが、ユーザーがカスタムCSSの存在に気づきやすいように単体の『ブロック』として存在していた方が使いやすいんじゃないかなと感じました。他の人の意見も伺いたいです。 ※ 例えばブロックにカスタムCSSがある場合はブロックリスト表示の時にブロックに色とつけるとか...だとカスタムCSSの存在がわかりやすいけど、その方が実装ハードル高そうですしねぇ。。。 ブロックで本文欄非表示モードを作るとか？今回『本文欄にCSSを書く形式だと編集画面でブロックの合間にコードが入るから美しくないよね』という理由でサイドバーにしてみようという流れだったので、それを解消するアイデアとして、カスタムCSSブロックを選択している時にツールバーなどから「最小化」を指定するとCSSエディタの本文部分が非表示（CSSで隠すとかで可）になるとか、そういった処理で解決すればスマートじゃないかと思うのですがどうでしょう？ やっぱりサイドバーだと幅が厳しいと感じました (´；ω；｀)ある程度まとまってCSS書こうとするとサイドバーの編集エリアがやはり触ってみると狭いので、上述のように本文欄のブロック内で書き込むか、B. の想定の 選択中のブロックにとみ効かせるCSSならサイドバーの方がUIとして自然だなと感じました。 ライブラリは何が良いか？僕の中でデザイナーがCSSをゴリゴリ書く事を想定しているので、補完機能の重要度は高いです。そういった視点でMonacoEditor の補完を有効にして確認しましたが、CodeMirror より補完候補が多いので、MonacoEditor にしたい所ですが、 また文面だとニュアンスが伝わってなかったり誤解を生みそうなので火曜日に改めて他の人の意見も交えて打ち合わせしたいです！いつもありがとうございます！ |
|
@shimotmk @kurudrive スタイルが編集画面に適用されるのがいいですね CSS をゴリゴリ書く人は別ファイルに書けばよいかな、補助的なかんじでサイドバーにあるのはよいと思います。 私は書き方が、よくわかってないです 改めて、みなさんでご検討いただければです〜 |
ブロック固有のセレクタの仕様案"selector" って書いてもらう方が楽そう。 |
|
どのブロックにカスタムCSSが追加されているかどうかはサイドパネルのアイコンに加えアニメーションブロックのように編集画面に印をつければ解決しそう
|
|
@shimotmk あー！確かにそれは良いと思いますー！ |
|
@ChiakiKouno @doshimaf @drill-lancer @goutetsuguma @kaorock72 @kurudrive @mthaichi @sysbird ブランチ #1395 現段階のプラグインのzipをここに置いておくので開発しない人もご意見頂ければ幸いです。 @kurudrive @goutetsuguma |
|
@shimotmk selector を使った書き方が使いやすいです 編集画面で、 や のように書いた場合は編集画面には反映されないような… |
|
@shimotmk しもむらさん、ありがとうございます！Zipファイルめちゃありがたい…！ 使ってみた感想ファイーストインプレッション、直感ですぐ使えました！
そしてそこらへんのネット記事で拾えるおしゃれテーブルスタイルがコピペですぐ使えました◎ええわー！ selector を使った書き方、リアルタイムに反映されるの感動しますね！ そのほか：
あっ (今回まだ少ししか触れなかったので、また違う形で触ってみて気づいたことがあれば報告させてください) |
|
実装ありがとうございます！
識別表示を非表示（無効）にする機能が欲しい意図
という事を踏まえると、無効化する機能が欲しい カスタムCSS使用の識別表示 （● ） 非表示 編集画面をなるべく公開画面に近くしたい場合や、独自に付与した CSS が識別表示用のCSSと干渉して編集画面上で意図した表示にならない場合は非表示にしてください みたいなUIを追加して、非表示指定になってたら、枠の点線とラベル部分が無効になるとありがたいです。
↑ カスタムCSS使用の識別表示を非表示にすると、カスタムCSSが使用されている場合にわからなくなるのであった方が良いなと思いました！ |
|
@goutetsuguma アイコン確認しました。良いと思います！ありがとうございます！ |
|
@doshimaf @goutetsuguma @sysbird もしアップデートしたvk-blocksに他の機能を入れたかったら わからないことがあったらor競合が起きたら言っていただければ解決します |
|
カスタムCSSのブランチでブロックの複製を行うと、クラス名がなくなったり増えたりすることがあります
カスタムCSSのクラスを持っているブロックで発生し(見た目くずれるのでわかりやすかった)たので、再現性を調べました 複数のブロックをまとめて複製などずぼらかもしれないですが、パターンを作ったりコピペするときにわたしはよくやります 【再現手順】
|
|
@sysbird デモサイトにも追加したのでご確認お願いします🙇♂️ |
すみません。こちら調整してデモサイトにアップしました🙇♂️ |
|
お手数おかけしております ところで複製したあとに「段落-2 は初期状態です」のブロックにカーソルを合わせると「このブロックでエラーが発生したためプレビューできません。」が表示されます。 |
|
@sysbird このブロックでエラーが発生したためプレビューできません。は私の状況では確認出来ないのですが、どのような状況で発生しますか？？？ 複製する前のHTMLは以下で確認しました。空のクラス属性が入っています <!-- wp:heading {"className":""} -->
<h2>リスト表示にして、下記2つの段落を同時選択して複製</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"vkbCustomCss":"selector{\n background: #EEE;\n}","className":"vk_custom_css vk_block-margin-lg\u002d\u002dmargin-bottom"} -->
<p class="vk_custom_css vk_block-margin-lg--margin-bottom">段落-1 では余白の下Lが付いている、さらにカスタムCSSで背景がグレー</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":""} -->
<p>段落-2 は初期状態です</p>
<!-- /wp:paragraph --> |
|
@shimotmk このブランチのせいじゃないかもしれないので、これから注意してみますね
|
|
現時点での最新版はこれでお願いします🙇♂️ (ブロック直前にインラインでcssを出力すると枠線ブロックのborder box > * { などで影響が出るのでコアのwp-containerと同じ位置にcssを出力するように調整しました) 工務店デモサイトにはアップ済みです |
|
【メモです】
↑わたしもこんなことがありました。
▼こちらはtransitionが効いていない ▼こちらはtransitionが効いた ▼こちらは効かなかった |
|
selector指定のないcssが書かれた後に書いたselector指定のあるcssが多分効いていない <!-- wp:columns {"verticalAlignment":"center","vkbCustomCss":"/* Outerブロックを全幅になるよう追加 */\n@media (min-width: 600px){\n.vk-cols\u002d\u002dfit.vk-cols\u002d\u002dgrid.vk-cols\u002d\u002dgrid\u002d\u002dalignfull.vk-cols\u002d\u002dreverse\u003e.wp-block-column:nth-child(2)\u003e.vk_outer,\n.vk-cols\u002d\u002dfit.vk-cols\u002d\u002dgrid:not(.is-not-stacked-on-mobile).vk-cols\u002d\u002dgrid\u002d\u002dalignfull.vk-cols\u002d\u002dreverse\u003e.wp-block-column:nth-child(2) .vk_outer{\n margin-left: calc(100% - 50vw);\n}\n.vk-cols\u002d\u002dfit.vk-cols\u002d\u002dgrid.vk-cols\u002d\u002dgrid\u002d\u002dalignfull\u003e.wp-block-column:nth-child(2)\u003e.vk_outer,\n.vk-cols\u002d\u002dfit.vk-cols\u002d\u002dgrid:not(.is-not-stacked-on-mobile).vk-cols\u002d\u002dgrid\u002d\u002dalignfull\u003e.wp-block-column:nth-child(2)\u003e.vk_outer{\n margin-right: calc(100% - 50vw);\n width: 50vw;\n}\n}\n@media (max-width: 599px){\n.vk-cols\u002d\u002dfit.vk-cols\u002d\u002dgrid.vk-cols\u002d\u002dgrid\u002d\u002dalignfull\u003e.wp-block-column:nth-child(2)\u003e.vk_outer,\n.vk-cols\u002d\u002dfit.vk-cols\u002d\u002dgrid:not(.is-not-stacked-on-mobile).vk-cols\u002d\u002dgrid\u002d\u002dalignfull\u003e.wp-block-column:nth-child(2)\u003e.vk_outer {\n width: 100vw;\n margin-right: calc((100% - 100vw)/2);\n margin-left: calc((100% - 100vw)/2);\n}\n}","className":"vk-cols\u002d\u002dfit vk-cols\u002d\u002dgrid vk-cols\u002d\u002dgrid\u002d\u002dalignfull"} -->
<div class="wp-block-columns are-vertically-aligned-center vk-cols--fit vk-cols--grid vk-cols--grid--alignfull"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"left":"0em","right":"3em","bottom":"0em","top":"0em"}}},"className":""} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0em;padding-right:3em;padding-bottom:0em;padding-left:0em"><!-- wp:heading {"textAlign":"center","vkbCustomCss":"/* 見出し装飾 短い線 */\nselector::before{\n content: \u0022\u0022;\n display: block;\n width: 3rem;\n height: 1px;\n margin-bottom: 1.5rem;\n background-color: currentColor;\n}\n\nselector::before{\n margin-left: auto;\n margin-right: auto;\n}","style":{"typography":{"fontSize":"2.2rem","letterSpacing":"2px"}},"className":"vkp-title-short-border\u002d\u002dcenter is-style-vk-heading-plain vk_block-margin-0\u002d\u002dmargin-bottom vk_custom_css"} -->
<h2 class="has-text-align-center vkp-title-short-border--center is-style-vk-heading-plain vk_block-margin-0--margin-bottom vk_custom_css" style="font-size:2.2rem;letter-spacing:2px">コンセプト</h2>
<!-- /wp:heading -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-vk-heading-plain"} -->
<h3 class="has-text-align-center is-style-vk-heading-plain">家族の思いと世代をつなぐ住まいづくり</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":""} -->
<p>私たちサンプル工務店は時代にあわせたデザインを提案し、10年、20年、30年後も親から子、子から孫へ、世代をなぐ住まいづくりを目指しています。世代を繋ぐ家は力強い家族の絆が生まれると考えております。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"vk_block-margin-md\u002d\u002dmargin-bottom"} -->
<p class="vk_block-margin-md--margin-bottom">デザイン性はもちろん、機能性・安全性を十分考慮した快適に暮らせる住まいを提案していきます。</p>
<!-- /wp:paragraph -->
<!-- wp:vk-blocks/button {"buttonUrl":"/architect/concept/","buttonType":"1","buttonColor":"custom","buttonColorCustom":"black","buttonAlign":"center","blockId":"1372cd7f-b2a4-4165-ae06-76266c64ba6e","vkbCustomCss":"selector.vk_button .vk_button_link.is-style-outline {\n position: relative;\n z-index: 0; \n border-radius: 0;\n padding: 12px 35px;\n letter-spacing: 0.1em;\n min-width: 220px;\n}\n \nselector.vk_button .vk_button_link.is-style-outline::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: currentColor;\n z-index: -1;\n transition: .3s;\n}\n\nselector.vk_button .vk_button_link.is-style-outline:hover::before {\n width: 100%;\n}\n\nselector.vk_button .vk_button_link.is-style-outline .vk_button_link_caption::before {\n content: '';\n position: absolute;\n display: block;\n width: 70px;\n height: 1px;\n bottom: 50%;\n right: -35px;\n border-bottom: solid 1px currentColor;\n}\n\nselector.vk_button .vk_button_link.is-style-outline .vk_button_link_caption:after {\n content: '';\n position: absolute;\n display: block;\n width: 12px;\n height: 1px;\n background: currentColor;\n bottom: calc(50% + 5px);\n right: -35px;\n transform: rotate(45deg);\n}\n\nselector.vk_button .vk_button_link.is-style-outline:hover {\n opacity: unset;\n box-shadow: unset;\n background-color: transparent !important;\n border: solid 1px;\n}\n","className":"vkp_button-through-arrow vk_custom_css"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-center vkp_button-through-arrow vk_custom_css"><a href="/architect/concept/" class="vk_button_link btn has-text-color is-style-outline has-black-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><span class="vk_button_link_txt">もっと見る</span></div></a></div>
<!-- /wp:vk-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --> |
|
selectorを書いてないcssの中のcssの調整しました。
これについてですが 強制的に全角スペースは半角スペースに置き換えた方が良いですかね？ 調整後zip |
|
@shimotmk 私の現象は少し異なり
というものでした。 |
|
@shimotmk
わたしは注意書きだけで良いかと思います（注意書き出てくれるだけでうれしいです！） |
|
discord より 6.0環境で「ブループブロック」＋「カスタムCSS」を作成し、 コードエディタで差分を確認してみると、 6.0環境で作成したパターンを6.1に持ってきて、コードエディタで"layout":{"type":"constrained"} を追加したものは、その後コピペできるようになりました。 6.1からレイアウト系のクラスが変わった様子です： じゃあVKパターンライブラリを6.1以降にして再登録すれば良いのか？というと、6.1で作成したものを6.0に貼り付けたところ、「このブロックでエラーが出ました」となります。あらどうしましょう😇 |
|
以下のようなコードで症状が発生 <!-- wp:group {"vkbCustomCss":"selector {\n background: #f5f5f5;\n}","className":"vk_custom_css"} -->
<div class="wp-block-group vk_custom_css"><!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"8px"}},"textColor":"vk-color-primary","className":"vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<p class="has-text-align-center vk_block-margin-0--margin-bottom has-vk-color-primary-color has-text-color" style="font-size:8px">STEP</p>
<!-- /wp:paragraph -->
<!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022fa-regular fa-envelope\u0022\u003e\u003c/i\u003e","iconSize":24,"iconMargin":0,"iconAlign":"center","iconType":"2","iconColor":"vk-color-primary","className":"vk_block-margin-0\u002d\u002dmargin-bottom"} -->
<div class="wp-block-vk-blocks-icon vk_icon vk_block-margin-0--margin-bottom"><div class="vk_icon_frame text-center is-style-noline"><div class="vk_icon_border has-text-color has-vk-color-primary-color" style="width:calc(24px + 0px);height:calc(24px + 0px)"><i style="font-size:24px" class="fa-regular vk_icon_font fa-envelope"></i></div></div></div>
<!-- /wp:vk-blocks/icon --></div>
<!-- /wp:group --> |
RC2で解決するっぽいです |
ありがとうございます！ 安心しました。RC2後に再検証してみますね。 |
|
@shimotmk CC @kurudrive @sysbird @ChiakiKouno @doshimaf わたしが全角スペースに気づかないことがちょくちょくあり、、、滝汗 |
|
@goutetsuguma |
|
6.1のコピー問題と注意書きを調整しておきました！ |
|
|
oh... |
トリさんがメモしてくださってたタスク、ページを非公開から公開に変えました。 |
|
リリースされたのでcloseします |
やはりパターンのバリエーションを増やすためにカスタムCSSは欲しい。
カスタムHTMLブロックでもCSSは入力できるが、Arkhe Blocks みたいにCSSブロックがあった方がデザイナーが作業しやすいため。
The text was updated successfully, but these errors were encountered: