Issue #3197768 by rpayanm: Custom CSS Class and ID on sections (fb87d845) · Commits · project / layout_builder_base

config/install/layout_builder_base.settings.yml

+2 −0

Original line number	Diff line number	Diff line
		id: ''
		classes: ''
		background: ''
		background_position: layout--background-position--center
		background_attachment: ''

src/Plugin/Layout/BaseLayoutBase.php

+42 −0

Original line number	Diff line number	Diff line
		@@ -2,6 +2,7 @@

		namespace Drupal\layout_builder_base\Plugin\Layout;

		use Drupal\Component\Utility\Html;
		use Drupal\Core\Config\ConfigFactoryInterface;
		use Drupal\Core\Form\FormStateInterface;
		use Drupal\file\Entity\File;
		@@ -58,6 +59,8 @@ abstract class BaseLayoutBase extends MultiWidthLayoutBase {
		*/
		public function defaultConfiguration() {
		$config = [
		'id' => '',
		'classes' => '',
		'column_gap' => $this->getDefaultColumnGap(),
		'row_gap' => $this->getDefaultRowGap(),
		'column_width' => $this->getDefaultColumnWidth(),
		@@ -105,6 +108,25 @@ abstract class BaseLayoutBase extends MultiWidthLayoutBase {
		unset($form['column_widths']);
		}

		$form['advanced'] = [
		'#type' => 'details',
		'#title' => $this->t('Advanced properties'),
		];

		$form['advanced']['id'] = [
		'#type' => 'textfield',
		'#title' => $this->t('Id'),
		'#default_value' => $this->configuration['id'],
		'#description' => $this->t('The ID attribute on the layout\'s <div> element.'),
		];

		$form['advanced']['classes'] = [
		'#type' => 'textfield',
		'#title' => $this->t('Classes'),
		'#default_value' => $this->configuration['classes'],
		'#description' => $this->t('Classes on the layout\'s <div> element.'),
		];

		if ($this->isMultipleColumnsLayout()) {
		$form['grid'] = [
		'#type' => 'details',
		@@ -472,6 +494,7 @@ abstract class BaseLayoutBase extends MultiWidthLayoutBase {
		public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
		parent::submitConfigurationForm($form, $form_state);

		$advanced = $form_state->getValue('advanced');
		$grid_values = $form_state->getValue('grid');
		$background_values = $form_state->getValue('background_detail');
		$padding_values = $form_state->getValue('padding');
		@@ -488,6 +511,8 @@ abstract class BaseLayoutBase extends MultiWidthLayoutBase {

		$image_background_style = $background_values['background_image_style'];

		$this->configuration['id'] = $advanced['id'];
		$this->configuration['classes'] = $advanced['classes'];
		$this->configuration['background_image'] = !empty($file) ? $file->id() : '';
		$this->configuration['background_image_style'] = !empty($image_background_style) ? $image_background_style : '';
		$this->configuration['background'] = $background_values['background'] ?? '';
		@@ -521,12 +546,29 @@ abstract class BaseLayoutBase extends MultiWidthLayoutBase {
		$this->configuration['customizable_columns'] = $grid_values['customizable_columns'] ?? '';
		}

		/**
		* {@inheritdoc}
		*/
		public function validateConfigurationForm(array &$form, FormStateInterface $form_state) {
		$values = $form_state->getValues();

		if ($values['id'] != Html::cleanCssIdentifier($values['id'])) {
		$form_state->setError($form['advanced']['id'], $this->t('Element ID must be a valid CSS ID'));
		}
		}

		/**
		* {@inheritdoc}
		*/
		public function build(array $regions) {
		$build = parent::build($regions);

		if (!empty($this->configuration['id'])) {
		$build['#attributes']['id'] = $this->configuration['id'];
		}

		$classes = [
		$this->configuration['classes'],
		$this->configuration['background'],
		$this->configuration['background_attachment'],
		$this->configuration['background_position'],