Bug fix: fragment block should include fragment classnames [HTML DOM change]

[ujjwal5]

Please always provide the GitHub issue(s) your PR is for, as well as test URLs where your change can be observed (before and after):

Fix #409

Test URLs:

Before: https://fragment-block-fix--ancestry--aemsites.aem.live/drafts/ujjgupta/test-frgament
After: https://main--ancestry--aemsites.aem.live/drafts/ujjgupta/test-frgament

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/drafts/ujjgupta/test-frgament
🖥️	/drafts/ujjgupta/test-frgament

[ujjwal5]

Currently, the styles applied to a 'fragment' block are lost when the HTML is replaced. Ideally, any styles defined for the block should be retained. Additionally, the HTML structure of the fragment block is different from other blocks. Normally, the structure follows the pattern: container → wrapper → block. However, for the fragment block, it follows container → wrapper, omitting the block level.

HTML structure with existing code:

<div class="section fragment-container" data-section-status="loaded" style="">
   <div class="fragment-wrapper">
      <div class="section" data-section-status="loaded" data-key="value" style="">
         <div class="default-content-wrapper">
            <p>Would you like to see what you can discover about your family?</p>
            <ul>
               <li>Yes</li>
               <li>No</li>
               <li>I’m not sure</li>
            </ul>
            <p class="button-container"><a href="https://www.ancestry.com/onboarding/lop/questionnaire/intro" title="Continue" class="button">Continue</a></p>
            <p class="button-container"><a href="#" title="Dismiss" class="button">Dismiss</a></p>
         </div>
      </div>
   </div>
</div>

Proposed HTML structure with fixed issues:

<div class="section fragment-container" data-section-status="loaded" style="">
   <div class="fragment-wrapper">
      <div class="fragment animate block" data-block-name="fragment" data-block-status="loaded">
         <div class="section" data-section-status="loaded" data-key="value" style="">
            <div class="default-content-wrapper">
               <p>Would you like to see what you can discover about your family?</p>
               <ul>
                  <li>Yes</li>
                  <li>No</li>
                  <li>I’m not sure</li>
               </ul>
               <p class="button-container"><a href="https://www.ancestry.com/onboarding/lop/questionnaire/intro" title="Continue" class="button">Continue</a></p>
               <p class="button-container"><a href="#" title="Dismiss" class="button">Dismiss</a></p>
            </div>
         </div>
      </div>
   </div>
</div>

[ujjwal5]

@kptdobe FYI, please help in reviewing. Thanks!

[kptdobe]

I see the problem. And I also see more problems... The fragment block introduces sections in sections, but that's unrelated to your PR. Your PR is about respecting the block logic, i.e. the fragment block stays a block while current logic removes the block div.
I think your PR makes sense but we probably need the original developer (@davidnuescheler)'s input here.