@plone/volto 17.0.0-alpha.14 → 17.0.0-alpha.16

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,42 @@
+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}
+        />
+      </Grid>
+    </div>
+  );
+};
+
+export default withBlockExtensions(GridBlockView);

package/src/components/manage/Blocks/Grid/adapter.js

@@ -0,0 +1,14 @@
+export const GridBlockDataAdapter = ({
+  block,
+  data,
+  id,
+  onChangeBlock,
+  value,
+}) => {
+  let dataSaved = {
+    ...data,
+    [id]: value,
+  };
+
+  onChangeBlock(block, dataSaved);
+};

package/src/components/manage/Blocks/Grid/grid-1.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <rect width="67" height="53" fill="#FFF" opacity=".9" transform="translate(15 22)"/>
+  </g>
+</svg>

package/src/components/manage/Blocks/Grid/grid-2.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(9 22)">
+      <rect width="37" height="53"/>
+      <rect width="37" height="53" x="42"/>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/Grid/grid-3.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(6 22)">
+      <rect width="25" height="53" x="58"/>
+      <rect width="25" height="53"/>
+      <rect width="25" height="53" x="29"/>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/Grid/grid-4.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(8 22)">
+      <rect width="18" height="53" x="42"/>
+      <rect width="18" height="53" x="63"/>
+      <rect width="18" height="53"/>
+      <rect width="18" height="53" x="21"/>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/Grid/schema.js

@@ -0,0 +1,35 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  headline: {
+    id: 'Headline',
+    defaultMessage: 'Headline',
+  },
+  grid: {
+    id: 'Grid',
+    defaultMessage: 'Grid',
+  },
+});
+
+export const GridBlockSchema = (props) => {
+  const { intl } = props;
+
+  return {
+    title: intl.formatMessage(messages.grid),
+    block: 'grid',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['headline'],
+      },
+    ],
+
+    properties: {
+      headline: {
+        title: intl.formatMessage(messages.headline),
+      },
+    },
+    required: [],
+  };
+};

package/src/components/manage/Blocks/Grid/templates.js

@@ -0,0 +1,47 @@
+import { defineMessages } from 'react-intl';
+import { blocksFormGenerator } from '@plone/volto/helpers';
+
+import gridTemplate1 from './grid-1.svg';
+import gridTemplate2 from './grid-2.svg';
+import gridTemplate3 from './grid-3.svg';
+import gridTemplate4 from './grid-4.svg';
+
+const messages = defineMessages({
+  column: {
+    id: 'column',
+    defaultMessage: 'column',
+  },
+  columns: {
+    id: 'columns',
+    defaultMessage: 'columns',
+  },
+});
+
+const templates = (type) => (intl) => [
+  {
+    image: gridTemplate1,
+    id: 'gridtemplateone',
+    title: `1 ${intl.formatMessage(messages.column)}`,
+    blocksData: blocksFormGenerator(1, type),
+  },
+  {
+    image: gridTemplate2,
+    id: 'gridtemplatetwo',
+    title: `2 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(2, type),
+  },
+  {
+    image: gridTemplate3,
+    id: 'gridtemplatethree',
+    title: `3 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(3, type),
+  },
+  {
+    image: gridTemplate4,
+    id: 'gridtemplatefour',
+    title: `4 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(4, type),
+  },
+];
+
+export default templates;

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

@@ -8,7 +8,7 @@ import { ImageSchema } from './schema';
 import imageSVG from '@plone/volto/icons/image.svg';
 
 const ImageSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { blocksConfig, data, block, onChangeBlock } = props;
   const intl = useIntl();
   const schema = ImageSchema({ formData: data, intl });
   return (
@@ -55,6 +55,7 @@ const ImageSidebar = (props) => {
         onChangeBlock={onChangeBlock}
         formData={data}
         block={block}
+        blocksConfig={blocksConfig}
       />
     </>
   );

package/src/components/manage/Blocks/Image/schema.js

@@ -101,3 +101,14 @@ export function ImageSchema({ formData, intl }) {
     required: [],
   };
 }
+
+export const gridImageDisableSizeAndPositionHandlersSchema = ({
+  schema,
+  formData,
+  intl,
+}) => {
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (item) => !['align', 'size'].includes(item),
+  );
+  return schema;
+};