Book Image

Drupal 10 Development Cookbook - Third Edition

By : Matt Glaman, Kevin Quillen
Book Image

Drupal 10 Development Cookbook - Third Edition

By: Matt Glaman, Kevin Quillen

Overview of this book

This new and improved third edition cookbook is packed with the latest Drupal 10 features such as a new, flexible default frontend theme - Olivero, and improved administrative experience with a new theme - Claro. This comprehensive recipe book provides updated content on the WYSIWYG (What You See Is What You Get) editing experience, improved core code performance, and code cleanup. Drupal 10 Development Cookbook begins by helping you create and manage a Drupal site. Next, you’ll get acquainted with configuring the content structure and editing content. You’ll also get to grips with all new updates of this edition, such as creating custom pages, accessing and working with entities, running and writing tests with Drupal, migrating external data into Drupal, and turning Drupal into an API platform. As you advance, you’ll learn how to customize Drupal’s features with out-of-the-box modules, contribute extensions, and write custom code to extend Drupal. By the end of this book, you’ll be able to create and manage Drupal sites, customize them to your requirements, and build custom code to deliver your projects.
Table of Contents (17 chapters)

Using layouts to build landing pages

The Layout Builder module allows content creators to use a drag-and-drop interface to customize how content is displayed on a page. Unlike using field formatters in view display modes, this does not require a developer and can be customized for individual pieces of content. With Layout Builder, content creators select from different layouts available in the system and place blocks in them to build the page’s content. In this recipe, we will walk through installing Layout Builder and setting up the layout for the Article content type.

Getting ready

In this recipe, we will be using the standard installation, which provides the Article content type. Any content type will suffice.

How to do it…

  1. Begin by installing the Layout Builder module and its dependent module, Layout Discovery:
    php vendor/bin/drush en layout_builder –yes
  2. We must opt into using Layout Builder for the display mode of our content type. Visit Structure and then Content Types and use the drop button for Article to click Manage Display.
  3. Find the section labeled Layout options and check the Use Layout Builder checkbox.
  4. Click Save to enable Layout Builder.
  5. The Manage Display form should now show a Manage layout button.
  6. Click the Manage layout button to enter the Layout Builder user interface to customize the Article layout.
  7. By default, the Show content preview checkbox is turned on. Uncheck this checkbox to turn off the generated sample preview content.
  8. Click Add section to create a new section and select Two column layout.
  9. Select 33%/67% for the Column width and click Add section, leaving the administrative label empty.
  10. Now that we have added our two-column section, we can move fields into those layout parts. Drag the Image field to the left part and the Body field to the right part of the new section.
  11. Click Save layout to save the changes.
  12. Without using code, we have now created a layout for Articles that places the image in a sidebar next to the article content.

How it works…

The Layout Builder module provides an alternative render system for entity types. Using Layout Builder is an opt-in process for each display mode of a content entity type. If the entity type’s display mode is not managed by Layout Builder, it falls back to the regular render system using field formatters.

Layouts are provided by layout plugins, which have matching Twig templates. Modules and themes can define new templates that can be used. Layout Builder leverages blocks to display content. The kinds of blocks available to be embedded in Layout Builder are based on blocks available to the system.

Layout Builder also exposes each field on the content entity as a block, allowing you to place each field in a different section.

Like custom nodes or other entity templates, if you make changes to the layout plugin or nested elements without updating the corresponding Twig templates for the layout, you may see things render incorrectly. Be sure to review the Twig template accordingly when making such changes.

There’s more…

Layout Builder was an exciting addition to Drupal when it first arrived and has many more features and customizations far beyond what was covered in this recipe.

Accessible

The Layout Builder user interface went through rigorous accessibility testing. The entire Layout Builder user interface can be navigated using a keyboard or other accessibility devices.

Custom layouts for each piece of content

When configuring the layout options, the Allow each content item to have its layout customized option allows content editors to override the default layout for their content. When a piece of content is created, it will use the default layout. Content editors will see a Layout tab that allows them to customize the display of their content in the Layout Builder user interface.

The layout override is also stored in field data attached to the content entity, making it tracked with revisions! That means new drafts can be created for a piece of content with layout changes and they can be published through Content Moderation workflows.

Additional modules to extend Layout Builder

There are a copious number of modules that extend Layout Builder to customize its experience and provide default layouts. For instance, if you use the Bootstrap front-end framework, the Bootstrap Layout Builder (https://www.drupal.org/project/bootstrap_layout_builder) module provides a user interface for building layouts that use Bootstrap’s styling.

A list of modules that extend Layout Builder can be found on Drupal.org: https://www.drupal.org/docs/8/core/modules/layout-builder/additional-modules.

See also