@plone/volto 17.0.0-alpha.9 → 17.0.1

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/HTML/Edit.jsx

@@ -149,14 +149,14 @@ class Edit extends Component {
    * @method onPreview
    * @returns {undefined}
    */
-  onPreview() {
+  async onPreview() {
     try {
-      const code = this.props.prettierStandalone
-        .format(this.getValue(), {
+      const code = (
+        await this.props.prettierStandalone.format(this.getValue(), {
           parser: 'html',
           plugins: [this.props.prettierParserHtml],
         })
-        .trim();
+      ).trim();
       this.setState(
         {
           isPreview: !this.state.isPreview,
@@ -174,14 +174,14 @@ class Edit extends Component {
    * @method onPrettify
    * @returns {undefined}
    */
-  onPrettify = () => {
+  onPrettify = async () => {
     try {
-      const code = this.props.prettierStandalone
-        .format(this.getValue(), {
+      const code = (
+        await this.props.prettierStandalone.format(this.getValue(), {
           parser: 'html',
           plugins: [this.props.prettierParserHtml],
         })
-        .trim();
+      ).trim();
       this.onChangeCode(code);
     } catch (ex) {
       // error while parsing the user-typed HTML

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

@@ -14,7 +14,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  validateFileUploadSize,
+} from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import { Icon, SidebarPortal, LinkMore } from '@plone/volto/components';
 
@@ -122,9 +126,8 @@ class EditComponent extends Component {
         },
       });
 
-      this.extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
-        blockTitleRenderMap,
-      );
+      this.extendedBlockRenderMap =
+        DefaultDraftBlockRenderMap.merge(blockTitleRenderMap);
 
       this.extendedDescripBlockRenderMap = DefaultDraftBlockRenderMap.merge(
         blockDescriptionRenderMap,
@@ -275,6 +278,7 @@ class EditComponent extends Component {
    */
   onUploadImage({ target }) {
     const file = target.files[0];
+    if (!validateFileUploadSize(file, this.props.intl.formatMessage)) return;
     this.setState({
       uploading: true,
     });
@@ -316,24 +320,26 @@ class EditComponent extends Component {
           selected: this.props.selected,
         })}
       >
-        {this.props.selected && this.props.editable && !!this.props.data.url && (
-          <div className="toolbar">
-            <Button.Group>
-              <Button
-                icon
-                basic
-                onClick={() =>
-                  this.props.onChangeBlock(this.props.block, {
-                    ...this.props.data,
-                    url: '',
-                  })
-                }
-              >
-                <Icon name={clearSVG} size="24px" color="#e40166" />
-              </Button>
-            </Button.Group>
-          </div>
-        )}
+        {this.props.selected &&
+          this.props.editable &&
+          !!this.props.data.url && (
+            <div className="toolbar">
+              <Button.Group>
+                <Button
+                  icon
+                  basic
+                  onClick={() =>
+                    this.props.onChangeBlock(this.props.block, {
+                      ...this.props.data,
+                      url: '',
+                    })
+                  }
+                >
+                  <Icon name={clearSVG} size="24px" color="#e40166" />
+                </Button>
+              </Button.Group>
+            </div>
+          )}
         <div className="block-inner-wrapper">
           {this.props.data.url ? (
             <img
@@ -386,7 +392,8 @@ class EditComponent extends Component {
                 placeholder={this.props.intl.formatMessage(messages.title)}
                 blockStyleFn={() => 'title-editor'}
                 onUpArrow={() => {
-                  const selectionState = this.state.titleEditorState.getSelection();
+                  const selectionState =
+                    this.state.titleEditorState.getSelection();
                   const { titleEditorState } = this.state;
                   if (
                     titleEditorState
@@ -402,7 +409,8 @@ class EditComponent extends Component {
                   }
                 }}
                 onDownArrow={() => {
-                  const selectionState = this.state.titleEditorState.getSelection();
+                  const selectionState =
+                    this.state.titleEditorState.getSelection();
                   const { titleEditorState } = this.state;
                   if (
                     titleEditorState
@@ -430,7 +438,8 @@ class EditComponent extends Component {
                 )}
                 blockStyleFn={() => 'description-editor'}
                 onUpArrow={() => {
-                  const selectionState = this.state.descriptionEditorState.getSelection();
+                  const selectionState =
+                    this.state.descriptionEditorState.getSelection();
                   const currentCursorPosition = selectionState.getStartOffset();
 
                   if (currentCursorPosition === 0) {
@@ -439,7 +448,8 @@ class EditComponent extends Component {
                   }
                 }}
                 onDownArrow={() => {
-                  const selectionState = this.state.descriptionEditorState.getSelection();
+                  const selectionState =
+                    this.state.descriptionEditorState.getSelection();
                   const { descriptionEditorState } = this.state;
                   const currentCursorPosition = selectionState.getStartOffset();
                   const blockLength = descriptionEditorState

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

@@ -15,13 +15,15 @@ import cx from 'classnames';
 import { isEqual } from 'lodash';
 
 import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
-import { withBlockExtensions } from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import {
   flattenToAppURL,
   getBaseUrl,
   isInternalURL,
+  withBlockExtensions,
+  validateFileUploadSize,
 } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -58,7 +60,7 @@ class Edit extends Component {
     block: PropTypes.string.isRequired,
     index: PropTypes.number.isRequired,
     data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any).isRequired,
+    content: PropTypes.objectOf(PropTypes.any),
     request: PropTypes.shape({
       loading: PropTypes.bool,
       loaded: PropTypes.bool,
@@ -87,6 +89,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
+    // Update block data after upload finished
     if (
       this.props.request.loading &&
       nextProps.request.loaded &&
@@ -98,6 +101,8 @@ class Edit extends Component {
       this.props.onChangeBlock(this.props.block, {
         ...this.props.data,
         url: nextProps.content['@id'],
+        image_field: 'image',
+        image_scales: { image: [nextProps.content.image] },
         alt: '',
       });
     }
@@ -125,6 +130,7 @@ class Edit extends Component {
   onUploadImage = (e) => {
     e.stopPropagation();
     const file = e.target.files[0];
+    if (!validateFileUploadSize(file, this.props.intl.formatMessage)) return;
     this.setState({
       uploading: true,
     });
@@ -169,6 +175,8 @@ class Edit extends Component {
     this.props.onChangeBlock(this.props.block, {
       ...this.props.data,
       url: flattenToAppURL(this.state.url),
+      image_field: undefined,
+      image_scales: undefined,
     });
   };
 
@@ -178,23 +186,25 @@ class Edit extends Component {
    * @param {array} files File objects
    * @returns {undefined}
    */
-  onDrop = (file) => {
-    this.setState({
-      uploading: true,
-    });
+  onDrop = (files) => {
+    if (!validateFileUploadSize(files[0], this.props.intl.formatMessage)) {
+      this.setState({ dragging: false });
+      return;
+    }
+    this.setState({ uploading: true });
 
-    readAsDataURL(file[0]).then((data) => {
+    readAsDataURL(files[0]).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
       this.props.createContent(
         getBaseUrl(this.props.pathname),
         {
           '@type': 'Image',
-          title: file[0].name,
+          title: files[0].name,
           image: {
             data: fields[3],
             encoding: fields[2],
             'content-type': fields[1],
-            filename: file[0].name,
+            filename: files[0].name,
           },
         },
         this.props.block,
@@ -236,10 +246,12 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Image = config.getComponent({ name: 'Image' }).component;
     const { data } = this.props;
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
+
     return (
       <div
         className={cx(
@@ -251,15 +263,26 @@ class Edit extends Component {
         )}
       >
         {data.url ? (
-          <img
+          <Image
             className={cx({
               'full-width': data.align === 'full',
               large: data.size === 'l',
               medium: data.size === 'm',
               small: data.size === 's',
             })}
+            item={
+              data.image_scales
+                ? {
+                    '@id': data.url,
+                    image_field: data.image_field,
+                    image_scales: data.image_scales,
+                  }
+                : undefined
+            }
             src={
-              isInternalURL(data.url)
+              data.image_scales
+                ? undefined
+                : isInternalURL(data.url)
                 ? // Backwards compat in the case that the block is storing the full server URL
                   (() => {
                     if (data.size === 'l')
@@ -274,7 +297,10 @@ class Edit extends Component {
                   })()
                 : data.url
             }
+            sizes={config.blocks.blocksConfig.image.getSizes(data)}
             alt={data.alt || ''}
+            loading="lazy"
+            responsive={true}
           />
         ) : (
           <div>
@@ -309,7 +335,20 @@ class Edit extends Component {
                               onClick={(e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
-                                this.props.openObjectBrowser();
+                                this.props.openObjectBrowser({
+                                  onSelectItem: (
+                                    url,
+                                    { title, image_field, image_scales },
+                                  ) => {
+                                    this.props.onChangeBlock(this.props.block, {
+                                      ...this.props.data,
+                                      url,
+                                      image_field,
+                                      image_scales,
+                                      alt: this.props.data.alt || title || '',
+                                    });
+                                  },
+                                });
                               }}
                             >
                               <Icon name={navTreeSVG} size="24px" />

package/src/components/manage/Blocks/Image/Edit.test.jsx

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor } from '@testing-library/react';
+import { getImageBlockSizes } from './utils';
 import config from '@plone/volto/registry';
 
 import Edit from './Edit';
@@ -25,6 +26,7 @@ config.blocks.blocksConfig = {
       addPermission: [],
       view: [],
     },
+    getSizes: getImageBlockSizes,
   },
 };
 

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Segment } from 'semantic-ui-react';
-import { useIntl, FormattedMessage } from 'react-intl';
-import { BlockDataForm, Icon } from '@plone/volto/components';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { Segment, Button } from 'semantic-ui-react';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+import { BlockDataForm, Icon, Image } from '@plone/volto/components';
 import { ImageSchema } from './schema';
 import imageSVG from '@plone/volto/icons/image.svg';
+import trashSVG from '@plone/volto/icons/delete.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 (
@@ -17,21 +18,58 @@ const ImageSidebar = (props) => {
         <h2>
           <FormattedMessage id="Image" defaultMessage="Image" />
         </h2>
+        <Button.Group>
+          <Button
+            title={intl.formatMessage(messages.clear)}
+            basic
+            disabled={!data.url}
+            onClick={() => {
+              onChangeBlock(block, {
+                ...data,
+                url: undefined,
+                image_scales: undefined,
+                image_field: undefined,
+                alt: data.url.title === data.alt ? undefined : data.alt,
+              });
+            }}
+          >
+            <Icon name={trashSVG} size="24px" color="red" />
+          </Button>
+        </Button.Group>
       </header>
 
-      <Segment className="sidebar-metadata-container" secondary attached>
+      <Segment
+        className="sidebar-metadata-container image-sidebar"
+        secondary
+        attached
+      >
         {data.url ? (
           <>
-            {data.url.split('/').slice(-1)[0]}
-            {isInternalURL(data.url) && (
-              <img
-                src={`${flattenToAppURL(data.url)}/@@images/image/mini`}
-                alt={data.alt}
-              />
-            )}
-            {!isInternalURL(data.url) && (
-              <img src={data.url} alt={data.alt} style={{ width: '50%' }} />
-            )}
+            <div>{(data.url?.['@id'] ?? data.url).split('/').slice(-1)[0]}</div>
+            <Image
+              item={
+                data.image_scales
+                  ? {
+                      '@id': data.url,
+                      image_field: data.image_field,
+                      image_scales: data.image_scales,
+                    }
+                  : undefined
+              }
+              src={
+                data.image_scales
+                  ? undefined
+                  : isInternalURL(data.url)
+                  ? // Backwards compat in the case that the block is storing the full server URL
+                    `${flattenToAppURL(data.url)}/@@images/image/preview`
+                  : data.url
+              }
+              sizes="188px"
+              alt={intl.formatMessage(messages.preview)}
+              loading="lazy"
+              responsive={true}
+              style={{ width: '50%' }}
+            />
           </>
         ) : (
           <>
@@ -55,6 +93,7 @@ const ImageSidebar = (props) => {
         onChangeBlock={onChangeBlock}
         formData={data}
         block={block}
+        blocksConfig={blocksConfig}
       />
     </>
   );
@@ -67,3 +106,14 @@ ImageSidebar.propTypes = {
 };
 
 export default ImageSidebar;
+
+const messages = defineMessages({
+  preview: {
+    id: 'image_block_preview',
+    defaultMessage: 'Image preview',
+  },
+  clear: {
+    id: 'image_block_clear',
+    defaultMessage: 'Clear image',
+  },
+});

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

@@ -7,16 +7,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
-import { withBlockExtensions } from '@plone/volto/helpers';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  withBlockExtensions,
+} from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * View image block class.
  * @class View
  * @extends Component
  */
-export const View = ({ data, detached }) => {
+export const View = ({ className, data, detached, properties }) => {
   const href = data?.href?.[0]?.['@id'] || '';
+
+  const Image = config.getComponent({ name: 'Image' }).component;
+
   return (
     <p
       className={cx(
@@ -26,21 +33,33 @@ export const View = ({ data, detached }) => {
           detached,
         },
         data.align,
+        className,
       )}
     >
       {data.url && (
         <>
           {(() => {
             const image = (
-              <img
+              <Image
                 className={cx({
                   'full-width': data.align === 'full',
                   large: data.size === 'l',
                   medium: data.size === 'm',
                   small: data.size === 's',
                 })}
+                item={
+                  data.image_scales
+                    ? {
+                        '@id': data.url,
+                        image_field: data.image_field,
+                        image_scales: data.image_scales,
+                      }
+                    : undefined
+                }
                 src={
-                  isInternalURL(data.url)
+                  data.image_scales
+                    ? undefined
+                    : isInternalURL(data.url)
                     ? // Backwards compat in the case that the block is storing the full server URL
                       (() => {
                         if (data.size === 'l')
@@ -57,8 +76,10 @@ export const View = ({ data, detached }) => {
                       })()
                     : data.url
                 }
+                sizes={config.blocks.blocksConfig.image.getSizes(data)}
                 alt={data.alt || ''}
                 loading="lazy"
+                responsive={true}
               />
             );
             if (href) {

package/src/components/manage/Blocks/Image/View.test.jsx

@@ -4,6 +4,8 @@ import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
+import { getImageBlockSizes } from './utils';
+import config from '@plone/volto/registry';
 import { View } from './View';
 
 const mockStore = configureStore();
@@ -15,6 +17,24 @@ const store = mockStore({
   },
 });
 
+config.blocks.blocksConfig = {
+  image: {
+    id: 'image',
+    title: 'Image',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    getSizes: getImageBlockSizes,
+  },
+};
+
 describe('Image View Component', () => {
   test('renders a view image component with a local image', () => {
     const { getByRole } = render(<View data={{ url: '/image.jpg' }} />);

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

@@ -1,10 +1,6 @@
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-  Source: {
-    id: 'Source',
-    defaultMessage: 'Source',
-  },
   Image: {
     id: 'Image',
     defaultMessage: 'Image',
@@ -37,6 +33,10 @@ const messages = defineMessages({
     id: 'Alt text hint link text',
     defaultMessage: 'Describe the purpose of the image.',
   },
+  linkSettings: {
+    id: 'Link settings',
+    defaultMessage: 'Link settings',
+  },
 });
 
 export function ImageSchema({ formData, intl }) {
@@ -45,23 +45,19 @@ export function ImageSchema({ formData, intl }) {
       {
         id: 'default',
         title: 'Default',
-        fields: [...(formData.url ? ['url', 'alt', 'align', 'size'] : [])],
+        fields: [...(formData.url ? ['alt', 'align', 'size'] : [])],
       },
       ...(formData.url
         ? [
             {
               id: 'link_settings',
-              title: 'Link settings',
+              title: intl.formatMessage(messages.linkSettings),
               fields: ['href', 'openLinkInNewTab'],
             },
           ]
         : []),
     ],
     properties: {
-      url: {
-        title: intl.formatMessage(messages.Source),
-        widget: 'url',
-      },
       alt: {
         title: intl.formatMessage(messages.AltText),
         description: (
@@ -101,3 +97,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/Image/utils.js

@@ -0,0 +1,14 @@
+export function getImageBlockSizes(data) {
+  if (data.align === 'full') return '100vw';
+  if (data.align === 'center') {
+    if (data.size === 'l') return '100vw';
+    if (data.size === 'm') return '50vw';
+    if (data.size === 's') return '25vw';
+  }
+  if (data.align === 'left' || data.align === 'right') {
+    if (data.size === 'l') return '50vw';
+    if (data.size === 'm') return '25vw';
+    if (data.size === 's') return '15vw';
+  }
+  return undefined;
+}