[ 質問者返信待ち ] 固定ページに再利用ブロックを使用すると画面が固まる

[VWSカスタマー]

■ WordPress のバージョン
6.4.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.15.0

■ Pro Unit のバージョン
0.25.1

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
VK Blocks Pro（バージョン 1.64.2.0）

■ 期待する動作
画面が固まらず編集できること

■ 自分で試した事
VK Blocks Proを停止すると固まることがなく動作しました

■ 症状が発生するブラウザ
Google Chrome

■ 実際の症状
固定ページに再利用ブロックを使用すると、編集中に画面が固まります。

・再利用ブロックはVKBLOCKSのボタン、横並びアイコンを組み合わせたものを複数登録しています。
・新規ブロック追加の「パターン」から選択しようとする際プレビューが表示しきれずに固まります。
・VK Blocks Proを停止すると動作が安定します。

下記の解決済みの質問に症状が似ています。

[ 解決済 ] 再利用ブロックのボタンを固定ページに複数設置すると編集画面が不安定になる

[DRILL LANCER]

Lightning のご利用ありがとうございます。

下記手順の通りに実行して該当の再利用ブロックの内容を共有いただけたら幸いです。

1. VK All in One Expansion Unit をインストールしていない場合はインストールして有効化
2. ExUnit > 有効化設定 と進み「再利用ブロック管理メニューの追加」が有効になっているのを確認
3. メニューに「すべての再利用ブロックを管理」が追加されているのでそれをクリック
4. 該当の再利用ブロック（パターン）を選択して編集画面に移動
5. 右上の縦型三点リーダーをクリックして「コードエディター」選択
6. 該当の再利用ブロック（パターン）のソースコードがエディタ部分に表示されるので CTRL + A で全選択
7. Ctrl + C でコピー
8. コピーした部分貼り付けた後それを半角の SHIFT + @ で表示される文字列で囲んだ上で返信

以上よろしくお願いします。

[VWSカスタマー]

ご返信ありがとうございます。
下記が再利用ブロックになります。（このレイアウトのものを50点ほど登録しています）

<!-- wp:group {"className":"cast_box","layout":{"type":"constrained"}} -->
<div class="wp-block-group cast_box"><!-- wp:image {"align":"center","id":527,"width":"300px","height":"auto","aspectRatio":"1.3333333333333333","scale":"contain","sizeSlug":"full","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image aligncenter size-full is-resized is-style-default"><img src="https://example.com/wp-ycn/wp-content/uploads/2023/10/no_image-1.jpg" alt="" class="wp-image-527" style="aspect-ratio:1.3333333333333333;object-fit:contain;width:300px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","className":"vk_block-margin-xs\u002d\u002dmargin-top"} -->
<p class="has-text-align-center vk_block-margin-xs--margin-top">ここに名前が入ります</p>
<!-- /wp:paragraph -->

<!-- wp:block {"ref":889} /-->

<!-- wp:block {"ref":907} /--></div>
<!-- /wp:group -->

再利用ブロック内に下記の再利用ブロックを入れています。

<!-- wp:vk-blocks/button {"buttonUrl":"#","buttonTarget":true,"buttonSize":"sm","buttonColor":"dark","buttonAlign":"center","fontAwesomeIconAfter":"\u003ci class=\u0022fa-solid fa-circle-right\u0022\u003e\u003c/i\u003e","blockId":"057abdcc-5a1b-4fdd-bcb0-31b471c344f5","className":"vk_block-margin-xs\u002d\u002dmargin-bottom disabled"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-align-center vk_block-margin-xs--margin-bottom disabled"><a href="#" class="vk_button_link btn has-background has-vk-color-dark-background-color btn-sm" role="button" aria-pressed="true" target="_blank" rel="noopener"><div class="vk_button_link_caption"><span class="vk_button_link_txt">パフォーマンス動画</span><i class="fa-solid fa-circle-right vk_button_link_after"></i></div></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/icon-outer {"iconSize":20,"iconMargin":7,"iconsJustify":"center"} -->
<div class="wp-block-vk-blocks-icon-outer vk_icons"><div class="vk_icons_col vk_icons_col-justify-center"><!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022fa-brands fa-x-twitter\u0022\u003e\u003c/i\u003e","iconSize":20,"iconMargin":7,"iconUrl":"","iconTarget":true} -->
<div class="wp-block-vk-blocks-icon vk_icon"><div class="vk_icon_frame"><div class="vk_icon_border" style="width:calc(20px + 14px);height:calc(20px + 14px)"><i style="font-size:20px" class="fa-brands vk_icon_font fa-x-twitter"></i></div></div></div>
<!-- /wp:vk-blocks/icon -->

<!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022fa-brands fa-instagram\u0022\u003e\u003c/i\u003e","iconSize":20,"iconMargin":7,"iconUrl":"","iconTarget":true} -->
<div class="wp-block-vk-blocks-icon vk_icon"><div class="vk_icon_frame"><div class="vk_icon_border" style="width:calc(20px + 14px);height:calc(20px + 14px)"><i style="font-size:20px" class="fa-brands vk_icon_font fa-instagram"></i></div></div></div>
<!-- /wp:vk-blocks/icon -->

<!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022fa-brands fa-tiktok\u0022\u003e\u003c/i\u003e","iconSize":20,"iconMargin":7,"iconUrl":"","iconTarget":true} -->
<div class="wp-block-vk-blocks-icon vk_icon"><div class="vk_icon_frame"><div class="vk_icon_border" style="width:calc(20px + 14px);height:calc(20px + 14px)"><i style="font-size:20px" class="fa-brands vk_icon_font fa-tiktok"></i></div></div></div>
<!-- /wp:vk-blocks/icon -->

<!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022fa-brands fa-youtube\u0022\u003e\u003c/i\u003e","iconSize":20,"iconMargin":7,"iconUrl":"","iconTarget":true} -->
<div class="wp-block-vk-blocks-icon vk_icon"><div class="vk_icon_frame"><div class="vk_icon_border" style="width:calc(20px + 14px);height:calc(20px + 14px)"><i style="font-size:20px" class="fa-brands vk_icon_font fa-youtube"></i></div></div></div>
<!-- /wp:vk-blocks/icon --></div></div>
<!-- /wp:vk-blocks/icon-outer -->

[石川＠Vektor,Inc.]

再利用ブロックを数十個も配置したり、再利用ブロック中に再利用ブロックがあったりなどは不可が高く、また、再利用ブロックの入れ子で無限ループになってしまったりする事も考えられますので、根本的にもう少し再利用ブロックを減らす方向で検討ください。

問題のページのコードを別のページに段階的に貼り付けていって、正常に動作しなくなるポイントを検証してみてください。

[投稿者]

投稿