[ 解決済 ] VK Block Patterns 1.37.0更新後にカラム幅指定が崩れる
[ 解決済 ] VK Block Patterns 1.37.0更新後にカラム幅指定が崩れる
- このトピックには7件の返信、3人の参加者があり、最後に
により3週前に更新されました。
-
投稿
-
■ WordPress のバージョン
7.1.0■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.37.1■ Pro Unit のバージョン
0.31.0■ スキンの種類
プレーン■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
VK Block Patternsを1.36.0から1.37.0へ更新したところ、既存のカラムレイアウトが崩れる現象がありました。
該当箇所はWordPress標準のカラムブロックを使用しており、3カラムで
・画像：40%
・中央余白：3%
・文章：残り
という幅指定にしています。
そのままの表示を期待していました。■ 自分で試した事
chromeの検証で前後のソースの確認■ 症状が発生するブラウザ
chrome■ 実際の症状
更新後もHTML上には
style=”flex-basis:3%”
style=”flex-basis:40%”
が残っていますが、Chromeの検証で確認すると、.vk-cols–fit に対するflex-basis: 50% !important;
が優先され、指定したカラム幅が上書きされていました。
また、.wp-block-columns.is-layout-flex の gap: 2em; も加わるため、中央3%のカラムにさらにgapが加算され、文章と画像の間隔が大きくなります。
検証画面上で
vk-cols–fit を外す
gap を無効化する
と、1.36.0時のレイアウトに戻りました。お世話になります。株式会社ベクトルの石川と申します。
検証のために該当部分のコードエディタでのHTMLを貼り付けもしくは、
テキストエディタに貼り付けて添付いただけますでしょうか？お手数おかけして恐れ入りますがよろしくお願いいたします。
onas 様
ソースのご提示ありがとうございます。
—
本不具合の直接の原因ですが、以下対応によるバグの作り込みです。
以下のSCSSファイルにおいて、修正内容の取り違えが起こっています。
https://github.com/vektor-inc/vk-block-patterns/blob/d5f66a8576e8a35ad94ff55ddc09ee54232fcd05/patterns-data/_scss/_vk-cols.scss簡単にいえば、
@media (min-width: 782px) { // 余白打ち消し } @media (min-width: 600px) and (max-width: 781px) { // 50%固定 }だったものが、
@media ( vars.$wp-col-min <= width ) { // 余白打ち消し } @media ( vars.$wp-col-min <= width ) { // 50%固定 }となっており、これでは意味が大幅に変わってしまいます。
つまり、旧来、幅が600pxから781pxまでが50%固定となるように設定されてしまっている箇所が、今回は782px以上に50%適用となるようになってしまっています。
gapの誤適用についても恐らく同じことが言えるかと思います。せっかくなので、後方互換用処理のためにも600px用の変数も作ってしまった方が良いのでは？ と思います。
https://github.com/vektor-inc/vk-block-patterns/blob/d5f66a8576e8a35ad94ff55ddc09ee54232fcd05/patterns-data/_scss/_variables.scss石川様、お手数をおかけしますが、お手すきの際に該当箇所の修正・再ビルドのほどよろしくお願いいたします。
onas 様
こちらですが、 VK Block Patterns 1.38.0 で該当箇所が 1.36.0 以前の仕様に戻りましたので、お手すきの際にアップデートにてご確認のほどよろしくお願いいたします。
—-
石川 様
お忙しい中、ご対応ありがとうございました。
お世話になっております。ベクトルの石川でございます。
この度はお手数おかけして恐れ入ります。
CSSに関しましては 1.36.0 の内容と同様にロールバックしたバージョンをリリースいたしました。
しかしながら、アップデート前の 1.36.0 または、1.36.0 と同様にした最新版でも（アップデートの有無にかかわらず）該当のコードでは以下の崩れが発生します。
* 600px 〜 767px で .vk-cols–fit はもともとカラムブロックカラム間の余白をなくするためのクラスなのでひっついてしまう
* 768px 〜 781px で .vk-cols–fit の 50% が中間の 3% に効いてしまって段落ちしてしまう
* .vk-cols–grid も カラムサイズを 50% にするためのクラスなので現状の目的そぐわずレイアウト崩れを引き起こす
* .vk-cols–grid–alignfull 画像の方を全幅にするためのクラスなので誤動作の原因となりうるですので、
* vk-cols–fit / vk-cols–grid クラスは削除・使用しない
* カラムの間隔は WordPress 標準のブロックの間隔指定をつかって指定する
* 左右の列のリバースも vk-cols–reverse クラスを削除して、VK Blocks の機能でUIで指定するという方式にした方が、どのデバイスサイズでも崩れず、クラス名ではなく UI からの指定だけで実現する事ができます。
添付コードとSSご確認くださいませ。
よろしくお願いいたします。
石川さま
お忙しいところ、丁寧に検証いただきありがとうございました。
ご説明いただいた内容を拝見し、今回のアップデートによる影響だけでなく、もともとのカラムの組み方についても、現在の推奨方法の方がシンプルでわかりやすいことがよく分かりました。vk-cols–fit や vk-cols–grid などの役割も理解できましたので、今後は教えていただいた形に修正していこうと思います。また、CSSについても早々にご対応いただきありがとうございました。
大変参考になりました。
今後ともよろしくお願いいたします。
- このトピックに返信するにはログインが必要です。
