Upgrade from 5.5.0 to 5.6.0

Upgrade Webiny Packages

The first step is to upgrade all @webiny/* packages, which can be done by running the following command in the root of your project:

# Execute in your project root.
yarn up "@webiny/*@5.6.0"

Once the upgrade has finished, running the yarn webiny --version command in your terminal should return 5.6.0.

Upgrade Page Builder Plugins

Add Navigator Plugin

In your apps/admin/code/src/plugins/pageBuilder/editorPlugins.ts file, add the navigator toolbar plugin after addElement plugin as shown below:

// Toolbarimport addElement from "@webiny/app-page-builder/editor/plugins/toolbar/addElement";import navigator from "@webiny/app-page-builder/editor/plugins/toolbar/navigator";(...)
export default [(...)// ToolbaraddElement, navigator(),(...)];

Add Visibility Element Settings Plugin

To start using the Visibility element Settings, you need to make the following changes:

1. In your apps/admin/code/src/plugins/pageBuilder/editorPlugins.ts file, add the visibility element settings editor plugin as shown below:

   // Element settingsimport visibility from "@webiny/app-page-builder/editor/plugins/elementSettings/visibility";(...)
   export default [(...)// Element settings visibility,(...)];

2. In your apps/admin/code/src/plugins/pageBuilder/renderPlugins.ts file, add the visibility element settings render plugin as shown below:

   // Element settingsimport visibility from "@webiny/app-page-builder/render/plugins/elementSettings/visibility";(...)
   export default [(...)// Element settings visibility,(...)];

3. In your apps/website/code/src/plugins/pageBuilder.ts file, add the visibility element settings render plugin as shown below:

   /*** Page element settings plugins.*/import visibility from "@webiny/app-page-builder/render/plugins/elementSettings/visibility";(...)
   export default [(...)// Page element settings visibility,(...)];

Upgrade Page Builder Theme Typography Styles

In your apps/theme/pageBuilder/styles/elements/typography.scss file, add the following code:

(...)
// Formatting styles for text
.webiny-pb-page-element-text {
  & b {
    font-weight: bold;
  }

  & u {
    text-decoration: underline;
  }

  & i {
    font-style: italic;
  }
}
(...)