Version 5.5.0 release details
Last updated: 1st August 2019
Released: 29th July 2019
When upgrading your website to the latest version of DX8, database updates will be applied and therefore you can't roll back to the previous version of DX8 once upgraded.
It is recommended applying updates on your development environment and backing up your website including your database before upgrading DX8.
This page is to detail the latest changes and updates regarding DX8 version 5.5.0 and to give you an overview of how this may affect your experience with the platform. This release contains many new features including Canvas preview, Component and helper categories, DX8 sync packages and locking and much more! This release also contains some minor bug fixes.
DX8 5.5.0 is compatible with both 8.6.x and 8.7.x of Drupal.
There are the following known issues with version 5.5.0 of DX8:
- When animate on view on touch devices is set to disabled, the elements set to animate are not always shown
- In some rare cases pasting large portions of text into a WYSIWYG element results in the first line of the content being cut off and the WYSIWYG is not scrollable.
The above issues will be resolved in version 5.5.1.
New features this release includes:
You can now preview components, helpers, content and master templates as you create them on the layout canvas.
- Real time preview updates as you edit your components, helpers, content and master templates
- Multi screen editing (pop out the preview multiple times to see the preview reload in real time at different browser resolutions)
- Breakpoint selection
- Grid System guide preview display
- Scale to fit for viewing large breakpoints on small screens
- Custom column width preview
- Custom background color preview
Find out more about canvas preview.
Component and Helpers categories
Previously helper and component categories were a fixed list, now any number of categories can be defined by the site builder. Site builder can access the categories listing pages and create new categories via the menu at DX8 > Components > Categories and DX8 > Helpers > Categories.
Note that existing sites will have the previously hardcoded entities converted to editable categories and all references inside components and helpers will link to these new categories. A core permission will be added for each category to:
People -> Permissions
If you have configured these permissions on an existing site, they will need to be configured again for these new permissions.
New installs of DX8 will come with a set of pre-defined categories that can be edited or removed by the site builder.
Find out more about helper and component categories.
- Sync menu items have moved - DX8 sync module menu items have moved from under "Config -> Development -> Sync" to "DX8 -> Sync".
- Change to full export behavior - When defining which entity types to exclude from a full export in "Full export settings"
/admin/cohesion/sync/export_settings, DX8 Sync will now exclude all entities of those types regardless of their dependencies.
- Importing custom styles - Fixed a small issue where DX8 Sync always detected Custom Style entities as changed even if they were identical.
- Uploading large files via the UI - When uploading package files via the UI at
/admin/cohesion/sync/import, it's now possible to upload very large files that exceed the PHP
It's now possible to decouple / lock a DX8 entity on a site. This means that this entity will be ignored by Sync when running an import.
For example, if you have a package.yml that contains a component and you import that component to your site. Now you lock the component and make some changes. If you attempt to re-import the same package.yml file, DX8 sync will ignore the locked component and report that there are no changes to apply.
DX8 sync now allows users to create sync packages, where you can define your package contents which can then be exported from the package listing page. A new permission has been created for administering the sync packages.
Sync import report
When you import DX8 configuration using DX8 Sync import through the UI, you now get a report detailing what entities were imported, overwritten and ignored.
New options for deploying sync packages
There is now a new option to specify a path to a local or remote file when deploying a package using the
drush sync:import command.
Module developers can now include a list of
*.package.yml files that will automatically be installed when their module is enabled.
Find out more about deployment options using DX8 sync.
Slider container - slide count
A new setting "slide count" has been added to the slider container element. This setting when configured renders a count of the current slide / total slides.
Link element - support for child elements
The link element now has support for child elements - by default, it will appear on the layout canvas as collapsed.
Link element and link to page form field
Previously, the "Link to page" field on the link element and the link component form field only allowed users to search for links to nodes. This has been extended to allow users to link to views pages.
Analytics data layer
The analytics tab on DX8 elements now has options for adding data layer key and value pairs. This data can be pushed to Google tag manager when triggered by a selected event.
Find out more about Analytics data layer.
Picture element - multiple images per breakpoint
You can now add multiple pictures per breakpoint, which is useful for adding multiple image formats.The browser will use the first type that it matches, so make sure you specify your image formats in order of preference.
Drupal Block element
You can now add styles to the Drupal Block element, either by selecting a Layout style in the element settings, or adding properties through the styles tab.
Image lazy loading
The Image and Picture elements now have a "Lazy load" option which can be set to make them load only when a user scrolls them into view, deferring loading them until they are required.
WYSIWYG form element now fully supports text formats
The WYSIWYG element and component form field now allows to use all text formats, following Drupal standards.
If you have implemented a custom element using a WYSIWYG field you need to change it's default value to an array as follows:
'mywysiwygfield' => [ 'htmlClass' => 'col-xs-12', 'type' => 'wysiwyg', 'title' => 'Title of my WYSIWYG field.', 'defaultValue' => [ 'text' => '<p>This is some default content.</p>', 'textFormat' => 'cohesion' ] ],
Machine name field on DX8 config entity forms
Previously, the ids for DX8 config entities were generated automatically when saving their forms. There is now a machine name form field on DX8 entity form pages which sets this id.
Note that this will affect the filename of generated
.twig templates making them easier to manage. All existing entities and generated
.twig files will be unaffected.
Support for Chosen model
Previously it was not possible to use the Chosen module with the DX8 layout canvas on the same content entity form. This has now been resolved.
Entity references revisions - fix revisions not being created on non moderated entities
There is now a patch for the Entity reference revisions module on Drupal.org that fixes revisions not being created on non moderated entities. We have added it to our composer.json and you need to enable patching according to this post on Github.
Version 5.5.0 contains the following new elements.
Entity browser element
The entity browser element allows you to browse entities using an entity browser and display an entity in a specific view mode. There is also a component field element that you can attach to this element to give this capability to site editors.
The inline element allows the use of HTML Inline elements such as subscript to be used on the layout canvas.
Find out more about the Inline element.
Menu button element
The menu button element allows you to toggle submenu visibility when you want the sibling menu item to click through to a page. It has the same click animation settings as the Menu link element. Find out more about the menu button element.
The modal element allows content to be displayed in an accessible popup dialog and can be triggered by the following elements, a link, button, container, column or slide. Find out more about the modal element.
Read more element
The read more element allows site builders to show/hide more content on click of a button.
Find out more about the read more element.
Sidebar browser enhancements
Components, component content and helpers now have tooltips
Previously when creating components, component content and helpers with long names, it wasn't possible to see the full name in the sidebar browser.
You can now see this when hovering the item in the sidebar browser, in either list or thumbnail view. If you have uploaded a preview image for the component or helper, this will also be visible on hover. Keyboard focus for the sidebar browser has also been improved, both functionally and visually.
Base styles - Add base styles and edit selector
You can now add new base style and specify its css selector. You can also edit the selector of previous base styles. The reset capability has been removed as you can now completely delete a base style. Find out more about adding base styles.
New system setting to restrict DX8 to a specific theme
A new setting is available within
DX8 -> Configuration -> System settings configuration called "DX8 enabled theme". This restricts DX8 templates and styles to only applying to a specific theme (for use with modules like AMP). For existing sites, this setting will be set to "All themes" and work as normal.
Allow pseudo-fields to be used in templates
You can now add pseudo-fields in content templates using the field element.
Updates to Components
Color picker component field
On the color picker component field, a site builder now has the ability to hide the picker tab and restrict the color picker field to certain colors within the website color palette.
In-context editing improvement
The contextual links used for editing components when on the front-end of your website are now blue in color to distinguish them from other Drupal contextual links. They are also positioned so that they do not interfere with or overlap Drupal's contextual links.
Video and Video URL component field elements
When you specify a Vimeo or YouTube URL for these elements, the control settings for them will be ignored in favour of their native controls.
This is because they still depend on embedded iframes and can result in double controls being displayed.
- Business/Pro Vimeo account - native controls can be disabled and HTML5-compliant custom embed URLs can be used so that element control settings can be used.
- YouTube URL with controls disabled - this setting will be respected, if present in the URL (
For best results a CDN-hosted, HTML5-compliant format (MP4, OGG, WebM, MKV) should be used with these elements.
Use component fields on column width - push - pull and offset
You can now attach a component field to the column width - push - pull and offset field.
Updates to Helpers
Restricted by content entity bundle
Previously, it was not possible to restrict helpers for use on certain content entity bundles. Helpers were available everywhere. The same settings that exist for this on the component form are now available on the helper form so site builders can now restrict helpers for use by content entity bundle.
Updates to the style builder
Drupal image style on background images
You can now apply Drupal image style to background images in the style builder on styles and elements.
The background image styles section has been updated to provide more flexibility. Previously, if the background image dropdown option was selected but no image was specified, it would result in
background-image: none being set in the styles.
- New background image dropdown option:
- Background properties are now available on gradients and can be set without an image/gradient being specified
- Background images now inherit across breakpoints
Note that following upgrading a site and a DX8 rebuild, any breakpoint that had background image selected but no image specified will be converted to the new
Updates to the Layout Canvas
Layout canvas validation improvements
Certain container elements now accept specific child elements. The list of allowed child/parent pairings are as follows.
row-for-columns -> column
google-map -> google-map-marker
accordion-tabs-container -> accordion-tabs-item
slider-container -> slide
menu-list-container -> menu-list-item
list-container -> list-item
form-tab-container -> form-tab-item
In addition a number of elements have been designated "universal" which means they can be placed inside any container, regardless of the above. This include custom elements and all Drupal elements such as Drupal blocks.
Color palette linking/unlinking label and variable
There is now the ability to link and unlink the label from the variable name when the color is not in use.
Find out more about linking/unlinking colors.
Commercial Font License Information
When uploading fonts it is now possible to enter Font License Information which will be displayed as a comment in your generated CSS file.
Find out more about adding font license information.
Context pass condition field not tokenizable
Previously it wasn't possible to tokenize or map a component field to the context pass condition field. There was no tag or warning on this field to indicate this limitation. This is fixed and the field can now be tokenized or mapped to a component form text or select field.
Width of content in style preview sometimes exceeded width of preview on slower connections
Fixed an issue that meant the width of the content inside the style preview was not set to be constrained by the width of the WYSIWYG. This meant right-aligned elements could be displayed off the right edge of the preview and therefore seem to be invisible.
When upgrading to this version of DX8, it is recommended that you upgrade on a development environment, before upgrading a production website. Here are some recommended things to test:
- Check in DX8 > System settings that the DX8 theme is set to "All themes" and that DX8 templates and styles are rendering as expected.
- Check that your components and helpers are still within the correct categories.
- Check where background images have been used within the style builder and any breakpoint that had a background image selected but no image specified should be using the new none option.
It is recommended that you backup and upgrade your website on a development environment before applying to a production website. You can upgrade your version of DX8 by following our upgrade guide.
Have you found a bug?
If you have found a bug, raise a ticket with our Customer Success team on our help center and we will look into your issue.