Developer
Theming with Bundle Classes, Layout Builder and Twig
VIDEO: Bundle classes and Layout Builder are powerful combinations. Discover how to use these with Twig to build and theme testable, clean, modern Drupal sites.
aka Goodbye Manage Display
Bundle classes and Layout Builder are powerful combinations for building modern Drupal sites. The video below demonstrates how you can use these along with Twig to build and theme testable, clean sites with tried and true practices used on many production sites.
An overview of the tools used in the video
Bundle classes is one of the best new additions to Core. Bundle classes allow developers to keep business logic in one place per entity type and offers wins around code sharing with interfaces and traits. Bundle classes are much easier to write tests for over traditional functional approaches. It also integrates smoothly with the theme layer in Drupal, with in-built Twig integration that leads to fewer preprocesses and less code in the theme.
Layout Builder is a powerful site-building tool with enhanced editorial layout control and a simple drag-and-drop interface. Layout Builder allows the content editorial team to have full control over the presentation layer of the website on a per-page basis.
Twig allows us to match components and our design system from Drupal and to have control over our markup. Cleaner markup is easier to style, can improve performance by reducing DOM bloat and makes modules such as Display Suite unnecessary.
N.B. The slides shown in this video are available here: https://ds-brisbane-dv.netlify.app/
Related Articles
The right way to check for empty content in Twig
Have you ever used {% if content|render|trim is not empty %} in twig to validate content is not empty? If so, you might end up with some surprises related to the use of the render method.
Reusable style guide components using field formatters and twig embed
At PNX, style guide driven development is our bag. It’s what we love: building a living document that provides awesome reference for all our front end components. And Drupal 8, with its use of Twig, complements this methodology perfectly. The ability to create a single component, and then embed that component and its markup throughout a Drupal site in a variety of different ways without having to use any tricks or hacks is a thing of beauty.
