@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.31

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
@@ -414,17 +400,38 @@ const defaultModify = ({
         ]
       : [];
 
+  // If Volto is served under a subpath,
+  // we have to adjust where Webpack assets are served too.
+  const subpathPrefix = process.env.RAZZLE_SUBPATH_PREFIX || '';
+  if (subpathPrefix) {
+    if (target === 'web' && dev) {
+      if (config.devServer.devMiddleware) {
+        config.devServer.devMiddleware.publicPath = subpathPrefix;
+      } else {
+        config.devServer.publicPath += `${subpathPrefix.slice(1)}/`;
+      }
+    }
+    const publicPath = config.output.publicPath;
+    if (publicPath.indexOf(subpathPrefix) === -1) {
+      config.output.publicPath = `${publicPath}${subpathPrefix.slice(1)}/`;
+    }
+  }
   return config;
 };
 
 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/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/BlockChooser/BlockChooser.jsx

@@ -110,6 +110,7 @@ const BlockChooser = ({
         getFormatMessage(block.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) ||
+        block.title.toLowerCase().includes(filterValue.toLowerCase()) ||
         filterVariations(block)?.length,
     );
   }

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/EditBlockWrapper.jsx

@@ -21,9 +21,13 @@ import BlockChooserButton from '@plone/volto/components/manage/BlockChooser/Bloc
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
-  delete: {
-    id: 'delete',
-    defaultMessage: 'delete',
+  delete_block: {
+    id: 'delete_block',
+    defaultMessage: 'delete {type} block',
+  },
+  drag_block: {
+    id: 'drag_block',
+    defaultMessage: 'drag {type} block',
   },
 });
 
@@ -99,6 +103,7 @@ const EditBlockWrapper = (props) => {
           }}
           {...draginfo.dragHandleProps}
           className="drag handle wrapper"
+          aria-label={intl.formatMessage(messages.drag_block, { type })}
         >
           <Icon name={dragSVG} size="18px" />
         </div>
@@ -111,7 +116,7 @@ const EditBlockWrapper = (props) => {
               basic
               onClick={() => onDeleteBlock(block, true)}
               className="delete-button"
-              aria-label={intl.formatMessage(messages.delete)}
+              aria-label={intl.formatMessage(messages.delete_block, { type })}
             >
               <Icon name={trashSVG} size="18px" />
             </Button>

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

@@ -25,6 +25,7 @@ export const Item = forwardRef(
       onRemove,
       onSelectBlock,
       parentId,
+      parentType,
       style,
       value,
       wrapperRef,
@@ -39,6 +40,16 @@ export const Item = forwardRef(
     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;
+
     return (
       <li
         className={classNames(
@@ -88,31 +99,34 @@ 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}
+              config.blocks.blocksConfig[data?.['@type']]?.title ||
+              data?.title}
           </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();
+  });
+});