Issue #2840832 by tim.plunkett, DickJohnson, yoroy, DyanneNova, webchick: Add...

Issue #2840832 by tim.plunkett, DickJohnson, yoroy, DyanneNova, webchick: Add Panels layouts to core

(cherry picked from commit 4b3ea191)

core/modules/field_layout/field_layout.layouts.yml

-# @todo Move to layout_discovery in https://www.drupal.org/node/2840832.
-layout_onecol:
-  label: 'One column'
-  path: layouts/onecol
-  template: layout--onecol
-  category: 'Columns: 1'
-  default_region: content
-  regions:
-    content:
-      label: Content
-layout_twocol:
-  label: 'Two column'
-  path: layouts/twocol
-  template: layout--twocol
-  library: field_layout/drupal.layout.twocol
-  category: 'Columns: 2'
-  default_region: left
-  regions:
-    left:
-      label: Left
-    right:
-      label: Right

core/modules/field_layout/field_layout.libraries.yml

-drupal.layout.twocol:
-  version: VERSION
-  css:
-    layout:
-      layouts/twocol/twocol.layout.css: {}

core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php

@@ -90,7 +90,7 @@ public function testEntityForm() {
 
     // The field is moved to the default region for the new layout.
     $this->assertSession()->pageTextContains('Your settings have been saved.');
-    $this->assertEquals(['Left', 'Right', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
     $this->drupalGet('entity_test/manage/1/edit');
     // No fields are visible, and the regions don't display when empty.
@@ -99,7 +99,7 @@ public function testEntityForm() {
 
     // After a refresh the new regions are still there.
     $this->drupalGet('entity_test/structure/entity_test/form-display');
-    $this->assertEquals(['Left', 'Right', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
     // Drag the field to the right region.
     $field_test_text_row = $this->getSession()->getPage()->find('css', '#field-test-text');
@@ -147,7 +147,7 @@ public function testEntityView() {
     $this->submitForm([], 'Save');
 
     $this->assertSession()->pageTextContains('Your settings have been saved.');
-    $this->assertEquals(['Left', 'Right', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
     $this->drupalGet('entity_test/1');
     // No fields are visible, and the regions don't display when empty.
@@ -157,7 +157,7 @@ public function testEntityView() {
 
     // After a refresh the new regions are still there.
     $this->drupalGet('entity_test/structure/entity_test/display');
-    $this->assertEquals(['Left', 'Right', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
     // Drag the field to the left region.
     $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());

core/modules/field_layout/tests/src/Kernel/FieldLayoutEntityDisplayTest.php

@@ -68,6 +68,7 @@ public function testPreSave() {
     $expected['dependencies']['module'] = [
       'entity_test',
       'field_layout',
+      'layout_discovery',
     ];
     // A third party setting is added by the entity_test module.
     $expected['third_party_settings']['entity_test'] = ['foo' => 'bar'];

core/modules/layout_discovery/layout_discovery.layouts.yml

+layout_onecol:
+  label: 'One column'
+  path: layouts/onecol
+  template: layout--onecol
+  library: layout_discovery/onecol
+  category: 'Columns: 1'
+  default_region: content
+  regions:
+    content:
+      label: Content
+
+layout_twocol:
+  label: 'Two column'
+  path: layouts/twocol
+  template: layout--twocol
+  library: layout_discovery/twocol
+  category: 'Columns: 2'
+  default_region: left
+  regions:
+    top:
+      label: Top
+    left:
+      label: Left
+    right:
+      label: Right
+    bottom:
+      label: Bottom
+
+layout_twocol_bricks:
+  label: 'Two column bricks'
+  path: layouts/twocol_bricks
+  template: layout--twocol-bricks
+  library: layout_discovery/twocol_bricks
+  category: 'Columns: 2'
+  default_region: middle
+  regions:
+    top:
+      label: Top
+    left_above:
+      label: 'Left above'
+    right_above:
+      label: 'Right above'
+    middle:
+      label: Middle
+    left_below:
+      label: 'Left below'
+    right_below:
+      label: 'Right below'
+    bottom:
+      label: Bottom
+
+layout_threecol_25_50_25:
+  label: 'Three column 25/50/25'
+  path: layouts/threecol_25_50_25
+  template: layout--threecol-25-50-25
+  library: layout_discovery/threecol_25_50_25
+  category: 'Columns: 3'
+  default_region: left
+  regions:
+    top:
+      label: Top
+    left:
+      label: Left
+    middle:
+      label: Middle
+    right:
+      label: Right
+    bottom:
+      label: Bottom
+
+layout_threecol_33_34_33:
+  label: 'Three column 33/34/33'
+  path: layouts/threecol_33_34_33
+  template: layout--threecol-33-34-33
+  library: layout_discovery/threecol_33_34_33
+  category: 'Columns: 3'
+  default_region: left
+  regions:
+    top:
+      label: Top
+    left:
+      label: Left
+    middle:
+      label: Middle
+    right:
+      label: Right
+    bottom:
+      label: Bottom

core/modules/layout_discovery/layout_discovery.libraries.yml

+onecol:
+  version: VERSION
+  css:
+    theme:
+      layouts/onecol/onecol.css: {}
+twocol_bricks:
+  version: VERSION
+  css:
+    theme:
+      layouts/twocol_bricks/twocol_bricks.css: {}
+twocol:
+  version: VERSION
+  css:
+    theme:
+      layouts/twocol/twocol.css: {}
+threecol_25_50_25:
+  version: VERSION
+  css:
+    theme:
+      layouts/threecol_25_50_25/threecol_25_50_25.css: {}
+threecol_33_34_33:
+  version: VERSION
+  css:
+    theme:
+      layouts/threecol_33_34_33/threecol_33_34_33.css: {}

core/modules/layout_discovery/layouts/onecol/onecol.css

+.layout--onecol .layout-region {
+  width: 100%;
+}

core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation for a three column layout.
+ *
+ * This template provides a three column 25%-50%-25% display layout, with
+ * additional areas for the top and the bottom.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+set classes = [
+'layout--threecol',
+]
+%}
+{% if content %}
+<div{{ attributes.addClass(classes) }}>
+  {% if content.top %}
+    <div class="layout-region layout-region--fullwidth">
+      {{ content.top }}
+    </div>
+  {% endif %}
+
+  <div class="layout-region layout-region--side">
+    {{ content.left }}
+  </div>
+
+  <div class="layout-region layout-region--middle">
+    {{ content.middle }}
+  </div>
+
+  <div class="layout-region layout-region--side">
+    {{ content.right }}
+  </div>
+
+  {% if content.bottom %}
+    <div class="layout-region layout-region--fullwidth">
+      {{ content.bottom }}
+    </div>
+  {% endif %}
+</div>
+{% endif %}

core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css

+.layout--threecol {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.layout--threecol > .layout-region {
+  flex: 0 1 25%;
+}
+
+.layout--threecol > .layout-region--fullwidth {
+  flex: 0 1 100%;
+}
+
+.layout--threecol > .layout-region--middle {
+  flex: 0 1 50%;
+}

core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation for a three column layout.
+ *
+ * This template provides a three column 33%-34%-33% display layout, with
+ * additional areas for the top and the bottom.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+set classes = [
+'layout--threecol-33',
+]
+%}
+{% if content %}
+<div{{ attributes.addClass(classes) }}>
+  {% if content.top %}
+  <div class="layout-region layout-region--fullwidth">
+    {{ content.top }}
+  </div>
+  {% endif %}
+
+  <div class="layout-region">
+    {{ content.left }}
+  </div>
+
+  <div class="layout-region">
+    {{ content.middle }}
+  </div>
+
+  <div class="layout-region">
+    {{ content.right }}
+  </div>
+
+  {% if content.bottom %}
+  <div class="layout-region layout-region--fullwidth">
+    {{ content.bottom }}
+  </div>
+  {% endif %}
+</div>
+{% endif %}

core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css

+.layout--threecol-33 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.layout--threecol-33 > .layout-region {
+  flex: 0 1 33%;
+}
+
+.layout--threecol-33 > .layout-region--fullwidth {
+  flex: 0 1 100%;
+}

core/modules/field_layout/layouts/twocol/layout--twocol.html.twig → core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig

@@ -17,6 +17,10 @@ set classes = [
 %}
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
+    <div class="layout-region layout-region--fullwidth">
+      {{ content.top }}
+    </div>
+
     <div class="layout-region layout-region--left">
       {{ content.left }}
     </div>
@@ -24,5 +28,9 @@ set classes = [
     <div class="layout-region layout-region--right">
       {{ content.right }}
     </div>
+
+    <div class="layout-region layout-region--fullwidth">
+      {{ content.bottom }}
+    </div>
   </div>
 {% endif %}

core/modules/field_layout/layouts/twocol/twocol.layout.css → core/modules/layout_discovery/layouts/twocol/twocol.css

@@ -3,12 +3,11 @@
   flex-wrap: wrap;
   justify-content: space-between;
 }
+
 .layout--twocol > .layout-region {
   flex: 0 1 50%;
-  max-width: 50%;
 }
 
-.layout--twocol > .layout-region--left {
-  max-width: calc(50% - 10px);
-  margin-right: 10px;
+.layout--twocol > .layout-region--fullwidth {
+  flex: 0 1 100%;
 }

core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation for a two column layout.
+ *
+ * This template provides a two column display layout with full width areas at
+ * the top, bottom and in the middle.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+set classes = [
+'layout--twocol-bricks',
+]
+%}
+{% if content %}
+<div{{ attributes.addClass(classes) }}>
+  <div class="layout-region layout-region--fullwidth">
+    {{ content.top }}
+  </div>
+
+  <div class="layout-region layout-region--left_above">
+    {{ content.left_above }}
+  </div>
+
+  <div class="layout-region layout-region--right_above">
+    {{ content.right_above }}
+  </div>
+
+  <div class="layout-region layout-region--middle">
+    {{ content.middle }}
+  </div>
+
+  <div class="layout-region layout-region--left_below">
+    {{ content.left_below }}
+  </div>
+
+  <div class="layout-region layout-region--right_below">
+    {{ content.right_below }}
+  </div>
+
+  <div class="layout-region layout-region--fullwidth">
+    {{ content.bottom }}
+  </div>
+</div>
+{% endif %}

core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css

+.layout--twocol-bricks {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.layout--twocol-bricks > .layout-region {
+  flex: 0 1 50%;
+}
+
+.layout--twocol-bricks > .layout-region--fullwidth {
+  flex: 0 1 100%;
+}