diff --git a/core/modules/field_layout/field_layout.layouts.yml b/core/modules/field_layout/field_layout.layouts.yml deleted file mode 100644 index 7f51a69..0000000 --- a/core/modules/field_layout/field_layout.layouts.yml +++ /dev/null @@ -1,22 +0,0 @@ -# @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 diff --git a/core/modules/field_layout/field_layout.libraries.yml b/core/modules/field_layout/field_layout.libraries.yml deleted file mode 100644 index aafe7ee..0000000 --- a/core/modules/field_layout/field_layout.libraries.yml +++ /dev/null @@ -1,5 +0,0 @@ -drupal.layout.twocol: - version: VERSION - css: - layout: - layouts/twocol/twocol.layout.css: {} diff --git a/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php b/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php index 1336a70..a0fd13c 100644 --- a/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php +++ b/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()); diff --git a/core/modules/field_layout/tests/src/Kernel/FieldLayoutEntityDisplayTest.php b/core/modules/field_layout/tests/src/Kernel/FieldLayoutEntityDisplayTest.php index 8a7fde9..3ca5e59 100644 --- a/core/modules/field_layout/tests/src/Kernel/FieldLayoutEntityDisplayTest.php +++ b/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']; diff --git a/core/modules/layout_discovery/layout_discovery.layouts.yml b/core/modules/layout_discovery/layout_discovery.layouts.yml new file mode 100644 index 0000000..98b1ed6 --- /dev/null +++ b/core/modules/layout_discovery/layout_discovery.layouts.yml @@ -0,0 +1,88 @@ +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 diff --git a/core/modules/layout_discovery/layout_discovery.libraries.yml b/core/modules/layout_discovery/layout_discovery.libraries.yml new file mode 100644 index 0000000..aff70e0 --- /dev/null +++ b/core/modules/layout_discovery/layout_discovery.libraries.yml @@ -0,0 +1,25 @@ +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: {} diff --git a/core/modules/field_layout/layouts/onecol/layout--onecol.html.twig b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig similarity index 100% rename from core/modules/field_layout/layouts/onecol/layout--onecol.html.twig rename to core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig diff --git a/core/modules/layout_discovery/layouts/onecol/onecol.css b/core/modules/layout_discovery/layouts/onecol/onecol.css new file mode 100644 index 0000000..040b7f1 --- /dev/null +++ b/core/modules/layout_discovery/layouts/onecol/onecol.css @@ -0,0 +1,3 @@ +.layout--onecol .layout-region { + width: 100%; +} diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig new file mode 100644 index 0000000..78db2b4 --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig @@ -0,0 +1,47 @@ +{# +/** + * @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
. + * + * @ingroup themeable + */ +#} +{% +set classes = [ +'layout--threecol', +] +%} +{% if content %} + + {% if content.top %} +
+ {{ content.top }} +
+ {% endif %} + +
+ {{ content.left }} +
+ +
+ {{ content.middle }} +
+ +
+ {{ content.right }} +
+ + {% if content.bottom %} +
+ {{ content.bottom }} +
+ {% endif %} +
+{% endif %} diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css new file mode 100644 index 0000000..7472d55 --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css @@ -0,0 +1,17 @@ +.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%; +} diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig new file mode 100644 index 0000000..59461f4 --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig @@ -0,0 +1,47 @@ +{# +/** + * @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
. + * + * @ingroup themeable + */ +#} +{% +set classes = [ +'layout--threecol-33', +] +%} +{% if content %} + + {% if content.top %} +
+ {{ content.top }} +
+ {% endif %} + +
+ {{ content.left }} +
+ +
+ {{ content.middle }} +
+ +
+ {{ content.right }} +
+ + {% if content.bottom %} +
+ {{ content.bottom }} +
+ {% endif %} +
+{% endif %} diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css new file mode 100644 index 0000000..7091416 --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css @@ -0,0 +1,13 @@ +.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%; +} diff --git a/core/modules/field_layout/layouts/twocol/layout--twocol.html.twig b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig similarity index 74% rename from core/modules/field_layout/layouts/twocol/layout--twocol.html.twig rename to core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig index 8e54d30..efebf0f 100644 --- a/core/modules/field_layout/layouts/twocol/layout--twocol.html.twig +++ b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig @@ -17,6 +17,10 @@ set classes = [ %} {% if content %} +
+ {{ content.top }} +
+
{{ content.left }}
@@ -24,5 +28,9 @@ set classes = [
{{ content.right }}
+ +
+ {{ content.bottom }} +
{% endif %} diff --git a/core/modules/field_layout/layouts/twocol/twocol.layout.css b/core/modules/layout_discovery/layouts/twocol/twocol.css similarity index 56% rename from core/modules/field_layout/layouts/twocol/twocol.layout.css rename to core/modules/layout_discovery/layouts/twocol/twocol.css index 78a447d..41e8883 100644 --- a/core/modules/field_layout/layouts/twocol/twocol.layout.css +++ b/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%; } diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig new file mode 100644 index 0000000..9c6231b --- /dev/null +++ b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig @@ -0,0 +1,51 @@ +{# +/** + * @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
. + * + * @ingroup themeable + */ +#} +{% +set classes = [ +'layout--twocol-bricks', +] +%} +{% if content %} + +
+ {{ content.top }} +
+ +
+ {{ content.left_above }} +
+ +
+ {{ content.right_above }} +
+ +
+ {{ content.middle }} +
+ +
+ {{ content.left_below }} +
+ +
+ {{ content.right_below }} +
+ +
+ {{ content.bottom }} +
+
+{% endif %} diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css new file mode 100644 index 0000000..aef887a --- /dev/null +++ b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css @@ -0,0 +1,13 @@ +.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%; +}