Drag and drop area styles moved from footer to header

[jmclaren]

Drag and drop areas produce styles from attributes in the template and page-editor. These styles are output in the standard_footer_includes. Those styles are moving to the standard_header_includes.

What's happening?

Drag and drop areas are customizable from both the page editor and in the templates themselves. In the templates, developers can add these styles using attributes on the HubL drag and drop tags.  

The CSS styles are added to the page using a <style> tag that appears in the

standard_footer_includes. We're changing this so that we now load these styles last in the standard_header_includes. 

CSS styling is influenced by the order of styles in a page. Because we're moving the styles from the end of the HTML document to the head, this could influence the styling of some pages. Drag and drop area based styles are implemented with !important to ensure that editor styles take precedence. However, an inline style or a rule with an !important loaded lower in the page could override those styles.

To prevent issues, ensure that the dnd styles are loaded last. To do so, you can add your stylesheets above the standard_header_includes, through require_css, or linked to modules/templates. 

We expect the number of sites negatively impacted by this change will be very low. 

Why is it happening?

CSS is a render-blocking resource. The browser loads and processes CSS in a cascade, meaning CSS earlier in the doc will be rendered right away. Loading new styles later in a page's rendering can cause a flash of incompletely styled content. This update prevents that issue for drag and drop areas.

When is it happening?

We are already slowly rolling this out to all HubSpot accounts with access to HubSpot CMS functionality, that includes accounts with CMS Hub and Marketing Hub.

We estimate we will be done rolling this out to all accounts by July 20th, 2020.

Questions or comments? ask below.