fix fragment experiment issue on auto-blocking block and regular blocks

scripts/scripts.js

@@ -8,9 +8,11 @@ import {
   decorateButtons,
   decorateIcons,
   decorateSections,
+  decorateBlock,
   decorateBlocks,
   decorateTemplateAndTheme,
   waitForLCP,
+  loadBlock,
   loadBlocks,
   loadCSS,
 } from './lib-franklin.js';
@@ -275,6 +277,28 @@ async function loadPage() {
   await setupAnalytics;
 }
 
+// Properly decorate fragments that were pulled in
+document.addEventListener('aem:experimentation', (ev) => {
+  // Do not redecorate the default content
+  if (ev.detail.variant === 'control') {
+    return;
+  }
+  // Rebuild the autoblock as needed
+  if (ev.detail.element.classList.contains('hero')) {
+    const parent = ev.detail.element.parentElement.parentElement;
+    [...ev.detail.element.children].reverse().forEach((el) => parent.prepend(el));
+    ev.detail.element.remove();
+    // Rebuild and redecorate the hero block
+    buildHeroBlock(parent);
+    decorateBlocks(parent);
+    loadBlocks(parent);
+  } else if (ev.detail.element.classList.contains('block')) {
+    // Otherwise, just reset the replaced blocks and redecorate them
+    decorateBlock(ev.detail.element);
+    loadBlock(ev.detail.element);
+  }
+});
+
 const cwv = {};
 
 // Forward the RUM CWV cached measurements to edge using WebSDK before the page unloads