Site Building

Implement the Layout Builder View Modes Pattern for Drupal 8, 9, 10, and 11

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.