@plone/volto 18.0.0-alpha.8 → 18.0.0

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,7 +2,7 @@ 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) => {

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

@@ -9,10 +9,9 @@ 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';
 import { ViewDefaultBlock, EditDefaultBlock } from '@plone/volto/components';
 
 import {
@@ -79,7 +78,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 +108,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 +143,27 @@ export class Edit extends Component {
         {Block !== null ? (
           <div
             role="presentation"
+            onMouseEnter={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (this.props.hovered !== this.props.id) {
+                this.props.setUIState({ hovered: this.props.id });
+              }
+            }}
+            onFocus={(e) => {
+              // 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={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.props.setUIState({ hovered: null });
+            }}
             onClick={(e) => {
               const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
               !this.props.selected &&
@@ -161,6 +187,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}
@@ -171,7 +198,7 @@ export class Edit extends Component {
             <Block
               {...this.props}
               blockNode={this.blockNode}
-              data={applyBlockDefaults(this.props)}
+              data={this.props.data}
             />
             {this.props.manage && (
               <SidebarPortal
@@ -185,6 +212,21 @@ export class Edit extends Component {
         ) : (
           <div
             role="presentation"
+            onMouseEnter={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.props.setUIState({ hovered: this.props.id });
+            }}
+            onFocus={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.props.setUIState({ hovered: this.props.id });
+            }}
+            onMouseLeave={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.props.setUIState({ hovered: null });
+            }}
             onClick={() =>
               !this.props.selected && this.props.onSelectBlock(this.props.id)
             }
@@ -218,5 +260,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

@@ -1,9 +1,13 @@
 import React from 'react';
 import { Icon } from '@plone/volto/components';
 import {
+  applyBlockDefaults,
+  applyBlockInitialValue,
+  getBlocksFieldname,
   blockHasValue,
   buildStyleClassNamesFromData,
   buildStyleObjectFromData,
+  buildStyleClassNamesExtenders,
 } from '@plone/volto/helpers';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { Button } from 'semantic-ui-react';
@@ -35,6 +39,7 @@ const EditBlockWrapper = (props) => {
   const { intl, blockProps, draginfo, children } = props;
   const {
     allowedBlocks,
+    showRestricted,
     block,
     blocksConfig,
     selected,
@@ -44,7 +49,7 @@ const EditBlockWrapper = (props) => {
     onInsertBlock,
     onSelectBlock,
     onMutateBlock,
-    data,
+    data: originalData,
     editable,
     properties,
     showBlockChooser,
@@ -52,14 +57,22 @@ const EditBlockWrapper = (props) => {
     contentType,
   } = blockProps;
 
+  const data = applyBlockDefaults({ data: originalData, ...blockProps, intl });
+
   const visible = selected && !hideHandler(data);
 
   const required = isBoolean(data.required)
     ? data.required
     : includes(config.blocks.requiredBlocks, type);
 
-  const classNames = buildStyleClassNamesFromData(data.styles);
-  const style = buildStyleObjectFromData(data.styles);
+  let classNames = buildStyleClassNamesFromData(data.styles);
+  classNames = buildStyleClassNamesExtenders({
+    block,
+    content: properties,
+    data,
+    classNames,
+  });
+  const style = buildStyleObjectFromData(data);
 
   // We need to merge the StyleWrapper styles with the draggable props from b-D&D
   const styleMergedWithDragProps = {
@@ -110,11 +123,26 @@ 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}
               allowedBlocks={allowedBlocks}
+              showRestricted={showRestricted}
               blocksConfig={blocksConfig}
               size="24px"
               properties={properties}

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

@@ -0,0 +1,128 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { includes } from 'lodash';
+import cx from 'classnames';
+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,
+      errors,
+      ...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={cx('text', {
+              errored: errors && Object.keys(errors).length > 0,
+            })}
+          >
+            {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>
+    );
+  },
+);