@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.21

package/src/components/theme/Widgets/DatetimeWidget.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
 
 const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
       {children

package/src/components/theme/Widgets/RelationsWidget.jsx

@@ -5,17 +5,19 @@ import RelationWidget from './RelationWidget';
 const RelationsWidget = ({ value, children, className }) =>
   value ? (
     <ul className={cx(className, 'relations', 'widget')}>
-      {value.map((item, key) => (
-        <li key={key}>
-          <RelationWidget
-            value={item}
-            className={className}
-            key={item.token || item.title || item}
-          >
-            {children}
-          </RelationWidget>
-        </li>
-      ))}
+      {value.map((item, key) => {
+        return item ? (
+          <li key={key}>
+            <RelationWidget
+              value={item || `relation target not found '${key}'`}
+              className={className}
+              key={item.token || item.title || item}
+            >
+              {children}
+            </RelationWidget>
+          </li>
+        ) : null;
+      })}
     </ul>
   ) : (
     ''

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 gridSVG from '@plone/volto/icons/grid-block.svg';
 import imagesSVG from '@plone/volto/icons/images.svg';
 
 import ImageGalleryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/ImageGallery';
@@ -50,6 +51,14 @@ import TextSettingsSchema from '@plone/volto/components/manage/Blocks/Text/Schem
 import ImageSettingsSchema from '@plone/volto/components/manage/Blocks/Image/LayoutSchema';
 import ToCSettingsSchema from '@plone/volto/components/manage/Blocks/ToC/Schema';
 
+import GridBlockView from '@plone/volto/components/manage/Blocks/Grid/View';
+import GridBlockEdit from '@plone/volto/components/manage/Blocks/Grid/Edit';
+import { GridBlockDataAdapter } from '@plone/volto/components/manage/Blocks/Grid/adapter';
+import { GridBlockSchema } from '@plone/volto/components/manage/Blocks/Grid/schema';
+import GridTemplates from '@plone/volto/components/manage/Blocks/Grid/templates';
+import { gridTeaserDisableStylingSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
+import { gridImageDisableSizeAndPositionHandlersSchema } from '@plone/volto/components/manage/Blocks/Image/schema';
+
 import SearchBlockView from '@plone/volto/components/manage/Blocks/Search/SearchBlockView';
 import SearchBlockEdit from '@plone/volto/components/manage/Blocks/Search/SearchBlockEdit';
 
@@ -66,6 +75,7 @@ import {
   DateRangeFacetFilterListEntry,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
+import { getImageBlockSizes } from '@plone/volto/components/manage/Blocks/Image/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
 import HeroImageLeftBlockSchema from '@plone/volto/components/manage/Blocks/HeroImageLeft/schema';
@@ -249,6 +259,7 @@ const blocksConfig = {
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
+    getSizes: getImageBlockSizes,
   },
   leadimage: {
     id: 'leadimage',
@@ -458,6 +469,27 @@ const blocksConfig = {
       },
     },
   },
+  // This next block is not named just grid for some reasons:
+  // 1.- Naming it grid will collide with the SemanticUI CSS of the Grid component
+  // 2.- It would prevent the transition from the old grid
+  //     (based on @kitconcept/volto-blocks-grid) without having to perform any migration.
+  //     This way, both can co-exist at the same time.
+  gridBlock: {
+    id: 'gridBlock',
+    title: 'Grid',
+    icon: gridSVG,
+    group: 'common',
+    view: GridBlockView,
+    edit: GridBlockEdit,
+    blockSchema: GridBlockSchema,
+    dataAdapter: GridBlockDataAdapter,
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    templates: GridTemplates,
+    maxLength: 4,
+    allowedBlocks: ['image', 'listing', 'slate', 'teaser'],
+  },
   teaser: {
     id: 'teaser',
     title: 'Teaser',
@@ -481,6 +513,20 @@ const blocksConfig = {
   },
 };
 
+// This is required in order to initialize the inner blocksConfig
+// for the grid block, since we need to modify how the inner teaser
+// block behave in it (= no schemaEnhancer fields for teasers inside a grid)
+// Afterwards, it can be further customized in add-ons using the same technique.
+blocksConfig.gridBlock.blocksConfig = { ...blocksConfig };
+blocksConfig.gridBlock.blocksConfig.teaser = {
+  ...blocksConfig.teaser,
+  schemaEnhancer: gridTeaserDisableStylingSchema,
+};
+blocksConfig.gridBlock.blocksConfig.image = {
+  ...blocksConfig.image,
+  schemaEnhancer: gridImageDisableSizeAndPositionHandlersSchema,
+};
+
 const requiredBlocks = ['title'];
 
 const initialBlocks = {};

package/src/config/Components.jsx

@@ -1,6 +1,7 @@
-import { App, PreviewImage } from '@plone/volto/components';
+import { App, PreviewImage, Image } from '@plone/volto/components';
 
 export const components = {
   PreviewImage: { component: PreviewImage },
   App: { component: App },
+  Image: { component: Image },
 };

package/src/config/ControlPanels.js

@@ -18,6 +18,7 @@ import settingsSVG from '@plone/volto/icons/settings.svg';
 import rulesSVG from '@plone/volto/icons/content-existing.svg';
 import undoControlPanelSVG from '@plone/volto/icons/undo-control-panel.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
+import relationsSVG from '@plone/volto/icons/ahead.svg';
 
 export const controlPanelsIcons = {
   default: settingsSVG,
@@ -40,6 +41,7 @@ export const controlPanelsIcons = {
   rules: rulesSVG,
   undo: undoControlPanelSVG,
   aliases: linkSVG,
+  relations: relationsSVG,
 };
 
 export const filterControlPanels = (controlpanels) => {

package/src/config/NonContentRoutes.jsx

@@ -12,6 +12,7 @@ export const nonContentRoutes = [
   '/diff',
   /\/edit$/,
   '/historyview',
+  '/links-to-item',
   '/layout',
   '/login',
   '/logout',

package/src/config/RichTextEditor/Blocks.jsx

@@ -1,4 +1,4 @@
-export default (props) => {
+export default function Blocks(props) {
   const { draftJs, immutableLib } = props;
   const { DefaultDraftBlockRenderMap } = draftJs;
   const { Map } = immutableLib;
@@ -27,4 +27,4 @@ export default (props) => {
   const listBlockTypes = ['unordered-list-item', 'ordered-list-item'];
 
   return { extendedBlockRenderMap, blockStyleFn, listBlockTypes };
-};
+}

package/src/config/RichTextEditor/FromHTML.jsx

@@ -1,8 +1,8 @@
-export default (element) => {
+export default function FromHTMLCustomBlockFn(element) {
   if (element.className === 'callout') {
     return {
       type: 'callout',
     };
   }
   return null;
-};
+}

package/src/config/RichTextEditor/Styles.jsx

@@ -13,7 +13,7 @@ import orderedListSVG from '@plone/volto/icons/list-numbered.svg';
 import blockquoteSVG from '@plone/volto/icons/quote.svg';
 import calloutSVG from '@plone/volto/icons/megaphone.svg';
 
-export default function (props) {
+export default function Styles(props) {
   const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default;
   const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default;
 

package/src/config/Widgets.jsx

@@ -98,6 +98,7 @@ export const widgetMapping = {
     select_querystring_field: SelectMetadataWidget,
     autocomplete: SelectAutoComplete,
     color_picker: ColorPickerWidget,
+    select: SelectWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,
@@ -147,6 +148,7 @@ export const widgetMapping = {
       title: TitleViewWidget,
       url: UrlViewWidget,
       internal_url: InternalUrlWidget,
+      object: () => '', // TODO: Not implemented yet: Object View widget
     },
     vocabulary: {},
     choices: SelectViewWidget,

package/src/config/index.js

@@ -74,8 +74,11 @@ let config = {
     port,
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
+    okRoute: '/ok',
     apiPath,
     apiExpanders: [
+      // Added here for documentation purposes, addded at the end because it
+      // depends on a value of this object.
       // Add the following expanders for only issuing a single request.
       // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
       // {
@@ -150,6 +153,7 @@ let config = {
     },
     appExtras: [],
     maxResponseSize: 2000000000, // This is superagent default (200 mb)
+    maxFileUploadSize: null,
     serverConfig,
     storeExtenders: [],
     showTags: true,
@@ -180,6 +184,10 @@ let config = {
     styleClassNameConverters,
     hashLinkSmoothScroll: false,
     styleClassNameExtenders,
+    querystringSearchGet: false,
+    blockSettingsTabFieldsetsInitialStateOpen: true,
+    excludeLinksAndReferencesMenuItem: false,
+    containerBlockTypes: ['gridBlock'],
   },
   experimental: {
     addBlockButton: {
@@ -210,6 +218,22 @@ let config = {
   components,
 };
 
+// The apiExpanders depends on a config of the object, so it's done here
+config.settings.apiExpanders = [
+  ...config.settings.apiExpanders,
+  {
+    match: '',
+    GET_CONTENT: ['breadcrumbs', 'actions', 'types'],
+  },
+  {
+    match: '',
+    GET_CONTENT: ['navigation'],
+    querystring: (config) => ({
+      'expand.navigation.depth': config.settings.navDepth,
+    }),
+  },
+];
+
 ConfigRegistry.settings = config.settings;
 ConfigRegistry.experimental = config.experimental;
 ConfigRegistry.blocks = config.blocks;

package/src/config/server.js

@@ -1,6 +1,7 @@
 import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
+import okMiddleware from '@plone/volto/express-middleware/ok';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
 import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
@@ -11,6 +12,7 @@ const settings = {
     filesMiddleware(),
     imagesMiddleware(),
     robotstxtMiddleware(),
+    okMiddleware(),
     sitemapMiddleware(),
     staticsMiddleware(),
   ],

package/src/constants/ActionTypes.js

@@ -36,6 +36,10 @@ export const GET_NAVIGATION = 'GET_NAVIGATION';
 export const GET_PRINCIPALS = 'GET_PRINCIPALS';
 export const GET_QUERYSTRING = 'GET_QUERYSTRING';
 export const GET_QUERYSTRING_RESULTS = 'GET_QUERYSTRING_RESULTS';
+export const CREATE_RELATIONS = 'CREATE_RELATIONS';
+export const DELETE_RELATIONS = 'DELETE_RELATIONS';
+export const LIST_RELATIONS = 'LIST_RELATIONS';
+export const REBUILD_RELATIONS = 'REBUILD_RELATIONS';
 export const GET_SCHEMA = 'GET_SCHEMA';
 export const POST_SCHEMA = 'POST_SCHEMA';
 export const PUT_SCHEMA = 'PUT_SCHEMA';

package/src/constants/Indexes.js

@@ -3,7 +3,7 @@
  * @module constants/indexes
  */
 
-export default {
+const Indexes = {
   sortable_title: { label: 'Title', type: 'string', sort_on: 'sortable_title' },
   review_state: { label: 'Review state', type: 'string' },
   ModificationDate: {
@@ -35,6 +35,8 @@ export default {
   Type: { label: 'Type', type: 'string' },
 };
 
+export default Indexes;
+
 export const defaultIndexes = [
   'review_state',
   'ModificationDate',

package/src/constants/Languages.js

@@ -4,14 +4,18 @@
  */
 
 module.exports = {
-  en: 'English',
+  ca: 'Català',
   de: 'Deutsch',
+  en: 'English',
+  es: 'Español',
+  eu: 'Euskara',
+  fi: 'Suomi',
+  fr: 'Français',
+  it: 'Italiano',
   nl: 'Nederlands',
   ro: 'Română',
   ja: '日本語',
   pt: 'Português',
   pt_BR: 'Português (Brasil)',
-  es: 'Spanish',
-  it: 'Italian',
-  eu: 'Euskara',
+  zh_CN: '中文',
 };

package/src/express-middleware/devproxy.js

@@ -37,7 +37,7 @@ function getEnv() {
   return _env;
 }
 
-export default function () {
+export default function devProxyMiddleware() {
   const middleware = express.Router();
   const devProxy = createProxyMiddleware(filter, {
     selfHandleResponse: true,

package/src/express-middleware/files.js

@@ -9,7 +9,7 @@ const HEADERS = [
   'Content-Type',
 ];
 
-function fileMiddleware(req, res, next) {
+function filesMiddlewareFn(req, res, next) {
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -24,10 +24,10 @@ function fileMiddleware(req, res, next) {
     .catch(next);
 }
 
-export default function () {
+export default function filesMiddleware() {
   const middleware = express.Router();
 
-  middleware.all(['**/@@download/*', '**/@@display-file/*'], fileMiddleware);
+  middleware.all(['**/@@download/*', '**/@@display-file/*'], filesMiddlewareFn);
   middleware.id = 'filesResourcesProcessor';
   return middleware;
 }

package/src/express-middleware/images.js

@@ -3,7 +3,7 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 
 const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
 
-function imageMiddleware(req, res, next) {
+function imageMiddlewareFn(req, res, next) {
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -17,11 +17,11 @@ function imageMiddleware(req, res, next) {
     .catch(next);
 }
 
-export default function () {
+export default function imagesMiddleware() {
   const middleware = express.Router();
 
-  middleware.all(['**/@@images/*'], imageMiddleware);
-  middleware.all(['/@portrait/*'], imageMiddleware);
+  middleware.all(['**/@@images/*'], imageMiddlewareFn);
+  middleware.all(['/@portrait/*'], imageMiddlewareFn);
   middleware.id = 'imageResourcesProcessor';
   return middleware;
 }

package/src/express-middleware/ok.js

@@ -0,0 +1,16 @@
+import express from 'express';
+import config from '@plone/volto/registry';
+
+const ok = function (req, res, next) {
+  res.type('text/plain');
+  res.set('Expires', 'Sat, 1 Jan 2000 00:00:00 GMT');
+  res.set('Cache-Control', 'max-age=0, must-revalidate, private');
+  res.send('ok');
+};
+
+export default function () {
+  const middleware = express.Router();
+  middleware.all(config?.settings?.okRoute || '/ok', ok);
+  middleware.id = 'ok';
+  return middleware;
+}

package/src/express-middleware/robotstxt.js

@@ -22,7 +22,7 @@ const envRobots = function (req, res, next) {
   res.send(process.env.VOLTO_ROBOTSTXT);
 };
 
-export default function () {
+export default function robotstxtMiddleware() {
   const middleware = express.Router();
   if (process.env.VOLTO_ROBOTSTXT) {
     middleware.all('**/robots.txt', envRobots);

package/src/express-middleware/sitemap.js

@@ -1,12 +1,34 @@
 import express from 'express';
-import { generateSitemap } from '@plone/volto/helpers/Sitemap/Sitemap';
+import {
+  generateSitemap,
+  generateSitemapIndex,
+  SITEMAP_BATCH_SIZE,
+} from '@plone/volto/helpers/Sitemap/Sitemap';
 
 export const sitemap = function (req, res, next) {
-  generateSitemap(req).then((sitemap) => {
+  let start = 0;
+  let size = undefined;
+  const { batch: batchStr } = req.params;
+  if (batchStr !== undefined) {
+    const batch = parseInt(batchStr);
+    if (isNaN(batch) || batch === 0 || '' + batch !== batchStr) {
+      res.status(404);
+      // Some data, such as the internal API address, may be sensitive to be published
+      res.send(
+        `Invalid sitemap name, use sitemap.xml.gz, or batched sitemapN.xml.gz where N is a positive integer.`,
+      );
+      return;
+    }
+    start = SITEMAP_BATCH_SIZE * (batch - 1);
+    size = SITEMAP_BATCH_SIZE;
+  }
+  generateSitemap(req, start, size).then((sitemap) => {
     if (Buffer.isBuffer(sitemap)) {
       res.set('Content-Type', 'application/x-gzip');
-      res.set('Content-Encoding', 'gzip');
-      res.set('Content-Disposition', 'attachment; filename="sitemap.xml.gz"');
+      res.set(
+        'Content-Disposition',
+        `attachment; filename="sitemap${batchStr || ''}.xml.gz"`,
+      );
       res.send(sitemap);
     } else {
       // {"errno":-111, "code":"ECONNREFUSED", "host": ...}
@@ -17,10 +39,20 @@ export const sitemap = function (req, res, next) {
   });
 };
 
-export default function () {
+export const sitemapIndex = function (req, res, next) {
+  generateSitemapIndex(req).then((sitemapIndex) => {
+    res.set('Content-Type', 'application/xml');
+    res.set('Content-Disposition', 'attachment; filename="sitemap-index.xml"');
+    res.send(sitemapIndex);
+  });
+};
+
+export default function sitemapMiddleware() {
   const middleware = express.Router();
 
   middleware.all('**/sitemap.xml.gz', sitemap);
+  middleware.all('**/sitemap:batch.xml.gz', sitemap);
+  middleware.all('**/sitemap-index.xml', sitemapIndex);
   middleware.id = 'sitemap.xml.gz';
   return middleware;
 }

package/src/express-middleware/static.js

@@ -2,7 +2,7 @@ import express from 'express';
 import path from 'path';
 import config from '@plone/volto/registry';
 
-const staticMiddleware = express.static(
+const staticMiddlewareFn = express.static(
   process.env.BUILD_DIR
     ? path.join(process.env.BUILD_DIR, 'public')
     : process.env.RAZZLE_PUBLIC_DIR,
@@ -24,9 +24,9 @@ const staticMiddleware = express.static(
   },
 );
 
-export default function () {
+export default function staticsMiddleware() {
   const middleware = express.Router();
-  middleware.all('*', staticMiddleware);
+  middleware.all('*', staticMiddlewareFn);
   middleware.id = 'staticResourcesProcessor';
   return middleware;
 }

package/src/helpers/Api/Api.js

@@ -89,7 +89,7 @@ class Api {
               checkUrl &&
               request.url &&
               request.xhr &&
-              stripQuerystring(request.url) !==
+              encodeURI(stripQuerystring(request.url)) !==
                 stripQuerystring(request.xhr.responseURL)
             ) {
               if (request.xhr.responseURL?.length === 0) {

package/src/helpers/Blocks/Blocks.js

@@ -343,6 +343,32 @@ export function emptyBlocksForm() {
   };
 }
 
+/**
+ * Generate empty blocks blocks/blocks_layout pair given the type
+ * (could be empty, if not type given) and the number of blocks
+ * @function blocksFormGenerator
+ * @param {number} number How many blocks to generate of the type (could be "empty", if no type provided)
+ * @param {number} type The type of the blocks
+ * @return {Object} blocks/blocks_layout pair filled with the generated blocks
+ */
+export function blocksFormGenerator(number, type) {
+  const idMap = [...Array(number).keys()].map(() => uuid());
+  const start = {
+    blocks: {},
+    blocks_layout: { items: idMap },
+  };
+
+  return {
+    ...start,
+    blocks: Object.fromEntries(
+      start.blocks_layout.items.map((item) => [
+        item,
+        { '@type': type || 'empty' },
+      ]),
+    ),
+  };
+}
+
 /**
  * Recursively discover blocks in data and call the provided callback
  * @function visitBlocks
@@ -524,3 +550,25 @@ export const getPreviousNextBlock = ({ content, block }) => {
 
   return [previousBlock, nextBlock];
 };
+
+/**
+ * Given a `block` object and a list of block types, return a list of block ids matching the types
+ *
+ * @function findBlocks
+ * @param {Object} types A list with the list of types to be matched
+ * @return {Array} An array of block ids
+ */
+export function findBlocks(blocks, types, result = []) {
+  const containerBlockTypes = config.settings.containerBlockTypes;
+
+  Object.keys(blocks).forEach((blockId) => {
+    const block = blocks[blockId];
+    if (types.includes(block['@type'])) {
+      result.push(blockId);
+    } else if (containerBlockTypes.includes(block['@type']) || block.blocks) {
+      findBlocks(block.blocks, types, result);
+    }
+  });
+
+  return result;
+}