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

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

@@ -1,8 +1,9 @@
 import { useIntl } from 'react-intl';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 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/Edit.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { pickBy } from 'lodash';
-import { BlocksForm, SidebarPortal } from '@plone/volto/components';
+import { SidebarPortal } from '@plone/volto/components';
+import { BlocksForm } from '@plone/volto/components/manage/Form';
 import PropTypes from 'prop-types';
 import ContainerData from './Data';
 import DefaultEditBlockWrapper from './EditBlockWrapper';
@@ -128,6 +129,7 @@ const ContainerBlockEdit = (props) => {
         blocksConfig={allowedBlocksConfig}
         title={data.placeholder}
         isContainer
+        isMainForm={false}
         stopPropagation={selectedBlock}
         disableAddBlockOnEnterKey
         onSelectBlock={(id) => {

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

@@ -1,14 +1,16 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useState } from 'react';
 import ContainerEdit from '../Container/Edit';
+import { useDispatch, useSelector } from 'react-redux';
+import { setUIState } from '@plone/volto/actions';
 
 const GridBlockEdit = (props) => {
   const { data } = props;
 
   const columnsLength = data?.blocks_layout?.items?.length || 0;
 
-  const [selectedBlock, setSelectedBlock] = useState(null);
+  const selectedBlock = useSelector((state) => state.form.ui.gridSelected);
+  const dispatch = useDispatch();
 
   return (
     <div
@@ -22,14 +24,14 @@ const GridBlockEdit = (props) => {
       // 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) => {
-        if (!e.block) setSelectedBlock(null);
+        if (!e.block) dispatch(setUIState({ gridSelected: null }));
       }}
       role="presentation"
     >
       <ContainerEdit
         {...props}
         selectedBlock={selectedBlock}
-        setSelectedBlock={setSelectedBlock}
+        setSelectedBlock={(id) => dispatch(setUIState({ gridSelected: id }))}
         direction="horizontal"
       />
     </div>

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

@@ -3,256 +3,40 @@
  * @module components/manage/Blocks/Image/Edit
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { readAsDataURL } from 'promise-file-reader';
-import { Button, Dimmer, Input, Loader, Message } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import loadable from '@loadable/component';
+import React from 'react';
 import cx from 'classnames';
-import { isEqual } from 'lodash';
+import { ImageSidebar, SidebarPortal } from '@plone/volto/components';
 
-import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
-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';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-import aheadSVG from '@plone/volto/icons/ahead.svg';
-import uploadSVG from '@plone/volto/icons/upload.svg';
+import { ImageInput } from '@plone/volto/components/manage/Widgets/ImageWidget';
 
-const Dropzone = loadable(() => import('react-dropzone'));
+function Edit(props) {
+  const { data } = props;
+  const Image = config.getComponent({ name: 'Image' }).component;
 
-const messages = defineMessages({
-  ImageBlockInputPlaceholder: {
-    id: 'Browse the site, drop an image, or type an URL',
-    defaultMessage: 'Browse the site, drop an image, or type an URL',
-  },
-  uploadingImage: {
-    id: 'Uploading image',
-    defaultMessage: 'Uploading image',
-  },
-});
+  const handleChange = React.useCallback(
+    async (id, image, { title, image_field, image_scales } = {}) => {
+      const url = image ? image['@id'] || image : '';
 
-/**
- * Edit image block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any),
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-    createContent: PropTypes.func.isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
-
-  state = {
-    uploading: false,
-    url: '',
-    dragging: false,
-  };
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Update block data after upload finished
-    if (
-      this.props.request.loading &&
-      nextProps.request.loaded &&
-      this.state.uploading
-    ) {
-      this.setState({
-        uploading: false,
-      });
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        url: nextProps.content['@id'],
-        image_field: 'image',
-        image_scales: { image: [nextProps.content.image] },
-        alt: '',
+      props.onChangeBlock(props.block, {
+        ...props.data,
+        url: flattenToAppURL(url),
+        image_field,
+        image_scales,
+        alt: props.data.alt || title || '',
       });
-    }
-  }
-
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
-
-  /**
-   * Upload image handler (not used), but useful in case that we want a button
-   * not powered by react-dropzone
-   * @method onUploadImage
-   * @returns {undefined}
-   */
-  onUploadImage = (e) => {
-    e.stopPropagation();
-    const file = e.target.files[0];
-    if (!validateFileUploadSize(file, this.props.intl.formatMessage)) return;
-    this.setState({
-      uploading: true,
-    });
-    readAsDataURL(file).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      this.props.createContent(
-        getBaseUrl(this.props.pathname),
-        {
-          '@type': 'Image',
-          title: file.name,
-          image: {
-            data: fields[3],
-            encoding: fields[2],
-            'content-type': fields[1],
-            filename: file.name,
-          },
-        },
-        this.props.block,
-      );
-    });
-  };
-
-  /**
-   * Change url handler
-   * @method onChangeUrl
-   * @param {Object} target Target object
-   * @returns {undefined}
-   */
-  onChangeUrl = ({ target }) => {
-    this.setState({
-      url: target.value,
-    });
-  };
+    },
+    [props],
+  );
 
-  /**
-   * Submit url handler
-   * @method onSubmitUrl
-   * @param {object} e Event
-   * @returns {undefined}
-   */
-  onSubmitUrl = () => {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: flattenToAppURL(this.state.url),
-      image_field: undefined,
-      image_scales: undefined,
-    });
-  };
-
-  /**
-   * Drop handler
-   * @method onDrop
-   * @param {array} files File objects
-   * @returns {undefined}
-   */
-  onDrop = (files) => {
-    if (!validateFileUploadSize(files[0], this.props.intl.formatMessage)) {
-      this.setState({ dragging: false });
-      return;
-    }
-    this.setState({ uploading: true });
-
-    readAsDataURL(files[0]).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      this.props.createContent(
-        getBaseUrl(this.props.pathname),
-        {
-          '@type': 'Image',
-          title: files[0].name,
-          image: {
-            data: fields[3],
-            encoding: fields[2],
-            'content-type': fields[1],
-            filename: files[0].name,
-          },
-        },
-        this.props.block,
-      );
-    });
-  };
-
-  /**
-   * Keydown handler on Variant Menu Form
-   * This is required since the ENTER key is already mapped to a onKeyDown
-   * event and needs to be overriden with a child onKeyDown.
-   * @method onKeyDownVariantMenuForm
-   * @param {Object} e Event object
-   * @returns {undefined}
-   */
-  onKeyDownVariantMenuForm = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.onSubmitUrl();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      // TODO: Do something on ESC key
-    }
-  };
-  onDragEnter = () => {
-    this.setState({ dragging: true });
-  };
-  onDragLeave = () => {
-    this.setState({ dragging: false });
-  };
-
-  node = React.createRef();
-
-  /**
-   * Render method.
-   * @method render
-   * @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 (
+  return (
+    <>
       <div
         className={cx(
           'block image align',
@@ -283,19 +67,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 || ''}
@@ -303,133 +87,20 @@ class Edit extends Component {
             responsive={true}
           />
         ) : (
-          <div>
-            {this.props.editable && (
-              <Dropzone
-                noClick
-                onDrop={this.onDrop}
-                onDragEnter={this.onDragEnter}
-                onDragLeave={this.onDragLeave}
-                className="dropzone"
-              >
-                {({ getRootProps, getInputProps }) => (
-                  <div {...getRootProps()}>
-                    <Message>
-                      {this.state.dragging && <Dimmer active></Dimmer>}
-                      {this.state.uploading && (
-                        <Dimmer active>
-                          <Loader indeterminate>
-                            {this.props.intl.formatMessage(
-                              messages.uploadingImage,
-                            )}
-                          </Loader>
-                        </Dimmer>
-                      )}
-                      <div className="no-image-wrapper">
-                        <img src={imageBlockSVG} alt="" />
-                        <div className="toolbar-inner">
-                          <Button.Group>
-                            <Button
-                              basic
-                              icon
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                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" />
-                            </Button>
-                          </Button.Group>
-                          <Button.Group>
-                            <label className="ui button basic icon">
-                              <Icon name={uploadSVG} size="24px" />
-                              <input
-                                {...getInputProps({
-                                  type: 'file',
-                                  onChange: this.onUploadImage,
-                                  style: { display: 'none' },
-                                })}
-                              />
-                            </label>
-                          </Button.Group>
-                          <Input
-                            onKeyDown={this.onKeyDownVariantMenuForm}
-                            onChange={this.onChangeUrl}
-                            placeholder={placeholder}
-                            value={this.state.url}
-                            onClick={(e) => {
-                              e.target.focus();
-                            }}
-                            onFocus={(e) => {
-                              this.props.onSelectBlock(this.props.id);
-                            }}
-                          />
-                          {this.state.url && (
-                            <Button.Group>
-                              <Button
-                                basic
-                                className="cancel"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  this.setState({ url: '' });
-                                }}
-                              >
-                                <Icon name={clearSVG} size="30px" />
-                              </Button>
-                            </Button.Group>
-                          )}
-                          <Button.Group>
-                            <Button
-                              basic
-                              primary
-                              disabled={!this.state.url}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                this.onSubmitUrl();
-                              }}
-                            >
-                              <Icon name={aheadSVG} size="30px" />
-                            </Button>
-                          </Button.Group>
-                        </div>
-                      </div>
-                    </Message>
-                  </div>
-                )}
-              </Dropzone>
-            )}
-          </div>
+          <ImageInput
+            onChange={handleChange}
+            placeholderLinkInput={data.placeholder}
+            block={props.block}
+            id={props.block}
+            objectBrowserPickerType={'image'}
+          />
         )}
-        <SidebarPortal selected={this.props.selected}>
-          <ImageSidebar {...this.props} />
+        <SidebarPortal selected={props.selected}>
+          <ImageSidebar {...props} />
         </SidebarPortal>
       </div>
-    );
-  }
+    </>
+  );
 }
 
-export default compose(
-  injectIntl,
-  withBlockExtensions,
-  connect(
-    (state, ownProps) => ({
-      request: state.content.subrequests[ownProps.block] || {},
-      content: state.content.subrequests[ownProps.block]?.data,
-    }),
-    { createContent },
-  ),
-)(Edit);
+export default withBlockExtensions(Edit);

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

@@ -3,13 +3,15 @@ import PropTypes from 'prop-types';
 import { Segment, Button } from 'semantic-ui-react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
-import { BlockDataForm, Icon, Image } from '@plone/volto/components';
+import { Icon, Image } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { ImageSchema } from './schema';
 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 +62,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 +96,8 @@ const ImageSidebar = (props) => {
         formData={data}
         block={block}
         blocksConfig={blocksConfig}
+        navRoot={navRoot}
+        contentType={contentType}
       />
     </>
   );

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

@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import ImageSidebar from './ImageSidebar';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 test('renders an Image Block Sidebar component', () => {