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

package/src/components/manage/BlockChooser/BlockChooser.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';

package/src/components/manage/BlockChooser/BlockChooserButton.jsx

@@ -7,7 +7,7 @@ import config from '@plone/volto/registry';
 import { Button, Ref } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { usePopper } from 'react-popper';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 const messages = defineMessages({
   addBlock: {
@@ -54,7 +54,10 @@ const BlockChooserButton = (props) => {
     blocksConfig,
     buttonComponent,
     properties,
+    navRoot,
+    contentType,
   } = props;
+
   const { disableNewBlocks } = data;
   const [addNewBlockOpened, setAddNewBlockOpened] = React.useState(false);
 
@@ -112,8 +115,8 @@ const BlockChooserButton = (props) => {
             />
           </Ref>
         )}
-      {addNewBlockOpened && (
-        <Portal node={document.getElementById('body')}>
+      {addNewBlockOpened &&
+        createPortal(
           <div
             ref={setPopperElement}
             style={styles.popper}
@@ -142,10 +145,12 @@ const BlockChooserButton = (props) => {
               properties={properties}
               showRestricted={showRestricted}
               ref={blockChooserRef}
+              navRoot={navRoot}
+              contentType={contentType}
             />
-          </div>
-        </Portal>
-      )}
+          </div>,
+          document.body,
+        )}
     </>
   );
 };

package/src/components/manage/BlockChooser/BlockChooserSearch.jsx

@@ -35,6 +35,7 @@ const BlockChooserSearch = ({ onChange, searchValue }) => {
           placeholder={intl.formatMessage(messages.search)}
           title={intl.formatMessage(messages.search)}
           ref={searchInput}
+          autoFocus
         />
         {searchValue && (
           <Button

package/src/components/manage/BlockChooser/BlockChooserSearch.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import BlockChooserSearch from './BlockChooserSearch';
 import { Provider } from 'react-intl-redux';

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,21 +16,27 @@ 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 {
     pathname,
     onChangeField,
     properties,
+    type,
+    navRoot,
     onChangeFormData,
     selectedBlock,
     multiSelected,
@@ -46,8 +55,17 @@ const BlocksForm = (props) => {
     blocksConfig = config.blocks.blocksConfig,
     editable = true,
     direction = 'vertical',
+    history,
+    location,
+    token,
   } = props;
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   const blockList = getBlocks(properties);
 
   const dispatch = useDispatch();
@@ -178,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}
@@ -190,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);
@@ -205,78 +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,
-              blocksConfig,
-              selected: selectedBlock === childId,
-              multiSelected: multiSelected?.includes(childId),
-              type: child['@type'],
-              editable,
-              showBlockChooser: selectedBlock === childId,
-              detached: isContainer,
-            };
-            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/DefaultEdit.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import config from '@plone/volto/registry';
 import { useIntl } from 'react-intl';
 import { SidebarPortal } from '@plone/volto/components';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import DefaultBlockView from './DefaultView';
 
 const DefaultBlockEdit = (props) => {
   const { blocksConfig = config.blocks.blocksConfig } = props;
-  const { data, onChangeBlock, block, selected } = props;
+  const { data, onChangeBlock, block, selected, navRoot, contentType } = props;
   const intl = useIntl();
   const blockSchema = blocksConfig?.[data['@type']]?.blockSchema;
   const schema =
@@ -32,6 +32,8 @@ const DefaultBlockEdit = (props) => {
               });
             }}
             formData={data}
+            navRoot={navRoot}
+            contentType={contentType}
           />
         </SidebarPortal>
       ) : (

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

@@ -3,6 +3,7 @@ import { Icon } from '@plone/volto/components';
 import {
   blockHasValue,
   buildStyleClassNamesFromData,
+  buildStyleObjectFromData,
 } from '@plone/volto/helpers';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { Button } from 'semantic-ui-react';
@@ -34,6 +35,7 @@ const EditBlockWrapper = (props) => {
   const { intl, blockProps, draginfo, children } = props;
   const {
     allowedBlocks,
+    showRestricted,
     block,
     blocksConfig,
     selected,
@@ -47,23 +49,33 @@ const EditBlockWrapper = (props) => {
     editable,
     properties,
     showBlockChooser,
+    navRoot,
+    contentType,
   } = blockProps;
+
   const visible = selected && !hideHandler(data);
 
   const required = isBoolean(data.required)
     ? data.required
     : includes(config.blocks.requiredBlocks, type);
 
-  const styles = buildStyleClassNamesFromData(data.styles);
+  const classNames = buildStyleClassNamesFromData(data.styles);
+  const style = buildStyleObjectFromData(data.styles);
+
+  // We need to merge the StyleWrapper styles with the draggable props from b-D&D
+  const styleMergedWithDragProps = {
+    ...draginfo.draggableProps,
+    style: { ...style, ...draginfo.draggableProps.style },
+  };
 
   return (
     <div
       ref={draginfo.innerRef}
-      {...draginfo.draggableProps}
+      {...styleMergedWithDragProps}
       // Right now, we can have the alignment information in the styles property or in the
       // block data root, we inject the classname here for having control over the whole
       // Block Edit wrapper
-      className={cx(`block-editor-${data['@type']}`, styles, {
+      className={cx(`block-editor-${data['@type']}`, classNames, {
         [data.align]: data.align,
       })}
     >
@@ -104,9 +116,12 @@ const EditBlockWrapper = (props) => {
               }}
               onMutateBlock={onMutateBlock}
               allowedBlocks={allowedBlocks}
+              showRestricted={showRestricted}
               blocksConfig={blocksConfig}
               size="24px"
               properties={properties}
+              navRoot={navRoot}
+              contentType={contentType}
             />
           )}
         </div>