Drupal site-builders rejoice! We currently have two major page building projects approaching production-maturity: Drupal Canvas and Display Builder. In this article series, I compare the two projects by implementing real world use cases from the perspective of a site-builder.
The series covers three common site-building tasks:
This article compares how both tools handle a common site-building task: building a page layout.
Tested version:
Preparation (with ddev)
ddev drush site:install minimal
ddev composer require drupal/coffee
ddev drush pm:install navigation coffee
ddev drush theme:enable claro
ddev drush config:set system.theme admin claro
ddev drush config:set system.theme default hda_theme
ddev drush theme:dev on
The theme in use (hda_theme) is a minimal custom theme with SDCs. It has no base theme or other external dependencies and was built specifically for this project.
The module installations are straight forward.:
ddev composer require drupal/canvas
ddev composer require drupal/display_builder
Debugging tools
/admin/appearance/componentcanvas_dev_mode/admin/appearance/ui/componentsDrupal Canvas (formerly Experience Builder) is backed by Acquia. It introduces its own entity type (canvas_page) and the frontend is built in React. Display Builder is built by the UI Suite team and is based on the UI Patterns ecosystem which is tightly integrated with Drupal. Display Builder relies on HTMX for the site builder which is also adopted by Drupal Core. The UI Suite team also heavily accompanied the introduction of Single Directory Component (SDC) in Drupal core. Both projects integrate with SDCs.
For more context see this issue and the interview with Michael Fanini.
It's obvious that both projects have slightly different main target groups:
The page layout is everything outside the content area:
In Drupal this is usually handled by the block layout, where we move blocks into the theme-defined regions. The limitations are:
It took me a while to figure out how the page layout can be edited in Canvas. But we can do so with every theme that has regions:
/admin/appearance/settings/your_themeUse Drupal Canvas for page templates in this theme.
/canvasLayers Icon in the left sidebar, but it is disabled
New
By default Canvas only shows regions with content in the Layers-Overview.
What we need to do to show e.g. the Main menu region:
Move to global region, select Main menuMain menu is also shown in the layers overviewCanvas mostly relies on SDCs to fill regions, but also allows blocks to be placed. In part 2 we look closer into that aspect.
Once we opted in to use Canvas page templates in our theme settings, the regions get exposed in Canvas. This replaces Drupals block layout.
The Display Builder submodule for page layout is a full replacement for block layout and theme regions.
Once enabled we can add multiple page layouts with conditions via /admin/structure/page-layout.
In this project, I created three page layouts:
From general to specific (bottom to top):
hda_page: This layout deals with everything that is not the frontpage and (because it is last in the list) is not covered by the layouts further on top of the list. These are mostly Views pages like /bloghda_node: The only difference of the layout for most of my node types (except for a dedicated display_builder node type, see Part 3) is that I show Breadcrumbs herehda_frontpage: Also no breadcrumbs and it is lacking the section wrapper because the frontpage display itself handles it (again, see Part 3 for more details)One downside is that we must add shared elements like the navbar and footer to each layout individually. If these elements change (for example the branding slogan or menu depth), we need to update each layout. For initial creation the Display Builder Presets help, but not for later adjustments. This is not a huge concern, but something to keep in mind when we start building layouts.
At this point the system becomes almost entirely component-driven. Drupal blocks can still be placed where needed and Display Builder has some special block types, that we will test in part 2.
The only theme templates that are left outside of my component dirs are:
$ tree web/themes/hda_theme/templates/
web/themes/hda_theme/templates/
├── menu
│ └── menu--main.html.twig
└── page
├── breadcrumb.html.twig
└── html.html.twig
Display Builder is a complete replacement for Drupal's region and block layout system. It allows defining multiple layouts with conditions.
Canvas keeps the theme-defined regions and allows us to place components and other blocks. While the UI is not yet straight-forward it becomes clear where Canvas is heading: Provide a unified interface to edit page layout and content.
In the next article we move one level deeper and compare how both systems handle display modes such as cards and full content displays. Subscribe to our newsletter to get notified on publication.
Do you have any questions on publishing workflows, streamlining site building or other Drupal issues? Get in touch with us!
Special thanks to pdureau, laurii and penyaskito for reviewing this article.
Andi has a passion to make tech work for people. When he isn't building or debugging websites, he often finds himself digesting and prioritizing customer requirements, writing documentation and designing interfaces. He has a strong drive bringing teams and projects on track quickly and checking in with everybody before things go wrong.
