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.

    Overview

    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

    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.

    Highlights

    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. 

    For example:

    $config_directories = [
    'dx8_sync' => 'sites/default/files/',
    ];

    See: 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:

    drupal/menu_item_extras

    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.

    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.

    Please see http://api.jqueryui.com/category/effects/ for details on each animation effect. Please see http://api.jqueryui.com/easings/ for details on easing functions.

    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.

    Note: The 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. 

    Bug fixes

    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 ~600.
    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.

    Testing Notes

    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. 

    Upgrade

    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.

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket