Extra Block Types (EBT): Core
Extra Block Types (EBT) ファミリーのコア基盤モジュール。すべてのEBTブロックモジュールに共有フィールドタイプ、サービス、デザインオプションを提供します。
ebt_core
インストール
composer require 'drupal/ebt_core:^1.4'
概要
EBT Coreは、Extra Block Types (EBT) エコシステムの基盤モジュールです。他のすべてのEBTブロックタイプモジュールが依存する重要な共有機能を提供します。これには、ブロック設定を保存するためのカスタムフィールドタイプ、CSS/JavaScript生成サービス、ビジュアルデザインオプションインターフェースが含まれます。
このモジュールは、コンテンツエディターがLayout Builderインターフェースで直接ブロックの外観をカスタマイズできる包括的なデザインオプションシステムを提供します。マージン、ボーダー、パディング、パララックス効果付きの背景画像/動画、端から端までのレイアウト、レスポンシブなコンテナ幅の制御が含まれます。すべての設定はカスタムフィールドタイプを使用して保存され、インラインCSSとして動的にレンダリングされます。
EBT Coreは、EBTモジュール間でテンプレートを登録するためのヘルパー関数も提供し、ブロックタイプの一貫したテーマ動作とテンプレートサジェスチョンを実現します。
Features
- シリアライズ形式でブロック設定を保存するカスタムフィールドタイプ（ebt_settings）
- マージン、ボーダー、パディングコントロール用のネストされたボックスモデルUIを備えたビジュアルデザインオプションインターフェース
- デザイン設定をブロック用のインラインスタイルに変換するCSS生成サービス
- パララックス効果とYouTube動画背景用のJavaScript生成サービス
- cover、contain、repeat、parallaxの複数の表示モードを持つ背景画像のサポート
- jquery.mb.YTPlayerライブラリを通じたYouTube動画背景のサポート
- フル幅ブロック背景用の端から端までのレイアウトオプション
- カスタマイズ可能なピクセル値を持つxxSmallからxxLargeまでの設定可能なコンテナ幅
- モバイル、タブレット、デスクトップ向けのレスポンシブブレークポイント設定
- EBTブロック全体で一貫したテーマを実現するためのプライマリカラーとセカンダリカラーの設定
- インストールされたすべてのEBTモジュールの自動テンプレート登録
- テーマカスタマイズを容易にするブロックタイプテンプレートサジェスチョン
- ボーダーと背景色選択用のカラーピッカー統合
- Oliveroテーマの端から端までのレイアウト用の特別な処理
Use Cases
フル幅ヒーローセクションの作成
端から端までオプションとCoverモードに設定された背景画像を組み合わせて、テーマのデフォルトコンテンツ幅制約に関係なく、ブラウザビューポート全体に広がるインパクトのあるフル幅ヒーローセクションを作成します。
パララックススクロールページの構築
背景画像を選択し、Background Image StyleをParallaxに設定して、背景が前景コンテンツとは異なる速度で移動する魅力的なスクロール効果を作成します。
YouTube動画背景の埋め込み
Remote Videoメディアアイテム（YouTube URL）を背景として追加し、ブロックコンテンツの背後で自動再生、ループ、ミュートで表示される目を引く動画背景を作成します。
ブロック全体での一貫したブランドスタイリング
EBT Core設定ページでプライマリカラーとセカンダリカラーを設定し、サイト全体のすべてのEBTブロックがボタンとアクセントに一貫したブランドカラーを使用することを保証します。
レスポンシブコンテナ管理
端から端までの背景と組み合わせてContainer Max Width設定を使用し、フル幅の背景を持ちながら特定の幅に制約された中央揃えのコンテンツを持つセクションを作成します。
カスタムブロック間隔とボーダー
ビジュアルボックスモデルインターフェースを使用してブロックの正確なマージン、パディング、ボーダー値を設定し、コンテンツセクション間の間隔と視覚的な区切りを細かく制御できます。
Tips
- すべてのデザインオプション機能を有効にするために、jQuery ColorPicker、Parallax.js、jquery.mb.YTPlayerライブラリを/librariesフォルダにインストールしてください。
- 一貫したレスポンシブデザインのために、サイト全体でxxSmallからxxLargeまでのコンテナ幅プリセットを一貫して使用してください。
- OliveroテーマでEdge-to-Edgeを使用する場合、モジュールは自動的にマージンを調整してコンテンツを正しく中央揃えにします。
- デザインオプションウィジェットはビジュアルなCSSボックスモデルインターフェースを使用します - オレンジのボックスはマージン、黄色はボーダー、緑はパディングです。
- 個々のEBTブロックモジュール（EBT Accordion、EBT Carouselなど）はEBT Coreを依存関係として必要とし、そのデザインオプション機能を継承します。
- 一貫性のために、ブロックごとに設定するのではなく、EBT Core設定でグローバルブレークポイントと幅を一度設定してください。
- YouTubeからの背景動画は、環境背景として使用するために自動的にミュートされ、ループされます。
Technical Details
Admin Pages 1
/admin/config/content/ebt-core
プライマリ/セカンダリカラー、レスポンシブブレークポイント、コンテナ幅プリセットを含むすべてのEBTブロックのグローバル設定を構成します。これらの値は、個々のEBTブロックインスタンスが参照できるデフォルト値として機能します。
Hooks 6
hook_entity_presave
Paragraphsを使用したブロックタイプエンティティフォームでlangcodeが空になる問題を修正します。この回避策は、既知のParagraphsモジュールの問題に対処します。
hook_theme_registry_alter
有効なすべてのEBTモジュールのテーマテンプレートを動的に登録します。EBTモジュールの命名規則に基づいて、paragraphs、inline blocks、block content、fieldsのテンプレートサジェスチョンを作成します。
hook_theme_suggestions_block_alter
block contentエンティティ用のブロックタイプテンプレートサジェスチョンを追加します。ブロックbundleとview modeに基づくテーマテンプレートを有効にします。
hook_theme
EBT settingsフィールド出力をレンダリングするためのebt_settings_defaultテーマフックを登録します。
hook_preprocess_block
インラインCSSスタイルを注入し、パララックスとYouTube動画背景用のJavaScriptライブラリをアタッチするためにEBTブロックを前処理します。端から端までとコンテナ幅設定用のCSSクラスを追加します。
hook_block_content_view
クライアントサイド機能のためにdrupalSettings経由でEBTブロックオプションをJavaScriptに渡します。一意の識別のためにrevision IDとUUIDを使用してブロック固有の設定をアタッチします。
Troubleshooting 5
EBT Coreをインストールする前にImageメディアタイプを作成してください。サイト構築 > メディアタイプ > メディアタイプの追加に移動し、「Image」ソースを持つメディアタイプを作成します。
ブロックタイプの表示設定（例：/admin/structure/block/block-content/manage/ebt_cta/display/default）に移動し、Layout Builderオプションを無効にして、ブロックタイプフィールドの表示に対するLayout Builderを無効にします。
jQuery ColorPickerライブラリが/libraries/jquery-colorpickerにインストールされていることを確認してください。ebt_core.libraries.ymlにリンクされているリポジトリからダウンロードしてください。
parallax.jsライブラリが/libraries/parallaxjsにインストールされていることを確認してください。ライブラリは/libraries/parallaxjs/parallax.min.jsに配置する必要があります。
jquery.mb.YTPlayerライブラリを/libraries/jquery-mb-ytplayerにインストールしてください。プレーヤーがアタッチするために、ブロックには.bg-inner要素が必要です。