close

Filter

loading table of contents...

Release Notes / Version 10.2107

Table Of Contents

Introduced Theme Configuration

A theme is now configured via a theme.config.json (or theme.config.json5 ) instead of having a hard coded configuration in the build process.

This mechanism allows more flexibility, provides new features and makes the *-theme.xml obsolete as all configuration is generated from it.

Upgrade Steps

The default theme configuration (which is also generated by the theme-creator ) for a theme called my-theme looks as follows:

{
  "name": "my-theme",

  "styles": [
    {
      "type": "webpack",
      "src": "src/sass/my-theme.scss"
    }
  ],
  "scripts": [
    {
      "type": "webpack",
      "src": "src/js/my-theme.js"
    }
  ],
  "l10n": {
    "bundleNames": [
      "MyTheme",
      "Bricks"
    ]
  }
}

In case you did not make any modifications to your *-theme.xml after it had been created by the theme-creator you can just copy the aforementioned code to a theme.config.json in your theme folder, adjust the theme name and remove the *-theme.xml . Otherwise please check the following steps.

Adding a description and a thumbnail

In case you had a description and/or a thumbnail picture, you need to move it to the theme configuration. Both description and thumbnail are top-level properties. A typical usage could be:

{
  "name": "my-theme",
  "description": "This is my theme!",
  "thumbnail": "my-theme.jpg",
  ...
}

Please note that the path to the thumbnail picture is now relative to the theme's root directory rather than the theme's target directory. We highly suggest not placing the thumbnail picture inside the src/img folder of the theme anymore as long as you don't want the thumbnail to be available in the actual rendering of the website.

External links

Defining external links can be achieved via a script or style of type externalLink .

{
  "name": "my-theme",
  ...
  "styles": [
    {
      "type": "externalLink",
      "src": "http://your.url/css/style.css"
    }
  ],
  "scripts": [
    {
      "type": "externalLink",
      "src": "http://your.url/js/script.js"
    }
  ]
}

Scripts and Styles not to be bundled with Webpack

If you just want to use an script or style resource that is not to be bundled via Webpack there is an additional type called "copy" which requires a src and target property.

{
  "name": "my-theme",
  ...
  "styles": [
    {
      "type": "copy",
      "src": "src/css/my-style.css",
      "target": "css/my-style.css"
    }
  ],
  "scripts": [
    {
      "type": "copy",
      "src": "src/vendor/some-script.js",
      "target": "js/some-script.js"
    }
  ]
}

Custom settings for scripts and styles

Scripts and styles of all types can have the same custom settings as in the theme-descriptor. These settings can be applied separately for every array item inside the scripts and styles array. This could look as follows:

{
  "name": "my-theme",
  ...
  "styles": [
    {
      "type": "webpack",
      "src": "src/sass/my-theme.scss",
      "ieExpression": "gt ie10"
    }
  ],
  "scripts": [
    {
      "type": "webpack",
      "src": "src/js/my-theme.js",
      "inHead": true
    }
  ]
}

Please consult the Frontend Developer Manual for a full list of custom settings.

Resource Bundles

If your theme provides additional resource bundles, please add it to the bundleName property of the l10n top level property.

{
  "name": "my-theme",
  ...
  "l10n": {
    "bundleNames": [
      "MyTheme",
      "AdditionalBundle",
      "Bricks"
    ]
  }
}

Please note that the bundle names do neither contain the language (e.g. _en ) nor the extension of the properties file ( .properties ). If you need to change the master language you can set the masterLanguage property of the l10n top level property.

New Features

This is a small overview about the new features of the Frontend Workspace. Please consult the Frontend Developer Manual for more detailed information.

Customizable Source and Target Layouts

You are no longer required to place your main sass / javascript files under src/sass/themeName.scss / src/js/themeName.js . Feel free to adjust the src property of the scripts and styles to whatever file structure you prefer.

Generating Additional Webpack Bundles

Additional Webpack Bundles can now be generated without adjusting the webpack.config.js . Just put another script or style of type webpack into the list of scripts and styles. However there is one restriction for styles because of technical limitations: All CSS/SCSS files need to be put into the same folder. The reason behind this is that our used Webpack plugins and loaders assume that all generated CSS files are placed under a common public path.

New Setting "defer" for Scripts

You can now defer the loading of scripts ( https://www.w3schools.com/tags/att_script_defer.asp ) using the custom setting defer in your theme configuration. In case you have custom templates for rendering CMJavaScript as script tags make sure you take the new htmlAttributes content property into account.

(CMS-13127)

Search Results

Table Of Contents