Block Styles
ブロック設定フォームを通じて、テンプレートサジェスチョンとカスタムCSSクラスを使用してDrupalブロックの外観を変更できます。
block_styles
インストール
composer require 'drupal/block_styles:^2.0'
概要
Block Stylesは、コードを書くことなく、代替テンプレートやCSSクラスを適用してブロックの外観を柔軟に変更する方法を提供します。このモジュールはStyles APIと統合されており、ブロック設定フォームから直接、事前定義されたスタイルテンプレートを選択できます。
Block Layoutインターフェースでブロックを編集する際、管理者はデフォルトのblock.html.twigテンプレートを置き換える利用可能なスタイルテンプレートから選択できます。さらに、ブロックラッパーにカスタムCSSクラスを追加でき、インタラクティブなスタイル（モーダルやドロップダウンなど）にはカスタムボタンテキストを指定できます。
このモジュールは、各ブロックのスタイル設定を保存するconfig entityを作成し、hook_theme_suggestions_block_alter()を使用して選択されたテンプレートサジェスチョンを追加し、hook_preprocess_block()を使用してCSSクラスとボタンテキスト変数をテンプレートに追加します。
Features
- ブロック設定フォームのドロップダウンから代替ブロックテンプレートを選択
- シンプルなテキストフィールドでブロックラッパーにカスタムCSSクラスを追加
- インタラクティブなスタイルテンプレート（モーダル、ドロップダウン、折りたたみ）用のカスタムボタンテキストを設定
- デフォルトのブロックラッパーマークアップを削除する「Clean Wrapper」テンプレートを提供
- 拡張可能なスタイル定義のためのStyles API pluginシステムと統合
- プロバイダーテーマがアクティブな場合にのみ適用されるテーマ固有のスタイルをサポート
- エクスポート可能なconfig entityとしてスタイル設定を保存
Use Cases
ブロックをBootstrapモーダルダイアログとして表示
block_styles_bootstrapを有効にし、ブロックを編集して、スタイルドロップダウンから「Bootstrap Modal」を選択し、カスタムボタンテキストを入力します。ブロックコンテンツは非表示になり、ボタンをクリックするとモーダルで表示されます。ログインフォーム、お問い合わせフォーム、またはページスペースを取るべきでない補足コンテンツに便利です。
折りたたみ可能なサイドバーブロックを作成
サイドバーブロックに「Bootstrap Collapse」スタイルを適用して折りたたみ可能にします。ユーザーはボタンをクリックしてブロックコンテンツを展開/折りたたみできます。モバイルフレンドリーなサイドバーや、コンテンツにアクセスしやすい状態を保ちながら視覚的な煩雑さを減らすのに最適です。
ブロックをBootstrap cardとしてスタイル設定
「Bootstrap Card」スタイルを使用して、ブロックコンテンツを適切なヘッダーとボディセクションを持つBootstrap cardコンポーネントでラップします。ブロックタイトルはカードヘッダーに、コンテンツはカードボディに表示されます。
デフォルトのブロックラッパーマークアップを削除
「Clean Wrapper」スタイルを適用して、デフォルトのDrupalブロックラッパーHTMLを削除します。CSSフレームワークとの統合時や、デフォルトのブロックマークアップがテーマのデザインと競合する場合に便利です。
ブロックにカスタムCSSクラスを追加
テンプレートを変更せずに、ブロック設定フォームを通じて任意のブロックのラッパー要素にカスタムCSSクラスを追加できます。ユーティリティクラス、カスタムスタイル、またはフレームワーク固有のクラスの適用に便利です。
ブロックからドロップダウンメニューを作成
ナビゲーションまたはコンテンツブロックに「Bootstrap Dropdown」スタイルを適用して、ボタンクリックでトリガーされるドロップダウンメニューとして表示します。ドロップダウンは内部をクリックしても開いたままになり、インタラクティブなコンテンツが可能です。
Tips
- デフォルトのDrupalラッパー要素なしでブロックマークアップを完全に制御したい場合は「Clean Wrapper」スタイルを使用
- Bootstrapスタイルが正しく機能するには、テーマにすでにBootstrapフレームワークが含まれている必要があります
- Block Stylesで追加されたカスタムCSSクラスは、最も外側のブロックラッパー要素に適用されます
- ボタンテキストフィールドが空の場合、デフォルトでブロックの設定済みラベルが使用されます
- スタイル設定はconfig entityとして保存され、DrupalのConfiguration Managementでエクスポート/インポートできます
- 新しいスタイルは、Block Stylesを変更することなく、Styles API pluginシステムを通じてモジュールやテーマで追加できます
Technical Details
Hooks 3
hook_theme_suggestions_block_alter
選択されたスタイルテンプレートをブロックのテーマサジェスチョンとして追加
hook_preprocess_block
ブロックテンプレートにCSSクラスとボタンテキスト変数を追加
hook_form_block_form_alter
ブロック設定フォームにBlock Stylesフィールドセットを追加
Troubleshooting 4
テーマにBootstrap CSSとJavaScriptライブラリが含まれていることを確認してください。block_styles_bootstrapサブモジュールはBootstrapマークアップを使用するテンプレートのみを提供し、Bootstrapフレームワーク自体は含まれていません。
Styles APIモジュールがインストールされ、有効になっていることを確認してください。Block Stylesは利用可能なスタイルpluginを検出するためにStyles APIを必要とします。
テーマ固有のスタイルは、そのテーマがアクティブな場合にのみ適用されます。スタイルが特定のテーマによって提供されている場合、別のテーマを使用しているときは表示または機能しません。
ボタンテキストフィールドは、定義で「extras.label」が有効になっているスタイルにのみ表示されます。すべてのスタイルがカスタムボタンテキストをサポートしているわけではありません。