Layout Builder in Drupl 8/9/10

Overview

The layout builder lets users change the way their content is presented. Building layouts involves using the Layout Builder module. The Layout Builder module allows you to create custom layouts for content types and entities, giving you more control over the display of your content. When set up, the layout can affect a content type globally, or the user can change the layout per node.

Create Custom Module

1. Create a folder in modules/custom/ttn_layout_builder.
2. Create a ttn_layout_builder.info.yml file and add the following to it.

name: TTN Layout Builder
type: module
description: Create custom layout builder in drupal 8/9/10.
package: TTN
Dependencies:
    - drupal:layout_builder
core_version_requirement: ^8 || ^9 || ^10

Custom Layouts

Create a ttn_layout_builder.layouts.yml file in your theme or module. Add information for your layout. Adding a machine name, label, category, template reference, and region is mandatory in this format.

You can add regions that you create in the ttn_layout_builder.layouts.yml file in the form of twig variables.

layout_one_full_forth_grid:
  label: 'One Full Four Grid'
  path: layouts/one_full_forth_grid
  template: layout--one-full-forth-grid
  library: ttn_layout_builder/one_full_forth_grid
  category: 'TTN'
  default_region: first
  icon_map:
    - [first, second, third]
    - [first, fourth, fifth]
  regions:
    first:
      label: First
    second:
      label: Second
    third:
      label: Third
    fourth:
      label: Fourth
    fifth:
      label: Fifth

Create a templates directory, where you will have templates for your layout file. Example See : layouts/one_full_forth_grid/layout–one-full-forth-grid.html.twig

In the template file, you can add regions that you create in the ttn_layout_builder.layouts.yml file in the form of twig variables.

{%
  set classes = [
    'layout',
    'layout--onefullfourgrid',
  ]
%}
{% if content %}
  <div{{ attributes.addClass(classes) }}>
    {% if content.first %}
      <div{{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
        {{ content.first }}
      </div>
    {% endif %}
    {% if content.second or content.third or content.fourth or content.fifth %}
      <div class="layout__four-grid-group">
    {% endif %}
       {% if content.second %}
          <div{{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
            {{ content.second }}
          </div>
       {% endif %}
       {% if content.third %}
          <div{{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
            {{ content.third }}
          </div>
       {% endif %}
       {% if content.fourth %}
          <div{{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
            {{ content.fourth }}
          </div>
       {% endif %}
       {% if content.fifth %}
          <div{{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
            {{ content.fifth }}
          </div>
       {% endif %}
    {% if content.second or content.third or content.fourth or content.fifth %}
      </div>
    {% endif %}
  </div>
{% endif %}

Add a file ttn_layout_builder.libraries.yml, which contains the style/js of the layouts.

one_full_forth_grid:
  css:
    theme:
      layouts/one_full_forth_grid/one_full_forth_grid.css: {}

The code snippet produces the following icon map, and Then any section using our layout will be displayed like this:

Custom Layout in Controller

Create a ttn_layout_builder.routing.yml file and add the following to it

ttn_layout_builer:layoutbuilder:
  path: '/ttn-layout-builder
  defaults:
    controller: '\Drupal\ttn_layout_builder\Controller\LayoutBuilderController::one_full_forth_grid'
    _title: 'Layout Builder'
  requirements:
    _permission: 'access content'

Create a LayoutBuilderController.php file in the Src folder and add the following to it

public function one_full_forth_grid() {
  $header = ['Column 1', 'Column 2'];
  $rows = [
    ['Row1', 'Column1'],['Row1', 'Column2'],
    ['Row2', 'Column1'],['Row2', 'Column2']
  ];
  $attributes = [
    '#id' => 'layout-data-table',
    'class' => ['custom-layout', 'layout-data'],
    'data-custom' => 'my custom data value'
  ];
  $data =  [
    '#theme' => 'table',
    '#header' => $header,
    '#rows' => $rows,
    '#attributes' => $attributes,
  ];

  $layoutPluginManager = \Drupal::service('plugin.manager.core.layout');
  $layout = $layoutPluginManager->createInstance('layout_one_full_forth_grid');
  $regions = [
    'first' => [
      '#markup' => drupal_render($data),
    ],
    'second' => [
      '#markup' => drupal_render($data),
    ],
    'third' => [
      '#markup' => drupal_render($data),
    ],
    'fourth' => [
      '#markup' => drupal_render($data),
    ],
    'fifth' => [
      '#markup' => drupal_render($data),
    ],
  ];
  return $layout->build($regions);
}

Conclusion

The Layout Builder in Drupal is a visual design tool that allows content creators and site administrators to control a page’s layout without needing extensive coding or theming knowledge. It provides a user-friendly interface for building and customizing page layouts.