Drupal 8 Layout Builder + Display Suite Drag & Drop Fix - Display suite

Layout Builder + Display Suite - Drag & Drop Issue

layout builder display suite drag & drop

By default, Display Suite layouts are using it's own region attributes like below:

{{ title_suffix.contextual_links }}
<{{ outer_wrapper }}{{ attributes.addClass('row', 'clearfix') }}>
  <{{ top_wrapper }}{{ top_attributes.addClass('col-12', 'region-top') }}>
    {{ top }}
  </{{ top_wrapper }}>
</div>

This takes out classes that the layout builder used for the drag & drop feature.

The fix is to simply use the region attributes from layout builder like:

{{ title_suffix.contextual_links }}
<{{ outer_wrapper }}{{ attributes.addClass('row', 'clearfix') }}>
  <{{ top_wrapper }}{{ region_attributes.top.addClass('col-12', 'region-top') }}>
    {{ top }}
  </{{ top_wrapper }}>
</div>

 

Layout Builder + Display Suite - Custom Classes Missing After Layout Region Attribute Fix

Layout Builder Custom Classes

Although the drag & drop issues was fixed with the above code, it introduces another issue when you want to use the custom classes.

I noticed that the regions that used the default layout builder region attributes are not loading the custom classes.

To fix it, we should combine the classes from both layout builder region attributes and display suite region attributes.

Simply add the rendered class to the region attributes like:

{{ title_suffix.contextual_links }}
<{{ outer_wrapper }}{{ attributes.addClass('row', 'clearfix') }}>
  <{{ top_wrapper }}{{ region_attributes.top.addClass('col-12', 'region-top', top_attributes.class|render) }}>
    {{ top }}
  </{{ top_wrapper }}>
</div>

 

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.