@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.20

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/Container/NewBlockAddButton.jsx

@@ -5,7 +5,7 @@ import { BlockChooser, Icon } from '@plone/volto/components';
 import { useDetectClickOutside } from '@plone/volto/helpers';
 import addSVG from '@plone/volto/icons/add.svg';
 import { usePopper } from 'react-popper';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 const messages = defineMessages({
   addBlock: {
@@ -59,24 +59,25 @@ const NewBlockAddButton = (props) => {
           <Icon name={addSVG} className="circled" size="24px" />
         </Button>
       </Ref>
-      {isOpenMenu ? (
-        <Portal node={document.getElementById('body')}>
-          <div
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-            className="container-chooser-wrapper"
-          >
-            <BlockChooser
-              onMutateBlock={onMutateBlock}
-              currentBlock={block}
-              showRestricted
-              blocksConfig={blocksConfig}
-              ref={blockChooserRef}
-            />
-          </div>
-        </Portal>
-      ) : null}
+      {isOpenMenu
+        ? createPortal(
+            <div
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+              className="container-chooser-wrapper"
+            >
+              <BlockChooser
+                onMutateBlock={onMutateBlock}
+                currentBlock={block}
+                showRestricted
+                blocksConfig={blocksConfig}
+                ref={blockChooserRef}
+              />
+            </div>,
+            document.body,
+          )
+        : null}
     </>
   );
 };

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/Image/Edit.jsx

@@ -283,19 +283,19 @@ class Edit extends Component {
               data.image_scales
                 ? undefined
                 : isInternalURL(data.url)
-                ? // Backwards compat in the case that the block is storing the full server URL
-                  (() => {
-                    if (data.size === 'l')
+                  ? // Backwards compat in the case that the block is storing the full server URL
+                    (() => {
+                      if (data.size === 'l')
+                        return `${flattenToAppURL(data.url)}/@@images/image`;
+                      if (data.size === 'm')
+                        return `${flattenToAppURL(
+                          data.url,
+                        )}/@@images/image/preview`;
+                      if (data.size === 's')
+                        return `${flattenToAppURL(data.url)}/@@images/image/mini`;
                       return `${flattenToAppURL(data.url)}/@@images/image`;
-                    if (data.size === 'm')
-                      return `${flattenToAppURL(
-                        data.url,
-                      )}/@@images/image/preview`;
-                    if (data.size === 's')
-                      return `${flattenToAppURL(data.url)}/@@images/image/mini`;
-                    return `${flattenToAppURL(data.url)}/@@images/image`;
-                  })()
-                : data.url
+                    })()
+                  : data.url
             }
             sizes={config.blocks.blocksConfig.image.getSizes(data)}
             alt={data.alt || ''}

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 (
@@ -60,9 +61,9 @@ const ImageSidebar = (props) => {
                 data.image_scales
                   ? undefined
                   : isInternalURL(data.url)
-                  ? // Backwards compat in the case that the block is storing the full server URL
-                    `${flattenToAppURL(data.url)}/@@images/image/preview`
-                  : data.url
+                    ? // Backwards compat in the case that the block is storing the full server URL
+                      `${flattenToAppURL(data.url)}/@@images/image/preview`
+                    : data.url
               }
               sizes="188px"
               alt={intl.formatMessage(messages.preview)}
@@ -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 && (
         <>
@@ -50,21 +51,21 @@ export const View = ({ className, data, detached, properties }) => {
                   data.image_scales
                     ? undefined
                     : isInternalURL(data.url)
-                    ? // Backwards compat in the case that the block is storing the full server URL
-                      (() => {
-                        if (data.size === 'l')
+                      ? // Backwards compat in the case that the block is storing the full server URL
+                        (() => {
+                          if (data.size === 'l')
+                            return `${flattenToAppURL(data.url)}/@@images/image`;
+                          if (data.size === 'm')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/preview`;
+                          if (data.size === 's')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/mini`;
                           return `${flattenToAppURL(data.url)}/@@images/image`;
-                        if (data.size === 'm')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/preview`;
-                        if (data.size === 's')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/mini`;
-                        return `${flattenToAppURL(data.url)}/@@images/image`;
-                      })()
-                    : data.url
+                        })()
+                      : data.url
                 }
                 sizes={config.blocks.blocksConfig.image.getSizes(data)}
                 alt={data.alt || ''}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';

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/Listing/getAsyncData.js

@@ -1,15 +1,29 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
+import qs from 'query-string';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+const getCurrentPage = (location, id) => {
+  const pageQueryParam = qs.parse(location.search);
+  switch (Object.keys(pageQueryParam).length) {
+    case 0:
+      return 1;
+    case 1:
+      // when there is only one query param, it could be the simple page number or the sluggified block id
+      return pageQueryParam['page'] || pageQueryParam[slugify(`page-${id}`)];
+    default:
+      return pageQueryParam[slugify(`page-${id}`)];
+  }
+};
+
+export default function getListingBlockAsyncData(props) {
+  const { data, path, location, id, dispatch, blocksConfig, content } = props;
 
-export default function getListingBlockAsyncData({
-  dispatch,
-  id,
-  data,
-  path,
-  blocksConfig,
-}) {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
+  const subrequestID = content?.UID ? `${content?.UID}-${id}` : id;
+  const currentPage = getCurrentPage(location, id);
+
   return [
     dispatch(
       getQueryStringResults(
@@ -20,7 +34,8 @@ export default function getListingBlockAsyncData({
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),
         },
-        id,
+        subrequestID,
+        currentPage,
       ),
     ),
   ];

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

@@ -67,19 +67,19 @@ export default function withQuerystringResults(WrappedComponent) {
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[subrequestID].total / b_size)
-      : 0;
+        ? Math.ceil(querystringResults[subrequestID].total / b_size)
+        : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[subrequestID].batching?.prev
-      : null;
+        ? querystringResults[subrequestID].batching?.prev
+        : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[subrequestID].batching?.next
-      : null;
+        ? querystringResults[subrequestID].batching?.next
+        : null;
 
     const isImageGallery =
       (!data.variation && data.template === 'imageGallery') ||

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;
@@ -61,9 +63,15 @@ const SearchBlockEdit = (props) => {
   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 (
     <>
@@ -83,6 +91,8 @@ const SearchBlockEdit = (props) => {
           }}
           onChangeBlock={onChangeBlock}
           formData={data}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       </SidebarPortal>
     </>

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

@@ -48,8 +48,8 @@ export const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

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

@@ -40,8 +40,8 @@ const CheckboxFacet = (props) => {
                         ...(checked ? [value] : []),
                       ]
                     : checked
-                    ? value
-                    : null,
+                      ? value
+                      : null,
                 )
               }
             />

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

@@ -144,8 +144,8 @@ const Facets = (props) => {
                 ? intl.formatMessage(messages.showFilters)
                 : intl.formatMessage(messages.moreFilters)
               : advancedFilters === 2
-              ? intl.formatMessage(messages.hideFilters)
-              : intl.formatMessage(messages.lessFilters)}
+                ? intl.formatMessage(messages.hideFilters)
+                : intl.formatMessage(messages.lessFilters)}
           </Button>
         </Grid.Column>
       )}

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

@@ -48,8 +48,8 @@ export const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },
@@ -98,8 +98,8 @@ export const sortOnSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

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);
@@ -362,12 +404,12 @@ const withSearch = (options) => (WrappedComponent) => {
               query: data.query || {},
               facets: toSearchFacets || facets,
               searchText: toSearchText ? toSearchText.trim() : '',
-              sortOn: toSortOn || sortOn,
+              sortOn: toSortOn || undefined,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
             });
             if (toSearchFacets) setFacets(toSearchFacets);
-            if (toSortOn) setSortOn(toSortOn);
+            if (toSortOn) setSortOn(toSortOn || undefined);
             if (toSortOrder) setSortOrder(toSortOrder);
             setSearchData(newSearchData);
             setLocationSearchData(getSearchFields(newSearchData));

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}
     />
   );
 };

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

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const TeaserDefaultTemplate = (props) => {
-  const { className, data, isEditMode } = props;
+  const { className, data, isEditMode, style } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
@@ -27,7 +27,7 @@ const TeaserDefaultTemplate = (props) => {
   const { openExternalLinkInNewTab } = config.settings;
 
   return (
-    <div className={cx('block teaser', className)}>
+    <div className={cx('block teaser', className)} style={style}>
       <>
         {!href && isEditMode && (
           <Message>

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

@@ -27,6 +27,8 @@ class Edit extends Component {
             onChangeBlock={this.props.onChangeBlock}
             formData={this.props.data}
             block={this.props.block}
+            navRoot={this.props.navRoot}
+            contentType={this.props.contentType}
           />
         </SidebarPortal>
       </>