@plone/volto 18.0.0-alpha.42 → 18.0.0-alpha.44

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Icon } from '@plone/volto/components';
 import {
+  applyBlockInitialValue,
+  getBlocksFieldname,
   blockHasValue,
   buildStyleClassNamesFromData,
   buildStyleObjectFromData,
+  buildStyleClassNamesExtenders,
 } from '@plone/volto/helpers';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { Button } from 'semantic-ui-react';
@@ -59,7 +62,12 @@ const EditBlockWrapper = (props) => {
     ? data.required
     : includes(config.blocks.requiredBlocks, type);
 
-  const classNames = buildStyleClassNamesFromData(data.styles);
+  let classNames = buildStyleClassNamesFromData(data.styles);
+  classNames = buildStyleClassNamesExtenders({
+    block,
+    data,
+    classNames,
+  });
   const style = buildStyleObjectFromData(data.styles);
 
   // We need to merge the StyleWrapper styles with the draggable props from b-D&D
@@ -111,7 +119,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

@@ -98,7 +98,9 @@ export const Item = forwardRef(
             <Icon name={dragSVG} size="16px" />
           </button>
           <span
-            className={cx('text', { errored: Object.keys(errors).length > 0 })}
+            className={cx('text', {
+              errored: errors && Object.keys(errors).length > 0,
+            })}
           >
             {config.blocks.blocksConfig[data?.['@type']]?.icon && (
               <Icon

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/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/Search/components/CheckboxFacet.jsx

@@ -21,6 +21,7 @@ const CheckboxFacet = (props) => {
         {choices.map(({ label, value }, i) => (
           <div className="entry" key={value}>
             <Checkbox
+              id={value}
               disabled={isEditMode}
               label={label}
               radio={!isMulti}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
@@ -31,6 +30,10 @@ const messages = defineMessages({
     id: 'Descending',
     defaultMessage: 'Descending',
   },
+  sortedOn: {
+    id: 'Sorted on',
+    defaultMessage: 'Sorted on',
+  },
 });
 
 const SortOn = (props) => {
@@ -48,9 +51,17 @@ const SortOn = (props) => {
   const { sortable_indexes } = querystring;
   const Select = reactSelect.default;
 
-  const activeSortOn = sortOn || data?.query?.sort_on || '';
+  const defaultSortOn = data?.query?.sort_on || '';
+  const activeSortOn = sortOn || defaultSortOn;
+
+  let { sortOnOptions = [] } = data;
+  sortOnOptions = [defaultSortOn, ...sortOnOptions];
+  sortOnOptions = [...new Set(sortOnOptions)];
 
-  const { sortOnOptions = [] } = data;
+  const showSelectField = sortOnOptions.length > 1;
+  if (!showSelectField && !activeSortOn) {
+    return null;
+  }
   const value = {
     value: activeSortOn || intl.formatMessage(messages.noSelection),
     label:
@@ -62,59 +73,75 @@ const SortOn = (props) => {
   return (
     <div className="search-sort-wrapper">
       <div className="search-sort-on">
-        <span className="sort-label">
-          {intl.formatMessage(messages.sortOn)}
-        </span>
-        <Select
-          id="select-search-sort-on"
-          name="select-searchblock-sort-on"
-          className="search-react-select-container"
-          classNamePrefix="react-select"
-          placeholder={intl.formatMessage(messages.sortOn)}
-          styles={sortOnSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          options={[
-            ...sortOnOptions.map((k) => ({
-              value: k,
-              label: sortable_indexes[k]?.title || k,
-            })),
-          ]}
-          isSearchable={false}
-          value={value}
-          onChange={(data) => {
-            !isEditMode && setSortOn(data.value);
-          }}
-        />
+        {showSelectField ? (
+          <>
+            <span className="sort-label">
+              {intl.formatMessage(messages.sortOn)}
+            </span>
+            <Select
+              id="select-search-sort-on"
+              name="select-searchblock-sort-on"
+              className="search-react-select-container"
+              classNamePrefix="react-select"
+              placeholder={intl.formatMessage(messages.sortOn)}
+              styles={sortOnSelectStyles}
+              theme={selectTheme}
+              components={{ DropdownIndicator, Option }}
+              options={[
+                ...sortOnOptions.map((k) => ({
+                  value: k,
+                  label:
+                    sortable_indexes[k]?.title ||
+                    k ||
+                    intl.formatMessage(messages.noSelection),
+                })),
+              ]}
+              isSearchable={false}
+              value={value}
+              onChange={(data) => {
+                !isEditMode && setSortOn(data.value);
+              }}
+            />
+          </>
+        ) : (
+          <span className="sorted-label">
+            {intl.formatMessage(messages.sortedOn)}
+            <span className="sorted-label-value">{value.label}</span>
+          </span>
+        )}
       </div>
-      <Button
-        icon
-        basic
-        compact
-        title={intl.formatMessage(messages.ascending)}
-        className={cx({
-          active: sortOrder === 'ascending',
-        })}
-        onClick={() => {
-          !isEditMode && setSortOrder('ascending');
-        }}
-      >
-        <Icon name={upSVG} size="25px" />
-      </Button>
-      <Button
-        icon
-        basic
-        compact
-        title={intl.formatMessage(messages.descending)}
-        className={cx({
-          active: sortOrder === 'descending',
-        })}
-        onClick={() => {
-          !isEditMode && setSortOrder('descending');
-        }}
-      >
-        <Icon name={downSVG} size="25px" />
-      </Button>
+      {activeSortOn ? (
+        <>
+          <Button
+            icon
+            basic
+            compact
+            title={intl.formatMessage(messages.ascending)}
+            className={cx({
+              active: sortOrder === 'ascending',
+            })}
+            onClick={() => {
+              !isEditMode && setSortOrder('ascending');
+            }}
+          >
+            <Icon name={downSVG} size="25px" />
+          </Button>
+          <Button
+            icon
+            basic
+            compact
+            title={intl.formatMessage(messages.descending)}
+            className={cx({
+              active: sortOrder === 'descending',
+            })}
+            onClick={() => {
+              !isEditMode && setSortOrder('descending');
+            }}
+          >
+            <Icon name={upSVG} size="25px" />
+          </Button>
+        </>
+      ) : null}
     </div>
   );
 };