Skip to content

#3486236 - Add HTML comments wrapping components and variables where possible

Lee Rowlands requested to merge issue/experience_builder-3486236:3486236-add-html-comments into 0.x

Closes #3486236

Components now output HTML comments at the start and end of each component and around props where we can

<!-- xb-start-9fff3623-d783-44c7-bb94-896d322f0d66 -->
  <div  data-component-id="xb_test_sdc:props-no-slots" style="font-family: Helvetica, Arial, sans-serif; width: 100%; height: 100vh; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 20px; box-sizing: border-box;">
    <h1 style="font-size: 3em; margin: 0.5em 0; color: #333;">
      <!-- xb-prop-start-heading -->
        se3hqtu5
      <!-- xb-prop-end-heading -->
    </h1>
  </div>
<!-- xb-end-9fff3623-d783-44c7-bb94-896d322f0d66 -->

Places we can't output wrappers around props

  • Inside {% trans %} tag - see https://www.drupal.org/project/drupal/issues/3486273 - core bug
  • Inside partial HTML elements/attributes - e.g. <img src="{{ src }}" and <div {{ attributes }}> this will require a full AST mixing HTML and Twig nodes, I'm working on that in github.com/larowlan/twigcaster (private for now)
Edited by Jesse Baker

Merge request reports