Warning
You're browsing the documentation for an old version of Webiny. Consider upgrading your project to Webiny 5.35.x.
What you’ll learn
  • how to upgrade Webiny from 5.5.0 to 5.6.0
Before continuing, make sure to take the necessary precautions, listed in the Overview section.
Make sure to check out the 5.6.0 changelog to get familiar with all the changes introduced in this release.

Upgrade Webiny Packages
anchor

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
anchor

Add Navigator Plugin
anchor

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

apps/admin/code/src/plugins/pageBuilder/editorPlugins.ts
// 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
anchor

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 external link 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 external link 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 external link 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
anchor

In your apps/theme/pageBuilder/styles/elements/typography.scss external link 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;
  }
}
(...)