feat(#47): add support for custom layouts module (#48)

* chore(#47): add custom layout and test content * feat(#47): added support for custom layouts module * chore: update test environments * chore(#47): update dependencies * chore: update test
druxt-contrib · Jul 17, 2023 · ef9916b · ef9916b
1 parent 9696d5c
commit ef9916b
Show file tree

Hide file tree

Showing 21 changed files with 366 additions and 106 deletions.
diff --git a/.changeset/early-apricots-draw.md b/.changeset/early-apricots-draw.md
@@ -0,0 +1,5 @@
+---
+"druxt-layout-paragraphs": minor
+---
+
+feat(#47): added support for Custom Layouts module
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -24,13 +24,13 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
 
-    - run: npm i
+    - run: yarn
 
-    - run: npm run build
+    - run: yarn build
 
-    - run: npm run lint
+    - run: yarn lint
 
-    - run: npm test --reporters=jest-junit --runInBand
+    - run: yarn test --reporters=jest-junit --runInBand
 
     - name: Codecov
       uses: codecov/codecov-action@v3.1.0
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v16.20.1
diff --git a/example/drupal/.ddev/config.yaml b/example/drupal/.ddev/config.yaml
@@ -1,7 +1,7 @@
 name: druxt-layout-paragraphs-example
 type: drupal9
 docroot: web
-php_version: "7.4"
+php_version: "8.1"
 webserver_type: nginx-fpm
 router_http_port: "80"
 router_https_port: "443"
@@ -82,7 +82,7 @@ web_environment: []
 # Please take care with this because it can cause great confusion.
 
 # upload_dir: custom/upload/dir
-# would set the destination path for ddev import-files to <docroot>/custom/upload/dir 
+# would set the destination path for ddev import-files to <docroot>/custom/upload/dir
 
 # working_dir:
 #   web: /var/www/html

diff --git a/example/drupal/composer.json b/example/drupal/composer.json
@@ -7,16 +7,23 @@
   "support": {
     "chat": "https://discord.druxtjs.org"
   },
-  "repositories": [
-    {
-      "type": "vcs",
-      "url": "https://github.com/realityloop/tome_drush"
-    },
-    {
+  "repositories": {
+    "drupal": {
       "type": "composer",
-      "url": "https://packages.drupal.org/8"
-    }
-  ],
+      "url": "https://packages.drupal.org/8",
+      "exclude": [
+        "drupal/layout_content"
+    ]
+    },
+    "drupal/layout_content": {
+        "type": "git",
+        "url": "https://git.drupalcode.org/issue/layout_content-3288241.git"
+    },
+    "drupal-tome/tome_drush": {
+        "type": "vcs",
+        "url": "https://github.com/realityloop/tome_drush"
+      }
+  },
   "require": {
     "composer/installers": "2.1.1",
     "drupal-tome/tome_drush": "dev-feature/3-drush_11",
@@ -25,6 +32,7 @@
     "drupal/core-recommended": "9.3.14",
     "drupal/druxt": "1.1.1",
     "drupal/jsonapi_hypermedia": "^1.8",
+    "drupal/layout_content": "dev-3288241-layout_content-d10",
     "drupal/layout_paragraphs": "1.0.0",
     "drupal/tome": "1.7.0",
     "drush/drush": "11.0.9"

diff --git a/example/drupal/config/core.entity_view_display.layout_content.custom_layout.default.yml b/example/drupal/config/core.entity_view_display.layout_content.custom_layout.default.yml
@@ -0,0 +1,17 @@
+uuid: 5f1147ed-e3e8-40c2-8b56-b59c8316473c
+langcode: en
+status: true
+dependencies:
+  config:
+    - layout_content.type.custom_layout
+id: layout_content.custom_layout.default
+targetEntityType: layout_content
+bundle: custom_layout
+mode: default
+content:
+  layout_regions:
+    settings: {  }
+    third_party_settings: {  }
+    weight: 0
+    region: content
+hidden: {  }
diff --git a/example/drupal/config/core.extension.yml b/example/drupal/config/core.extension.yml
@@ -31,6 +31,8 @@ module:
   jsonapi_menu_items: 0
   jsonapi_resources: 0
   jsonapi_views: 0
+  layout_builder: 0
+  layout_content: 0
   layout_discovery: 0
   layout_paragraphs: 0
   link: 0

diff --git a/example/drupal/config/layout_content.type.custom_layout.yml b/example/drupal/config/layout_content.type.custom_layout.yml
@@ -0,0 +1,10 @@
+uuid: abe4a023-8b46-4e58-9870-c9ead19ce6cf
+langcode: en
+status: true
+dependencies: {  }
+id: custom_layout
+label: 'Custom layout'
+revision: 1
+layout:
+  -
+    content: content
diff --git a/example/drupal/config/paragraphs.paragraphs_type.section.yml b/example/drupal/config/paragraphs.paragraphs_type.section.yml
@@ -18,3 +18,4 @@ behavior_plugins:
       layout_twocol_bricks: 'Two column bricks'
       layout_threecol_25_50_25: 'Three column 25/50/25'
       layout_threecol_33_34_33: 'Three column 33/34/33'
+      'layout_content__custom_layout:custom_layout': 'Custom layout'
diff --git a/example/drupal/config/paragraphs.paragraphs_type.text.yml b/example/drupal/config/paragraphs.paragraphs_type.text.yml
@@ -1,10 +1,15 @@
 uuid: fcb7b2e5-821f-4bf2-9eff-22e289a4280c
 langcode: en
 status: true
-dependencies: {  }
+dependencies:
+  module:
+    - layout_paragraphs
 id: text
 label: Text
 icon_uuid: null
 icon_default: null
 description: ''
-behavior_plugins: {  }
+behavior_plugins:
+  layout_paragraphs:
+    enabled: false
+    available_layouts: {  }
diff --git a/example/drupal/content/meta/index.json b/example/drupal/content/meta/index.json
@@ -15,7 +15,11 @@
         "paragraph.ec0b38e2-db75-4ab1-b441-e36c35dc7126",
         "paragraph.c489ea5c-3e9e-4acf-a650-6a8b0551037c",
         "paragraph.965b5df0-8f69-4920-a3f2-1d84b20b9eb0",
-        "paragraph.e7a4e78a-6409-47aa-8ce9-0ff468ce0872"
+        "paragraph.e7a4e78a-6409-47aa-8ce9-0ff468ce0872",
+        "paragraph.87d5e680-a388-4049-bd81-53501fc793eb",
+        "paragraph.3c881aaf-c532-4a77-8bd0-ab4fcea8f909"
     ],
-    "paragraph.e7a4e78a-6409-47aa-8ce9-0ff468ce0872": []
+    "paragraph.e7a4e78a-6409-47aa-8ce9-0ff468ce0872": [],
+    "paragraph.87d5e680-a388-4049-bd81-53501fc793eb": [],
+    "paragraph.3c881aaf-c532-4a77-8bd0-ab4fcea8f909": []
 }
diff --git a/example/drupal/content/node.7b21da83-e2ec-4801-9758-8696340e8f46.json b/example/drupal/content/node.7b21da83-e2ec-4801-9758-8696340e8f46.json
@@ -18,7 +18,7 @@
     ],
     "revision_timestamp": [
         {
-            "value": "2022-06-15T23:39:53+00:00",
+            "value": "2023-07-17T03:35:55+00:00",
             "format": "Y-m-d\\TH:i:sP"
         }
     ],
@@ -53,7 +53,7 @@
     ],
     "changed": [
         {
-            "value": "2022-06-15T23:39:53+00:00",
+            "value": "2023-07-17T03:35:55+00:00",
             "format": "Y-m-d\\TH:i:sP"
         }
     ],
@@ -109,6 +109,14 @@
         {
             "target_type": "paragraph",
             "target_uuid": "e7a4e78a-6409-47aa-8ce9-0ff468ce0872"
+        },
+        {
+            "target_type": "paragraph",
+            "target_uuid": "87d5e680-a388-4049-bd81-53501fc793eb"
+        },
+        {
+            "target_type": "paragraph",
+            "target_uuid": "3c881aaf-c532-4a77-8bd0-ab4fcea8f909"
         }
     ]
 }
diff --git a/example/drupal/content/paragraph.3c881aaf-c532-4a77-8bd0-ab4fcea8f909.json b/example/drupal/content/paragraph.3c881aaf-c532-4a77-8bd0-ab4fcea8f909.json
@@ -0,0 +1,58 @@
+{
+    "uuid": [
+        {
+            "value": "3c881aaf-c532-4a77-8bd0-ab4fcea8f909"
+        }
+    ],
+    "langcode": [
+        {
+            "value": "en"
+        }
+    ],
+    "type": [
+        {
+            "target_id": "text",
+            "target_type": "paragraphs_type",
+            "target_uuid": "fcb7b2e5-821f-4bf2-9eff-22e289a4280c"
+        }
+    ],
+    "status": [
+        {
+            "value": true
+        }
+    ],
+    "created": [
+        {
+            "value": "2023-07-17T03:35:50+00:00",
+            "format": "Y-m-d\\TH:i:sP"
+        }
+    ],
+    "behavior_settings": [
+        {
+            "value": {
+                "layout_paragraphs": {
+                    "region": "content",
+                    "parent_uuid": "87d5e680-a388-4049-bd81-53501fc793eb",
+                    "layout": "",
+                    "config": []
+                }
+            }
+        }
+    ],
+    "default_langcode": [
+        {
+            "value": true
+        }
+    ],
+    "revision_translation_affected": [
+        {
+            "value": true
+        }
+    ],
+    "field_text": [
+        {
+            "value": "<p>Curabitur tincidunt erat non sollicitudin accumsan. In urna orci, tempor eu condimentum nec, commodo ut sem. In posuere lacus sit amet massa semper, et tincidunt mi euismod. Suspendisse egestas condimentum libero eget congue. Nunc mattis ac ligula vitae egestas. Nam sed vestibulum felis, et consectetur orci. In congue ornare felis vel convallis. Nam a molestie elit.<\/p>\r\n",
+            "format": "basic_html"
+        }
+    ]
+}
diff --git a/example/drupal/content/paragraph.87d5e680-a388-4049-bd81-53501fc793eb.json b/example/drupal/content/paragraph.87d5e680-a388-4049-bd81-53501fc793eb.json
@@ -0,0 +1,62 @@
+{
+    "uuid": [
+        {
+            "value": "87d5e680-a388-4049-bd81-53501fc793eb"
+        }
+    ],
+    "langcode": [
+        {
+            "value": "en"
+        }
+    ],
+    "type": [
+        {
+            "target_id": "section",
+            "target_type": "paragraphs_type",
+            "target_uuid": "da40476e-6c6d-4333-986d-d91742780c6e"
+        }
+    ],
+    "status": [
+        {
+            "value": true
+        }
+    ],
+    "created": [
+        {
+            "value": "2023-07-17T03:35:27+00:00",
+            "format": "Y-m-d\\TH:i:sP"
+        }
+    ],
+    "behavior_settings": [
+        {
+            "value": {
+                "layout_paragraphs": {
+                    "region": "",
+                    "parent_uuid": "",
+                    "layout": "layout_content__custom_layout:custom_layout",
+                    "config": {
+                        "label": "",
+                        "layout_serialized": "O:42:\"Drupal\\layout_content\\Entity\\LayoutContent\":28:{s:15:\"\u0000*\u0000entityTypeId\";s:14:\"layout_content\";s:15:\"\u0000*\u0000enforceIsNew\";b:1;s:12:\"\u0000*\u0000typedData\";N;s:16:\"\u0000*\u0000cacheContexts\";a:0:{}s:12:\"\u0000*\u0000cacheTags\";a:0:{}s:14:\"\u0000*\u0000cacheMaxAge\";i:-1;s:14:\"\u0000*\u0000_serviceIds\";a:0:{}s:18:\"\u0000*\u0000_entityStorages\";a:0:{}s:9:\"\u0000*\u0000values\";a:13:{s:8:\"langcode\";a:1:{s:9:\"x-default\";a:1:{i:0;a:1:{s:5:\"value\";s:2:\"en\";}}}s:11:\"revision_id\";a:1:{s:9:\"x-default\";a:0:{}}s:2:\"id\";a:1:{s:9:\"x-default\";a:0:{}}s:4:\"uuid\";a:1:{s:9:\"x-default\";a:1:{i:0;a:1:{s:5:\"value\";s:36:\"a82948c8-91f7-4c6f-9739-c9eaf28daa84\";}}}s:4:\"type\";a:1:{s:9:\"x-default\";a:1:{i:0;a:1:{s:9:\"target_id\";s:13:\"custom_layout\";}}}s:16:\"revision_created\";a:1:{s:9:\"x-default\";a:1:{i:0;a:1:{s:5:\"value\";i:1689564928;}}}s:13:\"revision_user\";a:1:{s:9:\"x-default\";a:0:{}}s:12:\"revision_log\";a:1:{s:9:\"x-default\";a:0:{}}s:6:\"status\";a:1:{s:9:\"x-default\";a:1:{i:0;a:1:{s:5:\"value\";b:1;}}}s:7:\"changed\";a:1:{s:9:\"x-default\";a:1:{i:0;a:1:{s:5:\"value\";i:1689564928;}}}s:16:\"default_langcode\";a:1:{s:9:\"x-default\";a:1:{i:0;a:1:{s:5:\"value\";b:1;}}}s:16:\"revision_default\";a:1:{s:9:\"x-default\";a:0:{}}s:29:\"revision_translation_affected\";a:1:{s:9:\"x-default\";a:0:{}}}s:9:\"\u0000*\u0000fields\";a:0:{}s:19:\"\u0000*\u0000fieldDefinitions\";N;s:12:\"\u0000*\u0000languages\";N;s:14:\"\u0000*\u0000langcodeKey\";s:8:\"langcode\";s:21:\"\u0000*\u0000defaultLangcodeKey\";s:16:\"default_langcode\";s:17:\"\u0000*\u0000activeLangcode\";s:9:\"x-default\";s:18:\"\u0000*\u0000defaultLangcode\";s:2:\"en\";s:15:\"\u0000*\u0000translations\";a:1:{s:9:\"x-default\";a:1:{s:6:\"status\";i:2;}}s:24:\"\u0000*\u0000translationInitialize\";b:0;s:14:\"\u0000*\u0000newRevision\";b:1;s:20:\"\u0000*\u0000isDefaultRevision\";b:1;s:13:\"\u0000*\u0000entityKeys\";a:2:{s:6:\"bundle\";s:13:\"custom_layout\";s:8:\"revision\";N;}s:25:\"\u0000*\u0000translatableEntityKeys\";a:1:{s:8:\"langcode\";a:1:{s:9:\"x-default\";s:2:\"en\";}}s:12:\"\u0000*\u0000validated\";b:0;s:21:\"\u0000*\u0000validationRequired\";b:0;s:19:\"\u0000*\u0000loadedRevisionId\";N;s:33:\"\u0000*\u0000revisionTranslationAffectedKey\";s:29:\"revision_translation_affected\";s:37:\"\u0000*\u0000enforceRevisionTranslationAffected\";a:0:{}s:12:\"\u0000*\u0000isSyncing\";b:0;}",
+                        "layout_revision_id": null,
+                        "layout_uuid": null
+                    }
+                }
+            }
+        }
+    ],
+    "default_langcode": [
+        {
+            "value": true
+        }
+    ],
+    "revision_translation_affected": [
+        {
+            "value": true
+        }
+    ],
+    "field_title": [
+        {
+            "value": "Custom layout"
+        }
+    ]
+}
diff --git a/example/drupal/content/paragraph.e7a4e78a-6409-47aa-8ce9-0ff468ce0872.json b/example/drupal/content/paragraph.e7a4e78a-6409-47aa-8ce9-0ff468ce0872.json
@@ -44,11 +44,7 @@
             "value": true
         }
     ],
-    "revision_translation_affected": [
-        {
-            "value": true
-        }
-    ],
+    "revision_translation_affected": [],
     "field_text": [
         {
             "value": "<p>Aliquam blandit, elit eget feugiat efficitur, est turpis cursus augue, a fermentum quam nisl in ex. Aliquam rhoncus neque lectus, a convallis lacus ultricies vitae. Proin sed nisl sed tellus tincidunt efficitur. Integer sit amet ultricies mi, non dignissim nibh. Sed aliquet fringilla magna, sit amet porttitor libero scelerisque ut.<\/p>\r\n\r\n<p>Cras eget rutrum dolor, quis condimentum massa. In ullamcorper mi felis, vitae cursus felis ornare a. Donec gravida erat vel pretium dapibus. Mauris dui nulla, tincidunt at lacinia vel, feugiat imperdiet ligula. Nulla in justo a mi facilisis congue. Nunc nec turpis tortor. Aenean sollicitudin porttitor pulvinar. In sodales, arcu quis bibendum volutpat, urna lacus laoreet nisl, vel vulputate magna est nec purus. Vestibulum eget enim vel nulla sollicitudin vestibulum nec ac mauris.<\/p>\r\n\r\n<p>Nunc ex mauris, rhoncus a iaculis eget, bibendum nec nisl. Vestibulum auctor id justo a fermentum.<\/p>\r\n",

diff --git a/example/nuxt/package.json b/example/nuxt/package.json
@@ -8,6 +8,6 @@
     "druxt": "latest",
     "druxt-entity": "latest",
     "druxt-layout-paragraphs": "link:../..",
-    "nuxt": "latest"
+    "nuxt": "2.x"
   }
 }
diff --git a/example/nuxt/pages/index.vue b/example/nuxt/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>DruxtLayoutParagraphs example</h1>
-    <DruxtEntity mode="default" type="node--page" :uuid="uuid" />
+    <DruxtEntity mode="default" type="node--page" :uuid="uuid" :test="true" />
   </div>
 </template>
 

diff --git a/package.json b/package.json
@@ -35,15 +35,16 @@
     "@changesets/cli": "2.22.0",
     "@vue/test-utils": "1.3.0",
     "babel-core": "7.0.0-bridge.0",
-    "druxt": "0.19.2",
-    "druxt-entity": "^0.25.0",
+    "druxt": "0.22",
+    "druxt-entity": "0.28",
     "esbuild-jest": "0.5.0",
     "eslint": "8.16.0",
     "eslint-plugin-nuxt": "3.2.0",
     "jest": "27.5.1",
+    "jest-junit": "^16.0.0",
     "siroc": "0.16.0",
     "vue-jest": "3.0.7",
-    "vue-template-compiler": "2.6.14"
+    "vue-template-compiler": "2.7.14"
   },
   "peerDependencies": {},
   "publishConfig": {

diff --git a/src/components/DruxtFieldLayoutParagraphs.vue b/src/components/DruxtFieldLayoutParagraphs.vue
@@ -5,11 +5,13 @@
       :key="paragraph.uuid"
       :type="paragraph.type"
       :uuid="paragraph.id"
+      v-bind="{ ...$attrs }"
     >
       <template v-if="isLayout(paragraph)" #default="{ entity }">
         <DruxtLayoutParagraph
           :entity="entity"
           :children="getChildren(entity)"
+          v-bind="{ ...$attrs }"
         />
       </template>
     </DruxtEntity>