Beta version 5.4.0 release details
Last updated: 25th March 2019
Released: 11th March 2019
Release status: Beta
This version of DX8 is considered as a beta version and should be used on local or development versions of your website. It is not recommended using this version on your production websites until the release is marked as 'Fully tested by Cohesion'.
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.4.0 and to give you an overview of how this may affect your experience with the platform. This release contains new features and some bug fixes.
Known issues with version 5.4.0 of DX8:
- Changing the minimum width of a breakpoint on the responsive grid, results in 'Breakpoint widths should not intersect' validation message appearing even though they do not.
- Using DX8 on specific server configuration can result in a Twig extension error.
The above issues have been resolved in DX8 5.4.1.
New features this release includes:
Configurable component element dropzone width
You can now control a component element dropzone width when the component is dropped onto the Layout canvas. To access these settings edit the Dropzone element in your Component and turn on the "Dropzone width" from the Properties menu.
Component content with content moderation
You can now enable content moderation on component content entities.
Component forms - layout tabs
You can now layout component fields within tabbed sections using "Tab container" and "Tab item" fields.
Like "Accordion tabs", tab items are nested within the tab container and can be renamed by editing them and changing the label. The component fields that you would like in your tab should be nested within the respective tab item.
DX8 breakpoint indicator module
A new module "DX8 breakpoint indicator" is now available within this version of DX8. Once enabled site builders will be able to view a breakpoint indicator in the bottom left of their browser window showing which breakpoint they're displaying the site at. Find out more here.
DX8 sync drush import/export directory is configurable
It's now possible to specify an import/export directory in
settings.php when running dx8 sync from the command line.
$config_directories = [ 'dx8_sync' => 'sites/default/files/', ];
modules/cohesion_sync/README.md for more information.
Entity update tracking for DX8 Sync
With versions prior to 5.4.0, exports from DX8 Sync could only be imported to sites with the same version of DX8 that they were exported from. For example, if you exported a package using DX8 Sync from a site running DX8 version 5.2, you could not import to a site running DX8 5.3.
Now an automatic entity update tracking system is in place, so from DX8 version 5.4.0 onwards, you will be able to export from sites running older versions of DX8 (starting with 5.4.0) into sites running later versions.
Note: It is not possible to export from later versions into previous versions.
Improved Validation on Responsive Grid Settings page
Stricter validation added to ensure that the minimum width value on each breakpoint doesn't intersect with any of the others.
Menu accessibility updates
Menu keyword navigation has been improved significantly and the following keys can be used to navigate:
- Space - toggles child menu visibility. If no child menu, will follow link
- Return/enter - Always follows menu link
- Down/right arrow keys - opens child menu and/or moves onto next menu item
- Up/left arrow keys - closes child menu and/or moves onto previous menu item
- Escape - closes child menu and restores focus to parent menu item.
Menu links that have sub-menus now have aria-haspopup and aria-expanded attributes applied. The latter will toggle between a value of true/false depending on the display state of the child menu.
Menu content tokens can now be used in menu templates.
Menu link entity tokens are now available in the token browser when editing a DX8 menu template. Note that tokens in menu templates only work as part of element settings and will not render out in menu template inline styles.
To add additional fields to menu links and use their tokens, use the Menu Item Extras module, rather than a custom solution as this will provide site builders control over fields and also exposes field tokens to the DX8 token browser automatically.
This module has been added to the recommended section of the
composer.json file as:
The "Menu link item" element has been converted to a container. If this element is empty it will default to printing the link title, otherwise it will render the child elements you place inside it.
Menu link element - jQuery animations
You can now add several jQuery UI animation effects to your menus. This can be changed across different breakpoints. Settings are available on the
Menu link element.
It is recommended that the desired animations are applied prior to creating CSS styles, as these styles could have a negative impact on the jQuery animation.
New permission for custom elements group
A new permission has been added: "DX8 Elements - Custom elements group"
This grants access to the DX8 custom elements group within the sidebar browser to the roles you specify.
Save the whole Layout canvas
There is now an options dropdown menu on the Layout canvas which allows you to save your whole Layout canvas as a helper or component.
SCSS variables - Experimental
You can now create and manage SCSS variables within your website settings. These can be used globally across your website, variables added can be used in the Style builder. Find out more here.
Note: SCSS variables is new functionality within DX8, consider this as an experimental feature.
Sidebar browser enhancements
Components, component content and helpers now do not have icons in the sidebar browser and Layout canvas. You will now see just a color coded strip down the left indicating the category it belongs too.
Style builder - CSS3 filters
You can now add CSS3 filters to your element styles. Multiple filters can be applied at the same time.
filter property is not supported in
IE11 but is supported in
Edge and all other modern browsers.
Support for media entity browsers
A website administrator can now specify the type of image browser to use when selecting images for use within DX8, within the DX8 system settings. You can select a different browser for editing config pages (DX8 entities, component, styles etc) and one for content pages (layout canvas fields on a node for example). This is so you could give site builders access to use the more flexible IMCE browser and content editors access to use the entity browsers for a simpler user experience.
The available options depend on the modules you have installed. DX8 requires the IMCE file manager, so that will always be an option. You can also install the entity browser and have an image media browser available (for example, the browsers that come with the Drupal Lighting distribution are compatible: https://www.drupal.org/project/lightning).
Important if you're upgrading DX8: - Because IMCE is already installed on your existing site, an update will run as part of drush updb to automatically set IMCE as your file browser.
Tokenize the block element in Components
It is now possible to have an existing or custom select of Drupal blocks within the Component builder.
Tokenizing Element Title field
Now when you enter a Token in the Title field of an element, the title field will not be disabled.
Tidy Form button replaces Expand/Collapse all button
A new button added to the Style Builder and Styles tab on elements, custom styles, and base styles allows for easy tidying of your form. A site builder can now click this button and remove all empty fields, breakpoint rows and sections from their styles form.
The expand/collapse all accordions button has been replaced by the new Tidy button on the Styles tab.
Update to Font libraries Interface
In the website settings, the font libraries interface has been simplified to allow easier uploading of Web / Hosted font libraries.
Update to Icon libraries Interface
In the website settings, the icon libraries interface has been simplified to allow for easier uploading and importing of Icon fonts.
Video element - Play on hover
You can now set videos to play on hover and pause when hover focus is changed. A new class of
coh-video-hover is applied to the
coh-video element when hover is active, should you want to apply hover styles to the video.
Video & Video background element previews
You can now preview a video when entering the URL into the Video and Video background elements.
Video URL Component field
Video URL Component field allows users to preview the Video on a Component.
Here's what bug fixes this release includes:
Accordion tabs match heights
Fixed a bug where applying match heights to Accordion tabs wasn't applying to the content or tabs when enabled.
Selecting transparency as color can cause an error
Fixed a bug where selecting transparency as color on an element caused an error when saving multiple times.
Sidebar editor - modal/backdrop z-index override
In the latest version of Drupal (8.7.x-dev) the
z-index of native jQuery UI modals/backdrops has been reduced significantly, from ~
10000 to ~
To ensure no obstruction, the z-index has been updated to a
z-index of ~
500 on the DX8 sidebar editor modal/backdrop.
Style helpers entities not calculating dependencies on export
Previously, when exporting style helper entities via the DX8 Sync module, dependencies were not included. This has now been fixed so colors, styles, etc. are exported with style helper entities.
Tokenizing icons within a component field not rendering
Fixed a bug where icons were not rendering if used as component field in style tab.
Note this requires a cache clear.
Using contextual filters on a view, not using master template selected
Fixed a bug when using a view item in a view template and updating the entity type, the bundle and view mode select lists are not updated based on the selected entity type.
View item element selects not updating
Using a view item in a view template and updating the entity type, the bundle and view mode select lists are not updated based on the selected entity type.
When upgrading to this version of DX8, it is recommended that you upgrade on a development environment, before upgrading a production website.
These are some recommended things to test:
- Check your fonts and icons are rendering on the front end as expected, and that within the website settings all your fonts and icon library settings are shown in the new form as you would expect.
- If using tokenized icons on components, check that they render as expected.
- If using Drupal 8.7-dev, when on a layout canvas; open the sidebar browser and then open the token browser. Check that the token browser appears above the sidebar browser and can be interacted with.
- Check your DX8 website settings have IMCE selected as your image browser if upgrading from an earlier version.
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.