UI Patterns Settings
UI Patternsを拡張し、hook_preprocess実装を必要とせずに設定を通じてパターンを構成可能にします。
ui_patterns_settings
インストール
composer require 'drupal/ui_patterns_settings:8.x-2.4'
composer require 'drupal/ui_patterns_settings:8.x-2.2'
概要
UI Patterns Settingsは、UI Patternsモジュールの強力な拡張機能で、宣言的な設定を通じてパターンの構成を可能にします。サイトビルダーや開発者がUI Patternsのパターン定義内で直接構成可能な設定を定義でき、カスタムのpreprocessコードなしでパターンをより柔軟で再利用可能にします。
このモジュールは、テキストフィールド、ドロップダウン、チェックボックス、Media Libraryとの統合、カラーウィジェットなど、20種類以上の組み込み設定タイプを含む包括的なプラグインベースのアーキテクチャを提供します。Layout Builder、Display Suite、Field Groupsとシームレスに統合され、Tokenモジュールを通じた動的な値もサポートします。
主な機能には、バリアント固有の設定オーバーライド、バリアントや他の設定に基づく条件付き表示/非表示、パターン設定をEntityフィールドにマッピングする公開フィールド、メニューやパンくずリストなどの複雑な設定タイプ用のデータプロバイダーが含まれます。
Features
- 20種類以上の組み込みタイプを持つプラグインベースの設定タイプシステム(textfield、select、boolean、checkboxes、radios、number、url、token、attributes、media_library、colorwidget、coloris、machine_name、group、links、role_access、role_checkboxes、language_access、language_checkboxes、publish、value、enumeration)
- DrupalのTokenシステムを使用して設定内の動的な値置換を可能にするToken統合
- パターンベースのレイアウト使用時にLayout Builderインターフェースで直接パターン設定を構成できるLayout Builder統合
- フィールド表示設定でパターン設定を構成できるDisplay Suite統合
- バリアントごとにデフォルト値をオーバーライドしたり、設定定義を完全に変更できるバリアント固有の設定
- バリアント選択や他の設定値に基づいて設定の表示/非表示を制御するstatesシステムを使用した条件付き表示
- プログラムからのアクセスのためにパターン設定をEntityフィールドにマッピングできる公開フィールド機能
- 動的データを供給する複雑な設定タイプ(menu、breadcrumb)用のデータプロバイダープラグインシステム
- 画像スタイル、レスポンシブ画像スタイル、表示モード、インライン編集をサポートするMedia Library設定タイプ
- 設定をフィールドセット、詳細、水平タブに整理するためのGroup設定タイプ
- ユーザーロールや現在の言語に基づく条件付きレンダリングのためのロールベースおよび言語ベースのアクセス設定
- パターンの表示/非表示を制御するPublish/unpublish設定タイプ
- テンプレートで設定にアクセスするためのpattern_configuration()関数を提供するTwig拡張
- レンダリング前に設定やバリアントを変更するためのHook(hook_ui_pattern_settings_settings_alter、hook_ui_pattern_settings_variant_alter)
- パターン設定を整理するためのField Groupsサポート
- 設定用の構成可能なプレビュー値を持つパターンプレビューサポート
Use Cases
構成可能なカードコンポーネント
修飾クラス、URLリンク、HTML属性の設定を持つカードパターンを作成します。サイトビルダーは、preprocessコードを書くことなく、カードのバリアントを構成し、カスタムCSSクラスを追加し、[node:url]のようなTokenを使用して動的なURLを設定できます。
動的なナビゲーションパターン
menuデータプロバイダーを持つlinks設定タイプを使用してナビゲーションコンポーネントを作成します。Layout BuilderまたはDisplay Suiteインターフェースで直接、表示するメニュー、初期表示レベル、深度を構成できます。
ロールベースのコンテンツ表示
role_access設定を使用して、ユーザーロールに基づいてパターン要素の表示/非表示を制御します。例えば、匿名ユーザーにのみプロモーションバナーを表示したり、管理者専用コンテンツを管理者にのみ表示できます。
多言語コンテンツ制御
language_access設定を使用して、現在のサイト言語に基づいてパターンの表示を制御します。言語固有のプロモーションコンテンツや地域固有の機能を表示できます。
バリアントベースの設定
各バリアントが特定の設定値を自動的に適用するパターンバリアントを定義します。例えば、「product」バリアントは手動設定なしで修飾クラスやシャドウ属性を自動的に設定できます。
Tokenベースの動的値
設定で allow_token: true を使用してToken置換を有効にします。サイトビルダーは、レンダリング時に実際の値に置換される [node:title] や [user:display-name] のようなTokenを入力できます。
パターンでのメディア統合
media_library設定タイプを使用して、サイトビルダーがパターン設定で直接画像やメディアを選択できるようにします。自動的に適用される画像スタイルやレスポンシブ画像スタイルを構成できます。
プログラムアクセス用の公開フィールド
expose機能を使用してパターン設定をEntityフィールドにマッピングします。これにより、パターン設定をEntityフィールド値から入力でき、コンテンツ編集者が使い慣れたフィールドインターフェースを通じてパターンの動作を制御できます。
Tips
- 設定の 'preview' プロパティを使用して、パターンライブラリ表示用のプレビュー値を定義できます。
- 'group' プロパティを使用して、関連する設定をフィールドセットやタブに整理し、UIの整理を改善できます。
- 'states' プロパティを使用して条件付き表示を実現できます - 特定のバリアントが選択されたときや他の設定が特定の値を持つときにのみ設定を表示します。
- 'required: true' を使用して、フォーム検証で設定を必須にできます。
- 'forced_value' を使用して、UIで変更できない値を設定できます - プログラムによるオーバーライドに便利です。
- 'form_visible: false' を使用して、処理は行いながらUIから設定を非表示にできます。
- バリアント設定と設定定義を組み合わせて、値だけでなくバリアントごとの設定構成全体をオーバーライドできます。
- pattern_configuration() Twig関数を使用して、テンプレートでパターン設定値にアクセスできます。
- linksのような複雑な設定タイプにデータプロバイダーを使用して、メニューやパンくずリストデータで設定を動的に入力できます。
Technical Details
Hooks 2
hook_ui_pattern_settings_settings_alter
UI Patterns Settings の設定がレンダリングされる前に変更します。特定のパターンに対して構成済みのパターン設定をオーバーライドしたり、カスタム設定ロジックを実装できます。
hook_ui_pattern_settings_variant_alter
UI Patterns のバリアントが設定処理に渡される前に変更します。構成済みのパターンバリアントをプログラムでオーバーライドできます。
Troubleshooting 5
パターン定義に適切に構成された設定タイプを持つ「settings」セクションが含まれていることを確認してください。UI Patternsモジュールが有効で、パターンが正しく登録されていることを確認してください。
必要なモジュールをインストールしてください: media_library_form_element と media_library_edit。media_library設定タイプにはこれらのモジュールが必要です。
設定定義に 'allow_token: true' があることを確認してください。また、Tokenモジュールがインストールされており、Token構文が正しいことを確認してください。
colorwidgetフォーム要素タイプを提供するColor Widgetモジュールをインストールしてください。
パターンテンプレートが設定変数(例: {{ modifier }}、{{ attributes }})を使用していることを確認してください。設定は名前に一致するテンプレート変数として渡されます。