diff --git a/blocks/fragment/fragment.js b/blocks/fragment/fragment.js index 648a70e103..b6910ad9f4 100644 --- a/blocks/fragment/fragment.js +++ b/blocks/fragment/fragment.js @@ -19,6 +19,8 @@ import { */ export async function loadFragment(path) { if (path && path.startsWith('/')) { + // eslint-disable-next-line no-param-reassign + path = path.replace(/(\.plain)?\.html/, ''); const resp = await fetch(`${path}.plain.html`); if (resp.ok) { const main = document.createElement('main'); @@ -48,8 +50,9 @@ export default async function decorate(block) { if (fragment) { const fragmentSection = fragment.querySelector(':scope .section'); if (fragmentSection) { - block.closest('.section').classList.add(...fragmentSection.classList); - block.closest('.fragment').replaceWith(...fragment.childNodes); + block.classList.add(...fragmentSection.classList); + block.classList.remove('section'); + block.replaceChildren(...fragmentSection.childNodes); } } } diff --git a/component-definition.json b/component-definition.json index 5100d0bcd8..d1706da214 100644 --- a/component-definition.json +++ b/component-definition.json @@ -135,6 +135,21 @@ } } } + }, + { + "title": "Fragment", + "id": "fragment", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block", + "template": { + "name": "Fragment", + "model": "fragment" + } + } + } + } } ] } diff --git a/component-filters.json b/component-filters.json index 1f64a75654..a4158e1b35 100644 --- a/component-filters.json +++ b/component-filters.json @@ -27,7 +27,8 @@ "title", "hero", "cards", - "columns" + "columns", + "fragment" ] }, { diff --git a/component-models.json b/component-models.json index ef36352158..082d6d4eb4 100644 --- a/component-models.json +++ b/component-models.json @@ -185,5 +185,15 @@ "valueType": "string" } ] + }, + { + "id": "fragment", + "fields": [ + { + "component": "aem-content", + "name": "reference", + "label": "Reference" + } + ] } ]