{"id":60106,"date":"2024-01-25T12:26:29","date_gmt":"2024-01-25T06:56:29","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=60106"},"modified":"2024-01-25T12:26:29","modified_gmt":"2024-01-25T06:56:29","slug":"layout-builder-in-drupl-8-9-10","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/layout-builder-in-drupl-8-9-10\/","title":{"rendered":"Layout Builder in Drupl 8\/9\/10"},"content":{"rendered":"

Overview<\/h2>\n

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.<\/p>\n

Create Custom Module<\/h2>\n

1. Create a folder in modules\/custom\/ttn_layout_builder<\/strong>.
\n2. Create a ttn_layout_builder.info.yml<\/strong> file and add the following to it.<\/p>\n

name: TTN Layout Builder\r\ntype: module\r\ndescription: Create custom layout builder in drupal 8\/9\/10.\r\npackage: TTN\r\nDependencies:\r\n    - drupal:layout_builder\r\ncore_version_requirement: ^8 || ^9 || ^10\r\n<\/pre>\n
Custom Layouts<\/h2>\n
Create a ttn_layout_builder.layouts.yml<\/strong> file in your theme or module<\/strong>. Add information for your layout. Adding a machine name, label, category, template reference, and region is mandatory in this format.<\/p>\n
You can add regions that you create in the ttn_layout_builder.layouts.yml<\/strong> file in the form of twig variables.<\/p>\n
layout_one_full_forth_grid:\r\n  label: 'One Full Four Grid'\r\n  path: layouts\/one_full_forth_grid\r\n  template: layout--one-full-forth-grid\r\n  library: ttn_layout_builder\/one_full_forth_grid\r\n  category: 'TTN'\r\n  default_region: first\r\n  icon_map:\r\n    - [first, second, third]\r\n    - [first, fourth, fifth]\r\n  regions:\r\n    first:\r\n      label: First\r\n    second:\r\n      label: Second\r\n    third:\r\n      label: Third\r\n    fourth:\r\n      label: Fourth\r\n    fifth:\r\n      label: Fifth\r\n<\/pre>\n
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<\/strong><\/p>\n
In the template file, you can add regions that you create in the ttn_layout_builder.layouts.yml<\/strong> file in the form of twig variables.<\/p>\n
{%\r\n  set classes = [\r\n    'layout',\r\n    'layout--onefullfourgrid',\r\n  ]\r\n%}\r\n{% if content %}\r\n  <div{{ attributes.addClass(classes) }}>\r\n    {% if content.first %}\r\n      <div{{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>\r\n        {{ content.first }}\r\n      <\/div>\r\n    {% endif %}\r\n    {% if content.second or content.third or content.fourth or content.fifth %}\r\n      <div class=\"layout__four-grid-group\">\r\n    {% endif %}\r\n       {% if content.second %}\r\n          <div{{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>\r\n            {{ content.second }}\r\n          <\/div>\r\n       {% endif %}\r\n       {% if content.third %}\r\n          <div{{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>\r\n            {{ content.third }}\r\n          <\/div>\r\n       {% endif %}\r\n       {% if content.fourth %}\r\n          <div{{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>\r\n            {{ content.fourth }}\r\n          <\/div>\r\n       {% endif %}\r\n       {% if content.fifth %}\r\n          <div{{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>\r\n            {{ content.fifth }}\r\n          <\/div>\r\n       {% endif %}\r\n    {% if content.second or content.third or content.fourth or content.fifth %}\r\n      <\/div>\r\n    {% endif %}\r\n  <\/div>\r\n{% endif %}\r\n<\/pre>\n
Add a file ttn_layout_builder.libraries.yml,<\/strong> which contains the style\/js of the layouts.<\/p>\n
one_full_forth_grid:\r\n  css:\r\n    theme:\r\n      layouts\/one_full_forth_grid\/one_full_forth_grid.css: {}\r\n<\/pre>\n
The code snippet produces the following icon map, and Then any section using our layout will be displayed like this:<\/p>\n
\"Layout<\/p>\n
Custom Layout in Controller<\/h2>\n
Create a ttn_layout_builder.routing.yml<\/strong> file and add the following to it<\/p>\n
ttn_layout_builer:layoutbuilder:\r\n  path: '\/ttn-layout-builder\r\n  defaults:\r\n    controller: '\\Drupal\\ttn_layout_builder\\Controller\\LayoutBuilderController::one_full_forth_grid'\r\n    _title: 'Layout Builder'\r\n  requirements:\r\n    _permission: 'access content'\r\n<\/pre>\n
Create a LayoutBuilderController.php<\/strong> file in the Src folder and add the following to it<\/p>\n
public function one_full_forth_grid() {\r\n  $header = ['Column 1', 'Column 2'];\r\n  $rows = [\r\n    ['Row1', 'Column1'],['Row1', 'Column2'],\r\n    ['Row2', 'Column1'],['Row2', 'Column2']\r\n  ];\r\n  $attributes = [\r\n    '#id' => 'layout-data-table',\r\n    'class' => ['custom-layout', 'layout-data'],\r\n    'data-custom' => 'my custom data value'\r\n  ];\r\n  $data =  [\r\n    '#theme' => 'table',\r\n    '#header' => $header,\r\n    '#rows' => $rows,\r\n    '#attributes' => $attributes,\r\n  ];\r\n\r\n  $layoutPluginManager = \\Drupal::service('plugin.manager.core.layout');\r\n  $layout = $layoutPluginManager->createInstance('layout_one_full_forth_grid');\r\n  $regions = [\r\n    'first' => [\r\n      '#markup' => drupal_render($data),\r\n    ],\r\n    'second' => [\r\n      '#markup' => drupal_render($data),\r\n    ],\r\n    'third' => [\r\n      '#markup' => drupal_render($data),\r\n    ],\r\n    'fourth' => [\r\n      '#markup' => drupal_render($data),\r\n    ],\r\n    'fifth' => [\r\n      '#markup' => drupal_render($data),\r\n    ],\r\n  ];\r\n  return $layout->build($regions);\r\n}\r\n<\/pre>\n
Conclusion<\/h3>\n
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.<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1700,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[3602],"tags":[5613],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60106"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1700"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60106"}],"version-history":[{"count":12,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60106\/revisions"}],"predecessor-version":[{"id":60123,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60106\/revisions\/60123"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}