@plone/volto 16.13.0 → 17.0.0-alpha.0

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',
+    );
+  });
+});

package/src/components/manage/Controlpanels/VersionOverview.jsx

@@ -7,14 +7,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { isEmpty } from 'lodash';
 
-import {
-  version as voltoVersion,
-  name as voltoName,
-} from '../../../../package.json';
-import {
-  version as projectVersion,
-  name as projectName,
-} from '@root/../package.json';
+import voltoPackageJson from '../../../../package.json';
+import projectPackageJson from '@root/../package.json';
 
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
@@ -26,6 +20,8 @@ const messages = defineMessages({
   },
 });
 
+const voltoVersion = voltoPackageJson.version;
+
 const VersionOverview = ({
   cmf_version,
   debug_mode,
@@ -37,7 +33,7 @@ const VersionOverview = ({
 }) => {
   const intl = useIntl();
   const { addonsInfo } = config.settings;
-  const isProject = voltoName !== projectName;
+  const isProject = voltoPackageJson.name !== projectPackageJson.name;
 
   return (
     <>
@@ -50,7 +46,7 @@ const VersionOverview = ({
       >
         {isProject ? (
           <li>
-            {projectName} {projectVersion}
+            {projectPackageJson.name} {projectPackageJson.version}
           </li>
         ) : null}
         {voltoVersion && <li>Volto {voltoVersion}</li>}

package/src/components/manage/Diff/DiffField.jsx

@@ -61,12 +61,12 @@ const DiffField = ({
         break;
       case 'datetime':
         parts = diffWords(
-          new Intl.DateTimeFormat(language, readable_date_format).format(
-            new Date(one),
-          ),
-          new Intl.DateTimeFormat(language, readable_date_format).format(
-            new Date(two),
-          ),
+          new Intl.DateTimeFormat(language, readable_date_format)
+            .format(new Date(one))
+            .replace('\u202F', ' '),
+          new Intl.DateTimeFormat(language, readable_date_format)
+            .format(new Date(two))
+            .replace('\u202F', ' '),
         );
         break;
       case 'json':

package/src/components/theme/FormattedDate/FormattedDate.jsx

@@ -23,9 +23,9 @@ const FormattedDate = ({
     <time
       className={className}
       dateTime={date}
-      title={new Intl.DateTimeFormat(language, long_date_format).format(
-        new Date(toDate(date)),
-      )}
+      title={new Intl.DateTimeFormat(language, long_date_format)
+        .format(new Date(toDate(date)))
+        .replace('\u202F', ' ')}
     >
       {children
         ? children(

package/src/config/Blocks.jsx

@@ -42,6 +42,7 @@ import tableSVG from '@plone/volto/icons/table.svg';
 import listingBlockSVG from '@plone/volto/icons/content-listing.svg';
 import tocSVG from '@plone/volto/icons/list-bullet.svg';
 import searchSVG from '@plone/volto/icons/zoom.svg';
+import imagesSVG from '@plone/volto/icons/images.svg';
 
 import ImageGalleryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/ImageGallery';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
@@ -73,6 +74,12 @@ import SearchBlockSchema from '@plone/volto/components/manage/Blocks/Search/sche
 
 import ToCVariations from '@plone/volto/components/manage/Blocks/ToC/variations';
 
+import TeaserViewBlock from '@plone/volto/components/manage/Blocks/Teaser/View';
+import TeaserEditBlock from '@plone/volto/components/manage/Blocks/Teaser/Edit';
+import TeaserBlockDefaultBody from '@plone/volto/components/manage/Blocks/Teaser/DefaultBody';
+import { TeaserSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
+import { TeaserBlockDataAdapter } from '@plone/volto/components/manage/Blocks/Teaser/adapter';
+
 defineMessages({
   title: {
     id: 'title',
@@ -451,6 +458,27 @@ const blocksConfig = {
       },
     },
   },
+  teaser: {
+    id: 'teaser',
+    title: 'Teaser',
+    icon: imagesSVG,
+    group: 'common',
+    view: TeaserViewBlock,
+    edit: TeaserEditBlock,
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    blockSchema: TeaserSchema,
+    dataAdapter: TeaserBlockDataAdapter,
+    variations: [
+      {
+        id: 'default',
+        isDefault: true,
+        title: 'Default',
+        template: TeaserBlockDefaultBody,
+      },
+    ],
+  },
 };
 
 const requiredBlocks = ['title'];

package/src/express-middleware/sitemap.js

@@ -1,5 +1,5 @@
 import express from 'express';
-import { generateSitemap } from '@plone/volto/helpers';
+import { generateSitemap } from '@plone/volto/helpers/Sitemap/Sitemap';
 
 export const sitemap = function (req, res, next) {
   generateSitemap(req).then((sitemap) => {

package/src/helpers/Blocks/Blocks.test.js

@@ -744,6 +744,56 @@ describe('Blocks', () => {
         },
       });
     });
+
+    it('Sets data according to schema default values, keeps existing data', () => {
+      const schema = {
+        properties: {
+          style: {
+            widget: 'object',
+            schema: {
+              title: 'Style',
+              fieldsets: [
+                {
+                  id: 'default',
+                  fields: ['color', 'theme'],
+                  title: 'Default',
+                },
+              ],
+              properties: {
+                color: {
+                  title: 'Color',
+                  default: 'red',
+                },
+                theme: {
+                  title: 'Theme',
+                  default: 'primary',
+                },
+              },
+              required: [],
+            },
+          },
+        },
+      };
+
+      expect(
+        applySchemaDefaults({
+          schema,
+          data: {
+            '@type': 'slider',
+            style: {
+              theme: 'secondary',
+            },
+          },
+          intl: {},
+        }),
+      ).toEqual({
+        '@type': 'slider',
+        style: {
+          color: 'red',
+          theme: 'secondary',
+        },
+      });
+    });
   });
 
   describe('applyBlockDefaults', () => {

package/src/helpers/Utils/Date.js

@@ -48,7 +48,9 @@ export function formatDate({
     : short_date_format;
 
   const formatter = new Intl.DateTimeFormat(locale, format);
-  return formatToParts ? formatter.formatToParts(date) : formatter.format(date);
+  return formatToParts
+    ? formatter.formatToParts(date)
+    : formatter.format(date).replace('\u202F', ' ');
 }
 
 export function formatRelativeDate({
@@ -93,5 +95,5 @@ export function formatRelativeDate({
     ? ''
     : formatToParts
     ? formatter.formatToParts(v, tag)
-    : formatter.format(v, tag); // use "now" ?
+    : formatter.format(v, tag).replace('\u202F', ' '); // use "now" ?
 }

package/src/helpers/Utils/Date.test.js

@@ -192,6 +192,8 @@ describe('formatRelativeDate helper', () => {
   it('can use alternate style narrow', () => {
     const now = Date.now();
     const d = new Date(now + 3 * MONTH);
-    expect(formatRelativeDate({ date: d, style: 'narrow' })).toBe('in 3 mo.');
+    expect(['in 3 mo.', 'in 3mo']).toContain(
+      formatRelativeDate({ date: d, style: 'narrow' }),
+    );
   });
 });

package/src/helpers/index.js

@@ -30,7 +30,6 @@ export {
   removeProtocol,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
-export { generateSitemap } from '@plone/volto/helpers/Sitemap/Sitemap';
 export { generateRobots } from '@plone/volto/helpers/Robots/Robots';
 export {
   nestContent,

package/theme/themes/pastanaga/extras/blocks.less

@@ -1176,3 +1176,5 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
     }
   }
 }
+
+@import 'teaser';