@plone/volto 19.0.0-alpha.9 → 19.1.0

package/razzle.config.js

@@ -1,6 +1,6 @@
 /* eslint no-console: 0 */
 const path = require('path');
-const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
+const makeLoaderFinder = require('@plone/razzle-dev-utils/makeLoaderFinder');
 const nodeExternals = require('webpack-node-externals');
 const LoadablePlugin = require('@loadable/webpack-plugin');
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
@@ -15,7 +15,6 @@ const {
 const { AddonRegistry } = require('@plone/registry/addon-registry');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const AfterBuildPlugin = require('@fiverr/afterbuild-webpack-plugin');
 
@@ -116,25 +115,11 @@ const defaultModify = ({
       },
     });
 
-    // This is needed to override Razzle use of the unmaintained CleanCSS
-    // which does not have support for recently CSS features (container queries).
-    // Using the default provided (cssnano) by css-minimizer-webpack-plugin
-    // should be enough see:
-    // (https://github.com/clean-css/clean-css/discussions/1209)
+    // TODO: remove this before merging the Razzle fork into Volto 19
+    // @sneridagh: Tried to remove this now that we have forked Razzle
+    // but I cannot pinpoint where this comes from, and it seems undefined
+    // always.
     delete options.webpackOptions.terserPluginOptions?.sourceMap;
-    if (!dev) {
-      config.optimization = Object.assign({}, config.optimization, {
-        minimizer: [
-          new TerserPlugin(options.webpackOptions.terserPluginOptions),
-          new CssMinimizerPlugin({
-            sourceMap: options.razzleOptions.enableSourceMaps,
-            minimizerOptions: {
-              sourceMap: options.razzleOptions.enableSourceMaps,
-            },
-          }),
-        ],
-      });
-    }
 
     config.plugins.unshift(
       // restrict moment.js locales to supported languages
@@ -310,6 +295,7 @@ const defaultModify = ({
     'load-volto-addons': addonsLoaderPath,
     ...registry.getResolveAliases(),
     '@plone/volto': `${registry.voltoPath}/src`,
+    '@plone/volto-slate': `${registry.voltoPath}/../volto-slate/src`,
     // to be able to reference path uncustomized by webpack
     '@plone/volto-original': `${registry.voltoPath}/src`,
     // be able to reference current package from customized package
@@ -436,11 +422,16 @@ const defaultModify = ({
 const addonExtenders = registry.getAddonExtenders().map((m) => require(m));
 
 const defaultPlugins = [
-  { object: require('./webpack-plugins/webpack-less-plugin')({ registry }) },
-  { object: require('./webpack-plugins/webpack-svg-plugin') },
-  { object: require('./webpack-plugins/webpack-bundle-analyze-plugin') },
-  { object: require('./jest-extender-plugin') },
-  'scss',
+  {
+    name: 'less',
+    object: require('./webpack-plugins/webpack-less-plugin')({ registry }),
+  },
+  { name: 'svg', object: require('./webpack-plugins/webpack-svg-plugin') },
+  {
+    name: 'bundle-analyze',
+    object: require('./webpack-plugins/webpack-bundle-analyze-plugin'),
+  },
+  { name: 'scss', object: require('./webpack-plugins/webpack-scss-plugin') },
 ];
 
 const plugins = addonExtenders.reduce(

package/src/actions/blockTypes/blockTypes.ts

@@ -0,0 +1,24 @@
+import { GET_BLOCKTYPES_INDEX } from '@plone/volto/constants/ActionTypes';
+
+export function getBlockTypes(
+  id: string | null = null,
+  path: string | null = null,
+) {
+  let requestPath = '/@blocktypes';
+
+  if (id) {
+    requestPath += `/${id}`;
+  }
+
+  if (id && path) {
+    requestPath += `?path=${path}`;
+  }
+
+  return {
+    type: GET_BLOCKTYPES_INDEX,
+    request: {
+      op: 'get',
+      path: requestPath,
+    },
+  };
+}

package/src/actions/controlpanels/controlpanels.js

@@ -12,7 +12,6 @@ import {
   SYSTEM_INFORMATION,
   DATABASE_INFORMATION,
 } from '@plone/volto/constants/ActionTypes';
-import { getSite } from '@plone/volto/actions/site/site';
 
 /**
  * Get controlpanel function.
@@ -88,17 +87,13 @@ export function listControlpanels() {
  * @returns {Object} Update controlpanel action.
  */
 export function updateControlpanel(url, data) {
-  return (dispatch) => {
-    dispatch({
-      type: UPDATE_CONTROLPANEL,
-      request: {
-        op: 'patch',
-        path: url,
-        data,
-      },
-    }).then(() => {
-      dispatch(getSite());
-    });
+  return {
+    type: UPDATE_CONTROLPANEL,
+    request: {
+      op: 'patch',
+      path: url,
+      data,
+    },
   };
 }
 

package/src/actions/controlpanels/controlpanels.test.js

@@ -36,10 +36,9 @@ describe('Controlpanels action', () => {
       const url = 'http://localhost';
       const data = 'Hello World!';
 
-      const dispatch = vi.fn().mockResolvedValue();
-      updateControlpanel(url, data)(dispatch);
+      const action = updateControlpanel(url, data);
 
-      expect(dispatch).toHaveBeenCalledWith({
+      expect(action).toEqual({
         type: UPDATE_CONTROLPANEL,
         request: {
           op: 'patch',

package/src/components/manage/Actions/Actions.test.jsx

@@ -8,11 +8,7 @@ import Actions from './Actions';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Contents', async () => {
-  return await import(
-    '@plone/volto/components/manage/Contents/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Contents');
 
 describe('Actions', () => {
   it('renders an actions component', () => {

package/src/components/manage/Add/Add.jsx

@@ -195,7 +195,7 @@ class Add extends Component {
           erroMessage = this.props.intl.formatMessage(messages.someErrors);
         }
       } else {
-        erroMessage = errorsList.error?.message || error;
+        erroMessage = errorsList?.error?.message || error;
       }
 
       this.setState({ error: error });
@@ -240,11 +240,13 @@ class Add extends Component {
     if (this.props.location?.state?.translationOf) {
       const language = this.props.location.state.languageFrom;
       const langFileName = toGettextLang(language);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        this.props.changeLanguage(language, locale.default);
-      });
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          this.props.changeLanguage(language, locale.default);
+        })
+        .catch(() => {
+          this.props.changeLanguage(language, {});
+        });
       this.props.history.push(this.props.location?.state?.translationOf);
     } else {
       this.props.history.push(getBaseUrl(this.props.pathname));
@@ -266,9 +268,9 @@ class Add extends Component {
         this.props.schema.properties,
       );
       const translationObject = this.props.location?.state?.translationObject;
-
       const translateTo = translationObject
-        ? langmap?.[this.props.location?.state?.language]?.nativeName
+        ? langmap?.[this.props.location?.state?.language]?.nativeName ||
+          this.props.location?.state?.language
         : null;
 
       // Get initial blocks from local config, if any
@@ -480,9 +482,12 @@ class Add extends Component {
             <Grid.Column>
               <div className="new-translation">
                 <Menu pointing secondary attached tabular>
-                  <Menu.Item name={translateTo.toUpperCase()} active={true}>
+                  <Menu.Item
+                    name={translateTo?.toUpperCase() || ''}
+                    active={true}
+                  >
                     {`${this.props.intl.formatMessage(messages.translateTo, {
-                      lang: translateTo,
+                      lang: translateTo || '',
                     })}`}
                   </Menu.Item>
                 </Menu>

package/src/components/manage/Add/Add.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import config from '@plone/volto/registry';
 import Add from './Add';
 
@@ -43,7 +44,9 @@ describe('Add', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        <CookiesProvider>
+          <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        </CookiesProvider>
       </Provider>,
     );
     expect(container).toMatchSnapshot();
@@ -70,7 +73,9 @@ describe('Add', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        <CookiesProvider>
+          <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -109,7 +114,9 @@ describe('Add', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        <CookiesProvider>
+          <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Aliases/Aliases.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
@@ -46,8 +47,10 @@ describe('Aliases', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Aliases location={{ pathname: '/blog/aliases' }} />
-        <div id="toolbar"></div>
+        <CookiesProvider>
+          <Aliases location={{ pathname: '/blog/aliases' }} />
+          <div id="toolbar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -10,6 +10,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import AnimateHeight from 'react-animate-height';
 import config from '@plone/volto/registry';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import BlockChooserSearch from './BlockChooserSearch';
@@ -98,25 +99,20 @@ const BlockChooser = ({
   }
   const [filterValue, setFilterValue] = React.useState('');
 
-  const getFormatMessage = (message) =>
-    intl.formatMessage({
-      id: message,
-      defaultMessage: message,
-    });
-
   function blocksAvailableFilter(blocks) {
     return blocks.filter(
       (block) =>
-        getFormatMessage(block.title)
+        formatMessageWithFallback(intl, block.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) ||
+        block.title.toLowerCase().includes(filterValue.toLowerCase()) ||
         filterVariations(block)?.length,
     );
   }
   function filterVariations(block) {
     return block.variations?.filter(
       (variation) =>
-        getFormatMessage(variation.title)
+        formatMessageWithFallback(intl, variation.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) &&
         !variation.title.toLowerCase().includes('default'),
@@ -144,9 +140,11 @@ const BlockChooser = ({
           }}
         >
           <Icon name={block.icon} size="36px" />
-          {getFormatMessage(block.title)}
+          {formatMessageWithFallback(intl, block.title)}
           {filterValue && variations?.[0]?.title && (
-            <small>{getFormatMessage(variations[0].title)}</small>
+            <small>
+              {formatMessageWithFallback(intl, variations[0].title)}
+            </small>
           )}
         </Button>
       </Button.Group>

package/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -8,6 +8,7 @@ import {
   getBlocks,
   getBlocksFieldname,
   getBlocksLayoutFieldname,
+  getInvalidBlockLayoutIds,
   applyBlockDefaults,
   getBlocksHierarchy,
   addBlock,
@@ -260,16 +261,18 @@ const BlocksForm = (props) => {
   const editBlockWrapper = children || defaultBlockWrapper;
 
   // Remove invalid blocks on saving
-  // Note they are alreaady filtered by DragDropList, but we also want them
+  // Note they are already filtered by DragDropList, but we also want them
   // to be removed when the user saves the page next. Otherwise the invalid
   // blocks would linger for ever.
-
-  for (const [n, v] of blockList) {
-    if (!v) {
-      const newFormData = deleteBlock(properties, n, intl);
-      onChangeFormData(newFormData);
+  useEffect(() => {
+    const invalidBlockIds = getInvalidBlockLayoutIds(properties);
+    if (invalidBlockIds.length === 0) return;
+    let newFormData = properties;
+    for (const id of invalidBlockIds) {
+      newFormData = deleteBlock(newFormData, id, intl);
     }
-  }
+    onChangeFormData(newFormData);
+  }, [properties, intl, onChangeFormData]);
 
   useEvent('voltoClickBelowContent', () => {
     if (!config.experimental.addBlockButton.enabled || !isMainForm) return;

package/src/components/manage/Blocks/Block/BlocksForm.test.jsx

@@ -7,11 +7,7 @@ import config from '@plone/volto/registry';
 
 config.experimental = { addBlockButton: { enabled: false } };
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 
 beforeAll(async () => {
   const { __setLoadables } = await import(
@@ -161,19 +157,12 @@ test('Removes invalid blocks on saving', () => {
     </Provider>,
   );
 
+  expect(onChangeFormData).toHaveBeenCalledTimes(1);
   expect(onChangeFormData).toHaveBeenCalledWith({
     blocks: {
       a: { '@type': 'custom', text: 'a' },
       b: { '@type': 'custom', text: 'b' },
     },
-    blocks_layout: { items: ['a', 'b', 'MISSING-YOU-1'] },
-  });
-
-  expect(onChangeFormData).toHaveBeenCalledWith({
-    blocks: {
-      a: { '@type': 'custom', text: 'a' },
-      b: { '@type': 'custom', text: 'b' },
-    },
-    blocks_layout: { items: ['a', 'b', 'MISSING-YOU-2'] },
+    blocks_layout: { items: ['a', 'b'] },
   });
 });

package/src/components/manage/Blocks/Block/Edit.jsx

@@ -149,15 +149,6 @@ export class Edit extends Component {
                 this.props.setUIState({ hovered: this.props.id });
               }
             }}
-            onFocus={(e) => {
-              // TODO: This `onFocus` steals somehow the focus from the slate block
-              // we have to investigate why this is happening
-              // Apparently, I can't see any difference in the behavior
-              // If any, we can fix it in successive iterations
-              // if (this.props.hovered !== this.props.id) {
-              //   this.props.setUIState({ hovered: this.props.id });
-              // }
-            }}
             onMouseLeave={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -172,6 +163,24 @@ export class Edit extends Component {
                   e,
                 );
             }}
+            // onFocus={(e) => {
+            //   // TODO: This `onFocus` steals somehow the focus from the slate block
+            //   // we have to investigate why this is happening
+            //   // Apparently, I can't see any difference in the behavior
+            //   // If any, we can fix it in successive iterations
+            //   // if (this.props.hovered !== this.props.id) {
+            //   //   this.props.setUIState({ hovered: this.props.id });
+            //   // }
+            // }}
+            onFocus={(e) => {
+              const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+              !this.props.selected &&
+                this.props.onSelectBlock(
+                  this.props.id,
+                  this.props.selected ? false : isMultipleSelection,
+                  e,
+                );
+            }}
             onKeyDown={
               !(blockHasOwnFocusManagement || disableNewBlocks)
                 ? (e) =>
@@ -218,6 +227,7 @@ export class Edit extends Component {
               e.stopPropagation();
               this.props.setUIState({ hovered: this.props.id });
             }}
+            // Mantenha apenas este onFocus ou remova se não for necessário
             onFocus={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -245,7 +255,6 @@ export class Edit extends Component {
             className={cx(`block ${type}`, { selected: this.props.selected })}
             style={{ outline: 'none' }}
             ref={this.blockNode}
-            // The tabIndex is required for the keyboard navigation
             tabIndex={-1}
           >
             {this.props.intl.formatMessage(messages.unknownBlock, {

package/src/components/manage/Blocks/Block/Order/Item.jsx

@@ -5,7 +5,9 @@ import includes from 'lodash/includes';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { setUIState } from '@plone/volto/actions/form/form';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import config from '@plone/volto/registry';
+import { useIntl } from 'react-intl';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
@@ -25,6 +27,7 @@ export const Item = forwardRef(
       onRemove,
       onSelectBlock,
       parentId,
+      parentType,
       style,
       value,
       wrapperRef,
@@ -33,12 +36,27 @@ export const Item = forwardRef(
     },
     ref,
   ) => {
+    const intl = useIntl();
     const selected = useSelector((state) => state.form.ui.selected);
     const hovered = useSelector((state) => state.form.ui.hovered);
     const multiSelected = useSelector((state) => state.form.ui.multiSelected);
     const gridSelected = useSelector((state) => state.form.ui.gridSelected);
     const dispatch = useDispatch();
 
+    const icon =
+      config.blocks.blocksConfig[data?.['@type']]?.icon ||
+      config.blocks.blocksConfig.title?.icon;
+
+    const required =
+      typeof data?.required === 'boolean'
+        ? data.required
+        : includes(config.blocks.requiredBlocks, data?.['@type']);
+    const fixed = !!data?.fixed;
+    const configTitle = config.blocks.blocksConfig[data?.['@type']]?.title;
+    const blockTitle =
+      data?.plaintext ||
+      formatMessageWithFallback(intl, configTitle) ||
+      data?.title;
     return (
       <li
         className={classNames(
@@ -88,31 +106,32 @@ export const Item = forwardRef(
           ref={ref}
           style={style}
         >
-          <button
-            ref={ref}
-            {...handleProps}
-            className={classNames('action', 'drag')}
-            tabIndex={0}
-            data-cypress="draggable-handle"
-          >
-            <Icon name={dragSVG} size="16px" />
-          </button>
+          {!fixed && (
+            <button
+              ref={ref}
+              {...handleProps}
+              className={classNames('action', 'drag')}
+              tabIndex={0}
+              data-cypress="draggable-handle"
+            >
+              <Icon name={dragSVG} size="16px" />
+            </button>
+          )}
           <span
             className={cx('text', {
               errored: errors && Object.keys(errors).length > 0,
             })}
           >
-            {config.blocks.blocksConfig[data?.['@type']]?.icon && (
+            {icon && (
               <Icon
-                name={config.blocks.blocksConfig[data?.['@type']]?.icon}
+                name={icon}
                 size="20px"
                 style={{ verticalAlign: 'middle' }}
               />
             )}{' '}
-            {data?.plaintext ||
-              config.blocks.blocksConfig[data?.['@type']]?.title}
+            {blockTitle}
           </span>
-          {!clone && onRemove && (
+          {!clone && onRemove && !required && (
             <button
               onClick={onRemove}
               className={classNames('action', 'delete')}

package/src/components/manage/Blocks/Block/Order/Item.test.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { render } from '@testing-library/react';
+import config from '@plone/volto/registry';
+
+import { Item } from './Item';
+
+const mockStore = configureStore();
+
+const defaultStoreState = {
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  form: {
+    ui: {
+      selected: null,
+      hovered: null,
+      multiSelected: [],
+      gridSelected: null,
+    },
+  },
+};
+
+const renderItem = (data = {}) => {
+  const store = mockStore(defaultStoreState);
+
+  return render(
+    <Provider store={store}>
+      <Item
+        id="title-block-id"
+        data={{ '@type': 'title', ...data }}
+        depth={0}
+        indentationWidth={25}
+        onRemove={() => {}}
+        onSelectBlock={() => {}}
+        handleProps={{}}
+      />
+    </Provider>,
+  );
+};
+
+describe('Order Item', () => {
+  let requiredBlocks;
+
+  beforeEach(() => {
+    requiredBlocks = [...(config.blocks.requiredBlocks || [])];
+    config.blocks.requiredBlocks = [];
+  });
+
+  afterEach(() => {
+    config.blocks.requiredBlocks = requiredBlocks;
+  });
+
+  test('renders drag and delete actions for movable and removable blocks', () => {
+    const { container } = renderItem();
+
+    expect(container.querySelector('.action.drag')).not.toBeNull();
+    expect(container.querySelector('.action.delete')).not.toBeNull();
+  });
+
+  test('hides delete action for required blocks', () => {
+    const { container } = renderItem({ required: true });
+
+    expect(container.querySelector('.action.delete')).toBeNull();
+  });
+
+  test('hides delete action for block types configured as required', () => {
+    config.blocks.requiredBlocks = ['title'];
+
+    const { container } = renderItem();
+
+    expect(container.querySelector('.action.delete')).toBeNull();
+  });
+
+  test('allows explicit required=false to override required block types', () => {
+    config.blocks.requiredBlocks = ['title'];
+
+    const { container } = renderItem({ required: false });
+
+    expect(container.querySelector('.action.delete')).not.toBeNull();
+  });
+
+  test('hides drag action for fixed blocks', () => {
+    const { container } = renderItem({ fixed: true });
+
+    expect(container.querySelector('.action.drag')).toBeNull();
+  });
+});