@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.21

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

@@ -33,17 +33,22 @@ const BlockChooser = ({
   properties = {},
 }) => {
   const intl = useIntl();
-  const useAllowedBlocks = !isEmpty(allowedBlocks);
+  const hasAllowedBlocks = !isEmpty(allowedBlocks);
 
   const filteredBlocksConfig = filter(blocksConfig, (item) => {
+    // Check if the block is well formed (has at least id and title)
+    const blockIsWellFormed = Boolean(item.title && item.id);
+    if (!blockIsWellFormed) {
+      return false;
+    }
     if (showRestricted) {
-      if (useAllowedBlocks) {
+      if (hasAllowedBlocks) {
         return allowedBlocks.includes(item.id);
       } else {
         return true;
       }
     } else {
-      if (useAllowedBlocks) {
+      if (hasAllowedBlocks) {
         return allowedBlocks.includes(item.id);
       } else {
         // Overload restricted as a function, so we can decide the availability of a block
@@ -89,14 +94,18 @@ const BlockChooser = ({
   function blocksAvailableFilter(blocks) {
     return blocks.filter(
       (block) =>
-        getFormatMessage(block.title).toLowerCase().includes(filterValue) ||
+        getFormatMessage(block.title)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase()) ||
         filterVariations(block)?.length,
     );
   }
   function filterVariations(block) {
     return block.variations?.filter(
       (variation) =>
-        getFormatMessage(variation.title).toLowerCase().includes(filterValue) &&
+        getFormatMessage(variation.title)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase()) &&
         !variation.title.toLowerCase().includes('default'),
     );
   }

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

@@ -108,6 +108,11 @@ config.blocks.blocksConfig = {
     restricted: false,
     mostUsed: false,
   },
+  malformedBlock: {
+    icon: blockSVG,
+    group: 'common',
+    restricted: false,
+  },
 };
 
 const mockStore = configureStore();

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

@@ -40,8 +40,12 @@ const BlocksForm = (props) => {
     manage,
     children,
     isMainForm = true,
+    isContainer,
+    stopPropagation,
+    disableAddBlockOnEnterKey,
     blocksConfig = config.blocks.blocksConfig,
     editable = true,
+    direction = 'vertical',
   } = props;
 
   const blockList = getBlocks(properties);
@@ -83,7 +87,9 @@ const BlocksForm = (props) => {
       e.preventDefault();
     }
     if (e.key === 'Enter' && !disableEnter) {
-      onSelectBlock(onAddBlock(config.settings.defaultBlockType, index + 1));
+      if (!disableAddBlockOnEnterKey) {
+        onSelectBlock(onAddBlock(config.settings.defaultBlockType, index + 1));
+      }
       e.preventDefault();
     }
   };
@@ -199,7 +205,16 @@ const BlocksForm = (props) => {
   });
 
   return (
-    <div className="blocks-form" ref={ref}>
+    <div
+      className="blocks-form"
+      role="presentation"
+      ref={ref}
+      onKeyDown={(e) => {
+        if (stopPropagation) {
+          e.stopPropagation();
+        }
+      }}
+    >
       <fieldset className="invisible" disabled={!editable}>
         <DragDropList
           childList={blockList}
@@ -216,6 +231,7 @@ const BlocksForm = (props) => {
             onChangeFormData(newFormData);
             return true;
           }}
+          direction={direction}
         >
           {(dragProps) => {
             const { child, childId, index } = dragProps;
@@ -250,6 +266,7 @@ const BlocksForm = (props) => {
               type: child['@type'],
               editable,
               showBlockChooser: selectedBlock === childId,
+              detached: isContainer,
             };
             return editBlockWrapper(
               dragProps,

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

@@ -158,7 +158,7 @@ export class Edit extends Component {
                     )
                 : null
             }
-            className={cx(`block ${type} ${this.props.data.variation ?? ''}`, {
+            className={cx('block', type, this.props.data.variation, {
               selected: this.props.selected || this.props.multiSelected,
               multiSelected: this.props.multiSelected,
             })}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-export default ({ data, detached, children }) => {
+export default function Style({ data, detached, children }) {
   return (
     <div
       className={cx(
@@ -25,4 +25,4 @@ export default ({ data, detached, children }) => {
       </div>
     </div>
   );
-};
+}

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

@@ -0,0 +1,32 @@
+import { useIntl } from 'react-intl';
+import { BlockDataForm } from '@plone/volto/components';
+
+const ContainerData = (props) => {
+  const { block, blocksConfig, data, onChangeBlock } = props;
+  const intl = useIntl();
+
+  const schema = blocksConfig[data['@type']].blockSchema({ intl });
+  const dataAdapter = blocksConfig[data['@type']].dataAdapter;
+
+  return (
+    <BlockDataForm
+      schema={schema}
+      title={schema.title}
+      onChangeField={(id, value) => {
+        dataAdapter({
+          block,
+          data,
+          id,
+          onChangeBlock,
+          value,
+        });
+      }}
+      formData={data}
+      block={block}
+      onChangeBlock={onChangeBlock}
+      blocksConfig={blocksConfig}
+    />
+  );
+};
+
+export default ContainerData;

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

@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { pickBy } from 'lodash';
+import { BlocksForm, SidebarPortal } from '@plone/volto/components';
+import PropTypes from 'prop-types';
+import ContainerData from './Data';
+import DefaultEditBlockWrapper from './EditBlockWrapper';
+import SimpleContainerToolbar from './SimpleContainerToolbar';
+import { v4 as uuid } from 'uuid';
+import { blocksFormGenerator } from '@plone/volto/helpers';
+
+import DefaultTemplateChooser from '@plone/volto/components/manage/TemplateChooser/TemplateChooser';
+
+import config from '@plone/volto/registry';
+
+const ContainerBlockEdit = (props) => {
+  const {
+    block,
+    data,
+    direction = 'horizontal',
+    onChangeBlock,
+    onChangeField,
+    pathname,
+    selected,
+    manage,
+  } = props;
+
+  const intl = useIntl();
+  const blockType = data['@type'];
+  const metadata = props.metadata || props.properties;
+  const isInitialized = data?.blocks && data?.blocks_layout;
+  const properties = isInitialized ? data : blocksFormGenerator(0, '');
+  const blockConfig = config.blocks.blocksConfig[blockType];
+  const blocksConfig = blockConfig.blocksConfig || props.blocksConfig;
+  const allowedBlocks = blockConfig.allowedBlocks;
+  const maxLength = blockConfig.maxLength || 8;
+  const templates = blockConfig.templates;
+  const ContainerToolbar =
+    blockConfig.containerToolbar || SimpleContainerToolbar;
+
+  // Custom components from config or default ones
+  const TemplateChooser = blockConfig.templateChooser || DefaultTemplateChooser;
+  const EditBlockWrapper =
+    blockConfig.editBlockWrapper || DefaultEditBlockWrapper;
+
+  const [selectedBlock, setSelectedBlock] = useState(
+    properties.blocks_layout.items[0],
+  );
+
+  const blockState = {};
+
+  const onAddNewBlock = () => {
+    const newuuid = uuid();
+    const type = allowedBlocks?.length === 1 ? allowedBlocks[0] : null;
+    const blocks = data.blocks || properties.blocks;
+    const blocks_layout = data.blocks_layout || properties.blocks_layout;
+    const newFormData = {
+      ...data,
+      blocks: {
+        ...blocks,
+        [newuuid]: { '@type': type || 'empty' },
+      },
+      blocks_layout: {
+        items: [...blocks_layout.items, newuuid],
+      },
+    };
+    if (blocks_layout.items.length < maxLength) {
+      onChangeBlock(block, {
+        ...newFormData,
+      });
+    }
+  };
+
+  const onSelectTemplate = (templateIndex) => {
+    const resultantTemplates =
+      allowedBlocks?.length === 1 ? templates(allowedBlocks[0]) : templates();
+    onChangeBlock(block, {
+      ...data,
+      ...resultantTemplates(intl)[templateIndex].blocksData,
+    });
+  };
+
+  const allowedBlocksConfig = pickBy(blocksConfig, (value, key) =>
+    allowedBlocks.includes(key),
+  );
+
+  const containerProps = {
+    ...props,
+    allowedBlocks,
+    allowedBlocksConfig,
+    blocksConfig,
+    blockType,
+    maxLength,
+    metadata,
+    onAddNewBlock,
+    onSelectTemplate,
+    selectedBlock,
+    setSelectedBlock,
+    templates,
+  };
+
+  return (
+    <>
+      {data.headline && <h2 className="headline">{data.headline}</h2>}
+
+      {selected && <ContainerToolbar {...containerProps} />}
+
+      {!isInitialized && templates && (
+        <TemplateChooser
+          templates={
+            allowedBlocks?.length === 1
+              ? templates(allowedBlocks[0])
+              : templates()
+          }
+          onSelectTemplate={onSelectTemplate}
+        />
+      )}
+
+      <BlocksForm
+        metadata={metadata}
+        properties={properties}
+        direction={direction}
+        manage={manage}
+        selectedBlock={selected ? selectedBlock : null}
+        blocksConfig={allowedBlocksConfig}
+        title={data.placeholder}
+        isContainer
+        stopPropagation={selectedBlock}
+        disableAddBlockOnEnterKey
+        onSelectBlock={(id) => {
+          setSelectedBlock(id);
+        }}
+        onChangeFormData={(newFormData) => {
+          onChangeBlock(block, {
+            ...data,
+            ...newFormData,
+          });
+        }}
+        onChangeField={(id, value) => {
+          if (['blocks', 'blocks_layout'].includes(id)) {
+            blockState[id] = value;
+            onChangeBlock(block, {
+              ...data,
+              ...blockState,
+            });
+          } else {
+            onChangeField(id, value);
+          }
+        }}
+        pathname={pathname}
+      >
+        {({ draginfo }, editBlock, blockProps) => (
+          <EditBlockWrapper draginfo={draginfo} blockProps={blockProps}>
+            {editBlock}
+          </EditBlockWrapper>
+        )}
+      </BlocksForm>
+      <SidebarPortal selected={selected && !selectedBlock}>
+        <ContainerData {...props}></ContainerData>
+      </SidebarPortal>
+    </>
+  );
+};
+
+ContainerBlockEdit.propTypes = {
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+};
+
+export default ContainerBlockEdit;

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

@@ -0,0 +1,120 @@
+import { Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import NewBlockAddButton from './NewBlockAddButton';
+import cx from 'classnames';
+import { isInteractiveElement } from '@plone/volto/helpers';
+
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const messages = defineMessages({
+  delete: {
+    id: 'Remove element {index}',
+    defaultMessage: 'Remove element {index}',
+  },
+  reset: {
+    id: 'Reset element {index}',
+    defaultMessage: 'Reset element {index}',
+  },
+});
+
+const EditBlockWrapper = (props) => {
+  const intl = useIntl();
+
+  const { blockProps, draginfo, children } = props;
+  const {
+    block,
+    selected,
+    type,
+    blocksConfig,
+    onChangeBlock,
+    onDeleteBlock,
+    onSelectBlock,
+    data,
+    index,
+  } = blockProps;
+
+  function onResetBlock() {
+    onChangeBlock(block, { '@type': 'empty' });
+  }
+
+  return (
+    <div
+      ref={draginfo.innerRef}
+      {...draginfo.draggableProps}
+      {...draginfo.dragHandleProps}
+      className={cx(`block-editor-${data['@type']} contained`, { selected })}
+    >
+      <div
+        role="presentation"
+        className="cell-wrapper"
+        onClick={(e) => {
+          onSelectBlock(block);
+        }}
+      >
+        {type !== 'empty' ? (
+          <Button
+            aria-label={intl.formatMessage(messages.reset, {
+              index,
+            })}
+            basic
+            icon
+            onClick={(e) => onResetBlock(block, {})}
+            className="remove-block-button"
+          >
+            <Icon name={clearSVG} className="circled" size="24px" />
+          </Button>
+        ) : (
+          <Button
+            basic
+            icon
+            className="remove-block-button"
+            onClick={(e) => onDeleteBlock(block, true)}
+            aria-label={intl.formatMessage(messages.delete, {
+              index,
+            })}
+          >
+            <Icon
+              name={clearSVG}
+              className="circled"
+              size="24px"
+              color="#e40166"
+            />
+          </Button>
+        )}
+        {type && type !== 'empty' ? (
+          <div className={cx('ui drag block inner', type)}>{children}</div>
+        ) : (
+          <div
+            className={cx('gridBlock-empty-placeholder', {
+              selected: selected,
+            })}
+            role="presentation"
+            onClick={(e) => {
+              onSelectBlock(block);
+              // If the click is in the button, then
+              if (isInteractiveElement(e.target)) {
+                e.stopPropagation();
+              }
+            }}
+          >
+            <p>Add a new block</p>
+            <NewBlockAddButton
+              block={block}
+              index={index}
+              blocksConfig={blocksConfig}
+              onMutateBlock={(block, value) =>
+                onChangeBlock(block, {
+                  ...data,
+                  ...value,
+                })
+              }
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EditBlockWrapper;

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Button, Ref } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+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';
+
+const messages = defineMessages({
+  addBlock: {
+    id: 'Add block in position {index}',
+    defaultMessage: 'Add block in position {index}',
+  },
+});
+
+const NewBlockAddButton = (props) => {
+  const intl = useIntl();
+  const { blocksConfig, block, index, onMutateBlock } = props;
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'bottom',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, -30],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['right', 'top-start'],
+        },
+      },
+    ],
+  });
+
+  return (
+    <>
+      <Ref innerRef={setReferenceElement}>
+        <Button
+          basic
+          icon
+          onClick={() => setOpenMenu(true)}
+          className="add-block-button"
+          aria-label={intl.formatMessage(messages.addBlock, {
+            index,
+          })}
+        >
+          <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}
+    </>
+  );
+};
+
+export default NewBlockAddButton;

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

@@ -0,0 +1,54 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Button } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+
+import addSVG from '@plone/volto/icons/add.svg';
+import configSVG from '@plone/volto/icons/configuration.svg';
+
+const messages = defineMessages({
+  addBlock: {
+    id: 'Add element to container',
+    defaultMessage: 'Add element to container',
+  },
+  blockSettings: {
+    id: 'Container settings',
+    defaultMessage: 'Container settings',
+  },
+});
+
+const SimpleContainerToolbar = (props) => {
+  const { data, onAddNewBlock, maxLength, setSelectedBlock } = props;
+  const intl = useIntl();
+
+  return (
+    <div className="toolbar">
+      <Button.Group>
+        <Button
+          aria-label={intl.formatMessage(messages.addBlock)}
+          icon
+          basic
+          disabled={data?.blocks_layout?.items?.length >= maxLength}
+          onClick={(e) => onAddNewBlock()}
+        >
+          <Icon name={addSVG} size="24px" />
+        </Button>
+      </Button.Group>
+      <Button.Group>
+        <Button
+          aria-label={intl.formatMessage(messages.blockSettings)}
+          icon
+          basic
+          onClick={(e) => {
+            e.stopPropagation();
+            setSelectedBlock();
+            props.setSidebarTab(1);
+          }}
+        >
+          <Icon name={configSVG} size="24px" />
+        </Button>
+      </Button.Group>
+    </div>
+  );
+};
+
+export default SimpleContainerToolbar;

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

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import ContainerEdit from '../Container/Edit';
+
+const GridBlockEdit = (props) => {
+  const { data } = props;
+
+  const columnsLength = data?.blocks_layout?.items?.length || 0;
+
+  return (
+    <div
+      className={cx({
+        one: columnsLength === 1,
+        two: columnsLength === 2,
+        three: columnsLength === 3,
+        four: columnsLength >= 4,
+        'grid-items': true,
+      })}
+    >
+      <ContainerEdit {...props} direction="horizontal" />
+    </div>
+  );
+};
+
+GridBlockEdit.propTypes = {
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+};
+
+export default GridBlockEdit;

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

@@ -0,0 +1,43 @@
+import { Grid } from 'semantic-ui-react';
+import cx from 'classnames';
+import { RenderBlocks } from '@plone/volto/components';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const GridBlockView = (props) => {
+  const { data, path, className } = props;
+  const metadata = props.metadata || props.properties;
+  const columns = data.blocks_layout.items;
+  const blocksConfig =
+    config.blocks.blocksConfig[data['@type']].blocksConfig ||
+    props.blocksConfig;
+  const location = {
+    pathname: path,
+  };
+  return (
+    <div
+      className={cx('block', data['@type'], className, {
+        one: columns?.length === 1,
+        two: columns?.length === 2,
+        three: columns?.length === 3,
+        four: columns?.length === 4,
+      })}
+    >
+      {data.headline && <h2 className="headline">{data.headline}</h2>}
+
+      <Grid stackable stretched columns={columns.length}>
+        <RenderBlocks
+          {...props}
+          blockWrapperTag={Grid.Column}
+          metadata={metadata}
+          content={data}
+          location={location}
+          blocksConfig={blocksConfig}
+          isContainer
+        />
+      </Grid>
+    </div>
+  );
+};
+
+export default withBlockExtensions(GridBlockView);