How to add custom settings to layouts in Drupal 8 & 9
The layout builder lets users change the way their content is presented. There was some projects in Drupal 7 which were similar to layout builder, but it was never as effective, or as user friendly like the Layout API. The layout, when set up, can affect a content type globally, or user can change layout per node.
The layout builder can be used in two ways. You can use it to create a layout for each content type on your site and you can also use it to create a layout for each individual piece of content.
Read this tuto If you want to read how to create custom layout in Drupal 8 & 9.
After you create custom layout it's possible to use a custom 'class' for a layout! This can be useful if, for example, you want your layout to have custom settings so that users can change the way the layout is rendered.
Here's an example layout class which provides a settings form to add classes to custom layout:
<?php
namespace Drupal\mymodule\Plugin\Layout;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Layout\LayoutDefault;
use Drupal\Core\Plugin\PluginFormInterface;
class MyLayoutClass extends LayoutDefault implements PluginFormInterface
{
/**
* {@inheritdoc}
*/
public function defaultConfiguration()
{
return parent::defaultConfiguration() + [
'layout_classes' => 'layout',
'region_classes' => 'region',
];
}
/**
* {@inheritdoc}
*/
public function buildConfigurationForm(array $form, FormStateInterface $form_state)
{
$configuration = $this->getConfiguration();
$form['layout_classes'] = [
'#type' => 'textfield',
'#title' => $this->t('Layout classes'),
'#default_value' => $configuration['layout_classes'],
];
$form['region_classes'] = [
'#type' => 'textfield',
'#title' => $this->t('Region classes'),
'#default_value' => $configuration['region_classes'],
];
return $form;
}
/**
* {@inheritdoc}
*/
public function validateConfigurationForm(array &$form, FormStateInterface $form_state)
{
// any additional form validation that is required
}
/**
* {@inheritdoc}
*/
public function submitConfigurationForm(array &$form, FormStateInterface $form_state)
{
$this->configuration['layout_classes'] = $form_state->getValue('layout_classes');
$this->configuration['region_classes'] = $form_state->getValue('region_classes');
}
}
Then your *.layouts.yml could look like:
custom_layout_2:
label: Custom Layout 2
category: Custom
class: '\Drupal\mymodule\Plugin\Layout\MyLayoutClass'
path: layouts/custom-layout-2
template: custom-layout-2
library: mymodule/custom-layout-2-library
regions:
main:
label: Main content
And in your Twig template, you now have access to the {{ settings.layout_classes }} and {{ settings.region_classes }} variables. So, your layouts/custom-layout-2/custom-layout-2.html.twig could look like:
{#
/**
* @file
* Default theme implementation to display a one plus four grid layout.
*
* Available variables:
* - content: The content for this layout.
* - attributes: HTML attributes for the layout <div>.
*
* @ingroup themeable
*/
#}
<div class="custom-layout-2 {{ settings.layout_classes }}">
<div class="main-region {{ settings.region_classes }} ">
{{ content.main }}
</div>
</div>
The form settings is like this:
and after you submit the form your classes are added to twig file like this:
