This article outlines and documents the process of creating a single-page website and template using Drupal and Drupal Layout Builder.
The idea is to document what has been done so that it can be used as a starter for any site with a bunch of configured and pre-built layout options and components. The site and theme will be flexible enough to allow individuality, but rigid enough to be easy to use for anyone. In a second part, we will look at using what we have learnt here to convert the theme to use with Drupal Canvas aka Experience Builder.
With this in mind, I would like to state, that this piece is one of my reflective articles, where I typically begin by exploring a particular concept or methodology, but often find myself uncovering issues that require attention or improvements, and therefore I provide the following TL;DR.
However, for a look into the process of building the components for my Drupal Layout Builder theme, you'll want to read on.
TL;DR Important Note
What I discuss here is how I arrived at a new way of building Paragraphs based components for Drupal Layout Builder. The Paragraphs module allows you to build powerful structured data components, and using these components in Layout Builder is done by attaching them to blocks.In the first round of development, before writing this article, I used the Paragraphs Blocks module to make the paragraphs available in Layout Builder. However, I was never that happy with what felt like a broken workflow; the need to create paragraph instances via the node edit form before adding them to the layout on the layout page.
In writing this article, I discovered that you can add paragraphs, let's call them structured content or components, directly to block types; for most cases, I feel this is a smarter way to use paragraphs in Layout Builder as it removes the need to use the node edit form to add components before adding them to the lay out on the Layout tab.
For more information on both approaches, you can check the following two articles.
Using Paragraphs Blocks Module to make paragraphs available in Layout Builder
Attaching Paragraphs to Block Types
So with the foreword out of the way, let's get stuck into the core of the article, and that is finalizing the components for a Drupal theme that can be used with the Layout Builder module and the up-and-coming Canvas module.
To start, we will look at the why for doing this, then move on to the actual audit to discover how they are built and used, then evaluate what we have discovered so we can improve on the final product. Onward.
This article is currently in final draft and will be published over the coming weeks. To be notified when it is published, be sure to sign up below for the web development and design newsletter.