MWPW-132986 - Add spacing around library blocks (#1438)

* Block spacing * Add spacing to blocks copied and pasted from the block library. * Removing spacing from getHtml to avoid duplicate spacing being added to grouped patterns. Adding spacing to the new blob. --------- Co-authored-by: Ryan Clayton <[email protected]> Co-authored-by: Chris Millar <[email protected]>
adobecom · Nov 15, 2023 · 30f15af · 30f15af
1 parent ecead27
commit 30f15af
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/libs/blocks/library-config/lists/blocks.js b/libs/blocks/library-config/lists/blocks.js
@@ -5,6 +5,7 @@ import { getMetadata } from '../../section-metadata/section-metadata.js';
 const LIBRARY_METADATA = 'library-metadata';
 const LIBRARY_CONTAINER_START = 'library-container-start';
 const LIBRARY_CONTAINER_END = 'library-container-end';
+const BLOCK_SPACING = '<br>';
 // Block types:
 const CONTAINER_START_BLOCK = 0;
 const CONTAINER_END_BLOCK = 1;
@@ -286,7 +287,7 @@ export default async function loadBlocks(blocks, list, query) {
         const containerHtml = getHtml(container, block.path);
         e.target.classList.add('copied');
         setTimeout(() => { e.target.classList.remove('copied'); }, 3000);
-        const blob = new Blob([containerHtml], { type: 'text/html' });
+        const blob = new Blob([`${BLOCK_SPACING}${containerHtml}${BLOCK_SPACING}`], { type: 'text/html' });
         createCopy(blob);
       });
       item.append(name, copy);

diff --git a/test/blocks/library-config/library-config.test.js b/test/blocks/library-config/library-config.test.js
@@ -30,7 +30,7 @@ describe('Library Config: text', () => {
     verifyContainer(containers[0], 1, true);
     // verify getHtml()
     const docxHtml = getHtml(containers[0], BLOCK_PAGE_URL);
-    expect(docxHtml).to.equal(expectedDocxHtml);
+    expect(docxHtml).to.equal(expectedDocxHtml.trim());
     // verify getSearchTags()
     const searchTags = getSearchTags(containers[0]);
     expect(searchTags).to.equal('tb-2up-gr10 tb-3up-gr12 text');
@@ -57,7 +57,7 @@ describe('Library Config: chart', () => {
     verifyContainer(containers[0], 1, true);
     // verify getHtml()
     const docxHtml = getHtml(containers[0], BLOCK_PAGE_URL);
-    expect(docxHtml).to.equal(expectedDocxHtml);
+    expect(docxHtml).to.equal(expectedDocxHtml.trim());
     // verify getSearchTags()
     const searchTags = getSearchTags(containers[0]);
     expect(searchTags).to.equal('chart-0 chart (area, green, border)');
@@ -84,7 +84,7 @@ describe('Library Config: marquee', () => {
     verifyContainer(containers[0], 1, true);
     // verify getHtml()
     const docxHtml = getHtml(containers[0], BLOCK_PAGE_URL);
-    expect(docxHtml).to.equal(expectedDocxHtml);
+    expect(docxHtml).to.equal(expectedDocxHtml.trim());
     // verify getSearchTags()
     const searchTags = getSearchTags(containers[0]);
     expect(searchTags).to.equal('mq-std-md-lt mq-std-md-rt mq-std-md-lt-vid marquee-dark marquee');
@@ -148,8 +148,8 @@ describe('Library Config: containers', () => {
     const containers = getContainers(document);
     const singleBlockHtml = getHtml(containers[0], BLOCK_PAGE_URL);
     const containerHtml = getHtml(containers[3], BLOCK_PAGE_URL);
-    expect(singleBlockHtml).to.equal(expectedSingleBlockHtml);
-    expect(containerHtml).to.equal(expectedContainerHtml);
+    expect(singleBlockHtml).to.equal(expectedSingleBlockHtml.trim());
+    expect(containerHtml).to.equal(expectedContainerHtml.trim());
   });
 
   it('getSearchTags', async () => {