Like most output in Drupal, Views relies on Twig templates for a significant amount of its rendering. In this tutorial we'll identify where you can find the default Views templates within your file system, what the common templates are for, and how to name your templates so that they are applied to specific views.

By the end of this tutorial, you should be able to:

• Identify where to find default views templates
• Understand which templates apply to what part of a view
• Get a sense of the template suggestions and how to use them to limit where your custom templates are applied
• Identify a view's machine name
• Identify a display's machine name
• Identify a field's machine name

One of the challenges that comes with Layout Builder is increased complexity of front-end development. Layout Builder offers site administrators increased flexibility regarding the placement and use of fields and blocks; a theme developer needs to account for this. Depending on how Layout Builder is used, this could mean a small number of new combinations, or virtually infinite combinations. Therefore, predicting and theming all of these combinations becomes a difficult but necessary task in order to ensure maintainability and overall design consistency.

In this tutorial we'll look at some things we've found helpful to consider when theming Layout Builder including:

• Design, and theme, atomic components
• Limit the number of possible combinations of fields by using entity view modes
• Handle edge cases

By the end of this tutorial you should have a better understanding of how using Layout Builder can impact theme development, and how to account for it.

We recommend planning ahead when using Layout Builder, documenting how you intend to use Layout Builder for your specific use-case, and then doing your best to stick to it. One approach that we've found works well for sites that need a maximum amount of flexibility (and have the resources to do the upfront planning and theming required) is using entity view modes.

This approach is similar in concept to component based design systems, where you do the initial work of creating a set of components that all work well together up-front, and then allow them to be mixed and matched in whatever way is necessary.

In this tutorial we'll:

• Create new view modes for the Basic Page content type representing the different components.
• Use the ctools blocks module to allow displaying an entity as a block and choosing which view mode to use when rendering the entity.
• Provide custom HTML and CSS styling for the new components.

By the end of this tutorial you'll know how to use Layout Builder in combination with entity view modes.

Overview of regions from a theming perspective.

Overview of themes and where to obtain them.

Like many things in Drupal, there are multiple ways to solve the same problem when using Layout Builder. The Layout Builder system is very flexible. In order to be successful when using it, it helps to plan ahead and think through your specific use-case. Picking a pattern, and sticking to it, will help ensure your configuration is more maintainable, and easier for others to understand. While there's nothing to prevent you from mixing and matching, in our experience we've found it's helpful to at least set some ground rules.

In this tutorial we'll outline 3 different patterns to use with Layout Builder, and the pros and cons of each. We'll include:

• Using content fields in scenarios where a few pages use Layout Builder, but the majority of the site's layout is done via the theme and is generally not configurable by editors.
• Using a blocks-based approach to layouts for scenarios where you want to use Layout Builder instead of the traditional blocks and regions approach and allow editors to make changes via the UI.
• And finally, using an Entity view modes approach for sites that rely heavily on Layout Builder and contain lots of interrelated content types with complex layout requirements.

By the end of this tutorial you should have a better understanding of how to approach using Layout Builder for your specific use-case, and the advantages and disadvantages of different common patterns.