@plone/volto 17.0.0-alpha.8 → 17.0.0

package/src/components/theme/View/ImageView.jsx

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import prettybytes from 'pretty-bytes';
-
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * Image view component class.
@@ -17,37 +17,45 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ImageView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content?.image?.download && (
-      <a href={flattenToAppURL(content.image.download)}>
-        <img
-          alt={content.title}
-          src={flattenToAppURL(content.image.scales.preview.download)}
-        />
-        <figcaption>
-          <FormattedMessage
-            id="Size: {size}"
-            defaultMessage="Size: {size}"
-            values={{ size: prettybytes(content.image.size) }}
-          />
-          &nbsp; &mdash; &nbsp;
-          <FormattedMessage
-            id="Click to download full sized image"
-            defaultMessage="Click to download full sized image"
+const ImageView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content?.image?.download && (
+        <a href={flattenToAppURL(content.image.download)}>
+          <Image
+            item={content}
+            imageField="image"
+            alt={content.title}
+            responsive={true}
           />
-        </figcaption>
-      </a>
-    )}
-  </Container>
-);
+          <figcaption>
+            <FormattedMessage
+              id="Size: {size}"
+              defaultMessage="Size: {size}"
+              values={{ size: prettybytes(content.image.size) }}
+            />
+            &nbsp; &mdash; &nbsp;
+            <FormattedMessage
+              id="Click to download full sized image"
+              defaultMessage="Click to download full sized image"
+            />
+          </figcaption>
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/ImageView.test.jsx

@@ -23,9 +23,13 @@ test('renders an image view component', () => {
           image: {
             size: 123123,
             download: 'file:///preview.jpg',
+            width: 400,
+            height: 400,
             scales: {
               preview: {
                 download: 'file:///preview.jpg',
+                width: 400,
+                height: 400,
               },
             },
           },

package/src/components/theme/View/LinkView.jsx

@@ -1,92 +1,67 @@
-/**
- * Link View.
- * @module components/theme/View/LinkView
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
-/**
- * View container class.
- * @class View
- * @extends Component
- */
-class LinkView extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    content: PropTypes.shape({
-      title: PropTypes.string,
-      description: PropTypes.string,
-      remoteUrl: PropTypes.string,
-    }),
-    token: PropTypes.string,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    content: null,
-    token: null,
-  };
-
-  componentDidMount() {
-    if (!this.props.token) {
-      const { remoteUrl } = this.props.content;
+const LinkView = ({ token, content }) => {
+  const history = useHistory();
+  useEffect(() => {
+    if (!token) {
+      const { remoteUrl } = content;
       if (isInternalURL(remoteUrl)) {
-        this.props.history.replace(flattenToAppURL(remoteUrl));
+        history.replace(flattenToAppURL(remoteUrl));
       } else if (!__SERVER__) {
         window.location.href = flattenToAppURL(remoteUrl);
       }
     }
-  }
+  }, [content, history, token]);
+  const { title, description, remoteUrl } = content;
+  const { openExternalLinkInNewTab } = config.settings;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-document">
+      <h1 className="documentFirstHeading">{title}</h1>
+      {content.description && (
+        <p className="documentDescription">{description}</p>
+      )}
+      {remoteUrl && (
+        <p>
+          <FormattedMessage
+            id="The link address is:"
+            defaultMessage="The link address is:"
+          />{' '}
+          <UniversalLink
+            href={remoteUrl}
+            openLinkInNewTab={
+              openExternalLinkInNewTab && !isInternalURL(remoteUrl)
+            }
+          >
+            {flattenToAppURL(remoteUrl)}
+          </UniversalLink>
+        </p>
+      )}
+    </Container>
+  );
+};
+
+LinkView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    remoteUrl: PropTypes.string,
+  }),
+  token: PropTypes.string,
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { remoteUrl } = this.props.content;
-    const { openExternalLinkInNewTab } = config.settings;
-    return (
-      <Container id="page-document">
-        <h1 className="documentFirstHeading">{this.props.content.title}</h1>
-        {this.props.content.description && (
-          <p className="documentDescription">
-            {this.props.content.description}
-          </p>
-        )}
-        {remoteUrl && (
-          <p>
-            <FormattedMessage
-              id="The link address is:"
-              defaultMessage="The link address is:"
-            />{' '}
-            <UniversalLink
-              href={remoteUrl}
-              openLinkInNewTab={
-                openExternalLinkInNewTab && !isInternalURL(remoteUrl)
-              }
-            >
-              {flattenToAppURL(remoteUrl)}
-            </UniversalLink>
-          </p>
-        )}
-      </Container>
-    );
-  }
-}
+LinkView.defaultProps = {
+  content: null,
+  token: null,
+};
 
 export default LinkView;

package/src/components/theme/View/ListingView.jsx

@@ -5,8 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Segment, Container } from 'semantic-ui-react';
-import { UniversalLink, PreviewImage } from '@plone/volto/components';
+import { Segment, Container as SemanticContainer } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 /**
  * List view component class.
@@ -14,32 +15,39 @@ import { UniversalLink, PreviewImage } from '@plone/volto/components';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ListingView = ({ content }) => (
-  <Container id="page-home">
-    <section id="content-core">
-      {content.items.map((item) => (
-        <Segment key={item.url} className="listing-item">
-          <Container>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.description && <p>{item.description}</p>}
-          </Container>
-          {item.image_field && (
-            <PreviewImage
-              item={item}
-              size="thumb"
-              alt={item.image_caption ? item.image_caption : item.title}
-              className="ui image"
-            />
-          )}
-        </Segment>
-      ))}
-    </section>
-  </Container>
-);
+const ListingView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component;
+
+  return (
+    <Container id="page-home">
+      <section id="content-core">
+        {content.items.map((item) => (
+          <Segment key={item.url} className="listing-item">
+            <Container>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.description && <p>{item.description}</p>}
+            </Container>
+            {item.image_field && (
+              <PreviewImage
+                item={item}
+                alt={item.image_caption}
+                className="ui image"
+                responsive={true}
+                loading="lazy"
+              />
+            )}
+          </Segment>
+        ))}
+      </section>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/NewsItemView.jsx

@@ -5,13 +5,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Image } from 'semantic-ui-react';
-import {
-  hasBlocksData,
-  flattenToAppURL,
-  flattenHTMLToAppURL,
-} from '@plone/volto/helpers';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import config from '@plone/volto/registry';
 
 /**
  * NewsItemView view component class.
@@ -19,11 +16,15 @@ import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const NewsItemView = ({ content }) =>
-  hasBlocksData(content) ? (
-    <div id="page-document" className="ui container view-wrapper newsitem-view">
+const NewsItemView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return hasBlocksData(content) ? (
+    <Container id="page-document" className="view-wrapper newsitem-view">
       <RenderBlocks content={content} />
-    </div>
+    </Container>
   ) : (
     <Container className="view-wrapper">
       {content.title && (
@@ -37,15 +38,12 @@ const NewsItemView = ({ content }) =>
       )}
       {content.image && (
         <Image
-          className="documentImage"
+          className="documentImage ui right floated image"
           alt={content.title}
           title={content.title}
-          src={
-            content.image['content-type'] === 'image/svg+xml'
-              ? flattenToAppURL(content.image.download)
-              : flattenToAppURL(content.image.scales.mini.download)
-          }
-          floated="right"
+          item={content}
+          imageField="image"
+          responsive={true}
         />
       )}
       {content.text && (
@@ -57,6 +55,7 @@ const NewsItemView = ({ content }) =>
       )}
     </Container>
   );
+};
 
 /**
  * Property types.

package/src/components/theme/View/RenderBlocks.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { map } from 'lodash';
+import { MaybeWrap } from '@plone/volto/components';
 import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
@@ -10,6 +11,7 @@ import {
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
 import config from '@plone/volto/registry';
 import { ViewDefaultBlock } from '@plone/volto/components';
+import RenderEmptyBlock from './RenderEmptyBlock';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -23,7 +25,8 @@ const messages = defineMessages({
 });
 
 const RenderBlocks = (props) => {
-  const { content, intl, location, metadata } = props;
+  const { content, location, metadata, blockWrapperTag } = props;
+  const intl = useIntl();
   const blocksFieldname = getBlocksFieldname(content);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
   const blocksConfig = props.blocksConfig || config.blocks.blocksConfig;
@@ -43,24 +46,56 @@ const RenderBlocks = (props) => {
           properties: content,
         });
 
-        return Block ? (
-          <StyleWrapper key={block} {...props} id={block} data={blockData}>
-            <Block
-              id={block}
-              metadata={metadata}
-              properties={content}
-              data={blockData}
-              path={getBaseUrl(location?.pathname || '')}
-              blocksConfig={blocksConfig}
-            />
-          </StyleWrapper>
-        ) : blockData ? (
-          <div key={block}>
-            {intl.formatMessage(messages.unknownBlock, {
-              block: content[blocksFieldname]?.[block]?.['@type'],
-            })}
-          </div>
-        ) : (
+        if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
+          return (
+            <MaybeWrap
+              key={block}
+              condition={blockWrapperTag}
+              as={blockWrapperTag}
+            >
+              <RenderEmptyBlock />
+            </MaybeWrap>
+          );
+        }
+
+        if (Block) {
+          return (
+            <MaybeWrap
+              key={block}
+              condition={blockWrapperTag}
+              as={blockWrapperTag}
+            >
+              <StyleWrapper
+                key={block}
+                {...props}
+                id={block}
+                block={block}
+                data={blockData}
+              >
+                <Block
+                  id={block}
+                  metadata={metadata}
+                  properties={content}
+                  data={blockData}
+                  path={getBaseUrl(location?.pathname || '')}
+                  blocksConfig={blocksConfig}
+                />
+              </StyleWrapper>
+            </MaybeWrap>
+          );
+        }
+
+        if (blockData) {
+          return (
+            <div key={block}>
+              {intl.formatMessage(messages.unknownBlock, {
+                block: content[blocksFieldname]?.[block]?.['@type'],
+              })}
+            </div>
+          );
+        }
+
+        return (
           <div key={block}>{intl.formatMessage(messages.invalidBlock)}</div>
         );
       })}
@@ -70,4 +105,4 @@ const RenderBlocks = (props) => {
   );
 };
 
-export default injectIntl(RenderBlocks);
+export default RenderBlocks;

package/src/components/theme/View/RenderEmptyBlock.jsx

@@ -0,0 +1,5 @@
+const RenderEmptyBlock = () => {
+  return null;
+};
+
+export default RenderEmptyBlock;

package/src/components/theme/View/SummaryView.jsx

@@ -6,9 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
-import PreviewImage from '../PreviewImage/PreviewImage';
+import config from '@plone/volto/registry';
 
 /**
  * Summary view component class.
@@ -16,43 +16,53 @@ import PreviewImage from '../PreviewImage/PreviewImage';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const SummaryView = ({ content }) => (
-  <Container className="view-wrapper summary-view">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        {content.items.map((item) => (
-          <article key={item.url}>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.image_field && (
-              <PreviewImage
-                item={item}
-                alt={item.image_caption ? item.image_caption : item.title}
-                size="thumb"
-                className="ui image floated right clear"
-              />
-            )}
-            {item.description && <p>{item.description}</p>}
-            <p>
-              <UniversalLink item={item}>
-                <FormattedMessage id="Read More…" defaultMessage="Read More…" />
-              </UniversalLink>
-            </p>
-          </article>
-        ))}
-      </section>
-    </article>
-  </Container>
-);
+const SummaryView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component;
+
+  return (
+    <Container className="view-wrapper summary-view">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          {content.items.map((item) => (
+            <article key={item.url}>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.image_field && (
+                <PreviewImage
+                  item={item}
+                  alt={item.image_caption}
+                  className="ui image floated right clear"
+                  responsive={true}
+                  loading="lazy"
+                />
+              )}
+              {item.description && <p>{item.description}</p>}
+              <p>
+                <UniversalLink item={item}>
+                  <FormattedMessage
+                    id="Read More…"
+                    defaultMessage="Read More…"
+                  />
+                </UniversalLink>
+              </p>
+            </article>
+          ))}
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.