Layout Builder Base

DrupalのLayout Builder向けに、柔軟で高度に設定可能なレイアウトを作成するための包括的なプラグインベースを提供し、豊富なスタイリングオプションを備えています。

layout_builder_base
864 sites
30
drupal.org
api gui theme
layout builder layouts page builder layout plugins css grid responsive design theming site building

概要

Layout Builder Baseは、DrupalのLayout Builder向けに複雑で設定可能なレイアウトを作成するための拡張可能な基盤を提供する開発者向けモジュールです。背景色、マージン、パディング、コンテナ幅、グリッドプロパティなどのスタイリングオプションをビルトインでサポートするカスタムレイアウトを作成するために開発者が拡張できる、包括的な抽象ベースクラスのセットを提供します。

このモジュールには、サイト管理者がすべてのレイアウトプロパティのデフォルト値を設定し、管理インターフェースを通じて利用可能なオプションを上書きできる強力な設定システムが含まれています。これにより、コードを書かずにレイアウトの選択肢をカスタマイズすることが可能になります。開発者は、利用可能なオプションをプログラム的に変更するための豊富なalterフックセットも使用できます。

コンパニオンサブモジュールのLayout Builder Base Libraryは、事前設定されたCSSスタイリングを備えたすぐに使えるレイアウト（1カラムから4カラム、およびカスタマイズ可能なカラムレイアウト）を提供し、すぐに機能豊富なレイアウトを使いたいサイトビルダーにとって即座に利用可能です。

Features

  • 豊富な設定オプションを持つカスタムレイアウトプラグイン作成用の抽象ベースクラス（BaseLayoutBase、DefaultLayoutBase）
  • Layout Builder Base Libraryサブモジュールによる事前構築レイアウト：1カラム、2カラム、3カラム、4カラム、およびカスタマイズ可能なカラム
  • 色、画像アップロード、アタッチメント（固定/スクロール）、位置、サイズ、オーバーレイ効果を含む包括的な背景スタイリングオプション
  • 複数サイズでの個別（上、下、左、右）および均等（上下、左右）オプションを備えた柔軟なマージンコントロール
  • 複数サイズでの個別（上、下、左、右）および均等（上下、左右）オプションを備えた柔軟なパディングコントロール
  • 最大レイアウト幅を制御するためのコンテナ幅オプション（デフォルト、小、大、なし）
  • 全幅背景内にコンテンツを収めるためのコンテンツコンテナオプション
  • ヒーローセクション用の100vhおよび80vhを含む高さオプション
  • テキストの色と配置オプション
  • カラムギャップ、行ギャップ、ブレークポイント、アイテム配置を含むマルチカラムレイアウト用のグリッドプロパティ
  • 2カラムレイアウト用のカラム幅オプション（50-50、33-67、67-33、25-75、75-25）
  • 3カラムレイアウト用のカラム幅オプション（33-33-33、25-50-25、25-25-50、50-25-25）
  • autofit、autofill、固定2/3/4カラムオプションを備えたカスタマイズ可能なカラムレイアウト
  • 各レイアウトセクション用のカスタムHTML IDとCSSクラスのサポート
  • 画像スタイル選択付きの背景画像アップロード
  • すべてのレイアウトプロパティのグローバルデフォルト値を設定するための管理インターフェース
  • コード変更なしで利用可能な選択肢をカスタマイズするためのオーバーライドオプションシステム
  • レイアウトオプションのプログラム的カスタマイズのための25以上のalterフック
  • モバイルフレンドリーなレイアウトのためのレスポンシブブレークポイントサポート

Use Cases

背景画像付きヒーローセクションの作成

背景画像アップロード付きの1カラムレイアウトを使用し、高さを100vhまたは80vhに設定し、テキストの可読性のためにダークオーバーレイを適用し、白いテキスト色を使用します。コンテンツコンテナオプションにより、全幅背景を持ちながらコンテンツを中央に配置できます。

レスポンシブなマルチカラムコンテンツセクションの構築

適切なカラム幅を持つ2カラム、3カラム、または4カラムレイアウトを使用します。カラムブレークポイントを設定して、小さな画面でカラムがスタックするタイミングを決定します。コンテンツ間のスペースのためにカラムギャップと行ギャップを調整します。

コンテンツ編集者向けの利用可能なスタイリングオプションのカスタマイズ

/admin/config/content/layout_builder_baseの管理インターフェースを使用してオプションを上書きします。例えば、背景色をブランドカラーのみに制限したり、デザインシステムに合ったカスタムマージンサイズを追加したりできます。

フックを通じたカスタムスタイリングによるレイアウトの拡張

hook_layout_builder_base_background_alter()のようなalterフックを実装してカスタム背景色を追加したり、hook_layout_builder_base_modifiers_alter()で特別なレイアウトバリアントを追加したりします。テーマ内に対応するCSSクラスを作成します。

ベースクラスを使用したカスタムレイアウトプラグインの作成

DefaultLayoutBaseまたはBaseLayoutBaseを拡張してカスタムレイアウトを作成します。getBackgroundOptions()のようなメソッドをオーバーライドして独自のオプションを定義します。モジュールのlayouts.ymlファイルでカスタムクラスを使用してレイアウトを宣言します。

多様なセクションデザインを持つランディングページの構築

単一ページで異なるレイアウトを組み合わせます：1カラムと全高背景のヒーローセクション、3カラムの機能グリッド、2カラム（画像とテキスト）のコールトゥアクション、ナビゲーション用の4カラムフッター。

Tips

  • コードを書かずに利用可能な選択肢をカスタマイズするには、オーバーライドオプション機能を使用してください - これはほとんどのサイト固有のカスタマイズに推奨されるアプローチです
  • オーバーライドオプションの<none>値は、フィールドをレイアウト設定フォームから完全に非表示にし、エディター体験を簡素化するのに便利です
  • レイアウトクラスを拡張する際は、常に親メソッドを呼び出してalterフックが呼び出されるようにしてください
  • 背景画像は画像スタイルをサポートしています - パフォーマンス向上のため、これを使用して画像サイズを最適化してください
  • コンテンツコンテナオプションは、全幅背景を持ちながらコンテンツを中央に配置したいヒーローセクションに便利です
  • カスタムレイアウトの場合、LibraryサブモジュールのBaseOneColumnLayoutまたはBaseMultipleColumnsLayoutを拡張して、すべての事前定義オプションを継承してください

Technical Details

Admin Pages 1
Layout Builder Base設定 /admin/config/content/layout_builder_base

すべてのレイアウトプロパティのグローバルデフォルト値を設定し、各レイアウトプロパティの利用可能なオプションを上書きします。このページは、コードを書かずにサイト全体のレイアウト動作をカスタマイズするための一元化された方法を提供します。

権限 1
Layout Builder Base設定ページへのアクセス

/admin/config/content/layout_builder_baseでLayout Builder Base設定にアクセスして設定することを許可します

Hooks 30
hook_layout_builder_base_background_alter

レイアウト設定フォームで利用可能な背景色オプションを変更します

hook_layout_builder_base_background_attachment_alter

レイアウト設定フォームで利用可能な背景アタッチメントオプション（固定、スクロール）を変更します

hook_layout_builder_base_background_position_alter

レイアウト設定フォームで利用可能な背景位置オプションを変更します

hook_layout_builder_base_background_size_alter

レイアウト設定フォームで利用可能な背景サイズオプション（cover、contain）を変更します

hook_layout_builder_base_background_overlay_alter

レイアウト設定フォームで利用可能な背景オーバーレイオプションを変更します

hook_layout_builder_base_top_margin_alter

レイアウト設定フォームで利用可能な上マージンオプションを変更します

hook_layout_builder_base_bottom_margin_alter

レイアウト設定フォームで利用可能な下マージンオプションを変更します

hook_layout_builder_base_left_margin_alter

レイアウト設定フォームで利用可能な左マージンオプションを変更します

hook_layout_builder_base_right_margin_alter

レイアウト設定フォームで利用可能な右マージンオプションを変更します

hook_layout_builder_base_top_bottom_margins_alter

レイアウト設定フォームで利用可能な上下均等マージンオプションを変更します

hook_layout_builder_base_left_right_margins_alter

レイアウト設定フォームで利用可能な左右均等マージンオプションを変更します

hook_layout_builder_base_top_padding_alter

レイアウト設定フォームで利用可能な上パディングオプションを変更します

hook_layout_builder_base_bottom_padding_alter

レイアウト設定フォームで利用可能な下パディングオプションを変更します

hook_layout_builder_base_left_padding_alter

レイアウト設定フォームで利用可能な左パディングオプションを変更します

hook_layout_builder_base_right_padding_alter

レイアウト設定フォームで利用可能な右パディングオプションを変更します

hook_layout_builder_base_top_bottom_paddings_alter

レイアウト設定フォームで利用可能な上下均等パディングオプションを変更します

hook_layout_builder_base_left_right_paddings_alter

レイアウト設定フォームで利用可能な左右均等パディングオプションを変更します

hook_layout_builder_base_container_alter

レイアウト設定フォームで利用可能なコンテナ幅オプションを変更します

hook_layout_builder_base_content_container_alter

レイアウト設定フォームで利用可能なコンテンツコンテナ幅オプションを変更します

hook_layout_builder_base_height_alter

レイアウト設定フォームで利用可能な高さオプションを変更します

hook_layout_builder_base_color_alter

レイアウト設定フォームで利用可能なテキスト色オプションを変更します

hook_layout_builder_base_alignment_alter

レイアウト設定フォームで利用可能なテキスト配置オプションを変更します

hook_layout_builder_base_column_gap_alter

マルチカラムレイアウトのカラムギャップオプションを変更します

hook_layout_builder_base_row_gap_alter

マルチカラムレイアウトの行ギャップオプションを変更します

hook_layout_builder_base_column_breakpoint_alter

レスポンシブレイアウトのカラムブレークポイントオプションを変更します

hook_layout_builder_base_align_items_alter

マルチカラムレイアウトのアイテム配置オプションを変更します

hook_layout_builder_base_two_column_width_alter

2カラムレイアウトのカラム幅分布オプションを変更します

hook_layout_builder_base_three_column_width_alter

3カラムレイアウトのカラム幅分布オプションを変更します

hook_layout_builder_base_modifiers_alter

カスタムスタイリングロジック用のモディファイアオプションを変更します

hook_layout_builder_base_customizable_columns_alter

カスタマイズ可能なカラムオプションを変更します

Troubleshooting 4
レイアウトオプションが設定フォームに表示されない

レイアウトクラスが適切なベースクラスを拡張していること、およびオプションメソッドを空の配列を返すようにオーバーライドしていないことを確認してください。管理画面のオーバーライドオプションが<none>に設定されていないことを確認してください。

CSSスタイルがレイアウトに適用されない

そのレイアウトを使用している場合は、Layout Builder Base Libraryサブモジュールが有効になっていることを確認してください。CSSクラスがレイアウトオプションとスタイルシート間で一致していることを確認してください。変更後はDrupalキャッシュをクリアしてください。

背景画像が表示されない

ファイルのアップロードが正常に完了し、ファイルがpublic://layout_background/に存在することを確認してください。ファイルのパーミッションを確認し、選択した画像スタイル（もしあれば）が生成されていることを確認してください。

レスポンシブブレークポイントが機能しない

カラムブレークポイントクラスが正しく適用されていることを確認し、CSSメディアクエリを確認してください。Libraryサブモジュールは600px、800px、1200px、1400pxでデフォルトのブレークポイントを提供しています。