Upgrade Guide#

This upgrade guide lists all breaking changes in Volto and explains the steps that are necessary to upgrade to the lastest version.

Note

There are times that updating the Volto boilerplate (the one generated by @plone/create-volto-app) is enough to fulfill all the changes. If you haven't heavilly modified it, moving things around and copying over your dependencies might do when dealing with upgrades. We keep the generator up to date and in sync with current Volto release.

Upgrading to Volto 10.x.x#

Remove the Razzle plugins patch#

Warning

If you haven't upgraded your project to Volto 9.x.x and followed the upgrade guide instructions, you are set and you do not need to do anything.

In order to have support for Razzle plugins as local modules we introduced a patch in 9.0.0 that addressed the lack of support in Razzle 3.3.7 . Unfortunately, not only that introduced more headaches than benefits, but inadvertently we introduced a bug on the patch. We've found a workaround to still support plugins as local modules without patching Razzle, however that forces you to delete the patch introduced in your projects if you followed the 9.x.x upgrade guide steps.

getContent changes#

The content is no longer fetched from Volto with the fullobjects flag in the request. If your code relied on children being fully serialized with their parent, you should refactor it. Alternatively, you can set settings.bbb_getContentFetchesFullobjects to true to get the old behavior.

`@testing-library/react` upgrade notice#

@testing-library/react has been upgraded too, and it comes with some internal API changes too, so if you make heavy use of it in your tests, you could need to update your testing code to adapt them. Please refer to the @testing-library/react documentation for further information if needed.

Upgrading to Volto 9.x.x#

Internal upgrade to use Razzle 3.3.7#

Note

If you haven't customized your razzle.config.js in your project, or have any custom plugin in place, you don't have to do anything.

Razzle is the isometric build system for both the server and the client parts on the top of which Volto is built. Recently, it has been under heavy development and some new exciting features have been added to it. The Razzle configuration is now more flexible and extensible than ever.

This change might be breaking for you if you customized the razzle.config.js heavily in your projects. Since the new version adds a new way to extend Razzle configuration, you should adapt your extensions to the new way of doing it. See the documentation for more information: https://razzlejs.org/docs/customization#extending-webpack

It also unifies the way the things are extended in Razzle plugins as well, so if you are using any official or third party Razzle plugins you should upgrade them to the last version. If you have developed your own Razzle plugin, you should adapt its signature as well. See the documentation for more information: https://razzlejs.org/docs/customization#plugins

Razzle 3.3 also has some new experimental features, that will be default in the upcoming Razzle 4, such as the new React Fast Refresh feature, which fixes the annoying breaking of the router after any live refresh.

See the documentation of Razzle for more information: https://razzlejs.org/

Changes involved#

We need to patch an internal Razzle utility in order to allow the use of non-released Razzle plugins. This feature will be in Razzle 4, unfortunatelly at this point the development the Razzle 3 branch is freezed already so we need to amend the original using the patch. The patch will be obsolete and no longer required once we move to Razzle 4 (see https://github.com/jaredpalmer/razzle/pull/1467).

Note

Since Volto 9.2.0 the next step IS NOT required anymore.

Copy (and overwrite) the patches folder into your local project https://github.com/plone/volto/tree/master/patches or, if you want to be more accurate, just copy patches/razzle-plugins.patch file and overwrite patches/patchit.sh file.

Babel config housekeeping#

Historically, Volto was using "stage-0" TC-39 proposals. The configuration was starting showing its age, since Babel 7 dedided to stop maintaining the presets for stages, we moved to use an static configuration instead of a managed one. That lead to a "living on the edge" situation since we supported proposals that they didn't make the cut. For more information about the TC39 approval process read (https://tc39.es/process-document/)

We decided to put a bit of order to caos and declare that Volto will support only stage-4 approved proposals. They are supported by @babel/preset-env out of the box and provide a good sensible default baseline for Volto.

Proposal deprecations:

@babel/plugin-proposal-decorators
@babel/plugin-proposal-function-bind
@babel/plugin-proposal-do-expressions
@babel/plugin-proposal-logical-assignment-operators
@babel/plugin-proposal-pipeline-operator
@babel/plugin-proposal-function-sent

In fact, Volto core only used the first one (decorators) and we did the move to not use them long time ago. However, if you were using some of the others, your code will stop compiling. Migrate your code or if you want to use the proposal anyways, you'll need to provide the configuration to your own project (babel.config.js) in your project root folder.

You might still be using old-style connecting your components to the Redux store using @connect decorator, in that case, take a look at any connected component in Volto to take a glimpse on how to migrate the code.

If you were not using any of the deprecated proposals (the most common use case), then you are good to go and you don't have to do anything.

Hoisting problems on some setups#

Some people were experimenting weird hoisting issues when installing dependencies. This was caused by Babel deprecated proposals packages and its peer dependencies that sometimes conflicted with other installed packages.

Volto's new Babel configuration uses the configuration provided by babel-razzle-preset package (Razzle dependency) and delegates the dependencies management to it, except a few Babel plugins that Volto still needs to work.

In order for your projects not have any problem with the new configuration and comply with the new model, you need to remove any local dependency for @babel/core and let Volto handle them.

diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -183,7 +183,6 @@
     "node": "^10 || ^12 "
   },
   "dependencies": {
-    "@babel/core": "7.11.1",
     "@plone/volto": "8.9.2",
     "mrs-developer": "1.2.0",

Recomended `browserslist` in `package.json`#

Not a breaking change, but you might want to narrow the targets your Votlo project is targeting to. This might improve your build times, as well as your bundle size. This is the recomended browserlist you should include in your local package.json.

  "browserslist": [
    ">1%",
    "last 4 versions",
    "Firefox ESR",
    "not ie 11",
    "not dead"
  ],

Note

Please notice that it does not target dead and deprecated browsers by its vendors.

New webpack resolver plugin#

A new webpack resolver plugin has been integrated with Volto, it reroutes 'local' resolve requests (for example import Something from './Something') to 'absolute' resolve requests (like import Something from '@plone/myaddon/Something). This allows the shadow-based customization mechanisms to work consistently with addons and Volto.

This is not a breaking change and it shouldn't affect any existing code, but by its very nature, a resolver plugin has the potential to introduce unexpected behavior. Just be aware of its existence and take it into consideration if you notice anything strange.

Content Types icons#

Helper method getIcon from Url has been removed in favor of getContentIcon from Content which is now configurable.

See contentIcons docs.

Upgrading to Volto 8.x.x#

Upgrade package.json testing configuration#

The dummy-addons-loader.js file has been renamed to jest-addons-loader.js, to be more in line with the rest of the existing files. You should add the following value to the moduleNameMapper property of the jest key in your project's package.json:

"load-volto-addons": "<rootDir>/node_modules/@plone/volto/jest-addons-loader.js",

Upgrading to Volto 7.x.x#

A misspelled file has been renamed. If you import strickthrough.svg in your project, you'll now find that file at @plone/volto/icons/strikethrough.svg.

New webpack resolve alias for Volto themes#

As a "nice to have", a new resolve alias is provided that points to Volto's theme folder. So, in your project's theme.config file, you can replace:

@themesFolder: '../../node_modules/@plone/volto/theme/themes';
@siteFolder: "../../theme";
@fontPath : "../../@{theme}/assets/fonts";

with:

@themesFolder: '~volto-themes';
@siteFolder: '[email protected]/../theme';
@fontPath: "~volto-themes/@{theme}/assets/fonts";

You might consider moving your theme files to a subfolder called site, to prepare for the arrival of addons theming and their overrides. In that case, you would set your @siteFolder to:

@siteFolder: '[email protected]/../theme/site';

Upgrading to Volto 6.x.x#

First, update the package.json of your Volto project to Volto 6.x.x.

  "dependencies": {
    "@plone/volto": "6.0.0",
    ...
  }

Note

This release includes a number of changes to the internal dependencies. If you have problems building your project, might be that you need to remove your node_modules and, ultimately, remove also your yarn.lock file. Then run again yarn for rebuilding dependencies.

Upgrade to Node 12#

We have now dependencies that requires node >=10.19.0. Although Node 10 has still LTS "maintenance" treatment (see https://nodejs.org/en/about/releases/) the recommended path is that you use from now on node 12 which is LTS since last October.

The underlying Razzle package has been upgraded, and although that does not suppose any change in Volto itself, a lot of development dependencies have been upgraded and they should be updated in your local projects as well. Might be that the builds continue working if you don't update them, but it's better for you to do so for a better development experience.

Upgrade local dependencies versions#

You need to update devDependencies in package.json in your local environment:

  "devDependencies": {
    "eslint-plugin-prettier": "3.1.3",
    "prettier": "2.0.5",
    "stylelint-config-idiomatic-order": "8.1.0",
    "stylelint-config-prettier": "8.0.1",
    "stylelint-prettier": "1.1.2",
  }

and remove entirely the resolutions key:

  "resolutions": {
    "@plone/volto/razzle/webpack-dev-server": "3.2.0"
  }

Update `package.json` config#

Add this key to the jest.moduleNameMapper:

"jest":
  "moduleNameMapper": {
    "@plone/volto/babel": "<rootDir>/node_modules/@plone/volto/babel",
    ...
  }

because new Jest is a bit more picky when importing externals.

Prettier#

Prettier has been updated, introducing some breaking formatting changes. It's recommended that you upgrade your local version of prettier and reformat your code with it using:

yarn prettier:fix

Stylelint#

stylelint has been upgraded too, and it introduces some changes in the declaration of the styles order. It's recommended that you upgrade your local version of prettier and reformat your code with it using:

yarn stylelint:fix

CSS modules are not supported anymore#

Razzle does not support them anymore, so neither do we. If you need them, you could add a Webpack config in your local razzle.config.js.

Update your eslint config#

Introduced in the Volto 5 series, it's recommended that you update your local ESLint config. In the past, we used .eslintrc file to do so. In order to support automatically Volto addons, you should remove it and use a JS based config one .eslintrc.js with this contents:

const path = require('path');
const projectRootPath = path.resolve('.');
const packageJson = require(path.join(projectRootPath, 'package.json'));

// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
const addonsAliases = [];
if (packageJson.addons) {
  const addons = packageJson.addons;
  addons.forEach(addon => {
    const addonPath = `${addon}/src`;
    addonsAliases.push([addon, addonPath]);
  });
}

module.exports = {
  extends: './node_modules/@plone/volto/.eslintrc',
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@plone/volto', '@plone/volto/src'],
          ...addonsAliases,
          ['@package', './src'],
        ],
        extensions: ['.js', '.jsx', '.json'],
      },
      'babel-plugin-root-import': {
        rootPathSuffix: 'src',
      },
    },
  },
};

New wrappers in block editor#

We have improved the overall UX of the block drag and drop feature by using the library react-beautiful-dnd in the block editor. It introduces new wrappers (belonging to the lib machinery) in the structure. The original structure and class names are still in there (as children of these wrappers) to maintain maximum backwards compatibility. Those might be cleaned up in next major versions, so if for some reason you have customized the styling of your blocks in edit mode relying in the old structure, you might want to review and adapt them.

Update `config.js`#

Note

This is required since Volto version 6.1.0 1541

Add these to the config.js of your project:

export const addonRoutes = [];

export const addonReducers = {};

Upgrading to Volto 5.x.x#

First, update the package.json of your Volto project to Volto 5.x.x.

  "dependencies": {
    "@plone/volto": "5.0.0",
    ...
  }

New lazy loading boilerplate#

Volto is now capable of splitting and lazy load components. This allows for better performance and reduced bundle sizes, the client also has to parse and load less code, improving the user experience, specially on mobile devices.

The boilerplate includes changes in the structural foundation of Volto itself. So if you have updated in your projects any of these components:

src/helpers/Html/Html.jsx
src/components/theme/App/App.jsx
src/server.jsx
src/client.jsx

you should adapt them to the newests changes in Volto source code. You can do that by diffing the new ones with yours.

Testing lazy load components#

The whole process has been designed to have a minimal impact in existing projects. However, only a thing should be changed in your components tests. Specially if your components are composed of original Volto components (not SemanticUI ones, though).

You should adapt them by mocking the Volto component or resolve (await) for them in an async construction before the test is fired. See this Codepen example:

https://codesandbox.io/s/loadable-async-tests-l2bx9

import React from "react";
import { render } from "@testing-library/react";
import App from "./App";
import { Component1, Component2 } from "./components";

describe("CustomComponent", () => {
  it("rendered lazily", async () => {
    const { container, getByText } = render(<App />);

    await Component1;
    await Component2;

    expect(container.firstChild).toMatchSnapshot();
    expect(getByText("Component1"));
    expect(getByText("Component2"));
  });

This is also another pattern used in Volto core for testing, you can transform your test in async aware like this:

--- a/src/components/manage/Preferences/PersonalPreferences.test.jsx
+++ b/src/components/manage/Preferences/PersonalPreferences.test.jsx
@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
+import { wait } from '@testing-library/react';

 import PersonalPreferences from './PersonalPreferences';

@@ -13,7 +14,7 @@ jest.mock('react-portal', () => ({
 }));

 describe('PersonalPreferences', () => {
-  it('renders a personal preferences component', () => {
+  it('renders a personal preferences component', async () => {
     const store = mockStore({
       intl: {
         locale: 'en',
@@ -36,7 +37,8 @@ describe('PersonalPreferences', () => {
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await wait(() => {
+      expect(component.toJSON()).toMatchSnapshot();
+    });
   });
 });

Helmet title now it's centralized in `View.jsx`#

All the calls for update the title in the document performed by Helmet are now centralized in the View.jsx components. It's recommended to remove all the Helmet calls for updating the title from your components specially if you are using some of the SEO addons for Volto, since not doing that could interfere with them.

Upgrading to Volto 4.x.x#

First, update your package.json to Volto 4.x.x.

  "dependencies": {
    "@plone/volto": "4.0.0",
    ...
  }

New initial blocks per content type setting in Alpha 37#

Not breaking change, but now there's a new setting in Blocks, initialBlocks where you can define a the initial blocks for all content types. You can override the default ('title' and a 'text' block) and provide your own by modifying the configuration object:

const initialBlocks = {
    Document: ['leadimage', 'title', 'text', 'listing' ]
};

provide an empty object if you don't want to define any additional initial blocks and keep the default.

const initialBlocks = {};

ImageSidebar moved to Image Block directory in Alpha 29#

For better resource grouping, the ImageSidebar component has been moved to the Image block component directory: components/manage/Blocks/Image

Copy `yarn.lock` from volto-starter-kit in Alpha 17#

Due to changes in the dependency tree, it's required to use an specific yarn.lock file by deleting it and copy the one here: https://github.com/plone/volto-starter-kit/blob/master/yarn.lock before upgrading to Volto alpha 17.

Forked Helmet into Volto core#

Due to the inactivity of the Helmet project, we decided to fork it to the core. It's part of the Volto helpers now. You have to update your imports accordingly. Please notice that now it's a named import:

--- a/src/components/Views/ReportView.jsx
+++ b/src/components/Views/ReportView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
+import { Helmet } from '@plone/volto/helpers';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { format, parse } from 'date-fns';
 import { filter, map } from 'lodash';

Alpha 16 is a brownbag release#

There was a problem with the projects using Volto eslint config when upgrading to latest versions related to typescript, we will take of that in the near future. So skip this version.

Stylelint and prettier config in Alpha 14#

In your project's boilerplate, you need to update the stylelint and prettier configuration accordingly to the changes made in Alpha 14 in package.json like this:

diff --git a/package.json b/package.json
index 7c8194c..5c63469 100644
--- a/package.json
+++ b/package.json
@@ -46,26 +46,51 @@
   },
   "prettier": {
     "trailingComma": "all",
-    "singleQuote": true
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.overrides",
+        "options": {
+          "parser": "less"
+        }
+      }
+    ]
   },
   "stylelint": {
     "extends": [
-      "stylelint-config-standard",
-      "stylelint-config-idiomatic-order",
-      "./node_modules/prettier-stylelint/config.js"
-    ]
+      "stylelint-config-idiomatic-order"
+    ],
+    "plugins": [
+      "stylelint-prettier"
+    ],
+    "rules": {
+      "prettier/prettier": true,
+      "rule-empty-line-before": [
+        "always-multi-line",
+        {
+          "except": [
+            "first-nested"
+          ],
+          "ignore": [
+            "after-comment"
+          ]
+        }
+      ]
+    },
+    "ignoreFiles": "theme/themes/default/**/*.overrides"
   },
   "engines": {
     "node": "^10 || ^12"
   },
   "dependencies": {
-    "@plone/volto": "4.0.0-alpha.10"
+    "@plone/volto": "4.0.0-alpha.14"
   },
   "devDependencies": {
     "eslint-plugin-prettier": "3.0.1",
-    "postcss-overrides": "3.1.4",
-    "prettier": "1.17.0",
-    "prettier-stylelint": "0.4.2"
+    "prettier": "1.19.1",
+    "stylelint-config-idiomatic-order": "6.2.0",
+    "stylelint-config-prettier": "6.0.0",
+    "stylelint-prettier": "1.1.1"
   },
   "resolutions": {
     "@plone/volto/razzle/webpack-dev-server": "3.2.0"

Note

If you are linting activelly your project, the build might be broken after this update. You should run:

$ yarn prettier:fix
$ yarn stylelint:fix

then commit the changes.

openObjectBrowser API change in Alpha 11#

The API of the ObjectBrowser component changed in alpha 11 to make it more flexible. In case you had custom blocks using it, you have to update the call in case you were using a link mode:

@@ -42,7 +42,7 @@ const OtherComp = ({
                     href: '',
                   });
                 }
-              : () => openObjectBrowser('link')
+              : () => openObjectBrowser({ mode: 'link' })
           }
           onChange={(name, value) => {
             onChangeBlock(block, {

See the blocks section for more details.

Renaming Tiles into Blocks#

An internal renaming to use the term Blocks everywhere was done to unify naming through the code a and the documentation.

Plone RESTAPI was updated to that purpose too, and running an upgrade step (do so in Plone's Addons control panel) is required in order to migrate the data. No step is required if you are using a brand new ZODB.

This is the versions compatibility table across all the packages involved:

Volto 4 - plone.restapi >= 5.0.0 - kitconcept.voltodemo >= 2.0

Note

The renaming happened in Volto 4 alpha.10 and plone.restapi 5.0.0. Volto 4 alpha versions under that release use older versions of plone.restapi and kitconcept.voltodemo, however if you are using alpha releases it's recommended to upgrade to latest alpha or the final release of Volto 4.

The project configuration should also be updated, in your src/config.js:

diff --git a/src/config.js b/src/config.js
index f1fe9c2..9517c38 100644
--- a/src/config.js
+++ b/src/config.js
@@ -16,7 +16,7 @@ import {
   settings as defaultSettings,
   views as defaultViews,
   widgets as defaultWidgets,
-  tiles as defaultTiles,
+  blocks as defaultBlocks,
 } from '@plone/volto/config';

 export const settings = {
@@ -31,6 +31,6 @@ export const widgets = {
   ...defaultWidgets,
 };

-export const tiles = {
-  ...defaultTiles,
+export const blocks = {
+  ...defaultBlocks,
 };

Add theme customization to your project#

Volto 4 now also expects a file named src/theme.js with this content by default:

import 'semantic-ui-less/semantic.less';
import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';

Remove enzyme configuration#

Enzyme has been removed, in favor of @testing-library/react, and the configuration should be removed in package.json:

diff --git a/package.json b/package.json
index 27c7f8d..8f5f088 100644
--- a/package.json
+++ b/package.json
@@ -44,9 +44,6 @@
       "default",
       "jest-junit"
     ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "transform": {
       "^.+\\.js(x)?$": "babel-jest",
       "^.+\\.css$": "jest-css-modules",

Blocks engine - Blocks configuration object#

The blocks engine was updated and there are some important breaking changes, in case that you've developed custom blocks. The configuration object is now unified and expresses all the properties to model a block. This is how a block in the defaultBlocks object looks like:

const defaultBlocks = {
  title: {
    id: 'title', // The name (id) of the block
    title: 'Title', // The display name of the block
    icon: titleSVG, // The icon used in the block chooser
    group: 'text', // The group (blocks can be grouped, displayed in the chooser)
    view: ViewTitleBlock, // The view mode component
    edit: EditTitleBlock, // The edit mode component
    restricted: false, // If the block is restricted, it won't show in in the chooser
    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
    security: {
      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
      view: [], // Future proof (not implemented yet) view user role(s)
    },
  },
  ...

There is an additional object groupBlocksOrder that contains an array with the order that the blocks group should appear:

const groupBlocksOrder = [
  { id: 'mostUsed', title: 'Most used' },
  { id: 'text', title: 'Text' },
  { id: 'media', title: 'Media' },
  { id: 'common', title: 'Common' },
];

You should adapt and merge the configuration of your own custom blocks to match the defaultBlocks and groupBlocksOrder one. You can modify the order of the groups and create your own as well.

Blocks engine - Simplification of the edit blocks wrapper#

The edit block wrapper boilerplate was quite big, and for bootstrap an edit block you had to copy it from an existing block. Now all this boilerplate has been transferred to the Blocks Engine, so bootstrapping the edit component of a block is easier and do not require any pre-existing code.

In order to upgrade your blocks you should simplify the outter <div> (took as example the Title block):

--- a/src/components/manage/Blocks/Title/Edit.jsx
+++ b/src/components/manage/Blocks/Title/Edit.jsx
@@ -138,11 +138,7 @@ class Edit extends Component {
       return <div />;
     }
     return (
-      <div
-        role="presentation"
-        onClick={() => this.props.onSelectBlock(this.props.block)}
-        className={cx('block title', { selected: this.props.selected })}
-      >
+      <>
         <Editor
           onChange={this.onChange}
           editorState={this.state.editorState}
@@ -185,7 +181,7 @@ class Edit extends Component {
             this.node = node;
           }}
         />
-      </div>
+      </>
     );
   }
 }

The blocks engine now takes care for the keyboard navigation of the blocks, so you need to remove the outter <div> from your custom block, then your block doesn't have to react to the change on this.props.selected either, because it's also something that the blocks engine already does for you.

The focus management is also transferred to the engine, so no needed for your block to manage the focus. However, if your block does indeed require to manage its own focus, then you should mark it with the blockHasOwnFocusManagement property in the blocks configuration object:

    text: {
      id: 'text',
      title: 'Text',
      icon: textSVG,
      group: 'text',
      view: ViewTextBlock,
      edit: EditTextBlock,
      restricted: false,
      mostUsed: false,
      blockHasOwnFocusManagement: true,
      security: {
        addPermission: [],
        view: [],
      },
    },

Default view renaming#

The default view for content types DocumentView.jsx has been renamed to a more appropiate DefaultView.jsx. This view contains the code for rendering blocks in case the content type has been Blocks enabled. Enable Blocks on your content types by composing the view of your content type using DefaultView component.

Deprecations#

The old messages container has been removed since it's not used anymore by Volto. We changed it to use Toast library.
Improve the Pastanaga Editor block wrapper container layout, deprecating the hack .ui.wrapper > *.

Upgrading to Volto 3.x#

Volto was upgraded to use Razzle 3.0.0 which is not a breaking change itself, but it forces to some changes in the boilerplate on your Volto projects. You should change the babel config by deleting .babelrc file and creating a new file babel.config.js with these contents:

module.exports = require('@plone/volto/babel');

Then update your package.json to Volto 3.x.

  "dependencies": {
    "@plone/volto": "3.0.0",
    ...
  }

Volto 3.x is compatible with the new changes introduced in the vocabularies endpoint in plone.restapi 4.0.0. If you custom build a widget based in the Volto ones, you should update them as well. Volto updated its own widget set to support them:

components/manage/Widgets/ArrayWidget
components/manage/Widgets/SelectWidget
components/manage/Widgets/TokenWidget

They all use react-select third party library for render it.

Upgrading to Volto 2.x#

Improved Blocks HOC#

The Blocks HOC (High Order Component) was changed to lift off some of the features from the blocks themselves and now it takes care of them by its own.

The delete block feature was moved to it
The keylisteners for navigating through blocks was moved to it
The properties passed down to the blocks are improved and documented

This change only applies to your existing blocks, you have to update them accordingly by delete the trash icon and action from the end of your blocks

{this.props.selected && (
  <Button
    icon
    basic
    onClick={() => this.props.onDeleteBlock(this.props.block)}
    className="block-delete-button"
  >
    <Icon name={trashSVG} size="18px" />
  </Button>
)}

Modify the parent element of your block making this changes:

<div
  role="presentation"
  onClick={() => this.props.onSelectBlock(this.props.block)}
  className={cx('block hero', {
    selected: this.props.selected,
  })}
  tabIndex={0}
  onKeyDown={e =>
    this.props.handleKeyDown(
      e,
      this.props.index,
      this.props.block,
      this.node
    )
  }
  ref={node => {
    this.node = node;
  }}
>

Add the keylisteners to the parent element of your block

  onKeyDown={e =>
    this.props.handleKeyDown(
      e,
      this.props.index,
      this.props.block,
      this.node
    )
  }

Add a ref to it and assign it to this.node.

  ref={node => {
    this.node = node;
  }}

Add a proper role for it

  role="presentation"

Take a look into the implementation of the default Volto blocks to get a grasp on all the edge cases related to keyboard navigation and how to deal with them.

Reordering of the internal CSS, added an extra#

The internal Volto CSS has been tidied up and reordered, for that reason, some other extras have been introduced and the theme.config in your project needs to be updated by making sure you have these two extras in the theme.config file:

/* Extras */
@main        : 'pastanaga';
@custom      : 'pastanaga';

Upgrade Guide#

Upgrading to Volto 10.x.x#

Remove the Razzle plugins patch#

getContent changes#

@testing-library/react upgrade notice#

Upgrading to Volto 9.x.x#

Internal upgrade to use Razzle 3.3.7#

Changes involved#

Babel config housekeeping#

Hoisting problems on some setups#

Recomended browserslist in package.json#

New webpack resolver plugin#

Content Types icons#

Upgrading to Volto 8.x.x#

Upgrade package.json testing configuration#

Upgrading to Volto 7.x.x#

New webpack resolve alias for Volto themes#

Upgrading to Volto 6.x.x#

Upgrade to Node 12#

New Razzle version and related development dependencies#

Upgrade local dependencies versions#

Update package.json config#

Prettier#

Stylelint#

CSS modules are not supported anymore#

Update your eslint config#

New wrappers in block editor#

Update config.js#

Upgrading to Volto 5.x.x#

New lazy loading boilerplate#

Testing lazy load components#

Helmet title now it's centralized in View.jsx#

Upgrading to Volto 4.x.x#

New initial blocks per content type setting in Alpha 37#

ImageSidebar moved to Image Block directory in Alpha 29#

Copy yarn.lock from volto-starter-kit in Alpha 17#

Forked Helmet into Volto core#

Alpha 16 is a brownbag release#

Stylelint and prettier config in Alpha 14#

openObjectBrowser API change in Alpha 11#

Renaming Tiles into Blocks#

Add theme customization to your project#

Remove enzyme configuration#

Blocks engine - Blocks configuration object#

Blocks engine - Simplification of the edit blocks wrapper#

Default view renaming#

Deprecations#

Upgrading to Volto 3.x#

Upgrading to Volto 2.x#

Improved Blocks HOC#

Reordering of the internal CSS, added an extra#

`@testing-library/react` upgrade notice#

Recomended `browserslist` in `package.json`#

Update `package.json` config#

Update `config.js`#

Helmet title now it's centralized in `View.jsx`#

Copy `yarn.lock` from volto-starter-kit in Alpha 17#