@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

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

@@ -144,12 +144,14 @@ export class Edit extends Component {
         {Block !== null ? (
           <div
             role="presentation"
-            onMouseOver={() => {
+            onMouseEnter={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
               if (this.props.hovered !== this.props.id) {
                 this.props.setUIState({ hovered: this.props.id });
               }
             }}
-            onFocus={() => {
+            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
@@ -158,7 +160,11 @@ export class Edit extends Component {
               //   this.props.setUIState({ hovered: this.props.id });
               // }
             }}
-            onMouseLeave={() => this.props.setUIState({ hovered: null })}
+            onMouseLeave={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.props.setUIState({ hovered: null });
+            }}
             onClick={(e) => {
               const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
               !this.props.selected &&
@@ -207,11 +213,21 @@ export class Edit extends Component {
         ) : (
           <div
             role="presentation"
-            onMouseOver={() =>
-              this.props.setUIState({ hovered: this.props.id })
-            }
-            onFocus={() => this.props.setUIState({ hovered: this.props.id })}
-            onMouseLeave={() => this.props.setUIState({ hovered: null })}
+            onMouseEnter={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.props.setUIState({ hovered: this.props.id });
+            }}
+            onFocus={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.props.setUIState({ hovered: this.props.id });
+            }}
+            onMouseLeave={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.props.setUIState({ hovered: null });
+            }}
             onClick={() =>
               !this.props.selected && this.props.onSelectBlock(this.props.id)
             }

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Icon } from '@plone/volto/components';
 import {
+  applyBlockInitialValue,
+  getBlocksFieldname,
   blockHasValue,
   buildStyleClassNamesFromData,
   buildStyleObjectFromData,
@@ -111,7 +113,21 @@ const EditBlockWrapper = (props) => {
                 if (blockHasValue(data)) {
                   onSelectBlock(onInsertBlock(id, value));
                 } else {
-                  onChangeBlock(id, value);
+                  const blocksFieldname = getBlocksFieldname(properties);
+                  const newFormData = applyBlockInitialValue({
+                    id,
+                    value,
+                    blocksConfig,
+                    formData: {
+                      ...properties,
+                      [blocksFieldname]: {
+                        ...properties[blocksFieldname],
+                        [id]: value || null,
+                      },
+                    },
+                  });
+                  const newValue = newFormData[blocksFieldname][id];
+                  onChangeBlock(id, newValue);
                 }
               }}
               onMutateBlock={onMutateBlock}

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

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { includes } from 'lodash';
-
+import cx from 'classnames';
 import { Icon } from '@plone/volto/components';
 import { setUIState } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
@@ -28,6 +28,7 @@ export const Item = forwardRef(
       style,
       value,
       wrapperRef,
+      errors,
       ...props
     },
     ref,
@@ -37,6 +38,7 @@ export const Item = forwardRef(
     const multiSelected = useSelector((state) => state.form.ui.multiSelected);
     const gridSelected = useSelector((state) => state.form.ui.gridSelected);
     const dispatch = useDispatch();
+
     return (
       <li
         className={classNames(
@@ -95,7 +97,11 @@ export const Item = forwardRef(
           >
             <Icon name={dragSVG} size="16px" />
           </button>
-          <span className="text">
+          <span
+            className={cx('text', {
+              errored: errors && Object.keys(errors).length > 0,
+            })}
+          >
             {config.blocks.blocksConfig[data?.['@type']]?.icon && (
               <Icon
                 name={config.blocks.blocksConfig[data?.['@type']]?.icon}

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

@@ -17,6 +17,7 @@ export function Order({
   dndKitCore,
   dndKitSortable,
   dndKitUtilities,
+  errors,
 }) {
   const [activeId, setActiveId] = useState(null);
   const [overId, setOverId] = useState(null);
@@ -146,6 +147,7 @@ export function Order({
             indentationWidth={indentationWidth}
             onRemove={removable ? () => handleRemove(id) : undefined}
             onSelectBlock={onSelectBlock}
+            errors={errors?.[id] || {}}
           />
         ))}
         {createPortal(

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

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

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

@@ -7,6 +7,9 @@ import config from '@plone/volto/registry';
 const GridBlockView = (props) => {
   const { data, path, className, style } = props;
   const metadata = props.metadata || props.properties;
+  if (data.blocks_layout === undefined) {
+    return null;
+  }
   const columns = data.blocks_layout.items;
   const blocksConfig =
     config.blocks.blocksConfig[data['@type']].blocksConfig ||

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

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

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

@@ -1,15 +1,8 @@
-/**
- * Edit image block.
- * @module components/manage/Blocks/Image/Edit
- */
-
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
-import { isEqual } from 'lodash';
 
 import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
 import config from '@plone/volto/registry';
@@ -23,124 +16,79 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Edit image block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    properties: PropTypes.objectOf(PropTypes.any).isRequired,
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Align block handler
-   * @method onAlignBlock
-   * @param {string} align Alignment option
-   * @returns {undefined}
-   */
-  onAlignBlock(align) {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      align,
-    });
-  }
-
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
-
-  node = React.createRef();
+const Edit = (props) => {
+  const intl = useIntl();
+  const { data, properties, selected } = props;
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const Image = config.getComponent({ name: 'Image' }).component;
-    const { data, properties } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
+  const placeholder = () =>
+    data.placeholder || intl.formatMessage(messages.ImageBlockInputPlaceholder);
 
-    const hasImage = !!properties.image;
-    const hasImageData = hasImage && !!properties.image.data;
-    const className = cx('responsive', { 'full-image': data.align === 'full' });
-    const altText = data.image_caption || properties.image_caption || '';
+  const Image = config.getComponent({ name: 'Image' }).component;
+  const hasImage = !!properties.image;
+  const hasImageData = hasImage && !!properties.image.data;
+  const className = cx('responsive', { 'full-image': data.align === 'full' });
+  const altText = data.image_caption || properties.image_caption || '';
 
-    return (
-      <div
-        className={cx(
-          'block image align',
-          {
-            center: !Boolean(data.align),
-          },
-          data.align,
-        )}
-      >
-        {!hasImage && (
-          <Message>
-            <center>
-              <img src={imageBlockSVG} alt="" />
-              <div className="message-text">{placeholder}</div>
-            </center>
-          </Message>
-        )}
-        {hasImage && hasImageData && (
-          <img
-            className={className}
-            src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
-            width={properties.image.width}
-            height={properties.image.height}
-            alt={altText}
-            style={{
-              aspectRatio: `${properties.image.width}/${properties.image.height}`,
-            }}
-          />
-        )}
-        {hasImage && !hasImageData && (
-          <Image
-            className={className}
-            item={properties}
-            imageField="image"
-            sizes={(() => {
-              if (data.align === 'full' || data.align === 'center')
-                return '100vw';
-              if (data.align === 'left' || data.align === 'right')
-                return '50vw';
-              return undefined;
-            })()}
-            alt={altText}
-          />
-        )}
-        <SidebarPortal selected={this.props.selected}>
-          <LeadImageSidebar {...this.props} />
-        </SidebarPortal>
-      </div>
-    );
-  }
-}
+  return (
+    <div
+      className={cx(
+        'block image align',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {!hasImage && (
+        <Message>
+          <center>
+            <img src={imageBlockSVG} alt="" />
+            <div className="message-text">{placeholder}</div>
+          </center>
+        </Message>
+      )}
+      {hasImage && hasImageData && (
+        <img
+          className={className}
+          src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
+          width={properties.image.width}
+          height={properties.image.height}
+          alt={altText}
+          style={{
+            aspectRatio: `${properties.image.width}/${properties.image.height}`,
+          }}
+        />
+      )}
+      {hasImage && !hasImageData && (
+        <Image
+          className={className}
+          item={properties}
+          imageField="image"
+          sizes={(() => {
+            return data.align === 'full' || data.align === 'center'
+              ? '100vw'
+              : data.align === 'left' || data.align === 'right'
+                ? '50vw'
+                : undefined;
+          })()}
+          alt={altText}
+        />
+      )}
+      <SidebarPortal selected={selected}>
+        <LeadImageSidebar {...props} />
+      </SidebarPortal>
+    </div>
+  );
+};
 
-export default compose(injectIntl)(Edit);
+export default Edit;
+Edit.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  pathname: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  openObjectBrowser: PropTypes.func.isRequired,
+};

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

@@ -4,8 +4,15 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const ListingData = (props) => {
-  const { data, block, blocksConfig, onChangeBlock, navRoot, contentType } =
-    props;
+  const {
+    data,
+    block,
+    blocksConfig,
+    blocksErrors,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const intl = useIntl();
   const schema = blocksConfig.listing.blockSchema({
     ...props,
@@ -28,6 +35,7 @@ const ListingData = (props) => {
       block={block}
       navRoot={navRoot}
       contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };

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

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

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

@@ -23,6 +23,7 @@ const messages = defineMessages({
 const SearchBlockEdit = (props) => {
   const {
     block,
+    blocksErrors,
     onChangeBlock,
     data,
     selected,
@@ -94,6 +95,7 @@ const SearchBlockEdit = (props) => {
           formData={data}
           navRoot={navRoot}
           contentType={contentType}
+          errors={blocksErrors}
         />
       </SidebarPortal>
     </>

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

@@ -49,10 +49,26 @@ const applyDefaults = (data, root) => {
       v: root || '/',
     },
   ];
+
+  const searchBySearchableText = data.query.filter(
+    (item) => item['i'] === 'SearchableText',
+  ).length;
+
+  const sort_on = data?.sort_on
+    ? { sort_on: data.sort_on }
+    : searchBySearchableText === 0
+      ? { sort_on: 'effective' }
+      : {};
+  const sort_order = data?.sort_order
+    ? { sort_order: data.sort_order }
+    : searchBySearchableText === 0
+      ? { sort_order: 'descending' }
+      : {};
+
   return {
     ...data,
-    sort_on: data?.sort_on || 'effective',
-    sort_order: data?.sort_order || 'descending',
+    ...sort_on,
+    ...sort_order,
     query: data?.query?.length ? data.query : defaultQuery,
   };
 };