Layout Builder iFrame Modal
Layout Builderのブロックおよびセクション編集フォームを管理テーマを使用してiframe内にレンダリングし、フロントエンドテーマからの完全なCSS分離を提供します。
layout_builder_iframe_modal
インストール
composer require 'drupal/layout_builder_iframe_modal:^1.3'
概要
Layout Builder iFrame Modalは、DrupalのLayout Builderにおける重大な課題であるフロントエンドテーマと管理フォーム要素間のCSSコンフリクトに対処します。デフォルトでは、Layout Builderはすべての編集フォームをオフキャンバスサイドバーにレンダリングしながら、ページ全体をフロントエンドテーマで表示します。これにより、タブ、アコーディオン、エンティティオートコンプリート、Media Library、Entity Browserなどの複雑なフォーム要素でスタイリングの問題が発生します。
このモジュールは、Layout Builderのフォームを管理テーマを読み込むiframe内にレンダリングすることでこの問題を解決します。フォームはフロントエンドテーマのCSSから完全に分離されるため、大規模なCSSオーバーライドを必要とせずにすべてのフォーム要素が正しく動作します。
このモジュールは、Layout Builderのダイアログリクエストをインターセプトし、特別なdestinationパラメータを持つフォームURLを読み込むiframeに置き換えることで動作します。フォームが保存されると、iframeは特別なページにリダイレクトし、postMessageを使用して親ウィンドウと通信し、レイアウトの再構築をトリガーしてモーダルダイアログを閉じます。
Features
- Layout Builderのフォームをフロントエンドテーマから完全にCSS分離されたiframe内にレンダリング
- すべてのフォームレンダリングにサイトの管理テーマを使用し、一貫したスタイリングを確保
- テーマの変更を必要とせず、既存のLayout Builderインターフェースにシームレスに統合
- ブロックが正常に保存されると自動的にモーダルを閉じる
- スクロール位置を保持し、モーダルを閉じた後に以前の位置にスクロールバック
- プログラムによる再構築のために、レイアウトフォームに非表示の「レイアウトを再構築」アクションを提供
- 翻訳されたレイアウト用のLayout Builder Translation（layout_builder_st）モジュールと連携
- ルートごとに設定可能 - どのLayout Builderアクションをiframeモーダルで開くかを選択
- コアのLayout Builderルート以外にもiframeモーダル機能を拡張するカスタムルートをサポート
Use Cases
複雑なブロック設定フォーム
タブ、アコーディオン、WYSIWYGエディタ、ネストされたフィールドセットを含む複雑なフォームを持つブロックを使用する場合、iframeモーダルはCSSコンフリクトなしに管理テーマのスタイリングを使用してこれらの要素が正しくレンダリングされることを保証します。
Media Libraryとの統合
Media Libraryインターフェースは、フロントエンドテーマとコンフリクトする可能性のある特定のCSSとJavaScriptを必要とします。管理テーマを使用してiframe内でレンダリングすることで、Media Libraryが正しく機能することを保証します。
Entity Browserの使用
Entity Browserは、管理テーマのスタイリングに依存するエンティティ選択用のリッチなUIを提供します。iframeモーダルは、Entity Browserインターフェースを壊す可能性のあるCSSの漏れを防ぎます。
Paragraphsウィジェットの編集
Layout Builderブロック内でParagraphsやその他の複雑なフィールドウィジェットを編集する場合、iframeモーダルはこれらのネストされたフォームに適切な管理テーマのコンテキストを提供します。
多言語レイアウトの編集
Layout Builderを翻訳されたレイアウト（layout_builder_stモジュール）と共に使用する場合、iframeモーダルは一貫した編集体験のためにブロックの翻訳とインラインブロックの翻訳ルートの両方をサポートします。
カスタムLayout Builder拡張機能
新しいLayout Builderルートを追加するcontribまたはカスタムモジュールの場合、サイトビルダーはこれらのカスタムルートを設定に追加して、iframeモーダルで開くようにできます。
Tips
- ルートを選択的に有効にできます - ブロック編集のみiframeモーダルにして、セクション設定は通常通りにしたい場合は、設定ページでセクションルートのチェックを外してください
- カスタムルートは設定フォームで1行に1つずつ追加して、iframeモーダルの動作をcontribモジュールのルートに拡張できます
- このモジュールはDrupal 10と11の両方で動作し、バージョン固有のレンダリングの違いを自動的に処理します
- 問題をデバッグする際は、ブラウザコンソールでpostMessageイベントを確認して、iframe通信フローを理解してください
Technical Details
Admin Pages 1
/admin/config/content/layout_builder_iframe_modal
管理テーマを使用してiframeモーダル内でフォームをレンダリングするLayout Builderルートを設定します。
権限 1
Hooks 5
hook_theme
2つのテーマフックを定義します：iframeコンテナをレンダリングするための'lbim_iframe'と、リダイレクトページテンプレート用の'lbim_redirect'。
hook_preprocess_html
モーダルルート上でHTMLを前処理し、iframeコンテンツから不要なページ領域（header、breadcrumb、pre_content、page_top）を削除します。
hook_contextual_links_alter
ブロック上のコンテキストリンクを変更し、ルートがiframeモーダル用に設定されている場合、ダイアログタイプをオフキャンバスからiframeに変更します。
hook_link_alter
Layout Builderページ上のリンクを変更し、ターゲットルートがiframeモーダル用に設定されている場合、ダイアログリンクをiframeレンダリングを使用するように変更します。
hook_form_alter
Layout Builderフォームを変更し、iframe内でフォーム送信が成功した後にプログラムでトリガーできる非表示の「レイアウトを再構築」リンクを追加します。
Troubleshooting 4
/admin/config/content/layout_builder_iframe_modalの設定ページを確認し、目的のルートが有効になっていることを確認してください。変更後はすべてのキャッシュをクリアしてください。
JavaScriptエラーが発生しているか、フォーム送信が失敗している可能性があります。ブラウザのコンソールでエラーを確認してください。管理テーマが正しく動作していることを確認してください。
このモジュールは送信ボタンからAJAXハンドラを削除します。カスタムコードがAJAXハンドラを再追加している場合、コンフリクトが発生する可能性があります。他のモジュールがフォーム送信に干渉していないことを確認してください。
管理テーマが正しく設定されていることを確認してください。iframeは管理テーマを使用してページを読み込むため、管理テーマがフォーム要素を適切にスタイリングしていることを確認してください。
Security Notes 2
- 'configure layout builder iframe modal'パーミッションは「アクセス制限」としてマークされており、信頼できる管理者にのみ付与してください
- iframeはセキュリティのために特定のメッセージ形式（'LBIM_REDIRECT'）を使用した同一オリジンのpostMessage通信を使用します