Styling Blocks

In this chapter, we’ll go deeper with Drupal blocks. Blocks are the other element that is needed to build a page, along with controller actions.

You will learn about editorial blocks: how to provide a specific template for them and how to extract raw field values from them. We’ll explore some different ways to retrieve data from an entity field.

You will learn how to style blocks that are defined in code by custom or contributed modules.

Finally, we’ll look at a couple of useful details when rendering blocks provided by Drupal core, such as the page title and breadcrumb.

The topics in this chapter are as follows:

• Editorial (also known as content) blocks
• Programmatic blocks
• Titles and breadcrumbs

Technical requirements

To run the examples in this chapter, make sure to follow the instruction explained in Chapter 1, Setting Up a Local Environment.

You can find the code for this chapter in the GitHub repository: https://github.com/PacktPublishing/Modernizing-Drupal-10-Theme-Development.

Editorial blocks

We saw in previous chapters how to style blocks that contain a menu, a view, or are provided by some internal modules.

But one of the most useful features of the block system is that it provides editorial blocks that an administrator can place on theme regions based on some visibility rules.

Editorial blocks work more or less like nodes. They have block types (bundles), fields, and revisions. The main differences are that a block doesn’t have a URL and it’s rendered on one or more routes based on some visibility rules.

Note:

The Drupal core module that provides editorial blocks has block_content as the machine name, but Custom Block as the human-readable name. Block types are called custom block types.

The demo website has one custom block type defined, called banner, which can be used to provide advertising banners (you can find the list of custom block types here: http://packt.ddev.site/admin/structure/block-content). The banner custom...

Programmatic blocks

The demo website has two blocks defined by modules: one that renders a random quote and one that renders the weather forecast of the next hour for the origin location of a trip.

Blocks are defined as plugins and must follow a set of rules to be available on the frontend, but in the end, a block will return a render array exactly as a controller does.

Both blocks are already available in the alps_quote and alps_weather modules. The weather forecast one, for example, returns this render array:

$build['content'] = [
  '#theme' => 'alps_weather_forecast_single',
  '#forecast' => $forecast['list'][0],
  '#city' => $city,
  '#units' => $this->config
    ->get('alps_weather.settings')->get('units'),
  '#cache' => [
    'max-age' => 10800...

Titles and breadcrumbs

In the component library, we have an atom both for the title and for the breadcrumbs, so we can simply include them. There are just a couple of details to be aware of.

Title

The title template receives a couple of variables that may not seem useful because, in Drupal core, they’re always empty: title_prefix and title_suffix. Those two variables can be filled by a custom or contributed module; if we forget to print them, this may lead to some unexpected behavior.

Our version for the page-title.html.twig template should be like this:

{{ title_prefix }}
{{ include('@atoms/title.html.twig', {
  'title': title,
}) }}
{{ title_suffix }}

Put this code in a file with the same name, in the templates/content folder of the alps_trips theme.

Breadcrumb

Styling a breadcrumb is easy; the template receives only one variable, and our component in Storybook takes care of rendering it in the correct way. Just don’...