We’re not designing pages, we’re designing systems of components.—Stephen Hay
Over the past eight years I've watched (and participated in) the movement towards Atomic Design and web components, sometimes as a replacement to Drupal's content types. While Paragraphs made the initial efforts possible, Layout Builder brought it to a new level and is a major driver in this initiative.
Today, we create custom block types, in many cases following practices referred to as Blocks, Elements, Modifiers, or BEM. For our purposes, think of the custom block as a small form for content editors to use. Content editor simply 'fill in the blanks,' and the block appears on the page looking like what the designers had in mind.
The purpose of the book is to help Drupal Site Builders create custom block components that can be used in Layout Builder. To do that, we start with a very common component pattern.
Before diving in, here's what you should have some experience using:
- Site building on Drupal 9 or 10 (this site runs on 10)
- CSS
- Twig templates
- Access to the Drupal file system where you can add and modify stylesheets and twig templates
This site currently uses Olivero, the default Drupal 10 theme. We'll build a simple sub-theme off of it for the purposes of minimal setup (rather than installing a new theme, let's use what we already have).