Fixed layout containment and added an option to select if the LB layout should be contained.

Author: AlexSkrypnyk

package-lock.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@civictheme/uikit": "github:civictheme/uikit#main"
+  }
+}

package.json

@@ -4,6 +4,7 @@ civictheme_three_columns:
   template: layout--three-columns
   library: civictheme/layouts
   category: 'CivicTheme Layouts'
+  class: '\Drupal\civictheme\Plugin\Layout\ThreeColumnsLayout'
   default_region: content
   icon_map:
     - [first_above, main, second_above]

web/themes/contrib/civictheme/civictheme.layouts.yml

@@ -33,6 +33,7 @@ third_party_settings:
         layout_id: civictheme_three_columns
         layout_settings:
           label: Main
+          is_contained: false
           context_mapping: {  }
         components:
           93c254ec-abeb-461a-b464-5247fd0083da:

web/themes/contrib/civictheme/config/install/core.entity_view_display.node.civictheme_event.default.yml

@@ -41,6 +41,7 @@ third_party_settings:
         layout_id: civictheme_three_columns
         layout_settings:
           label: 'CivicTheme Three Columns'
+          is_contained: false
           context_mapping: {  }
         components:
           5cf72ad7-c313-4cf3-9d4e-0573bbfa84a0:

web/themes/contrib/civictheme/config/install/core.entity_view_display.node.civictheme_page.default.yml

@@ -388,3 +388,11 @@ civictheme.settings:
     optouts:
       type: mapping
       label: 'Opt-out flags'
+
+layout_plugin.settings.civictheme_three_columns:
+  type: layout_plugin.settings
+  label: 'CivicTheme Three Columns Layout Settings'
+  mapping:
+    is_contained:
+      type: boolean
+      label: 'Is Contained'

web/themes/contrib/civictheme/config/schema/civictheme.schema.yml

@@ -23,8 +23,6 @@ function _civictheme_preprocess_page(array &$variables): void {
   // For nodes this is set to false via _civictheme_preprocess_page_node as
   // layout is controlled via layout templates.
   $variables['page']['content_contained'] = $variables['page']['content_contained'] ?? TRUE;
-  $variables['page']['is_contained'] = $variables['page']['content_contained'] ?? TRUE;
-  $variables['page']['is_contained'] = $variables['page']['is_contained'] ?? TRUE;
 }
 
 /**
@@ -41,17 +39,18 @@ function _civictheme_preprocess_page__node(array &$variables): void {
     return;
   }
 
-  // Layout determines whether a node is contained and what it's layout is.
-  $variables['page']['content_contained'] = FALSE;
-  $variables['page']['is_contained'] = FALSE;
-
   $variables['vertical_spacing'] = civictheme_get_field_value($node, 'field_c_n_vertical_spacing');
 
   // @todo Add support for hiding of the right sidebar through a node field.
   $variables['hide_sidebar_left'] = civictheme_get_field_value($node, 'field_c_n_hide_sidebar') ?? FALSE;
 
   $layout_builder_settings_per_view_mode = civictheme_get_layout_builder_settings_per_view_mode($node->getEntityTypeId(), $node->bundle());
   if (!empty($layout_builder_settings_per_view_mode)) {
+    // Layout builder determines whether a node is contained and what it's
+    // layout is, so we set as not contained to allow layout builder to
+    // span edge-to-edge.
+    $variables['page']['content_contained'] = FALSE;
+
     $variables['#cache']['contexts'] = Cache::mergeContexts(
       $variables['#cache']['contexts'] ?? [],
       $node->getCacheContexts(),

web/themes/contrib/civictheme/includes/page.inc

@@ -0,0 +1,42 @@
+<?php
+
+namespace Drupal\civictheme\Plugin\Layout;
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Layout\LayoutDefault;
+use Drupal\Core\Plugin\PluginFormInterface;
+
+class ThreeColumnsLayout extends LayoutDefault implements PluginFormInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function defaultConfiguration() {
+    $configuration = parent::defaultConfiguration();
+
+    return $configuration + ['is_contained' => FALSE];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
+    $form['is_contained'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Contained'),
+      '#default_value' => $this->configuration['is_contained'],
+      '#description' => $this->t('Check if the layout elements should be contained. Leave unchecked for edge-to-edge width. If sidebar regions are present - the layout will be contained regardless of this setting.'),
+    ];
+
+    return parent::buildConfigurationForm($form, $form_state);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
+    parent::submitConfigurationForm($form, $form_state);
+    $this->configuration['is_contained'] = $form_state->getValue('is_contained');
+  }
+
+}

web/themes/contrib/civictheme/package-lock.json

@@ -5,9 +5,7 @@
  *
  * Available variables:
  * - content: The content for this layout.
- * - is_contained: Whether the content should be contained
  * - modifier_class: CSS modifying class
- * - region_attributes: HTML attributes for the layout <div>.
  *
  * @deprecated in CivicTheme 1.8.0, will be removed in CivicTheme 1.9.0. Use
  * layout--three-columns.html.twig instead.