HubSpot Ideas

John

Developer Control Over Drag and Drop Editor HTML Output

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.
4 Replies
ellimccale
Participant

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
Contributor

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
Member

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

educarneiro
Participant

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.