@plone/volto 16.12.0 → 16.14.0

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button } from 'semantic-ui-react';
+import { BlockDataForm, Icon } from '@plone/volto/components';
+import { isEmpty } from 'lodash';
+
+import trashSVG from '@plone/volto/icons/delete.svg';
+
+const messages = defineMessages({
+  resetTeaser: {
+    id: 'Reset the block',
+    defaultMessage: 'Reset the block',
+  },
+});
+
+const TeaserData = (props) => {
+  const { block, blocksConfig, data, onChangeBlock } = props;
+  const intl = useIntl();
+
+  const reset = () => {
+    onChangeBlock(block, {
+      ...data,
+      href: '',
+      title: '',
+      description: '',
+      head_title: '',
+    });
+  };
+
+  const isReseteable =
+    isEmpty(data.href) && !data.title && !data.description && !data.head_title;
+
+  const HeaderActions = (
+    <Button.Group>
+      <Button
+        aria-label={intl.formatMessage(messages.resetTeaser)}
+        basic
+        disabled={isReseteable}
+        onClick={() => reset()}
+      >
+        <Icon name={trashSVG} size="24px" color="red" />
+      </Button>
+    </Button.Group>
+  );
+
+  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,
+        });
+      }}
+      onChangeBlock={onChangeBlock}
+      formData={data}
+      block={block}
+      blocksConfig={blocksConfig}
+      headerActions={HeaderActions}
+    />
+  );
+};
+
+export default TeaserData;

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Message } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+import { getTeaserImageURL } from './utils';
+import { MaybeWrap } from '@plone/volto/components';
+import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+});
+
+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 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 }));
+
+  return (
+    <div className={cx('block teaser', className)}>
+      <>
+        {!href && isEditMode && (
+          <Message>
+            <div className="teaser-item placeholder">
+              <img src={imageBlockSVG} alt="" />
+              <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+            </div>
+          </Message>
+        )}
+        {href && (
+          <MaybeWrap
+            condition={!isEditMode}
+            as={UniversalLink}
+            href={href['@id']}
+            target={
+              data.openLinkInNewTab ||
+              (openExternalLinkInNewTab && !isInternalURL(href['@id']))
+                ? '_blank'
+                : null
+            }
+          >
+            <div className="teaser-item default">
+              {(href.hasPreviewImage || href.image_field || image) && (
+                <div className="image-wrapper">
+                  <Image
+                    src={hasImageComponent ? href : defaultImageSrc}
+                    alt=""
+                    loading="lazy"
+                  />
+                </div>
+              )}
+              <div className="content">
+                {data?.head_title && (
+                  <div className="headline">{data.head_title}</div>
+                )}
+                <h2>{data?.title}</h2>
+                {!data.hide_description && <p>{data?.description}</p>}
+              </div>
+            </div>
+          </MaybeWrap>
+        )}
+      </>
+    </div>
+  );
+};
+
+TeaserDefaultTemplate.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default TeaserDefaultTemplate;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import TeaserBody from './Body';
+import { SidebarPortal } from '@plone/volto/components';
+import TeaserData from './Data';
+import { withBlockExtensions } from '@plone/volto/helpers';
+
+const TeaserEdit = (props) => {
+  const { data, onChangeBlock, block, selected } = props;
+
+  return (
+    <>
+      <TeaserBody {...props} isEditMode />
+      <SidebarPortal selected={selected}>
+        <TeaserData
+          {...props}
+          data={data}
+          block={block}
+          onChangeBlock={onChangeBlock}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default withBlockExtensions(TeaserEdit);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import TeaserBody from './Body';
+import { withBlockExtensions } from '@plone/volto/helpers';
+
+const TeaserView = (props) => {
+  return <TeaserBody {...props} />;
+};
+
+export default withBlockExtensions(TeaserView);

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

@@ -0,0 +1,23 @@
+import { isEmpty } from 'lodash';
+
+export const TeaserBlockDataAdapter = ({
+  block,
+  data,
+  id,
+  onChangeBlock,
+  value,
+}) => {
+  let dataSaved = {
+    ...data,
+    [id]: value,
+  };
+  if (id === 'href' && !isEmpty(value) && !data.title && !data.description) {
+    dataSaved = {
+      ...dataSaved,
+      title: value[0].Title,
+      description: value[0].Description,
+      head_title: value[0].head_title,
+    };
+  }
+  onChangeBlock(block, dataSaved);
+};

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

@@ -0,0 +1,103 @@
+import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+
+const messages = defineMessages({
+  Target: {
+    id: 'Target',
+    defaultMessage: 'Target',
+  },
+  imageOverride: {
+    id: 'Image override',
+    defaultMessage: 'Image override',
+  },
+  openLinkInNewTab: {
+    id: 'Open in a new tab',
+    defaultMessage: 'Open in a new tab',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  head_title: {
+    id: 'head_title',
+    defaultMessage: 'Head title',
+  },
+  teaser: {
+    id: 'Teaser',
+    defaultMessage: 'Teaser',
+  },
+  align: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+});
+
+export const TeaserSchema = ({ intl }) => {
+  const schema = {
+    title: intl.formatMessage(messages.teaser),
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['href', 'title', 'head_title', 'description', 'preview_image'],
+      },
+    ],
+
+    properties: {
+      href: {
+        title: intl.formatMessage(messages.Target),
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: [
+          'Title',
+          'head_title',
+          'Description',
+          'hasPreviewImage',
+          'image_field',
+          'image_scales',
+          '@type',
+        ],
+        allowExternals: true,
+      },
+      title: {
+        title: intl.formatMessage(messages.title),
+      },
+      head_title: {
+        title: intl.formatMessage(messages.head_title),
+      },
+      description: {
+        title: intl.formatMessage(messages.description),
+        widget: 'textarea',
+      },
+      preview_image: {
+        title: intl.formatMessage(messages.imageOverride),
+        widget: 'object_browser',
+        mode: 'image',
+        allowExternals: true,
+        selectedItemAttrs: ['image_field', 'image_scales'],
+      },
+      openLinkInNewTab: {
+        title: intl.formatMessage(messages.openLinkInNewTab),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+
+  addStyling({ schema, intl });
+
+  schema.properties.styles.schema.properties.align = {
+    widget: 'align',
+    title: intl.formatMessage(messages.align),
+    actions: ['left', 'right', 'center'],
+    default: 'left',
+  };
+
+  schema.properties.styles.schema.fieldsets[0].fields = ['align'];
+
+  return schema;
+};

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

@@ -0,0 +1,44 @@
+import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+export function getTeaserImageURL({ href, image, align }) {
+  // The default scale used in teasers is the 'teaser' scale
+  // except if it's customized otherwise in the teaser block settings
+  // or if the teaser is center (top)
+  const imageScale =
+    align === 'center'
+      ? 'great'
+      : config.blocks.blocksConfig['teaser'].imageScale || 'teaser';
+
+  if (image) {
+    // If the image is overriden locally in the teaser block
+    if (isInternalURL(image['@id'])) {
+      // If it's internal check if image_scales catalog info is present
+      if (image?.image_scales?.[image?.image_field]) {
+        return `${image['@id']}/${
+          image.image_scales[image.image_field]?.[0].scales[imageScale]
+            ?.download || image.image_scales[image.image_field]?.[0].download
+        }`;
+      } else {
+        // If not, fallback to content scale URL shortcut
+        return `${image['@id']}/@@images/${image.image_field}/${imageScale}`;
+      }
+    } else {
+      // If it's external, return the plain URL
+      return image['@id'];
+    }
+  } else {
+    // If the image is not overriden
+    if (href?.image_scales?.[href?.image_field]) {
+      return `${href['@id']}/${
+        href.image_scales[href.image_field]?.[0].scales[imageScale]?.download ||
+        href.image_scales[href.image_field]?.[0].download
+      }`;
+    } else {
+      // If not, fallback to content scale URL shortcut
+      return `${href['@id']}/@@images/${
+        href.image_field || 'preview_image'
+      }/${imageScale}`;
+    }
+  }
+}

package/src/components/manage/Blocks/Teaser/utils.test.jsx

@@ -0,0 +1,229 @@
+import { getTeaserImageURL } from './utils';
+import config from '@plone/volto/registry';
+
+beforeAll(() => {
+  config.blocks.blocksConfig.teaser = {};
+  config.blocks.blocksConfig.teaser.imageScale = 'teaser';
+});
+
+describe('getTeaserImageURL tests', () => {
+  it('getTeaserImageURL internal URL - no overriden', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/teaser_scale_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - no overriden - no scale', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {},
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/default_original_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - no overriden - no catalog image info', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {},
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/image/teaser',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - no overriden - center', () => {
+    const align = 'center';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              great: {
+                download: '@@images/great_scale_URL',
+              },
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/great_scale_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - no overriden - center - no great scale', () => {
+    const align = 'center';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/default_original_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - image overriden', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = {
+      '@id': '/document/image',
+      image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/overriden_image_default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/overriden_image_teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/image/@@images/overriden_image_teaser_scale_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - image overriden - center - no great scale', () => {
+    const align = 'center';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = {
+      '@id': '/document/image',
+      image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/overriden_image_default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/overriden_image_teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/image/@@images/overriden_image_default_original_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - image overriden - external', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = {
+      '@id': 'https://plone.org/document/image.png',
+    };
+
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      'https://plone.org/document/image.png',
+    );
+  });
+});