@plone/volto 17.0.0-alpha.20 → 17.0.0-alpha.22

package/src/components/manage/Actions/Actions.jsx

@@ -1,16 +1,10 @@
-/**
- * Actions component.
- * @module components/manage/Actions/Actions
- */
-
-import React, { Component } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Dropdown, Icon } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { cut, copy, copyContent, moveContent } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
@@ -55,267 +49,163 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Actions container class.
- * @class Actions
- * @extends Component
- */
-class Actions extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    actions: PropTypes.shape({
-      object: PropTypes.arrayOf(PropTypes.object),
-      object_buttons: PropTypes.arrayOf(PropTypes.object),
-      user: PropTypes.arrayOf(PropTypes.object),
-    }),
-    pathname: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    action: PropTypes.string,
-    source: PropTypes.arrayOf(PropTypes.string),
-    cut: PropTypes.func.isRequired,
-    copy: PropTypes.func.isRequired,
-    copyContent: PropTypes.func.isRequired,
-    moveContent: PropTypes.func.isRequired,
-  };
+const Actions = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [showRename, setshowRename] = useState(false);
+  const actions = useSelector((state) => state.actions.actions, shallowEqual);
+  const action = useSelector((state) => state.clipboard.action);
+  const source = useSelector((state) => state.clipboard.source, shallowEqual);
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    action: null,
-    actions: null,
-    source: null,
-  };
+  const id = useSelector((state) =>
+    state.content.data ? state.content.data.id : '',
+  );
+  const title = useSelector((state) =>
+    state.content.data ? state.content.data.title : '',
+  );
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Actions
-   */
-  constructor(props) {
-    super(props);
-    this.cut = this.cut.bind(this);
-    this.copy = this.copy.bind(this);
-    this.paste = this.paste.bind(this);
-    this.rename = this.rename.bind(this);
-    this.onRenameOk = this.onRenameOk.bind(this);
-    this.onRenameCancel = this.onRenameCancel.bind(this);
-    this.state = {
-      showRename: false,
-    };
-  }
+  const onRenameOk = () => {
+    setshowRename(false);
+  };
 
-  /**
-   * On rename ok
-   * @method onRenameOk
-   * @returns {undefined}
-   */
-  onRenameOk() {
-    this.setState({
-      showRename: false,
-    });
-  }
+  const onRenameCancel = () => {
+    setshowRename(false);
+  };
 
-  /**
-   * On rename cancel
-   * @method onRenameCancel
-   * @returns {undefined}
-   */
-  onRenameCancel() {
-    this.setState({
-      showRename: false,
-    });
-  }
+  const fncut = () => {
+    dispatch(cut([getBaseUrl(props.pathname)]));
 
-  /**
-   * Cut handler
-   * @method cut
-   * @returns {undefined}
-   */
-  cut() {
-    this.props.cut([getBaseUrl(this.props.pathname)]);
     toast.success(
       <Toast
         success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.messageCut, {
-          title: this.props.title,
+        title={intl.formatMessage(messages.success)}
+        content={intl.formatMessage(messages.messageCut, {
+          title: title,
         })}
       />,
     );
-  }
+  };
 
-  /**
-   * Copy handler
-   * @method copy
-   * @returns {undefined}
-   */
-  copy() {
-    this.props.copy([getBaseUrl(this.props.pathname)]);
+  const fncopy = () => {
+    dispatch(copy([getBaseUrl(props.pathname)]));
     toast.success(
       <Toast
         success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.messageCopied, {
-          title: this.props.title,
+        title={intl.formatMessage(messages.success)}
+        content={intl.formatMessage(messages.messageCopied, {
+          title: title,
         })}
       />,
     );
-  }
+  };
 
-  /**
-   * Paste handler
-   * @method paste
-   * @returns {undefined}
-   */
-  paste() {
-    if (this.props.action === 'copy') {
-      this.props.copyContent(
-        this.props.source,
-        getBaseUrl(this.props.pathname),
-      );
+  const paste = () => {
+    if (action === 'copy') {
+      dispatch(copyContent(source, getBaseUrl(props.pathname)));
     }
-    if (this.props.action === 'cut') {
-      this.props.moveContent(
-        this.props.source,
-        getBaseUrl(this.props.pathname),
-      );
+    if (action === 'cut') {
+      dispatch(moveContent(source, getBaseUrl(props.pathname)));
     }
     toast.success(
       <Toast
         success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.messagePasted)}
+        title={intl.formatMessage(messages.success)}
+        content={intl.formatMessage(messages.messagePasted)}
       />,
     );
-  }
+  };
 
-  /**
-   * Rename handler
-   * @method rename
-   * @returns {undefined}
-   */
-  rename() {
-    this.setState({
-      showRename: true,
-    });
-  }
+  const rename = () => {
+    setshowRename(true);
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Dropdown
-        item
-        id="toolbar-actions"
-        trigger={
-          <span>
-            <Icon name="lightning" size="big" />{' '}
-            <FormattedMessage id="Actions" defaultMessage="Actions" />
-          </span>
-        }
-      >
-        <Dropdown.Menu>
-          {this.props.actions.object_buttons &&
-            this.props.actions.object_buttons.map((item) => {
-              switch (item.id) {
-                case 'cut':
-                  return (
-                    <Dropdown.Item
-                      key={item.id}
-                      icon="cut"
-                      text={item.title}
-                      onClick={this.cut}
-                    />
-                  );
-                case 'copy':
-                  return (
-                    <Dropdown.Item
-                      key={item.id}
-                      icon="copy"
-                      text={item.title}
-                      onClick={this.copy}
-                    />
-                  );
-                case 'paste':
-                  return (
-                    <Dropdown.Item
-                      key={item.id}
-                      icon="paste"
-                      text={item.title}
-                      onClick={this.paste}
-                      disabled={this.props.action === null}
-                    />
-                  );
-                case 'delete':
-                  return (
-                    <Link
-                      key={item.id}
-                      to={`${this.props.pathname}/delete`}
-                      className="item"
-                    >
-                      <Icon name="trash" />
-                      {item.title}
-                    </Link>
-                  );
-                case 'rename':
-                  return (
-                    <Dropdown.Item
-                      key={item.id}
-                      icon="text cursor"
-                      text={item.title}
-                      onClick={this.rename}
-                    />
-                  );
-                default:
-                  return null;
-              }
-            })}
+  return (
+    <Dropdown
+      item
+      id="toolbar-actions"
+      trigger={
+        <span>
+          <Icon name="lightning" size="big" />{' '}
+          <FormattedMessage id="Actions" defaultMessage="Actions" />
+        </span>
+      }
+    >
+      <Dropdown.Menu>
+        {actions.object_buttons &&
+          actions.object_buttons.map((item) => {
+            switch (item.id) {
+              case 'cut':
+                return (
+                  <Dropdown.Item
+                    key={item.id}
+                    icon="cut"
+                    text={item.title}
+                    onClick={fncut}
+                  />
+                );
+              case 'copy':
+                return (
+                  <Dropdown.Item
+                    key={item.id}
+                    icon="copy"
+                    text={item.title}
+                    onClick={fncopy}
+                  />
+                );
+              case 'paste':
+                return (
+                  <Dropdown.Item
+                    key={item.id}
+                    icon="paste"
+                    text={item.title}
+                    onClick={paste}
+                    disabled={action === null}
+                  />
+                );
+              case 'delete':
+                return (
+                  <Link
+                    key={item.id}
+                    to={`${props.pathname}/delete`}
+                    className="item"
+                  >
+                    <Icon name="trash" />
+                    {item.title}
+                  </Link>
+                );
+              case 'rename':
+                return (
+                  <Dropdown.Item
+                    key={item.id}
+                    icon="text cursor"
+                    text={item.title}
+                    onClick={rename}
+                  />
+                );
+              default:
+                return null;
+            }
+          })}
 
-          <ContentsRenameModal
-            open={this.state.showRename}
-            onCancel={this.onRenameCancel}
-            onOk={this.onRenameOk}
-            items={[
-              {
-                url: this.props.pathname,
-                title: this.props.title,
-                id: this.props.id,
-              },
-            ]}
-          />
-        </Dropdown.Menu>
-      </Dropdown>
-    );
-  }
-}
+        <ContentsRenameModal
+          open={showRename}
+          onCancel={onRenameCancel}
+          onOk={onRenameOk}
+          items={[
+            {
+              url: props.pathname,
+              title: title,
+              id: id,
+            },
+          ]}
+        />
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+Actions.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      actions: state.actions.actions,
-      action: state.clipboard.action,
-      source: state.clipboard.source,
-      id: state.content.data ? state.content.data.id : '',
-      title: state.content.data ? state.content.data.title : '',
-    }),
-    {
-      cut,
-      copy,
-      copyContent,
-      moveContent,
-    },
-  ),
-)(Actions);
+export default Actions;

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

@@ -43,9 +43,12 @@ const ContainerBlockEdit = (props) => {
   const EditBlockWrapper =
     blockConfig.editBlockWrapper || DefaultEditBlockWrapper;
 
-  const [selectedBlock, setSelectedBlock] = useState(
+  let [selectedBlock, setSelectedBlock] = useState(
     properties.blocks_layout.items[0],
   );
+  if (props.setSelectedBlock) {
+    ({ selectedBlock, setSelectedBlock } = props);
+  }
 
   const blockState = {};
 

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

@@ -49,6 +49,7 @@ const EditBlockWrapper = (props) => {
         role="presentation"
         className="cell-wrapper"
         onClick={(e) => {
+          e.stopPropagation();
           onSelectBlock(block);
         }}
       >

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { useState } from 'react';
 import ContainerEdit from '../Container/Edit';
 
 const GridBlockEdit = (props) => {
@@ -7,6 +8,8 @@ const GridBlockEdit = (props) => {
 
   const columnsLength = data?.blocks_layout?.items?.length || 0;
 
+  const [selectedBlock, setSelectedBlock] = useState(null);
+
   return (
     <div
       className={cx({
@@ -16,8 +19,17 @@ const GridBlockEdit = (props) => {
         four: columnsLength >= 4,
         'grid-items': true,
       })}
+      // This is required to enabling a small "in-between" clickable area
+      // for bringing the Grid sidebar alive once you have selected an inner block
+      onClick={(e) => setSelectedBlock(null)}
+      role="presentation"
     >
-      <ContainerEdit {...props} direction="horizontal" />
+      <ContainerEdit
+        {...props}
+        selectedBlock={selectedBlock}
+        setSelectedBlock={setSelectedBlock}
+        direction="horizontal"
+      />
     </div>
   );
 };

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

@@ -15,14 +15,15 @@ import cx from 'classnames';
 import { isEqual } from 'lodash';
 
 import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
-import { withBlockExtensions } from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import {
   flattenToAppURL,
   getBaseUrl,
   isInternalURL,
+  withBlockExtensions,
   validateFileUploadSize,
 } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -59,7 +60,7 @@ class Edit extends Component {
     block: PropTypes.string.isRequired,
     index: PropTypes.number.isRequired,
     data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any).isRequired,
+    content: PropTypes.objectOf(PropTypes.any),
     request: PropTypes.shape({
       loading: PropTypes.bool,
       loaded: PropTypes.bool,
@@ -88,6 +89,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
+    // Update block data after upload finished
     if (
       this.props.request.loading &&
       nextProps.request.loaded &&
@@ -99,6 +101,8 @@ class Edit extends Component {
       this.props.onChangeBlock(this.props.block, {
         ...this.props.data,
         url: nextProps.content['@id'],
+        image_field: 'image',
+        image_scales: { image: [nextProps.content.image] },
         alt: '',
       });
     }
@@ -171,6 +175,8 @@ class Edit extends Component {
     this.props.onChangeBlock(this.props.block, {
       ...this.props.data,
       url: flattenToAppURL(this.state.url),
+      image_field: undefined,
+      image_scales: undefined,
     });
   };
 
@@ -240,10 +246,12 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Image = config.getComponent({ name: 'Image' }).component;
     const { data } = this.props;
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
+
     return (
       <div
         className={cx(
@@ -255,15 +263,26 @@ class Edit extends Component {
         )}
       >
         {data.url ? (
-          <img
+          <Image
             className={cx({
               'full-width': data.align === 'full',
               large: data.size === 'l',
               medium: data.size === 'm',
               small: data.size === 's',
             })}
+            item={
+              data.image_scales
+                ? {
+                    '@id': data.url,
+                    image_field: data.image_field,
+                    image_scales: data.image_scales,
+                  }
+                : undefined
+            }
             src={
-              isInternalURL(data.url)
+              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')
@@ -278,7 +297,10 @@ class Edit extends Component {
                   })()
                 : data.url
             }
+            sizes={config.blocks.blocksConfig.image.getSizes(data)}
             alt={data.alt || ''}
+            loading="lazy"
+            responsive={true}
           />
         ) : (
           <div>
@@ -313,7 +335,20 @@ class Edit extends Component {
                               onClick={(e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
-                                this.props.openObjectBrowser();
+                                this.props.openObjectBrowser({
+                                  onSelectItem: (
+                                    url,
+                                    { title, image_field, image_scales },
+                                  ) => {
+                                    this.props.onChangeBlock(this.props.block, {
+                                      ...this.props.data,
+                                      url,
+                                      image_field,
+                                      image_scales,
+                                      alt: this.props.data.alt || title || '',
+                                    });
+                                  },
+                                });
                               }}
                             >
                               <Icon name={navTreeSVG} size="24px" />

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

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor } from '@testing-library/react';
+import { getImageBlockSizes } from './utils';
 import config from '@plone/volto/registry';
 
 import Edit from './Edit';
@@ -25,6 +26,7 @@ config.blocks.blocksConfig = {
       addPermission: [],
       view: [],
     },
+    getSizes: getImageBlockSizes,
   },
 };