Display Builder

An advanced, design-system native display building tool providing a unified alternative to Layout Builder, Block Layout, and Views display builder with modern features like real-time collaboration and dynamic previews.

display_builder
16 sites
38
drupal.org
gui api content theme
layout display builder design system components ui patterns page builder entity display Views real-time collaboration HTMX

概要

Display Builderは、UI Suiteチームによって開発された高度なディスプレイ構築ツールで、Drupalにおけるディスプレイ構築への統合的なアプローチを提供します。エンティティビューディスプレイ用のLayout Builder、ページディスプレイ用のBlock Layout、Viewsディスプレイ構築機能のモダンな代替として機能します。

このモジュールはデザインシステムネイティブであり、コンポーネント、スタイルユーティリティ、アイコン、テーマ/モード、CSS変数を含むデザインシステムとの完全な統合を、互換性レイヤーなしでDrupal内で直接実現します。HTMXを使用した動的プレビュー、再利用可能な設定のためのパターンプリセット、Server-Sent Events（SSE）によるリアルタイムコラボレーション、Drupal APIとの深い統合を特徴としています。

Display Builderはアイランドベースのアーキテクチャを採用しており、UIはプラグ可能なアイランド（パネル、ボタン、メニュー項目）で構成され、プロファイルごとに有効化、無効化、設定が可能です。これにより、異なるユーザーロールやユースケースに応じた構築体験のカスタマイズに優れた柔軟性を提供します。

Features

  • デザインシステムネイティブ：コンポーネントベースのレイアウトのためのUI Patterns、UI Styles、UI Skinsとの完全統合
  • 統合ディスプレイ構築：Layout Builder（エンティティビュー）、Block Layout（ページ）、Viewsディスプレイビルダーを置き換え
  • アイランドベースのプラグ可能なUI：プロファイルに整理された設定可能なパネル、ボタン、メニュー項目
  • リアルタイムコラボレーション：Server-Sent Eventsによるライブ更新で複数ユーザーが同時編集可能
  • 動的プレビュー：HTMXを使用したシームレスなユーザー体験のための変更のライブプレビュー
  • パターンプリセット：コンポーネント設定をプリセットとして保存・再利用
  • 履歴管理：最大10ステップの履歴による元に戻す/やり直し機能
  • ビューポートスイッチャー：ブレイクポイントベースの幅切り替えによるレスポンシブレイアウトのテスト
  • コンポーネントライブラリ：グループ化、バリアント、モザイク表示でSingle Directory Components（SDC）を参照・ドラッグ＆ドロップ
  • ブロックライブラリ：プロバイダー/カテゴリ別に整理されたすべての利用可能なBlockへのアクセス
  • コンテキスト設定：選択したコンポーネントとBlockのスタイル、デザイントークン、表示条件の設定
  • キーボードショートカット：キーボードによる高速ナビゲーションとアクション（Bでビルダー、Yでレイヤー、Pでプレビュー）
  • レイヤービュー：複雑なネストされたコンポーネントのためのプレビューなしの階層管理
  • ロールベースのアクセス：Display Builderプロファイルごとの動的権限

Use Cases

Building entity view displays

Use Display Builder instead of Layout Builder to configure how content types, users, or other entities are displayed. Enable display_builder_entity_view, create a profile, then go to an entity's Manage Display page and select Display Builder. Drag components from the library, nest them in slots, configure props, and apply styles.

Creating page layouts

Use Display Builder to design page layouts that replace the standard page.html.twig. Enable display_builder_page_layout, create Page Layout entities at /admin/structure/page-layout, assign them to routes or conditions, then use the builder to place components for headers, navigation, content areas, and footers.

Designing Views displays

Use Display Builder to control how Views render their output. Enable display_builder_views, edit a View, and select the Display Builder display plugin. Build the view layout with components for header, exposed filters, rows, pager, and footer areas.

Creating reusable presets

Save frequently used component configurations as presets. In the builder, right-click on a component and select 'Save as preset'. Presets appear in the Presets library tab and can be quickly dropped into any display.

Collaborative content editing

Multiple users can edit the same display simultaneously. The Collaboration island shows who is currently editing and changes are synchronized in real-time via Server-Sent Events.

Responsive layout testing

Use the Viewport Switcher to test how layouts respond to different screen sizes. The switcher uses your theme's breakpoints to resize the builder preview area.

Tips

  • Create multiple profiles for different user roles - editors might need a simpler interface than site builders
  • Use the Layers panel for complex nested components like accordions or modals where the preview makes drag-drop difficult
  • Keyboard shortcuts speed up workflow: B for builder, Y for layers, P for preview
  • Presets work well for frequently used card layouts, hero sections, or call-to-action components
  • The Component Library can display components in three views: Grouped (by provider), Variants (by component with variants), and Mosaic (visual thumbnails)

Technical Details

Admin Pages 9
Display Builder /admin/structure/display-builder

Main administration page for managing Display Builder profiles. Lists all configured profiles with options to add, edit, enable/disable, and delete them. Profiles define which UI islands are available and which roles can access them.

Add a Display Builder profile /admin/structure/display-builder/add

Create a new Display Builder profile with customizable islands configuration.

Edit a Display Builder profile /admin/structure/display-builder/{profile}/edit

Edit an existing Display Builder profile including islands configuration. Each island can be enabled/disabled and configured with specific options.

Pattern presets /admin/structure/display-builder/preset

Manage reusable pattern presets that can be saved from the builder and inserted into displays. Presets store complete component configurations including slots content.

Add a Pattern preset /admin/structure/display-builder/preset/add

Create a new pattern preset for reusable component configurations.

Display Builder instances /admin/structure/display-builder/instances

View all active Display Builder instances. Instances are ephemeral state entities that track the current editing session including history, users, and unsaved changes.

Page layouts /admin/structure/page-layout

Manage page layouts when Display Builder for Page Layout submodule is enabled. Create custom page layouts that can be assigned to specific routes or conditions.

Page Layout Builder /admin/structure/page-layout/{page_layout}/builder

The Display Builder interface for editing a page layout. Access the full builder UI with islands for designing page structure.

Display builders in Views /admin/structure/views/display-builder

List all Views that use Display Builder for their display configuration.

権限 5
Administer Display Builder profiles

View, edit and delete any Display Builder profile.

Administer Display Builder presets

View, edit and delete any pattern preset.

List Display Builder instances

View the admin page about Display Builder instances.

Administer page layouts

View, edit and delete any page layout.

Use the [Profile Name] Display Builder profile

Dynamic permission generated for each profile. Warning: This permission may have security implications depending on how the display builder is configured.

Hooks 1
hook_display_builder_provider_info

Allows modules to register display builder providers. Providers are integrations that connect Display Builder to different Drupal display systems.

Troubleshooting 4
Display Builder not available on entity display

Ensure display_builder_entity_view submodule is enabled, a profile exists with at least one role assigned, and the user has the profile permission.

Components not appearing in library

Check the Component Library island configuration. Providers may be excluded, or component status (experimental/deprecated) may be filtered. Configure in the profile's island settings.

Real-time collaboration not working

Ensure the Collaboration island is enabled in the profile and HTMX SSE library is loading. Check browser console for SSE connection errors.

History/Undo not available

History is limited to 10 steps and only available during the editing session. Enable the History island in the profile's toolbar buttons.

Security Notes 3
  • Profile permissions may have security implications depending on configuration - blocks and components can execute PHP code
  • Review which blocks are available in the Block Library configuration to restrict access to administrative blocks
  • Entity view overrides allow per-entity customization which could impact performance if overused