@plone/volto 18.0.0-alpha.32 → 18.0.0-alpha.34

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

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { cloneDeep, map } from 'lodash';
 import EditBlock from './Edit';
 import { DragDropList } from '@plone/volto/components';
 import {
   getBlocks,
   getBlocksFieldname,
+  getBlocksLayoutFieldname,
   applyBlockDefaults,
+  getBlocksHierarchy,
 } from '@plone/volto/helpers';
 import {
   addBlock,
@@ -13,15 +16,19 @@ import {
   changeBlock,
   deleteBlock,
   moveBlock,
+  moveBlockEnhanced,
   mutateBlock,
   nextBlockId,
   previousBlockId,
 } from '@plone/volto/helpers';
 import EditBlockWrapper from './EditBlockWrapper';
-import { setSidebarTab } from '@plone/volto/actions';
+import { setSidebarTab, setUIState } from '@plone/volto/actions';
 import { useDispatch } from 'react-redux';
 import { useDetectClickOutside, useEvent } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
+import { createPortal } from 'react-dom';
+
+import Order from './Order/Order';
 
 const BlocksForm = (props) => {
   const {
@@ -53,6 +60,12 @@ const BlocksForm = (props) => {
     token,
   } = props;
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   const blockList = getBlocks(properties);
 
   const dispatch = useDispatch();
@@ -183,6 +196,52 @@ const BlocksForm = (props) => {
     onChangeFormData(newFormData);
   };
 
+  const onMoveBlockEnhanced = ({ source, destination }) => {
+    const newFormData = moveBlockEnhanced(cloneDeep(properties), {
+      source,
+      destination,
+    });
+    const blocksFieldname = getBlocksFieldname(newFormData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(newFormData);
+    let error = false;
+
+    const allowedBlocks = Object.keys(blocksConfig);
+
+    map(newFormData[blocksLayoutFieldname].items, (id) => {
+      const block = newFormData[blocksFieldname][id];
+      if (!allowedBlocks.includes(block['@type'])) {
+        error = true;
+      }
+      if (Array.isArray(block[blocksLayoutFieldname]?.items)) {
+        const size = block[blocksLayoutFieldname].items.length;
+        const allowedSubBlocks = [
+          ...(blocksConfig[block['@type']].allowedBlocks || allowedBlocks),
+          'empty',
+        ] || ['empty'];
+        if (size < 1 || size > (blocksConfig[block['@type']].maxLength || 4)) {
+          error = true;
+        }
+        map(block[blocksLayoutFieldname].items, (subId) => {
+          const subBlock = block[blocksFieldname][subId];
+          if (!allowedSubBlocks.includes(subBlock['@type'])) {
+            error = true;
+          }
+        });
+      }
+    });
+
+    if (!error) {
+      onChangeFormData(newFormData);
+      dispatch(
+        setUIState({
+          selected: null,
+          multiSelected: [],
+          gridSelected: null,
+        }),
+      );
+    }
+  };
+
   const defaultBlockWrapper = ({ draginfo }, editBlock, blockProps) => (
     <EditBlockWrapper draginfo={draginfo} blockProps={blockProps}>
       {editBlock}
@@ -195,6 +254,7 @@ const BlocksForm = (props) => {
   // Note they are alreaady filtered by DragDropList, but we also want them
   // to be removed when the user saves the page next. Otherwise the invalid
   // blocks would linger for ever.
+
   for (const [n, v] of blockList) {
     if (!v) {
       const newFormData = deleteBlock(properties, n);
@@ -210,85 +270,101 @@ const BlocksForm = (props) => {
   });
 
   return (
-    <div
-      className="blocks-form"
-      role="presentation"
-      ref={ref}
-      onKeyDown={(e) => {
-        if (stopPropagation) {
-          e.stopPropagation();
-        }
-      }}
-    >
-      <fieldset className="invisible" disabled={!editable}>
-        <DragDropList
-          childList={blockList}
-          onMoveItem={(result) => {
-            const { source, destination } = result;
-            if (!destination) {
-              return;
-            }
-            const newFormData = moveBlock(
-              properties,
-              source.index,
-              destination.index,
-            );
-            onChangeFormData(newFormData);
-            return true;
-          }}
-          direction={direction}
-        >
-          {(dragProps) => {
-            const { child, childId, index } = dragProps;
-            const blockProps = {
-              allowedBlocks,
-              showRestricted,
-              block: childId,
-              data: child,
-              handleKeyDown,
-              id: childId,
-              formTitle: title,
-              formDescription: description,
-              index,
-              manage,
-              onAddBlock,
-              onInsertBlock,
-              onChangeBlock,
-              onChangeField,
-              onChangeFormData,
-              onDeleteBlock,
-              onFocusNextBlock,
-              onFocusPreviousBlock,
-              onMoveBlock,
-              onMutateBlock,
-              onSelectBlock,
-              pathname,
-              metadata,
-              properties,
-              contentType: type,
-              navRoot,
-              blocksConfig,
-              selected: selectedBlock === childId,
-              multiSelected: multiSelected?.includes(childId),
-              type: child['@type'],
-              editable,
-              showBlockChooser: selectedBlock === childId,
-              detached: isContainer,
-              // Properties to pass to the BlocksForm to match the View ones
-              content: properties,
-              history,
-              location,
-              token,
-            };
-            return editBlockWrapper(
-              dragProps,
-              <EditBlock key={childId} {...blockProps} />,
-              blockProps,
-            );
-          }}
-        </DragDropList>
-      </fieldset>
-    </div>
+    <>
+      {isMainForm &&
+        isClient &&
+        createPortal(
+          <div>
+            <Order
+              items={getBlocksHierarchy(properties)}
+              onMoveBlock={onMoveBlockEnhanced}
+              onDeleteBlock={onDeleteBlock}
+              onSelectBlock={onSelectBlock}
+              removable
+            />
+          </div>,
+          document.getElementById('sidebar-order'),
+        )}
+      <div
+        className="blocks-form"
+        role="presentation"
+        ref={ref}
+        onKeyDown={(e) => {
+          if (stopPropagation) {
+            e.stopPropagation();
+          }
+        }}
+      >
+        <fieldset className="invisible" disabled={!editable}>
+          <DragDropList
+            childList={blockList}
+            onMoveItem={(result) => {
+              const { source, destination } = result;
+              if (!destination) {
+                return;
+              }
+              const newFormData = moveBlock(
+                properties,
+                source.index,
+                destination.index,
+              );
+              onChangeFormData(newFormData);
+              return true;
+            }}
+            direction={direction}
+          >
+            {(dragProps) => {
+              const { child, childId, index } = dragProps;
+              const blockProps = {
+                allowedBlocks,
+                showRestricted,
+                block: childId,
+                data: child,
+                handleKeyDown,
+                id: childId,
+                formTitle: title,
+                formDescription: description,
+                index,
+                manage,
+                onAddBlock,
+                onInsertBlock,
+                onChangeBlock,
+                onChangeField,
+                onChangeFormData,
+                onDeleteBlock,
+                onFocusNextBlock,
+                onFocusPreviousBlock,
+                onMoveBlock,
+                onMutateBlock,
+                onSelectBlock,
+                pathname,
+                metadata,
+                properties,
+                contentType: type,
+                navRoot,
+                blocksConfig,
+                selected: selectedBlock === childId,
+                multiSelected: multiSelected?.includes(childId),
+                type: child['@type'],
+                editable,
+                showBlockChooser: selectedBlock === childId,
+                detached: isContainer,
+                // Properties to pass to the BlocksForm to match the View ones
+                content: properties,
+                history,
+                location,
+                token,
+              };
+              return editBlockWrapper(
+                dragProps,
+                <EditBlock key={childId} {...blockProps} />,
+                blockProps,
+              );
+            }}
+          </DragDropList>
+        </fieldset>
+      </div>
+    </>
   );
 };
 

package/src/components/manage/Blocks/Block/BlocksForm.test.jsx

@@ -30,6 +30,9 @@ test('Allow override of blocksConfig', () => {
       locale: 'en',
       messages: {},
     },
+    form: {
+      ui: {},
+    },
   });
 
   const data = {
@@ -68,6 +71,7 @@ test('Allow override of blocksConfig', () => {
   const { container } = render(
     <Provider store={store}>
       <BlocksForm {...data} />
+      <div id="sidebar-order"></div>
     </Provider>,
   );
   expect(container).toMatchSnapshot();
@@ -79,6 +83,9 @@ test('Removes invalid blocks on saving', () => {
       locale: 'en',
       messages: {},
     },
+    form: {
+      ui: {},
+    },
   });
 
   const onChangeFormData = jest.fn(() => {});
@@ -120,6 +127,7 @@ test('Removes invalid blocks on saving', () => {
   render(
     <Provider store={store}>
       <BlocksForm {...data} />
+      <div id="sidebar-order"></div>
     </Provider>,
   );
   expect(onChangeFormData).toBeCalledWith({

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

@@ -9,7 +9,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
-import { setSidebarTab } from '@plone/volto/actions';
+import { setSidebarTab, setUIState } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { applyBlockDefaults } from '@plone/volto/helpers';
@@ -79,7 +79,11 @@ export class Edit extends Component {
       this.blockNode.current.focus();
     }
     const tab = this.props.manage ? 1 : blocksConfig?.[type]?.sidebarTab || 0;
-    if (this.props.selected && this.props.editable) {
+    if (
+      this.props.selected &&
+      this.props.editable &&
+      this.props.sidebarTab !== 2
+    ) {
       this.props.setSidebarTab(tab);
     }
   }
@@ -105,7 +109,9 @@ export class Edit extends Component {
       const tab = this.props.manage
         ? 1
         : blocksConfig?.[nextProps.type]?.sidebarTab || 0;
-      this.props.setSidebarTab(tab);
+      if (this.props.sidebarTab !== 2) {
+        this.props.setSidebarTab(tab);
+      }
     }
   }
 
@@ -138,6 +144,21 @@ export class Edit extends Component {
         {Block !== null ? (
           <div
             role="presentation"
+            onMouseOver={() => {
+              if (this.props.hovered !== this.props.id) {
+                this.props.setUIState({ hovered: this.props.id });
+              }
+            }}
+            onFocus={() => {
+              // 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
+              // If any, we can fix it in successive iterations
+              // if (this.props.hovered !== this.props.id) {
+              //   this.props.setUIState({ hovered: this.props.id });
+              // }
+            }}
+            onMouseLeave={() => this.props.setUIState({ hovered: null })}
             onClick={(e) => {
               const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
               !this.props.selected &&
@@ -161,6 +182,7 @@ export class Edit extends Component {
             className={cx('block', type, this.props.data.variation, {
               selected: this.props.selected || this.props.multiSelected,
               multiSelected: this.props.multiSelected,
+              hovered: this.props.hovered === this.props.id,
             })}
             style={{ outline: 'none' }}
             ref={this.blockNode}
@@ -185,6 +207,11 @@ 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 })}
             onClick={() =>
               !this.props.selected && this.props.onSelectBlock(this.props.id)
             }
@@ -218,5 +245,11 @@ export class Edit extends Component {
 export default compose(
   injectIntl,
   withObjectBrowser,
-  connect(null, { setSidebarTab }),
+  connect(
+    (state, props) => ({
+      hovered: state.form?.ui.hovered || null,
+      sidebarTab: state.sidebar?.tab,
+    }),
+    { setSidebarTab, setUIState },
+  ),
 )(Edit);

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

@@ -0,0 +1,122 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { includes } from 'lodash';
+
+import { Icon } from '@plone/volto/components';
+import { setUIState } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import dragSVG from '@plone/volto/icons/drag.svg';
+
+export const Item = forwardRef(
+  (
+    {
+      clone,
+      data,
+      depth,
+      disableSelection,
+      disableInteraction,
+      ghost,
+      id,
+      handleProps,
+      indentationWidth,
+      onRemove,
+      onSelectBlock,
+      parentId,
+      style,
+      value,
+      wrapperRef,
+      ...props
+    },
+    ref,
+  ) => {
+    const selected = useSelector((state) => state.form.ui.selected);
+    const hovered = useSelector((state) => state.form.ui.hovered);
+    const multiSelected = useSelector((state) => state.form.ui.multiSelected);
+    const gridSelected = useSelector((state) => state.form.ui.gridSelected);
+    const dispatch = useDispatch();
+    return (
+      <li
+        className={classNames(
+          'tree-item-wrapper',
+          clone && 'clone',
+          ghost && 'ghost',
+          disableSelection && 'disable-selection',
+          disableInteraction && 'disable-interaction',
+        )}
+        role="presentation"
+        onMouseOver={() => dispatch(setUIState({ hovered: id }))}
+        onFocus={() => dispatch(setUIState({ hovered: id }))}
+        onMouseLeave={() => dispatch(setUIState({ hovered: null }))}
+        onClick={(e) => {
+          if (depth === 0) {
+            const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+            selected !== id &&
+              onSelectBlock(
+                id,
+                selected === id ? false : isMultipleSelection,
+                e,
+              );
+          } else {
+            dispatch(
+              setUIState({
+                selected: parentId,
+                multiSelected: [],
+                gridSelected: id,
+              }),
+            );
+          }
+        }}
+        ref={wrapperRef}
+        style={{
+          '--spacing': `${indentationWidth * depth}px`,
+        }}
+        {...props}
+      >
+        <div
+          className={classNames(
+            'tree-item',
+            (selected === id || gridSelected === id) && 'selected',
+            hovered === id && 'hovered',
+            includes(multiSelected, id) && 'multiSelected',
+            `depth-${depth}`,
+          )}
+          ref={ref}
+          style={style}
+        >
+          <button
+            ref={ref}
+            {...handleProps}
+            className={classNames('action', 'drag')}
+            tabIndex={0}
+            data-cypress="draggable-handle"
+          >
+            <Icon name={dragSVG} size="16px" />
+          </button>
+          <span className="text">
+            {config.blocks.blocksConfig[data?.['@type']]?.icon && (
+              <Icon
+                name={config.blocks.blocksConfig[data?.['@type']]?.icon}
+                size="20px"
+                style={{ verticalAlign: 'middle' }}
+              />
+            )}{' '}
+            {data?.plaintext ||
+              config.blocks.blocksConfig[data?.['@type']]?.title}
+          </span>
+          {!clone && onRemove && (
+            <button
+              onClick={onRemove}
+              className={classNames('action', 'delete')}
+              tabIndex={0}
+            >
+              <Icon name={deleteSVG} size="18" />
+            </button>
+          )}
+        </div>
+      </li>
+    );
+  },
+);