One of the most impactful changes in our Drupal stack at UI Suite is the adoption of Display Builder for page layouts. We are systematically replacing the traditional Block Layout system (found at /admin/structure/block) with Display Builder's more powerful and context-aware Page Layout entities. This move gives us unprecedented control over the structure of key landing pages and site sections.

Modernizing Page Layouts with Display Builder

Using the display_builder_page_layout module, we can create multiple page layouts and use condition plugins to determine which one applies.

For example, we've created a unique layout for all URLs under /products/* by using the "Request Path" condition. This layout includes a specialized sidebar and promotional components that are only relevant to that section.

The order of these layouts is critical; the first one whose conditions are met is the one that gets used, so we place the most specific layouts at the top.

Inside the builder for a page layout

We have access to page-specific sources like "Page title" and "Main content," allowing us to position these essential elements within our custom layout. If no Display Builder layout matches the current page, Drupal gracefully falls back to the default Block Layout system, ensuring that no page is ever left un-rendered.

This gives us a robust and flexible way to build truly dynamic page templates.

What is Display builder

A display building tool by the UI Suite team:

• Design system native: fully use your design system (components, style utilities, icons, themes/modes, CSS variables...) directly in Drupal without the burden of compatibility layers
• Unified: can be used instead of Layout Builder for entity view displays, Block Layout for page displays, and as a replacement of the Views'' display building feature
• Modern: A builder for the world of today, with powerful features (dynamic previews, pattern presets, real-time collaboration, deep integration with Drupal APIs...)

Display Builder provides sub-modules for each Drupal Core''s display building need:

• Entity view and entity view overrides (display_builder_entity_view)
• Page layout (display_builder_page_layout)
• Views (display_builder_views)

Follow us on slack #display_builder

UI Suite is proud to announce a significant step forward in our digital strategy by adopting Drupal's Display Builder module. This decision comes after an extensive evaluation of modern layout tools, and we are confident that Display Builder's unified approach will revolutionize our content creation process.

The initial prototype of our new modular AI dashboard was built with this technology, leveraging its flexible grid rendering to allow for dynamic, on-the-fly rearrangement of interface sections.

Unlike traditional methods that require separate tools for different parts of the site, Display Builder provides a single, cohesive interface for managing entity view displays, full page layouts, and even Views displays. This aligns perfectly with our goal to streamline development workflows and reduce complexity.

Our engineers have found that the ability to replace Layout Builder, Block Layout, and the Views UI with one powerful tool significantly accelerates development and simplifies maintenance across our Drupal applications.

Our initial focus will be on migrating our existing "Article" and "Landing Page" content types from Layout Builder. 

he seamless migration path and the ability to run both systems concurrently allows us to perform a phased rollout, ensuring a stable and predictable transition for our content and development teams.

This move empowers our teams to build more engaging and dynamic user experiences with greater efficiency.