KAW-7684 Refactor full widht to support all of the blocks

blocks/image/image.css

@@ -1,9 +1,3 @@
-.section .image-wrapper-full-width {
-  margin: 0;
-  width: 100%;
-  max-width: 100vw;
-}
-
 .block.image picture {
   display: flex;
 }
@@ -12,8 +6,3 @@
   width: 100%;
   object-fit: cover;
 }
-
-.block.image.full-width {
-  margin-left: calc(-1 * var(--section-x-padding));
-  margin-right: calc(-1 * var(--section-x-padding));
-}

blocks/image/image.js

@@ -1,5 +1,3 @@
-export default async function decorate(block) {
-  if (block.classList.contains('full-width')) {
-    block.parentElement.classList.add('image-wrapper-full-width');
-  }
+export default async function decorate() {
+  // JS code
 }

scripts/scripts.js

@@ -55,6 +55,14 @@ function buildAutoBlocks(main) {
   }
 }
 
+function customDecorateBlocks(main) {
+  main.querySelectorAll('div.section > div > div').forEach((block) => {
+    if (block.classList.contains('full-width')) {
+      block.parentElement.classList.add('wrapper-full-width');
+    }
+  });
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
@@ -67,6 +75,7 @@ export function decorateMain(main) {
   buildAutoBlocks(main);
   decorateSections(main);
   decorateBlocks(main);
+  customDecorateBlocks(main);
 }
 
 /**

styles/styles.css

@@ -261,6 +261,18 @@ main .section:last-child {
   }
 }
 
+/* full width styles */
+.section .wrapper-full-width {
+  margin: 0;
+  width: 100%;
+  max-width: 100vw;
+}
+
+.block.full-width {
+  margin-left: calc(-1 * var(--section-x-padding));
+  margin-right: calc(-1 * var(--section-x-padding));
+}
+
 /* section metadata */
 main .section.light,
 main .section.highlight {