Upgrade to Volto 18

.github/workflows/main.yml

@@ -31,7 +31,7 @@ jobs:
  build-args: |
  ADDON_NAME=design-comuni-plone-theme
  ADDON_PATH=design-comuni-plone-theme
- VOLTO_VERSION=17.18.2
+ VOLTO_VERSION=18.0.0-alpha.41
 
  # - name: Deploy to rancher
  # uses: redturtle/rancher-deploy-action@v0.2.0

.github/workflows/prs.yml

@@ -34,4 +34,4 @@ jobs:
  build-args: |
  ADDON_NAME=design-comuni-plone-theme
  ADDON_PATH=design-comuni-plone-theme
- VOLTO_VERSION=17.18.2
+ VOLTO_VERSION=18.0.0-alpha.41

.github/workflows/release.yml

@@ -35,4 +35,4 @@ jobs:
  build-args: |
  ADDON_NAME=design-comuni-plone-theme
  ADDON_PATH=design-comuni-plone-theme
- VOLTO_VERSION=17.18.2
+ VOLTO_VERSION=18.0.0-alpha.41

.github/workflows/withnewsletter.yml

@@ -31,7 +31,7 @@ jobs:
  build-args: |
  ADDON_NAME=design-comuni-plone-theme
  ADDON_PATH=design-comuni-plone-theme
- VOLTO_VERSION=17.18.2
+ VOLTO_VERSION=18.0.0-alpha.41
 
  - name: Deploy to rancher
  uses: redturtle/rancher-deploy-action@v0.2.0

Makefile

@@ -27,7 +27,7 @@ CURRENT_DIR:=$(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
 # ADDON ?= "design-comuni-plone-theme"
 
 PLONE_VERSION=6
-VOLTO_VERSION=17.18.2
+VOLTO_VERSION=18.0.0-alpha.41
 
 ADDON_NAME='design-comuni-plone-theme'
 ADDON_PATH='design-comuni-plone-theme'

dockerfiles/docker-compose.yml

@@ -8,7 +8,7 @@ services:
  args:
  ADDON_NAME: '${ADDON_NAME}'
  ADDON_PATH: '${ADDON_PATH}'
- VOLTO_VERSION: ${VOLTO_VERSION:-17}
+ VOLTO_VERSION: ${VOLTO_VERSION:-18.0.0-alpha.41}
  volumes:
  - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
  environment:
@@ -34,7 +34,7 @@ services:
  args:
  ADDON_NAME: '${ADDON_NAME}'
  ADDON_PATH: '${ADDON_PATH}'
- VOLTO_VERSION: ${VOLTO_VERSION:-17}
+ VOLTO_VERSION: ${VOLTO_VERSION:-18.0.0-alpha.41}
  environment:
  RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
  RAZZLE_API_PATH: http://localhost:8080/Plone

jest-addon.config.js

@@ -57,7 +57,7 @@ module.exports = {
  },
  setupFiles: [
  '@plone/volto/test-setup-globals.js',
- '@plone/volto/test-setup-config.js',
+ '@plone/volto/test-setup-config.jsx',
  './src/addons/design-comuni-plone-theme/test-setup-config.js',
  ],
  globalSetup: '@plone/volto/global-test-setup.js',

package.json

@@ -122,7 +122,7 @@
  ]
  },
  "engines": {
- "node": "^16 || ^18"
+ "node": "^18 || ^20"
  },
  "dependencies": {
  "@babel/plugin-proposal-export-default-from": "7.18.9",
@@ -174,7 +174,7 @@
  "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
  "@commitlint/cli": "17.6.6",
  "@commitlint/config-conventional": "17.6.6",
- "@plone/scripts": "*",
+ "@plone/scripts": "^3.6.2",
  "@release-it/conventional-changelog": "5.1.1",
  "babel-plugin-lodash": "^3.3.4",
  "eslint": "8.54.0",
@@ -202,7 +202,7 @@
  "stylelint-prettier": "4.0.2"
  },
  "peerDependencies": {
- "@plone/volto": "17.18.2"
+ "@plone/volto": "18.0.0-alpha.41"
  },
  "packageManager": "yarn@3.2.3"
 }

src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Button, Row, Col } from 'design-react-kit';
-import { v4 as uuid } from 'uuid';
 import SimpleCardDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault';
 import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
@@ -22,7 +21,7 @@ const SimpleCardTemplateDefault = (props) => {
  linkmore_id_lighthouse,
  } = props;
 
- const resultsUID = uuid();
+ const resultsUID = useId();
 
  let currentPathFilter = additionalFilters
  ?.filter((f) => {

src/components/ItaliaTheme/Icons/DesignIcon.jsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { v4 as uuid } from 'uuid';
+import React, { useState, useEffect, useRef, useId } from 'react';
 import PropTypes from 'prop-types';
 
 const propTypes = {
@@ -20,7 +19,7 @@ const defaultProps = {
 const Icon = ({ icon, title, className, size }) => {
  const ImportedIconRef = useRef(null);
  const [loading, setLoading] = useState(false);
- const iconID = useMemo(() => uuid(), []);
+ const iconID = useId();
 
  useEffect(() => {
  setLoading(true);

src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx

@@ -2,13 +2,12 @@
  * Icon component.
  * @module components/ItaliaTheme/Icons/SectionIcon
  */
-import React, { useMemo } from 'react';
-import { v4 as uuid } from 'uuid';
+import React, { useId } from 'react';
 import { fontAwesomeAliases } from 'design-comuni-plone-theme/helpers/index';
 
 const FontAwesomeIcon = (props) => {
  const { className, icon, prefix, title } = props;
- const iconID = useMemo(() => uuid(), []);
+ const iconID = useId();
  const [loadedIcon, setLoadedIcon] = React.useState({
  module: null,
  iconName: '',
@@ -36,12 +35,12 @@ const FontAwesomeIcon = (props) => {
  prefixKey === 'fab'
  ? 'brands'
  : prefixKey === 'far'
- ? 'regular'
- : prefixKey === 'fas'
- ? 'solid'
- : prefixKey != null
- ? prefixKey
- : 'solid',
+  ? 'regular'
+  : prefixKey === 'fas'
+  ? 'solid'
+  : prefixKey != null
+  ? prefixKey
+  : 'solid',
  iconName,
  ];
  };

src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx

@@ -4,9 +4,9 @@
  */
 
 import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import { Portal } from 'react-portal';
 import cx from 'classnames';
 
 import { UniversalLink } from '@plone/volto/components';
@@ -153,11 +153,7 @@ const PaginaArgomentoView = ({ content }) => {
  )}
  {content?.image && (
  <>
- <Portal
- node={
- __CLIENT__ && document.getElementById('portal-header-image')
- }
- >
+ {createPortal(
  <div>
  <Image
  item={content}
@@ -167,8 +163,9 @@ const PaginaArgomentoView = ({ content }) => {
  responsive={true}
  sizes="100vw"
  />
- </div>
- </Portal>
+ </div>,
+ __CLIENT__ && document.getElementById('portal-header-image'),
+ )}
  <BodyClass className="has-image" />
  </>
  )}

src/components/ItaliaTheme/manage/Widgets/MenuConfigurationForm.jsx

@@ -5,9 +5,9 @@
  * - added new select field with lighthouse options
  */
 
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useId } from 'react';
+import { createPortal } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
-import { v4 as uuid } from 'uuid';
 import { isEmpty } from 'lodash';
 import { Form as UIForm, Grid, Button } from 'semantic-ui-react';
 import {
@@ -20,7 +20,6 @@ import {
 } from '@plone/volto/components';
 import RadioWidget from 'volto-dropdownmenu/widget/RadioWidget';
 /* import SelectWidget from './SelectWidget'; */
-import { Portal } from 'react-portal';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -98,7 +97,7 @@ const messages = defineMessages({
 
 const MenuConfigurationForm = ({ id, menuItem, onChange, deleteMenuItem }) => {
  const intl = useIntl();
- const defaultBlockId = uuid();
+ const defaultBlockId = useId();
 
  if (!menuItem.blocks_layout || isEmpty(menuItem.blocks_layout.items)) {
  menuItem.blocks_layout = {
@@ -117,11 +116,11 @@ const MenuConfigurationForm = ({ id, menuItem, onChange, deleteMenuItem }) => {
  e.preventDefault();
  };
 
- const preventEnter = (e) => {
+ const preventEnter = useCallback((e) => {
  if (e.code === 'Enter') {
  preventClick(e);
  }
- };
+ }, []);
 
  useEffect(() => {
  document
@@ -144,7 +143,7 @@ const MenuConfigurationForm = ({ id, menuItem, onChange, deleteMenuItem }) => {
  item.removeEventListener('keypress', preventEnter);
  });
  };
- }, []);
+ }, [preventEnter]);
 
  const onChangeFormData = (id, value) => {
  onChange({ ...menuItem, [id]: value });
@@ -319,9 +318,7 @@ const MenuConfigurationForm = ({ id, menuItem, onChange, deleteMenuItem }) => {
  </Grid.Row>
  </Grid>
  </UIForm.Field>
- <Portal node={document.getElementById('sidebar')}>
- <Sidebar />
- </Portal>
+ {createPortal(<Sidebar />, document.getElementById('sidebar'))}
  </>
  );
 };

src/config/Widgets/widgets.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import CharCounterTextareaWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/CharCounterTextareaWidget';
 import CharCounterTextWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/CharCounterTextWidget';
-import { DatetimeWidget } from '@plone/volto/config/Widgets';
-import { ArrayWidget } from '@plone/volto/components';
+import {
+ ArrayWidget,
+ DatetimeWidget,
+} from '@plone/volto/components/manage/Widgets';
 import { MultilingualWidget } from 'volto-multilingual-widget';
 import IconWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/IconWidget';
 import SubsiteSocialLinksWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/SubsiteSocialLinksWidget';

src/config/italiaConfig.js

@@ -117,14 +117,6 @@ export default function applyConfig(voltoConfig) {
  defaultPageSize: 24,
  navDepth: 2,
  cookieExpires: 15552000, //6 month
- serverConfig: {
- ...config.settings.serverConfig,
- //criticalCssPath: 'node_modules/design-comuni-plone-theme/public/critical.css', //valido solo per i siti figli. Rimosso temporaneamente perchè fa un brutto effetto al caricamento della pagina
- extractScripts: {
- ...config.settings.serverConfig.extractScripts,
- errorPages: true,
- },
- },
  /*
  Set to 100mb in BINARY bytes, not decimal, see volto/helpers/FormValidation.js.validateFileUploadSize error message
  ...

src/customizations/volto-form-block/components/Sidebar.jsx

@@ -31,7 +31,7 @@ import {
  clearFormData,
 } from 'volto-form-block/actions';
 
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { getFieldName } from 'volto-form-block/components/utils';
 
@@ -87,6 +87,9 @@ const Sidebar = ({
  onChangeSubBlock,
  selected = 0,
  setSelected,
+ blocksErrors,
+ navRoot,
+ contentType,
 }) => {
  const intl = useIntl();
  const dispatch = useDispatch();
@@ -136,7 +139,11 @@ const Sidebar = ({
  [id]: value,
  });
  }}
+ onChangeBlock={onChangeBlock}
  formData={data}
+ navRoot={navRoot}
+ contentType={contentType}
+ errors={blocksErrors}
  />
  {properties?.['@components']?.form_data && (
  <Form.Field inline>

src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -6,7 +6,8 @@ import React, { useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 import { compose } from 'redux';
 
-import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import { SidebarPortal } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import { getBaseUrl } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
@@ -29,10 +30,13 @@ const messages = defineMessages({
 const SearchBlockEdit = (props) => {
  const {
  block,
+ blocksErrors,
  onChangeBlock,
  data,
  selected,
  intl,
+ navRoot,
+ contentType,
  onTriggerSearch,
  querystring = {},
  } = props;
@@ -56,21 +60,32 @@ const SearchBlockEdit = (props) => {
  let activeItem = listingVariations.find(
  (item) => item.id === data.listingBodyTemplate,
  );
-
  const listingSchemaEnhancer = activeItem?.schemaEnhancer;
  if (listingSchemaEnhancer)
  schema = listingSchemaEnhancer({
  schema: cloneDeep(schema),
  data,
  intl,
  });
+ schema.properties.sortOnOptions.items = {
+ choices: Object.keys(sortable_indexes).map((k) => [
+ k,
+ sortable_indexes[k].title,
+ ]),
+ };
 
  const { query = {} } = data || {};
  // We don't need deep compare here, as this is just json serializable data.
  const deepQuery = JSON.stringify(query);
+
  useEffect(() => {
- onTriggerSearch();
- }, [deepQuery, onTriggerSearch]);
+ onTriggerSearch(
+ '',
+ data?.facets,
+ data?.query?.sort_on,
+ data?.query?.sort_order,
+ );
+ }, [deepQuery, onTriggerSearch, data]);
 
  return (
  <>
@@ -90,6 +105,9 @@ const SearchBlockEdit = (props) => {
  }}
  onChangeBlock={onChangeBlock}
  formData={data}
+ navRoot={navRoot}
+ contentType={contentType}
+ errors={blocksErrors}
  />
  </SidebarPortal>
  </>

src/customizations/volto/components/manage/Blocks/Search/utils.js

@@ -1,7 +1,6 @@
 /* CUSTOMIZATIONS:
  - Use with more plone.app.querystring.date operations
 */
-import { defineMessages } from 'react-intl';
 import { useEffect } from 'react';
 
 export const NONVALUE_OPERATIONS = new Set([