@plone/volto 17.6.1 → 17.8.0

package/CHANGELOG.md

@@ -17,6 +17,43 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 17.8.0 (2024-01-02)
+
+### Feature
+
+- Added support for custom CSS properties in the `StyleWrapper`. @sneridagh [#5581](https://github.com/plone/volto/issues/5581)
+
+### Bugfix
+
+- Fixed utc problems in RecurrenceWidget [#5002](https://github.com/plone/volto/issues/5002)
+- The hamburger icon to open the mobile/tablet navigation is now hidden if there are no navigation items. @Aarav238 [#5353](https://github.com/plone/volto/issues/5353)
+- Fix preview image component @steffenri [#5379](https://github.com/plone/volto/issues/5379)
+- Fix autopopulated value of facet when settings the value for another one. @iFlameing [#5432](https://github.com/plone/volto/issues/5432)
+- Fix sitemap for multilingual sites
+  [erral] [#5501](https://github.com/plone/volto/issues/5501)
+- Replace createRef with useRef in SidebarPopup
+  [razvanMiu] [#5519](https://github.com/plone/volto/issues/5519)
+- Fixed edge case error in Unauthorised page and Login route behavior @sneridagh [#5536](https://github.com/plone/volto/issues/5536)
+
+### Internal
+
+- Update Plone to 6.0.9 @sneridagh [#5562](https://github.com/plone/volto/issues/5562)
+
+## 17.7.0 (2023-12-13)
+
+### Feature
+
+- Added conditional variations support. @sneridagh @robgietema [#5424](https://github.com/plone/volto/issues/5424)
+- Added `navRoot` and `contentType` to `restricted` key in blocks configuration. @sneridagh [#5517](https://github.com/plone/volto/issues/5517)
+- Add support for `preview_image_link` behavior in Volto Image component @sneridagh [#5523](https://github.com/plone/volto/issues/5523)
+
+### Bugfix
+
+- Fix the right order of parameters in normalizeExternalData.js @dobri1408 [#5347](https://github.com/plone/volto/issues/5347)
+- Refactoring the code for extraction of videoDetails from the video URL, adding code for extracting videoDetails from youtube video URLs with '/live/' in its URL which previously used to throw an error and adding jest tests for same. @IshaanDasgupta [#5416](https://github.com/plone/volto/issues/5416)
+- Initialize data in form before the checks for the `blocks` and `blocks_layout` are done This fix an edge case when the data from the server content is empty, then the fields are populated, but the initialized data is snapshot after the check (and amendments) are done. @sneridagh [#5445](https://github.com/plone/volto/issues/5445)
+- Replaced `toNumber` with `parseFloat` to avoid an error when validating the `plone.restapi` version. @shibbu264 [#5448](https://github.com/plone/volto/issues/5448)
+
 ## 17.6.1 (2023-11-27)
 
 ### Bugfix

package/addon-registry.js

@@ -482,8 +482,41 @@ class AddonConfigurationRegistry {
             `${customPath}/**/*.*(svg|png|jpg|jpeg|gif|ico|less|js|jsx|ts|tsx)`,
           ),
           (filename) => {
+            function changeFileExtension(filePath) {
+              // Extract the current file extension
+              const currentExtension = filePath.split('.').pop();
+
+              // Define the mapping between file extensions
+              const extensionMapping = {
+                jsx: 'tsx',
+                tsx: 'jsx',
+                js: 'ts',
+                ts: 'js',
+              };
+
+              // Check if the current extension is in the mapping
+              if (currentExtension in extensionMapping) {
+                // Replace the current extension with the corresponding one from the mapping
+                const newExtension = extensionMapping[currentExtension];
+                const newPath = filePath.replace(
+                  `.${currentExtension}`,
+                  `.${newExtension}`,
+                );
+                return newPath;
+              } else {
+                // If the current extension is not in the mapping, return the original path
+                return filePath;
+              }
+            }
+
             const targetPath = filename.replace(customPath, sourcePath);
-            if (fs.existsSync(targetPath)) {
+            // We try to find the source to shadow with the exact path
+            // and we try also with the extension changed in search for JS<->TS
+            // correspondence
+            if (
+              fs.existsSync(targetPath) ||
+              fs.existsSync(changeFileExtension(targetPath))
+            ) {
               aliases[
                 filename
                   .replace(customPath, name)

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.6.1",
+  "version": "17.8.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/news/5347.bugfix

@@ -0,0 +1 @@
+Fix the right order of parameters in normalizeExternalData.js @dobri1408

package/packages/volto-slate/news/5517.feature

@@ -0,0 +1 @@
+Added `navRoot` and `contentType` to `restricted` key in blocks configuration. @sneridagh

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.6.1",
+  "version": "17.8.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx

@@ -70,6 +70,8 @@ export const DefaultTextBlockEditor = (props) => {
     allowedBlocks,
     formTitle,
     formDescription,
+    navRoot,
+    contentType,
   } = props;
 
   const { slate } = config.settings;
@@ -267,6 +269,8 @@ export const DefaultTextBlockEditor = (props) => {
               blocksConfig={blocksConfig}
               size="24px"
               properties={properties}
+              navRoot={navRoot}
+              contentType={contentType}
             />
           )}
 

package/packages/volto-slate/src/editor/extensions/insertData.js

@@ -98,7 +98,9 @@ export const insertData = (editor) => {
       if (Editor.string(editor, [])) {
         if (
           Array.isArray(fragment) &&
-          fragment.findIndex((b) => Editor.isInline(b) || Text.isText(b)) > -1
+          fragment.findIndex(
+            (b) => Editor.isInline(editor, b) || Text.isText(b),
+          ) > -1
         ) {
           // console.log('insert fragment', fragment);
           // TODO: we want normalization also when dealing with fragments

package/packages/volto-slate/src/editor/extensions/normalizeExternalData.js

@@ -2,7 +2,7 @@ import { normalizeExternalData as normalize } from '@plone/volto-slate/utils';
 
 export function normalizeExternalData(editor) {
   editor.normalizeExternalData = (fragment) => {
-    return normalize(fragment);
+    return normalize(editor, fragment);
   };
   return editor;
 }

package/packages/volto-slate/src/utils/blocks.js

@@ -73,7 +73,10 @@ export const normalizeExternalData = (editor, nodes) => {
   // put all the non-blocks (e.g. images which are inline Elements) inside p-s
   Editor.withoutNormalizing(fakeEditor, () => {
     //for htmlSlateWidget compatibility
-    if (nodes && !Editor.isBlock(fakeEditor, nodes[0]))
+    if (
+      nodes &&
+      (!Editor.isBlock(fakeEditor, nodes[0]) || Text.isText(nodes[0]))
+    )
       Transforms.wrapNodes(
         fakeEditor,
         { type: 'p' },
@@ -81,7 +84,8 @@ export const normalizeExternalData = (editor, nodes) => {
           at: [],
           match: (node, path) =>
             (!Editor.isEditor(node) && !Editor.isBlock(fakeEditor, node)) ||
-            fakeEditor.isInline(node),
+            fakeEditor.isInline(node) ||
+            Text.isText(node),
           mode: 'highest',
         },
       );

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

@@ -315,6 +315,9 @@ class Add extends Component {
           <Form
             ref={this.form}
             key="translated-or-new-content-form"
+            navRoot={
+              this.props.content?.['@components']?.navroot?.navroot || {}
+            }
             schema={this.props.schema}
             type={this.props.type}
             formData={{
@@ -334,6 +337,9 @@ class Add extends Component {
               // Copy the Language Independent Fields values from the to-be translated content
               // into the default values of the translated content Add form.
               ...lifData(),
+              parent: {
+                '@id': this.props.content?.['@id'] || '',
+              },
             }}
             requestError={this.state.error}
             onSubmit={this.onSubmit}

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

@@ -31,6 +31,8 @@ const BlockChooser = ({
   blocksConfig = config.blocks.blocksConfig,
   blockChooserRef,
   properties = {},
+  navRoot,
+  contentType,
 }) => {
   const intl = useIntl();
   const hasAllowedBlocks = !isEmpty(allowedBlocks);
@@ -55,7 +57,7 @@ const BlockChooser = ({
         // depending on this function, given properties (current present blocks) and the
         // block being evaluated
         return typeof item.restricted === 'function'
-          ? !item.restricted({ properties, block: item })
+          ? !item.restricted({ properties, block: item, navRoot, contentType })
           : !item.restricted;
       }
     }

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

@@ -54,7 +54,10 @@ const BlockChooserButton = (props) => {
     blocksConfig,
     buttonComponent,
     properties,
+    navRoot,
+    contentType,
   } = props;
+
   const { disableNewBlocks } = data;
   const [addNewBlockOpened, setAddNewBlockOpened] = React.useState(false);
 
@@ -142,6 +145,8 @@ const BlockChooserButton = (props) => {
               properties={properties}
               showRestricted={showRestricted}
               ref={blockChooserRef}
+              navRoot={navRoot}
+              contentType={contentType}
             />
           </div>
         </Portal>

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

@@ -28,6 +28,8 @@ const BlocksForm = (props) => {
     pathname,
     onChangeField,
     properties,
+    type,
+    navRoot,
     onChangeFormData,
     selectedBlock,
     multiSelected,
@@ -260,6 +262,8 @@ const BlocksForm = (props) => {
               pathname,
               metadata,
               properties,
+              contentType: type,
+              navRoot,
               blocksConfig,
               selected: selectedBlock === childId,
               multiSelected: multiSelected?.includes(childId),

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

@@ -7,7 +7,7 @@ import DefaultBlockView from './DefaultView';
 
 const DefaultBlockEdit = (props) => {
   const { blocksConfig = config.blocks.blocksConfig } = props;
-  const { data, onChangeBlock, block, selected } = props;
+  const { data, onChangeBlock, block, selected, navRoot, contentType } = props;
   const intl = useIntl();
   const blockSchema = blocksConfig?.[data['@type']]?.blockSchema;
   const schema =
@@ -32,6 +32,8 @@ const DefaultBlockEdit = (props) => {
               });
             }}
             formData={data}
+            navRoot={navRoot}
+            contentType={contentType}
           />
         </SidebarPortal>
       ) : (

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

@@ -3,6 +3,7 @@ import { Icon } from '@plone/volto/components';
 import {
   blockHasValue,
   buildStyleClassNamesFromData,
+  buildStyleObjectFromData,
 } from '@plone/volto/helpers';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { Button } from 'semantic-ui-react';
@@ -47,14 +48,18 @@ const EditBlockWrapper = (props) => {
     editable,
     properties,
     showBlockChooser,
+    navRoot,
+    contentType,
   } = blockProps;
+
   const visible = selected && !hideHandler(data);
 
   const required = isBoolean(data.required)
     ? data.required
     : includes(config.blocks.requiredBlocks, type);
 
-  const styles = buildStyleClassNamesFromData(data.styles);
+  const classNames = buildStyleClassNamesFromData(data.styles);
+  const style = buildStyleObjectFromData(data.styles);
 
   return (
     <div
@@ -63,9 +68,10 @@ const EditBlockWrapper = (props) => {
       // Right now, we can have the alignment information in the styles property or in the
       // block data root, we inject the classname here for having control over the whole
       // Block Edit wrapper
-      className={cx(`block-editor-${data['@type']}`, styles, {
+      className={cx(`block-editor-${data['@type']}`, classNames, {
         [data.align]: data.align,
       })}
+      style={style}
     >
       <div style={{ position: 'relative' }}>
         <div
@@ -107,6 +113,8 @@ const EditBlockWrapper = (props) => {
               blocksConfig={blocksConfig}
               size="24px"
               properties={properties}
+              navRoot={navRoot}
+              contentType={contentType}
             />
           )}
         </div>

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

@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
-const Settings = ({ data, block, onChangeBlock, schema }) => {
+const Settings = ({
+  data,
+  block,
+  onChangeBlock,
+  schema,
+  navRoot,
+  contentType,
+}) => {
   return (
     <BlockDataForm
       schema={schema}
@@ -17,6 +24,8 @@ const Settings = ({ data, block, onChangeBlock, schema }) => {
       onChangeBlock={onChangeBlock}
       formData={data}
       applySchemaEnhancers={false}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

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

@@ -3,10 +3,12 @@ import cx from 'classnames';
 import {
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
 } from '@plone/volto/helpers';
 
 const StyleWrapper = (props) => {
-  let classNames = [];
+  let classNames,
+    style = [];
   const { children, content, data = {}, block } = props;
   classNames = buildStyleClassNamesFromData(data.styles);
 
@@ -16,11 +18,15 @@ const StyleWrapper = (props) => {
     data,
     classNames,
   });
+
+  style = buildStyleObjectFromData(data.styles);
+
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const childProps = {
         ...props,
         className: cx([child.props.className, ...classNames]),
+        style: { ...child.props.style, ...style },
       };
       return React.cloneElement(child, childProps);
     }

package/src/components/manage/Blocks/Container/Data.jsx

@@ -2,7 +2,8 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
 
 const ContainerData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
 
   const schema = blocksConfig[data['@type']].blockSchema({ intl });
@@ -25,6 +26,8 @@ const ContainerData = (props) => {
       block={block}
       onChangeBlock={onChangeBlock}
       blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Grid/View.jsx

@@ -5,7 +5,7 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const GridBlockView = (props) => {
-  const { data, path, className } = props;
+  const { data, path, className, style } = props;
   const metadata = props.metadata || props.properties;
   const columns = data.blocks_layout.items;
   const blocksConfig =
@@ -22,6 +22,7 @@ const GridBlockView = (props) => {
         three: columns?.length === 3,
         four: columns?.length === 4,
       })}
+      style={style}
     >
       {data.headline && <h2 className="headline">{data.headline}</h2>}
 

package/src/components/manage/Blocks/HeroImageLeft/Data.jsx

@@ -4,7 +4,7 @@ import schemaHero from './schema.js';
 import { BlockDataForm } from '@plone/volto/components';
 
 const HeroImageLeftBlockData = (props) => {
-  const { block, data, onChangeBlock } = props;
+  const { block, data, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = schemaHero({ ...props, intl });
   return (
@@ -20,6 +20,8 @@ const HeroImageLeftBlockData = (props) => {
       onChangeBlock={onChangeBlock}
       formData={data}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

@@ -9,7 +9,8 @@ import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const ImageSidebar = (props) => {
-  const { blocksConfig, data, block, onChangeBlock } = props;
+  const { blocksConfig, data, block, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = ImageSchema({ formData: data, intl });
   return (
@@ -94,6 +95,8 @@ const ImageSidebar = (props) => {
         formData={data}
         block={block}
         blocksConfig={blocksConfig}
+        navRoot={navRoot}
+        contentType={contentType}
       />
     </>
   );

package/src/components/manage/Blocks/Image/View.jsx

@@ -9,7 +9,7 @@ import {
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-export const View = ({ className, data, detached, properties }) => {
+export const View = ({ className, data, detached, properties, style }) => {
   const href = data?.href?.[0]?.['@id'] || '';
 
   const Image = config.getComponent({ name: 'Image' }).component;
@@ -25,6 +25,7 @@ export const View = ({ className, data, detached, properties }) => {
         data.align,
         className,
       )}
+      style={style}
     >
       {data.url && (
         <>

package/src/components/manage/Blocks/Listing/ListingData.jsx

@@ -4,7 +4,8 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
 
 const ListingData = (props) => {
-  const { data, block, blocksConfig, onChangeBlock } = props;
+  const { data, block, blocksConfig, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = blocksConfig.listing.blockSchema({
     ...props,
@@ -25,6 +26,8 @@ const ListingData = (props) => {
       formData={data}
       blocksConfig={blocksConfig}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Listing/View.jsx

@@ -6,11 +6,12 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 import { ListingBlockBody as ListingBody } from '@plone/volto/components';
 
 const View = (props) => {
-  const { data, path, pathname, className } = props;
+  const { data, path, pathname, className, style } = props;
 
   return (
     <div
       className={cx('block listing', data.variation || 'default', className)}
+      style={style}
     >
       <ListingBody {...props} path={path ?? pathname} />
     </div>

package/src/components/manage/Blocks/Maps/MapsSidebar.jsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const MapsSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = MapsSchema({ ...props, intl });
 
@@ -42,6 +42,8 @@ const MapsSidebar = (props) => {
           onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       )}
     </>

package/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -26,6 +26,8 @@ const SearchBlockEdit = (props) => {
     data,
     selected,
     intl,
+    navRoot,
+    contentType,
     onTriggerSearch,
     querystring = {},
   } = props;
@@ -83,6 +85,8 @@ const SearchBlockEdit = (props) => {
           }}
           onChangeBlock={onChangeBlock}
           formData={data}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       </SidebarPortal>
     </>

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -96,9 +96,21 @@ function normalizeState({
   const { types: facetWidgetTypes } =
     config.blocks.blocksConfig.search.extensions.facetWidgets;
 
+  // Here, we are removing the QueryString of the Listing ones, which is present in the Facet
+  // because we already initialize the facet with those values.
+  const configuredFacets = facetSettings
+    ? facetSettings.map((facet) => facet?.field?.value)
+    : [];
+
+  let copyOfQuery = query.query ? [...query.query] : [];
+
+  const queryWithoutFacet = copyOfQuery.filter((query) => {
+    return !configuredFacets.includes(query.i);
+  });
+
   const params = {
     query: [
-      ...(query.query || []),
+      ...(queryWithoutFacet || []),
       ...(facetSettings || []).map((facet) => {
         if (!facet?.field) return null;
 
@@ -261,14 +273,34 @@ const withSearch = (options) => (WrappedComponent) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const configuredFacets =
       data.facets?.map((facet) => facet?.field?.value) || [];
+
+    // Here we are getting the initial value of the facet if Listing Query contains the same criteria as
+    // facet.
+    const queryData = data?.query?.query
+      ? deserializeQuery(JSON.stringify(data?.query?.query))
+      : [];
+
+    let intializeFacetWithQueryValue = [];
+
+    for (let value of configuredFacets) {
+      const queryString = queryData.find((item) => item.i === value);
+      if (queryString) {
+        intializeFacetWithQueryValue = [
+          ...intializeFacetWithQueryValue,
+          { [queryString.i]: queryString.v },
+        ];
+      }
+    }
+
     const multiFacets = data.facets
       ?.filter((facet) => facet?.multiple)
       .map((facet) => facet?.field?.value);
     const [facets, setFacets] = React.useState(
       Object.assign(
         {},
-        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
-
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
+        // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+        ...intializeFacetWithQueryValue,
         // support for simple filters like ?Subject=something
         // TODO: since the move to hash params this is no longer working.
         // We'd have to treat the location.search and manage it just like the
@@ -288,8 +320,17 @@ const withSearch = (options) => (WrappedComponent) => {
     );
     const previousUrlQuery = usePrevious(urlQuery);
 
+    // During first render the previousUrlQuery is undefined and urlQuery
+    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
+    // to set the facet at first render.
+    const preventOverrideOfFacetState =
+      previousUrlQuery === undefined && urlQuery.length === 0;
+
     React.useEffect(() => {
-      if (!isEqual(urlQuery, previousUrlQuery)) {
+      if (
+        !isEqual(urlQuery, previousUrlQuery) &&
+        !preventOverrideOfFacetState
+      ) {
         setFacets(
           Object.assign(
             {},
@@ -319,6 +360,7 @@ const withSearch = (options) => (WrappedComponent) => {
       locationSearchData,
       multiFacets,
       previousUrlQuery,
+      preventOverrideOfFacetState,
     ]);
 
     const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -14,7 +14,8 @@ const messages = defineMessages({
 });
 
 const TeaserData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
 
   const reset = () => {
@@ -64,6 +65,8 @@ const TeaserData = (props) => {
       block={block}
       blocksConfig={blocksConfig}
       headerActions={HeaderActions}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };