Version:
Cohesiondx.com

    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.

    Overview

    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.

    Known issues

    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.

    Highlights

    New features this release includes:

    Canvas preview

    You can now preview components, helpers, content and master templates as you create them on the layout canvas.

    Features include:

    • 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.

    DX8 Sync

    Sync enhancements

    • 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 upload_max_filesize limit.

    Sync lock

    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.

    Sync packages

    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.

      Element enhancements

      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.

      Module compatibility

      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.

      New elements

      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.

      To use the entity browser element you will need to install the Entity browser module. Find out more about the entity browser element.

      Inline element

      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.

      Modal 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.

      Styles

      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.

      System settings

      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.

      Templates

      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.

      Exceptions:

      • 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 (controls=0).

      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.

      Background images/gradients

      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.

      Improvements:

      • New background image dropdown option: None
      • 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 None option.

      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.

      Website settings

      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.

      Bugfixes

      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.

      Testing notes

      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.

      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