@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

package/src/components/manage/Blocks/Search/components/SelectFacet.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   Option,
@@ -12,15 +13,35 @@ import {
   selectFacetValueToQuery,
 } from './base';
 
+const messages = defineMessages({
+  selectOption: {
+    id: 'Select option',
+    defaultMessage: 'Select option',
+  },
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+});
+
 const SelectFacet = (props) => {
   const { facet, choices, reactSelect, isMulti, onChange, value, isEditMode } =
     props;
+  const intl = useIntl();
   const Select = reactSelect.default;
   const v = Array.isArray(value) && value.length === 0 ? null : value;
 
   return (
     <Select
-      placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
+      placeholder={
+        facet?.title ??
+        (facet?.field?.label || intl.formatMessage(messages.select))
+      }
+      aria-label={
+        facet?.title ??
+        facet?.field?.label ??
+        intl.formatMessage(messages.selectOption)
+      }
       className="react-select-container"
       classNamePrefix="react-select"
       options={choices}

package/src/components/manage/Blocks/Search/components/SelectFacet.test.jsx

@@ -6,12 +6,7 @@ import SelectFacet from './SelectFacet';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Blocks/Search/components/SortOn.jsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { Button } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
@@ -48,6 +49,10 @@ const SortOn = (props) => {
     querystring = {},
     intl,
   } = props;
+  const uniqueId = useId();
+  const sortOnLabelId = `sort-on-label-${uniqueId}`;
+  const selectId = `select-search-sort-on-${uniqueId}`;
+
   const { sortable_indexes } = querystring;
   const Select = reactSelect.default;
 
@@ -75,11 +80,12 @@ const SortOn = (props) => {
       <div className="search-sort-on">
         {showSelectField ? (
           <>
-            <span className="sort-label">
+            <span id={sortOnLabelId} className="sort-label">
               {intl.formatMessage(messages.sortOn)}
             </span>
             <Select
-              id="select-search-sort-on"
+              aria-labelledby={sortOnLabelId}
+              id={selectId}
               name="select-searchblock-sort-on"
               className="search-react-select-container"
               classNamePrefix="react-select"

package/src/components/manage/Blocks/Search/components/ToggleFacet.jsx

@@ -1,8 +1,21 @@
 import React from 'react';
 import { Radio, Header } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  toggleOption: {
+    id: 'Toggle option',
+    defaultMessage: 'Toggle option',
+  },
+});
 
 const ToggleFacet = (props) => {
+  const intl = useIntl();
   const { facet, isEditMode, onChange, value } = props; // value, choices, isMulti, onChange,
+  const labelText =
+    facet?.title ??
+    facet?.field?.label ??
+    intl.formatMessage(messages.toggleOption);
 
   return (
     <div className="checkbox-facet">
@@ -10,6 +23,7 @@ const ToggleFacet = (props) => {
       <div className="radio">
         <Radio
           toggle
+          aria-label={labelText}
           checked={value || typeof value === 'string'}
           disabled={isEditMode}
           onChange={(e, { checked }) => {

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

@@ -21,7 +21,7 @@ const messages = defineMessages({
   },
   refreshTeaser: {
     id: 'Refresh source content',
-    defaultMessage: 'Refresh source content',
+    defaultMessage: 'Reset to target',
   },
   invalidTeaser: {
     id: 'Invalid teaser source',
@@ -29,6 +29,16 @@ const messages = defineMessages({
   },
 });
 
+function getImageField(resp) {
+  if (!resp) return null;
+
+  if (resp.preview_image_link) return 'preview_image_link';
+  if (resp.preview_image) return 'preview_image';
+  if (resp.image) return 'image';
+
+  return null;
+}
+
 const TeaserData = (props) => {
   const {
     block,
@@ -58,16 +68,20 @@ const TeaserData = (props) => {
       '@type': resp?.['@type'],
       Description: resp?.description,
       Title: resp.title,
-      hasPreviewImage: resp?.preview_image ? true : false,
+      hasPreviewImage: getImageField(resp) ? true : false,
       head_title: resp.head_title ?? null,
-      image_field: resp?.preview_image
-        ? 'preview_image'
-        : resp?.image
-          ? 'image'
-          : null,
+      image_field: getImageField(resp),
       image_scales: {
         preview_image: [resp?.preview_image],
         image: [resp?.image],
+        preview_image_link: resp?.preview_image_link
+          ? [
+              {
+                ...resp?.preview_image_link?.['image_scales']?.image?.[0],
+                base_path: resp?.preview_image_link?.['@id'],
+              },
+            ]
+          : [],
       },
       title: resp.title,
     };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -8,6 +8,7 @@ import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
+import { GridContext } from '@plone/volto/components/manage/Blocks/Grid/context';
 
 const messages = defineMessages({
   PleaseChooseContent: {
@@ -18,7 +19,7 @@ const messages = defineMessages({
 });
 
 const TeaserDefaultTemplate = (props) => {
-  const { className, data, isEditMode, style } = props;
+  const { className, data, isContainer: inGrid, isEditMode, style } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
@@ -26,6 +27,12 @@ const TeaserDefaultTemplate = (props) => {
 
   const Image = config.getComponent('Image').component;
   const { openExternalLinkInNewTab } = config.settings;
+  const columns = useContext(GridContext);
+  const sizes = config.blocks.blocksConfig.teaser.getSizes({
+    data,
+    inGrid,
+    columns,
+  });
 
   return (
     <div className={cx('block teaser', className)} style={style}>
@@ -33,7 +40,7 @@ const TeaserDefaultTemplate = (props) => {
         {!href && isEditMode && (
           <Message>
             <div className="teaser-item placeholder">
-              <img src={imageBlockSVG} alt="" />
+              <Image src={imageBlockSVG} alt="" />
               <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             </div>
           </Message>
@@ -64,6 +71,7 @@ const TeaserDefaultTemplate = (props) => {
                       alt=""
                       loading="lazy"
                       responsive={true}
+                      sizes={sizes}
                     />
                   </div>
                 )

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import TeaserBody from './Body';
 import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
 

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

@@ -0,0 +1,13 @@
+import config from '@plone/volto/registry';
+
+export function getTeaserBlockSizes({
+  data = {},
+  inGrid = false,
+  columns = 1,
+} = {}) {
+  const { tabletBreakpoint, defaultContainerWidth } = config.settings.layout;
+  const desktopImageWidth = Math.floor(
+    defaultContainerWidth / (inGrid ? columns : 2),
+  );
+  return `auto, (max-width: ${tabletBreakpoint}px) 100vw, ${desktopImageWidth}px`;
+}

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

@@ -0,0 +1,34 @@
+import { getTeaserBlockSizes } from './utils';
+import config from '@plone/volto/registry';
+
+config.settings.layout = { tabletBreakpoint: 768, defaultContainerWidth: 940 };
+
+describe('getTeaserBlockSizes', () => {
+  it('returns the teaser sizes string for a standalone teaser block', () => {
+    expect(getTeaserBlockSizes()).toBe('auto, (max-width: 768px) 100vw, 470px');
+  });
+
+  it('returns the teaser sizes for a 1-column grid', () => {
+    expect(getTeaserBlockSizes({ inGrid: true, columns: 1 })).toBe(
+      'auto, (max-width: 768px) 100vw, 940px',
+    );
+  });
+
+  it('returns the teaser sizes for 2 columns', () => {
+    expect(getTeaserBlockSizes({ inGrid: true, columns: 2 })).toBe(
+      'auto, (max-width: 768px) 100vw, 470px',
+    );
+  });
+
+  it('returns the teaser sizes for 3 columns', () => {
+    expect(getTeaserBlockSizes({ inGrid: true, columns: 3 })).toBe(
+      'auto, (max-width: 768px) 100vw, 313px',
+    );
+  });
+
+  it('returns the teaser sizes for 4 columns', () => {
+    expect(getTeaserBlockSizes({ inGrid: true, columns: 4 })).toBe(
+      'auto, (max-width: 768px) 100vw, 235px',
+    );
+  });
+});

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

@@ -17,6 +17,10 @@ const messages = defineMessages({
     id: 'Type the title…',
     defaultMessage: 'Type the title…',
   },
+  editable_title: {
+    id: 'Content title',
+    defaultMessage: 'Content title',
+  },
 });
 
 function usePrevious(value) {
@@ -159,6 +163,7 @@ export const TitleBlockEdit = (props) => {
         renderElement={renderElement}
         onFocus={handleFocus}
         aria-multiline="false"
+        aria-label={intl.formatMessage(messages.editable_title)}
       ></Editable>
     </Slate>
   );

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

@@ -4,19 +4,29 @@ import { FormattedMessage } from 'react-intl';
 import { Embed, Message } from 'semantic-ui-react';
 import cx from 'classnames';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import VideoEmbed from '@plone/volto/components/theme/VideoEmbed/VideoEmbed';
+import config from '@plone/volto/registry';
 
 //Extracting videoID, listID and thumbnailURL from the video URL
-const getVideoIDAndPlaceholder = (url) => {
+const getVideoIDAndPlaceholder = (url, peertubeInstances) => {
+  let hasMatch = false;
   let videoID = null;
   let listID = null;
   let thumbnailURL = null;
+  let videoSource = null;
+  let videoUrl = null;
 
   if (url) {
-    if (url.match('youtu')) {
+    if (
+      /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)(?:.*)$/i.test(url)
+    ) {
+      hasMatch = true;
+      videoSource = 'youtube';
       if (url.match('list')) {
         const matches = url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
         listID = matches[1] || matches[2];
-
+        videoUrl = `https://www.youtube.com/embed/videoseries?list=${listID}`;
+        videoSource = null;
         let thumbnailID = null;
         if (url.match(/\?v=(.*)&list/)) {
           thumbnailID = url.match(/^.*\?v=(.*)&list(.*)/)[1];
@@ -32,6 +42,8 @@ const getVideoIDAndPlaceholder = (url) => {
         videoID = url.match(/^.*\.be\/(.*)/)[1];
       } else if (url.match(/\?v=/)) {
         videoID = url.match(/^.*\?v=(.*)$/)[1];
+      } else if (url.match('shorts')) {
+        videoID = url.match(/^.*\/shorts\/(.*)/)[1];
       }
 
       if (videoID) {
@@ -44,6 +56,8 @@ const getVideoIDAndPlaceholder = (url) => {
           'https://img.youtube.com/vi/' + thumbnailID + '/sddefault.jpg';
       }
     } else if (url.match('vimeo')) {
+      hasMatch = true;
+      videoSource = 'vimeo';
       videoID = url.match(/^.*\.com\/(.*)/)[1];
       if (videoID) {
         let thumbnailID = videoID;
@@ -52,22 +66,37 @@ const getVideoIDAndPlaceholder = (url) => {
         }
         thumbnailURL = 'https://vumbnail.com/' + thumbnailID + '.jpg';
       }
+    } else if (
+      url &&
+      Array.isArray(peertubeInstances) &&
+      url.match(new RegExp(peertubeInstances.join('|'), 'gi'))
+    ) {
+      const peertubeRegex = /^(https?:\/\/[^/]+)\/w\/([A-Za-z0-9_-]+)/i;
+      const match = url.match(peertubeRegex);
+      if (match) {
+        hasMatch = true;
+        videoSource = 'peertube';
+        const instance = match[1];
+        videoID = match[2];
+        videoUrl = `${instance}/videos/embed/${videoID}`;
+      }
     }
   }
-  return { videoID, listID, thumbnailURL };
+  return { videoID, videoUrl, thumbnailURL, videoSource, hasMatch };
 };
-
 const Body = ({ data, isEditMode }) => {
   let placeholder = data.preview_image
     ? isInternalURL(data.preview_image)
       ? `${flattenToAppURL(data.preview_image)}/@@images/image`
       : data.preview_image
     : null;
+  const peertubeInstances =
+    config.blocks.blocksConfig.video.allowedPeertubeInstances;
 
-  const { videoID, listID, thumbnailURL } = getVideoIDAndPlaceholder(data.url);
+  const { videoID, videoUrl, thumbnailURL, videoSource, hasMatch, listID } =
+    getVideoIDAndPlaceholder(data.url, peertubeInstances);
 
   placeholder = !placeholder ? thumbnailURL : placeholder;
-
   const ref = React.createRef();
   const onKeyDown = (e) => {
     if (e.nativeEvent.keyCode === 13) {
@@ -77,13 +106,16 @@ const Body = ({ data, isEditMode }) => {
 
   const embedSettings = {
     placeholder: placeholder,
-    icon: 'play',
     defaultActive: false,
-    autoplay: false,
+    autoplay: data.autoplay || false,
     aspectRatio: '16:9',
     tabIndex: 0,
     onKeyPress: onKeyDown,
     ref: ref,
+    title: data.title,
+    id: videoID,
+    source: videoSource,
+    url: videoUrl,
   };
 
   return (
@@ -94,7 +126,7 @@ const Body = ({ data, isEditMode }) => {
             'full-width': data.align === 'full',
           })}
         >
-          {data.url.match('youtu') ? (
+          {hasMatch ? (
             <>
               {data.url.match('list') ? (
                 <Embed
@@ -102,44 +134,38 @@ const Body = ({ data, isEditMode }) => {
                   {...embedSettings}
                 />
               ) : (
-                <Embed id={videoID} source="youtube" {...embedSettings} />
+                <VideoEmbed id={videoID} {...embedSettings} />
               )}
             </>
           ) : (
             <>
-              {data.url.match('vimeo') ? (
-                <Embed id={videoID} source="vimeo" {...embedSettings} />
+              {data.url.match('.mp4') ? (
+                // eslint-disable-next-line jsx-a11y/media-has-caption
+                <video
+                  src={
+                    isInternalURL(data.url)
+                      ? data.url.includes('@@download')
+                        ? data.url
+                        : `${flattenToAppURL(data.url)}/@@download/file`
+                      : data.url
+                  }
+                  controls
+                  poster={placeholder}
+                  type="video/mp4"
+                />
+              ) : isEditMode ? (
+                <div>
+                  <Message>
+                    <center>
+                      <FormattedMessage
+                        id="Please enter a valid URL by deleting the block and adding a new video block."
+                        defaultMessage="Please enter a valid URL by deleting the block and adding a new video block."
+                      />
+                    </center>
+                  </Message>
+                </div>
               ) : (
-                <>
-                  {data.url.match('.mp4') ? (
-                    // eslint-disable-next-line jsx-a11y/media-has-caption
-                    <video
-                      src={
-                        isInternalURL(data.url)
-                          ? data.url.includes('@@download')
-                            ? data.url
-                            : `${flattenToAppURL(data.url)}/@@download/file`
-                          : data.url
-                      }
-                      controls
-                      poster={placeholder}
-                      type="video/mp4"
-                    />
-                  ) : isEditMode ? (
-                    <div>
-                      <Message>
-                        <center>
-                          <FormattedMessage
-                            id="Please enter a valid URL by deleting the block and adding a new video block."
-                            defaultMessage="Please enter a valid URL by deleting the block and adding a new video block."
-                          />
-                        </center>
-                      </Message>
-                    </div>
-                  ) : (
-                    <div className="invalidVideoFormat" />
-                  )}
-                </>
+                <div className="invalidVideoFormat" />
               )}
             </>
           )}

package/src/components/manage/Blocks/Video/Body.test.jsx

@@ -20,6 +20,12 @@ config.blocks.blocksConfig = {
       addPermission: [],
       view: [],
     },
+    allowedPeertubeInstances: [
+      'freediverse.com', // About: https://freediverse.com/about/instance
+      'fair.tube', // About: https://fair.tube/about/instance
+      'tube.reseau-canope.fr', // About: https://tube.reseau-canope.fr/about/instance
+      'peertube.eus', // About: https://peertube.eus/about/instance
+    ],
   },
 };
 
@@ -29,10 +35,13 @@ test('renders a youtube video component with "list" in its url', () => {
   const url =
     'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1';
   const videoDetails = getVideoIDAndPlaceholder(url);
+  const listID = 'PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1';
   expect(videoDetails).toEqual({
+    hasMatch: true,
     videoID: null,
-    listID: 'PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+    videoUrl: `https://www.youtube.com/embed/videoseries?list=${listID}`,
     thumbnailURL: 'https://img.youtube.com/vi/KwRSRRyuk-Q/sddefault.jpg',
+    videoSource: null,
   });
 });
 
@@ -40,9 +49,11 @@ test('extracts video details from a youtube video with "/live/" in its url', ()
   const url = 'https://www.youtube.com/live/ISdHvS6Ck3k?si=COeVakmC1lI6jQy3';
   const videoDetails = getVideoIDAndPlaceholder(url);
   expect(videoDetails).toEqual({
+    hasMatch: true,
     videoID: 'ISdHvS6Ck3k?si=COeVakmC1lI6jQy3',
-    listID: null,
+    videoUrl: null,
     thumbnailURL: 'https://img.youtube.com/vi/ISdHvS6Ck3k/sddefault.jpg',
+    videoSource: 'youtube',
   });
 });
 
@@ -50,9 +61,11 @@ test('extracts video details from a youtube video with ".be/" in its url', () =>
   const url = 'https://youtu.be/P9j-xYdWT28?si=zZ2putStJbPBLCdt';
   const videoDetails = getVideoIDAndPlaceholder(url);
   expect(videoDetails).toEqual({
+    hasMatch: true,
     videoID: 'P9j-xYdWT28?si=zZ2putStJbPBLCdt',
-    listID: null,
+    videoUrl: null,
     thumbnailURL: 'https://img.youtube.com/vi/P9j-xYdWT28/sddefault.jpg',
+    videoSource: 'youtube',
   });
 });
 
@@ -60,9 +73,23 @@ test('extracts video details from a youtube video with "?v=" in its url', () =>
   const url = 'https://www.youtube.com/watch?v=KUd6e105u_I';
   const videoDetails = getVideoIDAndPlaceholder(url);
   expect(videoDetails).toEqual({
+    hasMatch: true,
     videoID: 'KUd6e105u_I',
-    listID: null,
+    videoUrl: null,
     thumbnailURL: 'https://img.youtube.com/vi/KUd6e105u_I/sddefault.jpg',
+    videoSource: 'youtube',
+  });
+});
+
+test('extracts video details from a youtube short', () => {
+  const url = 'https://www.youtube.com/shorts/_-DjLZCfGOg';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    hasMatch: true,
+    videoID: '_-DjLZCfGOg',
+    videoUrl: null,
+    thumbnailURL: 'https://img.youtube.com/vi/_-DjLZCfGOg/sddefault.jpg',
+    videoSource: 'youtube',
   });
 });
 
@@ -70,9 +97,11 @@ test('extracts video details from a vimeo video url', () => {
   const url = 'https://vimeo.com/639449679';
   const videoDetails = getVideoIDAndPlaceholder(url);
   expect(videoDetails).toEqual({
+    hasMatch: true,
     videoID: '639449679',
-    listID: null,
+    videoUrl: null,
     thumbnailURL: 'https://vumbnail.com/639449679.jpg',
+    videoSource: 'vimeo',
   });
 });
 
@@ -98,6 +127,94 @@ test('renders a youtube video body component', () => {
   expect(json).toMatchSnapshot();
 });
 
+test('renders a youtu.be video body component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://youtu.be/KwRSRRyuk-Q',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a youtube short video body component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/shorts/ayyZ_S30Lhc',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a peertube video body component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://peertube.eus/w/qjubDnZ79UmmjhAUqvX2zu',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a incorrect peertube video body component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://other.peertubes.eus/w/qjubDnZ79UmmjhAUqvX2zu',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
 test('renders a youtube video body component in edit mode', () => {
   const store = mockStore({
     intl: {