Layout Components
Drupal Layout Builderの包括的な拡張モジュールで、事前構築済みコンポーネント、改善されたUI/UX、ライブプレビュー機能、セクションとカラムの広範なカスタマイズオプションを提供します。
layoutcomponents
インストール
composer require 'drupal/layoutcomponents:^3.0'
composer require 'drupal/layoutcomponents:^4.0'
概要
Layout Componentsは、DrupalのLayout Builderの上に構築された高度なモジュールで、そのシステムと統合されたコンポーネントの完全なパッケージを提供します。このモジュールは、コンテンツ編集中の変更のライブプレビューなどの必須機能を備えた、よりカスタマイズ可能な改善されたインターフェースを作成することで、ユーザーエクスペリエンスを拡張します。
このモジュールは、テキスト、画像、動画、アコーディオン、タブ、タイムライン、カウントダウンなど、すぐに使用できる一連のコンポーネントをエディターに提供します。開発者向けには、Layout Componentsはモジュールが提供するすべてのカスタマイズ機能を活用しながらカスタムフィールドを追加できるAPIを提供します。
Layout Componentsは、背景、色、ボーダー、スペーシングなどをカスタマイズできる6種類のBootstrapベースのグリッドレイアウト（1〜6カラム）を提供します。エディターは、パララックスオプション付きの背景色や画像を追加したり、パディングを設定したり、複数のCSSクラスやHTML属性を追加したり、スタイリング付きのセクションタイトルを作成したり、テンプレートを変更したり、セクションを全幅に設定したりできます。
Features
- 柔軟なカラム幅配分を持つ1〜6カラム構成をサポートする6つのBootstrapベースのレイアウトテンプレート
- Layout Builderでのコンテンツ編集中の変更のライブプレビュー
- タイトル、説明、背景色/画像、パララックス効果、全幅オプションを含む包括的なセクションカスタマイズ
- 個別のタイトルスタイリング、背景色、ボーダー、ボーダー半径、パディングコントロールを備えたカラムカスタマイズ
- テキスト、画像、動画、アコーディオン、タブ、タイムライン、カウントダウン、カード、ボタンなど20以上の事前構築済みコンポーネントブロックタイプ
- セクション、カラム、ブロックをコピー＆ペーストするためのクリップボード機能
- セクション、カラム、ブロックに対するエンティティタイプごとの動的パーミッションを持つきめ細かいパーミッションシステム
- 開発者がLCのスタイリングと機能を持つカスタムフィールドを作成するためのコンポーネントAPI
- ブロックのエクスポートとインポート用のDrushコマンド
- カルーセルセクション用のSlickカルーセルとの統合
- セクション内のタブレイアウトのサポート
- エディター用の設定可能なカラーパレット付きカラーピッカー
- Bootstrap XS、SM、MD、LG、XLブレークポイントをサポートするレスポンシブデザイン
- 背景画像と動画用のMedia Library統合
- カスタムラッパー要素タイプ（div、span、section、article、header、footer、aside、figure）
Use Cases
マーケティングランディングページの構築
Layout Componentsを使用して、背景動画を備えた全幅ヒーローセクション、カード付きの3カラム機能セクション、会社の歴史を紹介するタイムラインセクション、ソーシャルリンク付きのお問い合わせセクションを持つ魅力的なランディングページを作成します。各セクションは、一貫したBootstrapベースのレスポンシブデザインを維持しながら、独自の背景色、パディング、スタイリングを持つことができます。
タブ付き製品情報の作成
Simple Tabsコンポーネントを使用して、仕様、レビュー、関連製品が別々のタブに整理された製品ページを作成します。各タブコンテンツエリアは完全なLayout Builderエクスペリエンスをサポートし、各タブ内で複雑なレイアウトを可能にします。
アコーディオン付きチームディレクトリの構築
各部門が折りたたみ可能なセクションになっているアコーディオンコンポーネントを使用してチームページを作成します。展開すると、各セクションにはマルチカラムレイアウトで配置された画像、タイトル、経歴を持つチームメンバーカードが表示されます。
カルーセル付きフォトギャラリー
Slick統合を使用して、複数の画像ブロックを含むセクションをスムーズなカルーセルギャラリーに変換します。自動再生、ナビゲーション矢印、ドットをユーザーコントロール用に設定できます。
イベントカウントダウンページ
イベントまでの日数、時間、分、秒を表示するカウントダウンタイマーコンポーネントを含むイベントページを作成します。イベントポスター用の画像コンポーネントやイベント詳細用のテキストコンポーネントと組み合わせます。
コンテンツエディターのワークフロー
ライブプレビュー機能を使用して、開発者の支援なしにページを構築できるようコンテンツエディターを支援します。エディターはセクションを追加し、カラム幅を調整し、背景色を設定し、リアルタイムで結果を確認しながらブロックを配置できます。
Tips
- 必要なコンポーネントサブモジュールのみを有効にしてください - 有効にした各コンポーネントはブロック選択ダイアログに表示されるブロックタイプを作成します
- サイトのデザインシステムに合わせてデフォルトのセクションとカラムスタイルを設定し、エディターの繰り返しスタイリング作業を削減します
- クリップボード機能を使用して、ページ間で複雑なセクション、カラム、またはブロックを素早く複製できます
- レスポンシブカラム幅オプションを活用して、異なるブレークポイント（XS、SM、MD、LG、XL）で異なるレイアウトを作成できます
- 追加クラスと追加属性フィールドを使用して、JavaScriptインタラクション用のカスタムCSSクラスやdata属性を追加できます
- パフォーマンスのため、カルーセル機能が必要な場合のみlc_slickを有効にしてください。Slickライブラリの依存関係が追加されます
- デプロイメントワークフローでエクスポート/インポートDrushコマンドを使用する予定がある場合は、一般設定のフォルダパス設定が不可欠です
Technical Details
Admin Pages 5
/admin/config/layoutcomponents/settings
ブロックのエクスポートフォルダパスや横型設定メニューの幅など、Layout Componentsの一般設定を構成します。
/admin/config/layoutcomponents/settings/interface
Layout Componentsインターフェースのビジュアルテーマを設定します。
/admin/config/layoutcomponents/settings/colors
セクションとカラムをカスタマイズする際にエディターが使用できるカラーパレットを設定します。
/admin/config/layoutcomponents/settings/section
Layout Componentsセクションのデフォルトのスタイリングと動作設定を構成します。これらのデフォルトは新しいセクションを作成するときに適用されます。
/admin/config/layoutcomponents/settings/column
Layout Componentsカラムのデフォルトのスタイリングと動作設定を構成します。これらのデフォルトは新しいカラムを作成するときに適用されます。
権限 18
Hooks 3
hook_theme
Layout Componentsテンプレート用のテーマ実装を定義します。
hook_preprocess_block
Layout Componentsブロック用のブロック変数を前処理します。
hook_theme_suggestions_alter
Layout Componentsテンプレート用のテーマサジェスチョンを追加します。
Drush Commands 3
drush lc:export
すべてのLayout Componentsブロックを設定されたフォルダ内のJSONファイルにエクスポートします。Layout Builderディスプレイで使用されるブロックとそのエンティティリファレンスリビジョン（タブ、アコーディオンアイテムなど）をエクスポートします。
drush lc:import
設定されたフォルダ内のJSONファイルからLayout Componentsブロックをインポートします。最初に既存のブロックを削除し、エンティティ参照と翻訳を保持しながらJSONファイルからインポートします。
drush lc:delete
Layout Builderディスプレイで使用されるすべてのLayout Componentsブロックを削除します。関連するエンティティリファレンスリビジョンアイテムも削除します。
Troubleshooting 6
アクティブなテーマがBootstrap 4またはBootstrap 5ベースであることを確認してください。Layout ComponentsはBootstrapのグリッドシステムを使用しており、適切にレンダリングするためにこれらのCSSフレームワークが必要です。
composer-patchesがインストールされ有効になっていることを確認してください。composer.jsonの'extras'セクションに'"enable-patching": true'を追加し、'composer update'を実行して必要なパッチを適用します。
このモジュールにはdrupal/coreとdrupal/inline_entity_form用のパッチが含まれています。composer.lockを確認するか'composer update --dry-run'を実行して、これらのパッチが適用されていることを確認してください。
lc_commandsサブモジュールがhalおよびserializationモジュールとともに有効になっていることを確認してください。/admin/config/layoutcomponents/settingsでエクスポートフォルダパスが正しく設定されており、フォルダが存在し書き込み可能であることを確認してください。
/admin/config/layoutcomponents/settings/colorsで16進数カラー（カンマ区切り）を追加してください。形式: #ffffff,#000000,#f89456
Layout Componentsはエンティティタイプごとの動的パーミッションを使用します。admin/people/permissionsで各コンテンツタイプに対する適切なパーミッション（セクションの作成、ブロックの設定など）を付与してください。
Security Notes 4
- Layout ComponentsはDrupalのパーミッションシステムを尊重し、エンティティタイプごとのきめ細かい動的パーミッションを提供します
- 追加属性フィールドは任意のHTML属性を許可します - セクションを設定できるのは信頼できるユーザーのみであることを確認してください
- Iframeコンポーネントは外部コンテンツを埋め込むことができます - XSSベクターを防ぐためにパーミッションを慎重に確認してください
- エクスポート/インポートコマンドはファイルシステムにファイルを書き込みます - 設定されたフォルダが適切なパーミッションを持ち、Webからアクセスできないことを確認してください