Developer Control Over Drag and Drop Editor HTML Output

[John]

What if theme settings/json allowed devs to manipulate (and simplify) the drag n drop markup? It would allow us to cut down on the HTML bloat that comes with the current Bootstrap 2 layout.css

theme.json

"legacy_dnd": false,
"sections": {
  "default_tag": "section",
  "classes": "my-section"
},
"rows": {
  "default_tag": "div",
  "classes": "row"
},
"columns": {
  "default_tag": "div",
  "class_prefix": "col-",
  "extra_classes": "foo"
}

and the dnd output markup:

<section class="my-section" data-hs-section="8675309">
  <div class="row" data-hs-dnd-row="1" data-hs-dnd-level="1">
    <div class="col-4 foo"></div>
    <div class="col-8 foo"></div>
  </div>
</section>

and all hs markup would be in data attributes.

nested rows would look like:

<section class="my-section" data-hs-section="8675309">
  <div class="row" data-hs-dnd-row="1" data-hs-dnd-level="1">
    <div class="col-4 foo"></div>
    <div class="col-8 foo">
      <div class="row" data-hs-dnd-row="1" data-hs-dnd-level="2">
        <div class="col-6 foo"></div>
        <div class="col-6 foo"></div>
      </div>
      <div class="row" data-hs-dnd-row="2" data-hs-dnd-level="2">
        <div class="col-12 foo"></div>
      </div>
    </div>
  </div>
</section>

This would be a ton of work for HubSpot engineers – but it would future proof the dnd editor and prevent bloating the DOM with 3x the amount of nodes needed.

[ellimccale]

This functionality would be handy. And if it's not feasible for theme developers to customize output, the current HTML bloat should at least be reduced. So, so many unnecessary <div>s and, worse, the <span>s wrapping heading elements (not valid HTML). 😩

[amcintosh]

I'd love to tack this onto this - it would be great to be able to see the Custom classes in the DND pane - 

 https://community.hubspot.com/t5/HubSpot-Ideas/Display-Custom-Classes-Added-to-a-Section-in-Develope...

[Jaydub]

+100 to this. Would sugguest that classes be an array of values, but other than that, would love to see this done. 

[educarneiro]

The bloat issue is real and it's still there. It makes drag-and-drop with built-n modules almost unusable if you want to avoid bloated code.