@plone/volto 17.0.0-alpha.15 → 17.0.0-alpha.17

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);

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;
+};

package/src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -54,10 +54,9 @@ export default function withQuerystringResults(WrappedComponent) {
     const hasQuery = querystring?.query?.length > 0;
     const hasLoaded = hasQuery ? querystringResults?.[id]?.loaded : true;
 
-    const listingItems =
-      querystring?.query?.length > 0 && querystringResults?.[id]
-        ? querystringResults?.[id]?.items || []
-        : folderItems;
+    const listingItems = hasQuery
+      ? querystringResults?.[id]?.items || []
+      : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =

package/src/components/manage/Blocks/Teaser/Body.jsx

@@ -24,7 +24,6 @@ const TeaserBody = (props) => {
 TeaserBody.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
   isEditMode: PropTypes.bool,
-  variation: PropTypes.string,
 };
 
 export default TeaserBody;

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -18,20 +18,31 @@ const messages = defineMessages({
   },
 });
 
-const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
-
 const TeaserDefaultTemplate = (props) => {
   const { className, data, isEditMode } = props;
   const intl = useIntl();
   const href = data.href?.[0];
-  const image = data.preview_image?.[0];
+  const imageOverride = data.preview_image?.[0];
   const align = data?.styles?.align;
 
-  const hasImageComponent = config.getComponent('Image').component;
-  const Image = config.getComponent('Image').component || DefaultImage;
   const { openExternalLinkInNewTab } = config.settings;
-  const defaultImageSrc =
-    href && flattenToAppURL(getTeaserImageURL({ href, image, align }));
+
+  let renderedImage = null;
+  if (href && (imageOverride || href.hasPreviewImage || href.image_field)) {
+    let Image = config.getComponent('Image').component;
+    if (Image) {
+      // custom image component expects item summary as src
+      renderedImage = (
+        <Image src={imageOverride || href} alt="" loading="lazy" />
+      );
+    } else {
+      // default img expects string src
+      const src = flattenToAppURL(
+        getTeaserImageURL({ href, imageOverride, align }),
+      );
+      renderedImage = <img src={src} alt="" loading="lazy" />;
+    }
+  }
 
   return (
     <div className={cx('block teaser', className)}>
@@ -57,14 +68,8 @@ const TeaserDefaultTemplate = (props) => {
             }
           >
             <div className="teaser-item default">
-              {(href.hasPreviewImage || href.image_field || image) && (
-                <div className="image-wrapper">
-                  <Image
-                    src={hasImageComponent ? href : defaultImageSrc}
-                    alt=""
-                    loading="lazy"
-                  />
-                </div>
+              {renderedImage && (
+                <div className="image-wrapper">{renderedImage}</div>
               )}
               <div className="content">
                 {data?.head_title && (

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

@@ -101,3 +101,8 @@ export const TeaserSchema = ({ intl }) => {
 
   return schema;
 };
+
+export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  return schema;
+};

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -53,6 +53,7 @@ const DragDropList = (props) => {
   const {
     childList,
     children,
+    direction = 'vertical',
     onMoveItem,
     as = 'div',
     style,
@@ -128,6 +129,7 @@ const DragDropList = (props) => {
     >
       <Droppable
         droppableId={uid}
+        direction={direction}
         renderClone={(provided, snapshot, rubric) => {
           const index = rubric.source.index;
           return children({
@@ -160,19 +162,22 @@ const DragDropList = (props) => {
                 </Draggable>
               ))}
             {provided.placeholder}
-            {!isEmpty(placeholderProps) && snapshot.isDraggingOver && (
-              <div
-                style={{
-                  position: 'absolute',
-                  top: placeholderProps.clientY,
-                  left: placeholderProps.clientX,
-                  height: placeholderProps.clientHeight,
-                  background: '#eee',
-                  width: placeholderProps.clientWidth,
-                  borderRadius: '3px',
-                }}
-              />
-            )}
+            {/* TODO: Fix the ghost problem if horizontal dnd is present */}
+            {direction !== 'horizontal' &&
+              !isEmpty(placeholderProps) &&
+              snapshot.isDraggingOver && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: placeholderProps.clientY,
+                    left: placeholderProps.clientX,
+                    height: placeholderProps.clientHeight,
+                    background: '#eee',
+                    width: placeholderProps.clientWidth,
+                    borderRadius: '3px',
+                  }}
+                />
+              )}
           </AsDomComponent>
         )}
       </Droppable>