お世話になっております。株式会社ベクトルの平川と申します。
VK スライダーブロックの編集画面での表示崩れについて、原因が判明しましたのでご報告します。
原因
ご報告の症状は、VK Blocks(Pro)1.123.0 で行った内部的な変更(ブロック ID の扱いの改善)に伴う不具合であることを確認いたしました。1.123.0 以降、ブロックエディターの編集画面でのみ、スライダーの高さ設定を制御する CSS が正しく適用されず、スライドが帯状に重なって表示される状態になっておりました。
なお、この不具合は編集画面の表示のみに影響するもので、公開ページ(フロント)の表示は正常です。すでに公開済みのページやこれから公開されるページの見た目には影響しませんので、その点はご安心ください。
対応状況
修正はすでに準備が完了しており、次回のアップデートで反映予定です。リリースまで今しばらくお待ちいただけますと幸いです。
リリースまでの回避策
編集画面での作業に支障がある場合は、以下のいずれかで回避いただけます。
- 一時的に VK Blocks(Pro)を 1.122.0 に戻す
- Y.INABA さんが提案された「レスポンシブスペーサー」をスライダーアイテム内に配置し、各デバイスの高さを揃える
ご不便をおかけし申し訳ございません。修正版がリリースされましたら、改めてこのスレッドでご案内いたします。引き続きよろしくお願いいたします。
私のサイトで確認したところ、スライダーアイテムが空のときに、
VK Blocks 1.122.0 はデバイス毎のスライドの高さが編集画面に反映されていますが、
VK Blocks 1.123.0 は編集画面に反映されなくなっています。
ご確認ありがとうございます。
確かに一度複数スライドを設定すると、ご教示のような状況になりますね。
ただ、そもそも「スライダーアイテム」の内部が空っぽになっているのが根本要因と思われます(中身の空の段落ブロックが通常の段落として自動調整されてしまい、意図通りに認識されていないのが原因と思われます)。
回避策として「レスポンシブスペーサー」を埋め込んでいただき、高さを「デバイス毎のスライドの高さ」と同様の内容に設定いただいてもよろしいでしょうか?
(もちろん、どうしてもブロックエディター内でも見栄えを揃えたいときに限ります。ページ上ではきちんと出力されているようですので、無理にご対応いただく必要はありません)
Attachments:
You must be
logged in to view attached files.
ご確認いただきありがとうございます。
ご指摘いただきました
「デバイス毎のスライドの高さ」につきましては、
PC・タブレット・スマートフォンそれぞれ設定済みとなっております。
また、公開ページでは正常に表示されており、
スライダー自体の動作にも問題はありません。
編集画面のみで表示が崩れており、
添付画像のようにスライダーアイテムが
帯状に何枚も重なって表示される状態です。
そのため、「高さ設定」が原因というよりも、
ブロックエディター上の表示のみ不具合が発生しているように見受けられます。
なお、以下についても確認済みです。
・WordPress 7.0
・Lightning G3 15.37.1
・Lightning G3 Pro Unit 9.118.0
・テーマ・プラグインは最新版
・子テーマを停止して親テーマでも確認
・関連プラグインを停止して確認
・Google Chrome シークレットモードでも確認
公開ページは正常ですが、
編集画面のみ症状が発生しております。
もし同じ環境で再現確認いただけるようでしたら、
ご確認いただけますでしょうか。
確認ですが、スライダーブロック内「デバイス毎のスライドの高さ」はどうなっておりますでしょうか?
見た感じ、「スライダーアイテム」ごとに背景画像のみを設定して「スライダーアイテム」中身が空白のようです。
「スライダー」の「デバイス毎のスライドの高さ」が設定されていないようであれば、ご提示いただいている画像のようになることも十分考えられるかと思います。
Attachments:
You must be
logged in to view attached files.
■ WordPress のバージョン
7.0
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
15.37.1
■ Pro Unit のバージョン
9.118.0
■ スキンの種類
Origin III
■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。
■ 期待する動作
固定ページに設定済みの
VKスライダーブロックの編集画面を見ました。
編集画面にて表示の不具合が発生しております。
正常な表示に直してほしい。
■ 自分で試した事
自分で試すことが出来ません。
■ 症状が発生するブラウザ
Google Chrome
■ 実際の症状
固定ページに設定済みの
VKスライダーブロックの編集画面を見ました。
編集画面にて表示の不具合が発生しております。
Attachments:
You must be
logged in to view attached files.
TAKE 様
ご確認ありがとうございます。
ただ、いずれにしても現状いただいている情報だけでは再現性がなく原因の特定が困難であり、TAKE様がご利用いただいている接続環境に原因がある可能性もあると考えられます。
私が上記で投稿した動画も、ご教示いただいているページをそのまま録画したものでございます。
そこで、もう1個検証いただきたいのですが、全く異なる回線で読み込んだ場合、どうなりますでしょうか?
できれば回線内セキュリティやDNSフィルタ等がかかっていないものが望ましいです。
もしご利用可能であれば、そちら経由からアクセスいただいてもよろしいでしょうか?
—-
Vektor ご担当者 様
もしかするとなんですが、回線やその他の事由によりスライダー構造の読み込みに遅延や変動が生じると、正常に動作しない可能性があるのではないでしょうか?
おそらく環境要因のため根本の原因の特定は困難かと思われますが、動作に関して堅牢性を高めていただくなどのご対応は可能でしょうか?
シークレットウィンドウまたはスマートフォン等の異なる端末からアクセスしても、▶️ボタンを押さない限りスライダーは自動再生されません(下記サイトも同様)。
VK Blocks 1.122.0 のスライダーブロックに自動再生の一時停止 / 再生ボタンを追加しました
解決策としては、phpにてページの読み込み完了から0.5秒後にSwiperを強制的に初期化または再生再生するようにしました。
■ WordPress のバージョン
WordPress 7.0-ja
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 )
■ テーマのバージョン
15.37.1
■ スキンの種類
Origin III
■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。
■ プラグインの種類・バージョン
VK All in One Expansion Unit 9.117.5
VK Block Patterns 1.36.0
VK Blocks 1.122.0
■ 期待する動作
ページロード時にスライダーブロックが自動再生される。
■ 自分で試した事
今までスライダーブロックを使用していた他のサイトも確認しましたが、すべて自動再生されなくなっていました。
また、テスト環境にて、下記のパターンライブラリからコピーしたものだけを貼り付けた固定ページで検証しました。はやり、自動再生されません。
https://patterns.vektor-inc.co.jp/vk-patterns/top-slider/
なお、上記URLサイトでは、スライダーブロックが自動再生されています。
■ 症状が発生するブラウザ
Firefox、Chrome、Edge
■ 実際の症状
ページロード時にスライダーブロックが自動再生されません。
「一時停止 / 再生ボタンを表示」を有効にすると、ブラウザリロード時に一瞬一時停止⏸️になった後、再生▶️の表示に変わります。再生をクリックすると、自動再生がきちんと開始されます。
なお、以前は自動再生されていたので、VK Blocks 1.122.0 の変更による影響なのではないかと推測しました。
■ その他特記事項
貴社サイトでもページロード時にはスライダーが自動再生されず、▶️をクリックする必要があります。
VK Blocks 1.122.0 のスライダーブロックに自動再生の一時停止 / 再生ボタンを追加しました
ご教示ありがとうございます。
お使いのスマートフォンで正常に動いているということは、やはり接続環境が関係している可能性が高そうです。
スライダー動作に使っている Swiper.js が正常に読み込まれていない(シャットアウトされている)可能性がございますので、以下ご確認いただいてもよろしいでしょうか?
・お使いいただいている回線を変えてみる。
・VPNや広告ブロッカー、セキュリティソフトをお使いであれば、一旦それらを無効化いただいてアクセスしてみる。
・ブラウザが最新版になっているか確認する(念のため)。
・ご教示いただいているのとは別のPCをご利用可能であれば、そちらからアクセスしてみる。
Y.INABA様
お忙しい中、ありがとうございます。
Y.INABA様の方では、スライダーが正常という事で、大変失礼致しました。
VK Blocks Pro:バージョン 1.122.0
各スライダーが停止し動かない状況で自動的に左へスライドしていくことが希望です。
こちらでWindowsPC2台で確認で同じ現象で、どちらも同じ症状で
シークレットウインドウ:なし。
拡張機能やブラウザ側キャッシュの削除済。
ブラウザは、Google Chromeを利用していますが、( Edge・Firefox )拡張子なしでも同じ症状でした。
しかし、スマホで確認してみたところ、正常でした。
Y.INABA様の方では、スライダーが正常ということは、やはり私のPC2台の設定環境かもしれませんね。
デスクトップ:Windows11 ノートPC:Windows11 どちらもブラウザ最新です。
もう少し私の環境を調べてみようと思います。
もし、何か良いアドバイス御座いましたら教えて頂けますと幸いです。
どうぞよろしくお願い致します。
Attachments:
You must be
logged in to view attached files.
ご報告いただいているエラーですが、少なくとも私の環境では、どのスライダーも正常に自動で動いているように見えます。
どう動作するのが理想的であるか、またどの箇所に動作不良が起きているのか、ご教示いただいてもよろしいでしょうか?
また、シークレットウインドウ等、拡張機能やブラウザ側キャッシュの影響がない状況でご確認いただくことは可能でしょうか?
もう1点、「VK Blocks Pro」のバージョンが書かれておりませんでしたので、そちらもお知らせいただけますと幸いです(「トップページスライドショー」以外の「スライダー」や「投稿リストスライダー」は「VK Blocks Pro」の機能になるかと存じます)。
よろしくお願いいたします。
—
コンソールエラー:main.js?ver=15.37.1:1:1966
こちらですが、おそらく今回のエラーに関係ありません。
埋め込みにてiframeでYoutubeの動画を読み込んでおり、それが原因でcross-originのエラーが出てきます。
Uncaught SecurityError: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "xxxx" from accessing a cross-origin frame.
at HTMLCollection.forEach (<anonymous>)
at d (main.js?ver=15.37.1:1:1966)
エラーの内容自体も、端的に言えば「安全上、iframe先のdocumentの読み込みをブロックした」というもので、スライダーの動作に関与するものではありません。
以下の記事のとおり、根本的な解決は難しいです。
ご参考:【CORSエラー】iframeタグでのYouTube動画埋め込み #Next.js – Qiita
■ WordPress のバージョン
7.0
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。
■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。
■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit
■ テーマのバージョン
15.37.1
■ Pro Unit のバージョン
0.30.2
■ スキンの種類
Evergreen
■ スキンのバージョン
0.2.7
■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。
■ プラグインの種類・バージョン
VK Block Patterns:バージョン 1.36.0
■ 期待する動作
スライダーが安定して動くようになってもらいたい。
■ 自分で試した事
wordpress キャッシュ削除。
コンソールエラー:main.js?ver=15.37.1:1:1966
プラグイン停止
■ 症状が発生するブラウザ
googlechrome Edge
■ 実際の症状
トップページスライダーが動いていない事に気づきました。
設置しているスライダー
・スライダー4個:3個OK/1個NG
・投稿スライダー1個:1個NG
以前より一部、スライダーが不安定な時があるなとは思っていたのですが
昨日、指摘があり気づいた状況です。
解決できなかったためご教授お願い致します。
弊社製品のご利用ありがとうございます。株式会社ベクトルの石川と申します。
CVE-2026-27212 の正体
種類: プロトタイプ汚染(Prototype Pollution)
Swiper 内部のオブジェクト結合処理(extend() / shared/uti
ls.mjs)で、ユーザー入力に禁止文字列が含まれていないかを
indexOf() でチェックしていたものの、Array.prototype
を経由した細工入力でそのチェックを回避でき、Object.proto
type を汚染できてしまう、という不具合です。
VK Blocks Pro 利用時に実際に危険か → ほぼ無害
この脆弱性が成立するには「攻撃
者が制御する入力が、脆弱な extend()
関数に渡される」ことが必須条件です。報告されている実証も
Node.js / Bun
のサーバーサイドランタイムで「信頼できないデータを
Swiper に流し込む」ケースを前提にしています。
一方、VK Blocks Pro での Swiper の使われ方は:
– ブラウザ(フロントエンド)でスライダーを動かすためだけ
に使用
– スライダーの設定値はサイト制作者が固定で渡すもので、訪
問者の入力を Swiper の設定に流し込む作りにはなっていない
つまり「攻撃者が任意の入力を Swiper
の初期化オプションに注入する」経路が存在しないため、実害
が生じる現実的なシナリオはありません。
診断ツールが警告を出す理由
ロリポップのネット診断は、読み込まれている JS
のバージョン番号をスキャンして既知 CVE
と機械的に突き合わせているだけです。利用方法(攻撃経路が
あるか)までは判定しないため、「11.2.10 = CVE-2026-27212
該当 → 要対応」と一律に出ます。いわゆるバージョンベース
の誤検知(false positive)です。
対応の方針
– フロントエンドのスライダー用途では悪用
経路がありません。
– とはいえ診断ツールの警告を消す・将来の安心のため、念のため Swiper を更新したバージョンを今後リリース予定です。
よろしくお願いいたします。
対馬俊彦 様
ご丁寧にありがとうございます。
現在のロリポップのプランはスタンダードで、PHPは 7.4(CGI版)になっておりました。
今回は、wp-config.php に
define(‘WP_MEMORY_LIMIT’, ‘256M’);
を追加したところ、VK Blocks Proを有効化してもHTTP ERROR 500は解消し、公開ページ・スライダー・ボタンが表示されるようになりました。
まずはこの状態で様子を見たいと思います。
必要があれば、PHPのモジュール版への変更も検討いたします。
詳しく教えていただき、ありがとうございました。