Layout Builder +
Drupalの標準Layout Builder UIを置き換える拡張モジュール。ネストされたレイアウトとツールベースの編集をサポートする、強化されたドラッグ＆ドロップのページ構築体験を提供します。
lb_plus
インストール
composer require 'drupal/lb_plus:^3.5'
composer require 'drupal/lb_plus:^3.3'
概要
Layout Builder +（LB+）は、標準のLayout Builderユーザーインターフェースを、モダンで直感的なドラッグ＆ドロップ編集体験に完全に置き換えます。このモジュールは、ユーザーが様々なツール（ブロック配置、移動、レイアウト、設定、複製、削除）から選択してページ要素を操作できる、ツールバーベースのアプローチを導入しています。
主な機能として、「Layout Block」によるネストされたレイアウトのサポートがあります。これは、Layout Builder自体を使用するカスタムブロックタイプで、コンテナ内にコンテナを配置する複雑なページ構造を可能にします。このモジュールは、プロモートされたブロックとセクションを配置するためのサイドバーインターフェース、ブロックとセクションの両方のリアルタイムドラッグ＆ドロップ並べ替え、ツールの素早い切り替えのためのキーボードショートカットを提供します。
LB+は、フロントエンドテーマとシームレスに連携するよう設計されており、別の管理インターフェースではなくページ上に直接編集UIを表示します。一貫したツールバー動作のためにNavigation Plusエコシステムと統合し、素早いブロック操作のためのコンテキストメニューリンクをサポートしています。
Features
- 直感的なページ構築のための視覚的なドロップゾーンを備えたドラッグ＆ドロップによるブロック配置
- Layout Blockによるネストされたレイアウトのサポート - 独自のLayout Builderセクションを含むブロック
- 6つのツールによるツールベースの編集システム：ブロック配置（B）、移動（M）、レイアウト（L）、設定（O）、複製（D）、削除（T）
- 編集セッション中の素早いツール切り替えのためのキーボードショートカット
- 管理者が頻繁に使用するブロックをハイライトして簡単にアクセスできるプロモートブロックシステム
- 視覚的なブロック識別のためのカスタムアイコンパスを含むブロック設定管理
- レイアウト変更、設定、削除を含むセクションレベルの操作
- ページのリロードなしでAJAXを使用したリアルタイムUI更新
- 一貫した新規セクション作成のためのエンティティ表示ごとのデフォルトセクション設定
- 編集中のブロックプレビュー切り替えとレイアウトアウトライン表示
- 親エンティティとネストされたLayout Block間でのフィールドブロックの移動サポート
- 自動入力されるプレースホルダーコンテンツのためのField Sample Valueモジュールとの統合
- 設定、複製、削除操作への素早いアクセスのためのブロック上のコンテキストメニューリンク
Use Cases
マーケティングランディングページの構築
コンテンツ編集者はドラッグ＆ドロップインターフェースを使用して素早くランディングページを構築できます。ブロック配置ツール（Bキー）を選択し、サイドバーからHero、Features、Testimonialsなどのプロモートブロックをドラッグして位置にドロップします。レイアウトツール（Lキー）を使用してセクションレイアウトを変更します（フル幅のヒーローには1カラム、機能グリッドには3カラム）。設定ツール（Oキー）で各ブロックを設定してコンテンツをカスタマイズします。
ネストされたレイアウトによる再利用可能なページコンポーネントの作成
タブ付きコンテンツやアコーディオンセクションなどの複雑なページ要素には、Layout Blockブロックタイプを作成します。その表示でLayout Builderを有効にします。ページを編集する際にLayout Blockを配置し、クリックしてネストされた編集モードに入ります。内部レイアウトを独立して構築します。ネストされたコンテンツは親エンティティとともに保存されますが、ブロックを複製することで再利用できます。
迅速なコンテンツ反復
効率的な編集のためにキーボードショートカットを使用します：Bでブロックを追加、Mで位置変更、Dで類似セクションを複製、Oで設定、Tで不要な要素を削除。レイアウトツールの設定からブロックプレビューとレイアウトアウトラインを切り替えて、コンテンツと構造のビューを確認します。
複数人のコンテンツチームワークフロー
管理者はコンテンツタイプごとにデフォルトセクションを設定し、よく使用するブロックをプロモートします。コンテンツ編集者はデフォルトでプロモートされたブロックのみを見ることができ、複雑さが軽減されます。「その他」タブでは必要に応じてすべての利用可能なブロックにアクセスできます。カスタムアイコンは編集者がブロックタイプを素早く識別するのに役立ちます。
テンプレートベースのページ作成
Section Libraryサブモジュールを使用して、よくデザインされたセクションをテンプレートとして保存します。新しいページを構築する際にSection Libraryツール（Sキー）を開き、保存されたテンプレートをページにドラッグしてからコンテンツをカスタマイズします。一貫した複数ページ構造のためにページレイアウト全体をテンプレートとして保存します。
Tips
- キーボードショートカットを使用してより速く編集：B（ブロック配置）、M（移動）、L（レイアウト）、O（設定）、D（複製）、T（削除）、S（Section Libraryが有効な場合）
- レイアウトツールの設定で「レイアウトアウトライン」を切り替えて、セクションとリージョンの境界を視覚化
- 「ブロックプレビュー」切り替えで、プレースホルダーコンテンツと実際にレンダリングされたブロックを確認可能
- 最もよく使用するブロックをプロモートし、素早い視覚的識別のためにカスタムアイコンを設定
- 自動生成されるプレースホルダーコンテンツをより制御するためにField Sample Valueモジュールを使用
- コンテンツ編集者がLayout Builderを使用する前にデフォルトセクションを設定
- 複雑なページ構造にはLayout Blockを使用して再利用可能なネストされたコンポーネントを作成
Technical Details
Admin Pages 3
/admin/config/content/layout-builder-plus
Layout Builderが有効なすべてのコンテンツの編集体験に影響するグローバルなLayout Builder +設定を構成します。
/admin/structure/types/manage/{entity}/default-layout-section
新しいセクションが作成される際に使用されるデフォルトのレイアウトプラグインと設定を構成します。この設定はエンティティ表示ごとに保存されます（例：コンテンツタイプの表示ごと）。
/admin/structure/types/manage/{entity}/promoted-blocks
簡単にアクセスできるようにブロック配置サイドバーで目立つように表示するブロックを選択します。プロモートされたブロックが最初に表示され、その他のブロックは検索可能なままです。各プロモートブロックにカスタムアイコンパスを設定できます。
権限 2
Hooks 4
hook_element_plugin_alter
標準のlayout_builder要素をLayoutBuilderPlusに置き換えるためにelement plugin定義を変更します。
hook_contextual_links_alter
Layout Builderのデフォルトのコンテキストリンクを削除し、ネストされたレイアウトをサポートするLB+バージョンに置き換えます。supports_nested_layoutsオプションに基づいてネストされたレイアウト内のコンテキストリンクをフィルタリングします。
hook_module_implements_alter
layout_builderのentity_presaveフック実装を削除し、ネストされたレイアウトでのインラインブロック使用を適切に処理するLB+バージョンに置き換えます。
hook_theme_suggestions_page_alter
Layout Builder UI以外のすべてのページ要素を非表示にするために、ネストされたLayout Block編集ルート用のページテンプレートサジェスチョンを追加します。
Troubleshooting 5
関連するエンティティ表示の「プロモートブロック」タブでブロックがプロモートされていることを確認してください。ブロックがLayout Builderコンテキストで利用可能であることを確認してください（一部のブロックにはコンテキスト要件があります）。
/admin/structure/block-contentで「Layout Block」ブロックタイプを作成してください。bodyフィールドを削除し、表示設定でLayout Builderを有効にし、デフォルトセクションを設定してください。ブロックタイプにはlayout_builder__layoutフィールドが必要です。
フィールドブロックは親とネストされたレイアウト間で移動できます。コンテキストマッピングは自動的に調整されます。他のブロックタイプには、レイアウト間の移動を妨げるコンテキスト要件がある場合があります。
/admin/config/content/layout-builder-plusで「ブロックのコンテキストリンクを表示」を有効にしてください。これはよりクリーンなインターフェースのためにデフォルトでは無効になっています。
エンティティ表示の「デフォルトレイアウト」タブにアクセスし、レイアウトプラグインを選択してください。これはセクションを作成する前に必要です。
Security Notes 4
- このモジュールはDrupalのパーミッションシステムを尊重します - ユーザーはレイアウトを編集するために適切なパーミッションが必要です
- ブロック配置は無効なブロックの注入を防ぐためにブロックプラグインIDを検証します
- データの整合性を確保するために複数ステップの操作にはデータベーストランザクションが使用されます
- ネストされたストレージパスシステムはパス操作を防ぐためにセクションデルタとUUIDをエンコードします