DX8 sync package manager
The DX8 package sync system used by site builders to export DX8 configuration from one website to another has been significantly updated to allow for much more granular control and management.
In this version, DX8 packages are now configuration entities. You can create, save and manage multiple packages on a website and control their contents down to an individual DX8 configuration entity level. As with the V 5.4.0 version, package dependencies are automatically calculated but you now have greater control over the final package contents.
This work is a precursor for including Drupal configuration entities (Content types, vocabularies etc) within packages coming in the V5.6.0 release.
DX8 sync package install on module or theme install
This will allow developers to create a /config/dx8_packages.yml file that references local or remote package.yml files that are imported on install. The result is that developers can create a module for a "feature" that deploys DX8 packages on install.
The feature also includes a command line option that takes a local filename or remote URL and imports the package (extend the existing sync:import command).
Support for ‘large’ DX8 sync package import
The default PHP configuration is max_upload=2MB. Sometimes, DX8 sync packages can exceed this size if they include many files (fonts, default images etc) so the import isn’t possible without server configuration changes.
In this version, the DX8 sync import breaks the package into smaller files that allow packages that exceed 2MB to be imported.
DX8 package sync lock
You can now lock specific DX8 config entities from being overwritten when importing DX8 sync packages. This allows website running from a DX8 created design system to have local website modifications which are not overwritten when a design system update is rolled out.
Component and template builder live visual preview
When building Component layouts and Template layouts the site builder is able to see a live preview of what they are building. This can be opened in-place within the DX8 layout canvas or in a new browser window for a multi-screen design and development experience. The result is a faster, more seamless design and build experience for site builders.
Manageable component categories
Component categories are now manageable. You can add new categories, re-order how they are displayed to editors within the Sidebar browser and even re-order the components within each category. The result is a much more intuitive editing experience for content authors.
In addition, the categories use Drupal permissions to allow differing groups of components to be made available to separate roles.
Components within components (Atomic design)
Within the DX8 component builder you can now nest components and follow an atomic design approach.
When a component is nested within the layout of a parent component, the nested component form can be mapped to fields within the parent component form. The result is the capability to follow an atomic design approach to component development when desirable.
Google analytics / tag manager ‘Data layer’ support
You can now communicate with Google Tag Manager via the ‘data layer’. You can set DX8 elements to trigger variables to be written to the data layer when a user interacts with or views them on a page. The result is more modern compatibility with analytical platforms.
Custom base styles
You can now add additional base styles for any HTML selector using the Style builder. For example, you could create a style for all <input> elements. The result is more global control over your base HTML elements.
Support for WebP images
The picture element now supports multiple image sources by breakpoint. This is required to support new image formats like WebP that require a fallback image when the browser doesn’t support WebP.
Note: You may need to install a WebP module to enable WebP support on your instance of Drupal.
Drupal image style support for background images
DX8 components and templates can now apply Drupal image styles to background images used within styles. The result is more control over images rendered within styles.
Lazy loading images
There’s now an option to lazy load any images on an element so that they are only downloaded when required. The result is faster websites and less page weight.
DX8 helpers availability by bundle
DX8 helpers are currently available to all content entity bundles. In this version, helpers can be restricted by bundle in the same way that DX8 components can be. The result is that site builders and editors (with permission) will be able to create helpers that are only available to specific bundles. For example, landing page helpers could be made available to only a landing page content type.
DX8 UI accessibility improvements
Many improvements have been implemented to the DX8 site builder interfaces to make them meet higher levels of accessibility.
New ‘inline element’
A new element has been introduced to allow site builders to add any HTML element to the layout canvas. This is sometimes required for adding elements inline with other DX8 elements. For example, adding a Superscript element after a Heading element.
New ‘Read more’ element
A new element has been introduced to allow site builders to easily create content that has a ‘Read more’ button that reveals more content. Site builders can control what is shown before and after the button is clicked, the animation between states and the button labels and styles.
Component color picker field can be restricted
The color picker field available to components can now be restricted to only show specific colors. The result is that a component can now include the color picker field and only present website editors with color options that are appropriate to the component. This provides additional governance control to site builders.
Drupal text format support
The component WYSIWYG form field now supports Drupal text formats. These can be set on a field by field basis for improved control and governance of text content.
AMP module compatibility
DX8 styles and templates can now be restricted by theme. This allows specific themes to use their own stylesheet and templates without being affected by DX8 generated styles and templates. This is required by the AMP module which uses its own theme for AMP enabled pages.