goutetsuguma commented 3 years ago

デフォルトテーマでのVK Blocksの動作＆表示チェック

『Twenty Twenty』バージョン: 1.6 『Twenty Twenty-One』バージョン: 1.1

改修メモ by 石川

現状文字サイズを rem 指定している場合が多く、rem指定だとテーマによって 10px を 1rem にしてるテーマとかだとバランスが激しくおかしくなるので、VK Blocks 内で基準となる文字サイズを --vk-size-text で指定して、それに対して例えば今まで 1.2rem みたいな指定の場合は calc( var(--vk-size-text) * 1.2 ) にすれば良いのかなと思いました。
今までCSSの指定が .vk_faq_title みたいに軽くて負けちゃう事が多いので単純に .vk_faq .vk_faq_title みたいにブロック名のスタイルを先に追加した方が良いのかなと思いました。

■フロント画面で左側に寄ってしまう

『Twenty Twenty』

・左寄せになるブロック（おそらくmarginの左右に0が指定してあるのが原因）

[x] Button
[x] Alert
[x] FAQ2とFAQ
[x] PR Content
[x] Step(Pro)
[x] Timeline (Pro)

■Button

『Twenty Twenty』

[x] ボタン文字にtext-decoration:underline;がついている
[x] 【要相談】『Twenty Twenty』はルートのhtmlのフォント指定が小さい(font-size: 62.5%;)ので、ボタンのフォントサイズが小さくなる（rem指定のため）。Lightningで使用する変数と合わせる予定。

■balloon

『Twenty Twenty』

[x] 編集画面側で最初のpタグに余分なmarginが入る（:first-of-typeを0にする？）
[x] 【要相談】フロント画面のみ、タイプをもくもくにした時（vk_balloon-type-think）もくもくの部分がアイコン画像部分に被ってしまう（rem指定のため）
[x] 【要相談】『Twenty Twenty』はルートのhtmlのフォント指定が小さい(font-size: 62.5%;)ので、バルーンの余白paddingが小さくなる（rem指定のため）

■PR Block

『Twenty Twenty』『Twenty Twenty-One』

[x] フロント画面でaタグにtext-decoration:underline;が入る

■PR Content

『Twenty Twenty』

[x] h3タイトルの上に余分なmarginが入る
[x] ボタン文字にtext-decoration:underline;がついている

■FAQ2とFAQ

『Twenty Twenty』

[x] 編集画面側で最初のpタグに余分なmarginが入る（:first-of-typeを0にする？）

『Cocoon』

[x] 『Cocoon』でddタグにmargin-leftが入っているので、回答エリアのddタグに余白が入る
[x] 編集画面でアイコンの位置、

■flow

『Twenty Twenty』

[x] 矢印の下に余分な余白（margin-bottom）が入る
『Twenty Twenty』と『Cocoon』
[x] テキストの横（ddタグ）に余分な余白（margin-inline-start:40px;）が入る
[x] 編集画面側で矢印の位置がおかしい。

■Staff

『Twenty Twenty』

[x] プロフィールタイトル（h4）の上の余白が若干大きい？

■Outer(Pro) の全幅にした場合

『Twenty Twenty』

~~- [] テーマ側のwidthとmax-widthが優先されてしまい幅がおかしい~~

[x] ブロック内の最初に見出しを置くと余白ができるので、Hタグの:first-childを0にする

■Table of Contents New(Pro)

『Twenty Twenty』『Twenty Twenty-One』

[x] フロント画面でCLOSEボタンが左による

『Twenty Twenty』『Twenty Twenty-One』『Cocoon』

[x] 目次のaタグにtext-decoration: underline;が入る

■Card(Pro)　

『Twenty Twenty』

[x] フロント画面でタイトルのh5のfont-sizeが小さい

『Twenty Twenty』『Twenty Twenty-One』『Cocoon』

[x] タイトルのh5にtext-decoration:underline;がついている
『Twenty Twenty』『Cocoon』
[x] 上に余分な余白（margin-top）がついている

■Post list（pro）

『Twenty Twenty』

▼表示タイプ:カード/カード水平

[x] フロント画面でタイトルのh5のfont-sizeが小さい（font-size: 1rem;を削除する？）
[x] タイトルのh5にtext-decoration:underline;がついているのと上に余分な余白（margin-top）がついている

▼表示タイプ:テキスト1カラム

[x] 『Twenty Twenty』『Cocoon』で分類名とテキストにtext-decoration:underline;がつく

■step(Pro)

[x] タイトルの余白を--vk-size-textを基準に変更
[x] vk_step_item_dot_num　の数字はサイズ指定しておいたほうが良さそう？（テーマによって変わってしまうので）
[x] LineStyle標準でつくラインの色を#dddから rgba(0, 0, 0, 0.15)などにする。（背景色があるテーマの場合見えずらいため）

■Timeline(Pro)

[x] タイトルの余白を--vk-size-textを基準に変更
[x] ラベルの文字の位置がテーマによって〇マークより下にズレる（font-sizeやline-heightを指定する？）
[x] LineStyle標準でつくラインの色を#dddから rgba(0, 0, 0, 0.15)などにする。

■Slider(Pro)

『Twenty Twenty』『Twenty Twenty-One』

~~- [ ] 編集画面で「全幅」幅にすると左にズレる(Lightningでもずれる)~~ ~~- [ ] フロント画面で「全幅」幅で表示にならない~~ ~~- [ ] slider-itemが中心からずれている~~

■core/image

[x] 配置を指定すると角丸2が効かなくなる
[x] figcaptionの文字サイズとセンター揃えは、Lightningはテーマ側で実装しているが、ブロック側にももたせるのか？
[x] 編集画面_フォトフレームとシャドウスタイルを適応した時、figcaptionの文字が枠外になる

■core/list

『Twenty Twenty』

[x] 『Twenty Twenty』でliにmarginがついているので余白ができる。ブロック側でmargin: 0 0 0.8em 0;と指定すればOK。
『Twenty Twenty』『Twenty Twenty-One』
[x] スタイルが「数字丸」と「数字四角」の場合に、数字が若干下側よりになる

goutetsuguma commented 3 years ago

現状文字サイズを rem 指定している場合が多く、rem指定だとテーマによって 10px を 1rem にしてるテーマとかだとバランスが激しくおかしくなるので、VK Blocks 内で基準となる文字サイズを --vk-size-text で指定して、それに対して例えば今まで 1.2rem みたいな指定の場合は calc( var(--vk-size-text) * 1.2 ) にすれば良いのかなと思いました。

src/utils/common.scss へ追加していく

goutetsuguma commented 3 years ago

『Cocoon』テーマでのVK Blocksの動作＆表示チェック

■『Cocoon』の編集画面側

以下のcssがついていて編集画面側のブロック全般が崩れる。

.editor-styles-wrapper * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

■Button

『Cocoon』

[ ] 編集画面でボタンの標準色がおかしい

■PR Content

『Cocoon』

[ ] h3にテーマ側の装飾がついてしまうので、強めのセレクタ名にする？

■Staff

『Cocoon』

[ ] h3とh4タイトルにテーマ独自の装飾がついてしまう

■Alert

『Cocoon』

[ ] ::beforeに独自のアイコンフォントがつくので、ブロック側で消す
[ ] 編集画面で独自のbackground と　border カラーがついてしまう。

.editor-styles-wrapper .is-style-alert-box, .editor-styles-wrapper .alert-box, .editor-styles-wrapper .alert {
    background: #fdf2f2;
    border: 1px solid #f6b9b9;
}

■Outer(Pro) の全幅にした場合

『Cocoon』

[ ] フロント画面で左横になぜか隙間ができる
[ ] 編集画面で全幅にならない

■Icon Card（Pro）

『Cocoon』

[ ] フロント画面でh3にテーマ側の装飾がついてしまうので、強めのセレクタ名にする？
[ ] 編集画面側でアイコン部分が左にズレる

■Post list（pro）

『Cocoon』

▼表示タイプ:カード/カード水平

[ ] h5にテーマ側の装飾がついてしまうので、強めのセレクタ名にする？（h5.vk_post_titleとかでいけるのか…？）

▼表示タイプ:テキスト1カラム

[ ] 編集画面のテキストの色がブルーになる（フロント画面にあわせる）

■Slider(Pro)

『Cocoon』

[ ] フロント画面で「全幅」幅だと変な隙間が左に空く

■core/heading

『Cocoon』

[ ] テーマ独自のデザインがついていて、装飾無しなどにしても独自のスタイルもついてしまう。（セレクタを強めに書く？） .article h2, .article h3, .article h4, .article h5, .article h6

vektor-inc / vk-blocks-pro

VK Blocksの動作＆表示チェック_Twenty TwentyとTwenty Twenty-oneとCocoon #335

デフォルトテーマでのVK Blocksの動作＆表示チェック

改修メモ by 石川

■フロント画面で左側に寄ってしまう

『Twenty Twenty』

■Button

『Twenty Twenty』

■balloon

『Twenty Twenty』

■PR Block

『Twenty Twenty』『Twenty Twenty-One』

■PR Content

『Twenty Twenty』

■FAQ2とFAQ

『Twenty Twenty』

『Cocoon』

■flow

『Twenty Twenty』

『Twenty Twenty』と『Cocoon』

■Staff

『Twenty Twenty』

■Outer(Pro) の全幅にした場合

『Twenty Twenty』

■Table of Contents New(Pro)

『Twenty Twenty』『Twenty Twenty-One』

『Twenty Twenty』『Twenty Twenty-One』『Cocoon』

■Card(Pro)

『Twenty Twenty』

『Twenty Twenty』『Twenty Twenty-One』『Cocoon』

『Twenty Twenty』『Cocoon』

■Post list（pro）

『Twenty Twenty』

■step(Pro)

■Timeline(Pro)

■Slider(Pro)

『Twenty Twenty』『Twenty Twenty-One』

■core/image

■core/list

『Twenty Twenty』

『Twenty Twenty』『Twenty Twenty-One』

『Cocoon』テーマでのVK Blocksの動作＆表示チェック

■『Cocoon』の編集画面側

■Button

『Cocoon』

■PR Content

『Cocoon』

■Staff

『Cocoon』

■Alert

『Cocoon』

■Outer(Pro) の全幅にした場合

『Cocoon』

■Icon Card（Pro）

『Cocoon』

■Post list（pro）

『Cocoon』

■Slider(Pro)

『Cocoon』

■core/heading

『Cocoon』

■Card(Pro)　