UI Patterns 2.x
Bridges SDC components to Drupal's site-builder UI via a plugin architecture — covering props, slots, source plugins, Layout Builder, Views, field formatters, blocks, and the pattern library.
| I need to... | Guide | Summary |
|---|---|---|
| Decide whether to use UI Patterns vs SDC alone | Overview & Decision | UI Patterns 2.x overview — when to use SDC plugins vs standalone SDC |
| Understand the plugin system and rendering pipeline | Architecture | UI Patterns plugin system — managers, services, and rendering pipeline |
| Define a component with props and slots | Defining Components | Component definition structure — YAML keys, JSON Schema props, and required fields |
| Know what prop types are available and how typing works | Props System | Prop types — built-in types, JSON Schema compatibility, and normalize/preprocess pipeline |
| Understand how slots work and support multiple sources | Slots System | Slots — renderables, multiple sources, and normalization for component placeholders |
| Map Drupal data (fields, menus, blocks) to component props/slots | Source Plugins | Source plugins bridge Drupal data to component props/slots. Three categories — widgets (direct input), API sources (Drupal data), and context switchers (entity_field, entity_reference) that unlock sibling-field sources via a mandatory 3-level colon-keyed YAML nesting. |
| Add visual variants to a component | Variants | Variants are declared in component YAML and auto-converted to a string enum prop named variant. For per-instance variants in Layout Builder, use either an entity field (same variant everywhere) or a block template reading configuration.{prop} (different variant per placement, requires Plus Suite BlockPropertiesEvent). |
| Understand how UI Patterns relates to Drupal core SDC | SDC Integration | SDC integration — how UI Patterns decorates, extends, and maintains SDC compatibility |
| Use components as Layout Builder sections | Layout Builder Integration | Layout Builder integration — exposing components as layout plugins with slot regions |
| Use components as Views row/style plugins | Views Integration | Views integration — row and style plugins for rendering Views results as components |
| Display fields using component formatters | Field Formatters | Two formatters — ui_patterns_component (multi-value) and ui_patterns_component_per_item (per-item). Per-item scopes sources to the trigger field only; reach sibling fields via entity_field context switcher. field_property source IDs are field_property:{entity_type}:{field_name}:{column} — no bundle segment. For 5+ slots reading different fields, Twig include() is often cleaner. |
| Expose components as block plugins | Blocks Integration | Blocks integration — exposing components as block plugins and embedding blocks in slots |
| Browse and preview components in a library | Pattern Library | Pattern Library — browsable component preview with stories |
| Write a custom source plugin | Creating Custom Source Plugins | Creating custom source plugins — widgets, API sources, and derivers |
| Follow best practices and avoid anti-patterns | Best Practices & Anti-Patterns | Best practices and anti-patterns — component naming, slot vs prop decisions, and when NOT to use UI Patterns |
| Handle security and accessibility correctly | Security & Accessibility | Security and accessibility — XSS protection, sanitization, and a11y considerations |
| Export and review config YAML for components, layouts, blocks | Config Export Reference | When you need to understand, construct, or debug UI Patterns configuration YAML for deployment, recipes, config management, or programmatic setup. This section documents the core schema that all four integrations share and provides a… |
| Check source references and maintenance notes | Sources & Maintenance |