v4.2.22 release

Release date: August 6, 2021


Version 4.2.22 had 34 bug fixes, six new features, and 18 improvements.

Significant improvements

  • Administrators can now associate editors with more than one role, a useful feature when an editor works on multiple sites with varying permissions.

    • Editors assigned multiple roles have the permissions of all roles combined.
    • Each role’s dashboard appears under its own tab, and the dashboard for each role appears under the corresponding tab. For example, an editor assigned to the Proofreader and Copy Editor roles sees the dashboard for each role in its own tab.
  • Editors can mark content types as favorites in the Quick Start widget. Favorite content types appear to the left of all other content types, making them easier to select.
  • Prior to this release, typing the @ symbol in the Conversation widget unconditionally opened a list of editors matching the subsequent characters—even when the symbol was part of an email address. Starting with this release, the list of matching editors appears only when the @ symbol is preceded by a space or when it is the first character on a new line.
  • Prior to this release, selection fields listed all selected items. Starting with this release, selection fields list only the first selected item followed by the number of the other selected items.
  • Styleguide—

    • Building a theme no longer depends on on gulp.js.
    • The Styleguide UI appears using the same theme as Brightspot.
    • Developers can apply template and theme options through the UI.
  • Administrators can configure federated search credentials at the site level. This feature is useful when a publisher operates multiple sites, each with different accounts with the service provider.
  • Google analytics are now available at the page level.
  • GraphQL—

    • Developers can now back a DataCache with a simpler cache implementation instead of backing it with a LoadingCache.
    • The GraphQL Explorer now hits the actual configured endpoint.
    • Developers can now specify headers in the GraphQL Explorer.

Significant defects addressed

  • GraphQL—

    • The class ContentDeliveryGraphQLSchemaLoader was not handling unique name resolution correctly. This defect has been addressed.
    • In the CMA, records with owners can now reference global content.
  • Site copy operations failed when rich-text elements were included within rich-text fields, and the rich-text elements did not have a toBody implementation. This defect has been addressed.
  • When no transcoding settings were specified, clipping videos using AWS Elemental as a provider caused an infinite refresh or error. This defect has been addressed.
  • In some scenarios, de-duplication of lists resulted in some items not appearing at all in the list. This defect has been addressed.
  • In some scenarios, some widgets did not appear in the content edit page for non-publishable content types when those widgets should have appeared. This defect has been addressed.

Breaking changes

Because of the new ability to assign multiple roles to a single user, the field ToolUser.roles is now indexed. All instances of ToolUser must be resaved to apply the index. Failure to apply the index may cause widgets such as Recent Activity to display incorrect data.


The theme Frost has been upgraded to version 2.0, and it no longer requires gulp to build. To take advantage of this change, use the following steps to upgrade your development environment.

  1. In the root directory, delete the file /.npmrc.
  2. Open the file /packages.json, and under devDependencies make the following changes:

    • Remove the dependency "brightspot-styleguide": "4.2.x".
    • Add the dependency "@brightspot/styleguide": "4.2.21-rc.1".
    • Remove the dependency "server:styleguide": "gulp styleguide --webpack-config webpack.dev.js".
    • Add the dependency "server:styleguide": "webpack-dev-server --config webpack.dev.js".

      {
      	"devDependencies": {
      		/* Other dependencies */
      		"@brightspot/styleguide": "4.2.28-rc.1",
      		"webpack-dev-server": "3.11.2"
      		/* Other dependencies */
      	}
      }

  3. Continuing in /packages.json, under scripts add the following lines:

    • "build": "prettier-eslint --list-different *.js \"styleguide/**/*.js\" && webpack --config webpack.prod.js && node node_modules/@brightspot/styleguide/build/bundle -b build/styleguide -o build/theme.zip"
    • "server:styleguide": "webpack-dev-server --config webpack.dev.js"

      {
      	"scripts": {
          	"build": "prettier-eslint --list-different *.js \"styleguide/**/*.js\" && webpack --config webpack.prod.js && node node_modules/@brightspot/styleguide/build/bundle -b build/styleguide -o build/theme.zip",
          	"server:styleguide": "webpack serve --config webpack.dev.js"
          	/* Other script commands */
        }
      }
      • Builds the theme
      • Starts the server

    • Note that bundle requires -b and -o options. -b specifies where the webpack output directory is, so it is set to build/styleguide to match the configuration in step 2. But if you need to change the webpack output directory for any reason, you should also change it here. -o specifies the theme bundle output file, and build/theme.zip matches the brightspot-gradle-plugins configuration.
  4. Fix ESLint and Standard JS dependencies by running the following commands:

    yarn add --dev --exact \
    eslint@3.10.2 \
    eslint-config-standard@6.2.1 \
    eslint-plugin-promise@3.4.2 \
    eslint-plugin-standard@2.0.1

  5. Update the webpack configuration. Open the file /webpack.dev.js and make the following changes.

    • Remove the line const Styleguide = require('brightspot-styleguide').
    • Replace that line with const styleguide = require('@brightspot/styleguide').
    • Remove the line Styleguide.webpackDevServerConfig(webpack, {.
    • Replace that line with styleguide.webpack('./styleguide', webpack, {.
  6. Continue to update the webpack configuration. Open the file /webpack.common.js, and add path: path.resolve(__dirname, './build/styleguide') to module.exports.output, as in the following example.

    module.exports = {
      /* Other objects */
      output: {
        path: path.resolve(__dirname, './build/styleguide'),
        filename: '[name]',
        publicPath: '/'
      },
      /* Other objects */
    • Configuring webpack output directory.

The new Styleguide breaks the theme compatibility checker, because it does far less processing on your example files; you now need to set both _template and _styledTemplate if you want to display one of the style variations. To fix this, you can run:

npx node ./node_modules/@brightspot/styleguide/build/upgrade

Lastly, the new Styleguide renders the page on-demand in the browser, so you may incur some run-time errors with certain helpers. To gracefully trap such errors, open the file /styleguide/_helpers.js, and add the else if condition as shown lines 3–4 in the following code snippet.

if (typeof Buffer !== 'undefined') {
  return 'data:image/svg+xml;base64,' + Buffer.from(svg).toString('base64')
} else if (typeof btoa !== 'undefined') {
  return 'data:image/svg+xml;base64,' + btoa(svg)
  } else {
    return (
      'data:image/svg+xml;base64,' +
      java.util.Base64.encoder.encodeToString(
        svg.toString().getBytes(java.nio.charset.StandardCharsets.UTF_8)
      )
    )
  }

Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Modules
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Shopify
Apple News