@plone/volto 17.0.0-alpha.8 → 17.0.0

package/src/express-middleware/images.js

@@ -1,9 +1,15 @@
 import express from 'express';
 import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 
-const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
+const HEADERS = [
+  'content-type',
+  'content-disposition',
+  'cache-control',
+  'x-sendfile',
+  'x-accel-redirect',
+];
 
-function imageMiddleware(req, res, next) {
+function imageMiddlewareFn(req, res, next) {
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -17,11 +23,12 @@ 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.all(['/@@site-logo/*'], 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 okRouteMiddleware() {
+  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

@@ -47,7 +47,7 @@ export const sitemapIndex = function (req, res, next) {
   });
 };
 
-export default function () {
+export default function sitemapMiddleware() {
   const middleware = express.Router();
 
   middleware.all('**/sitemap.xml.gz', sitemap);

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

@@ -290,9 +290,8 @@ export function changeBlock(formData, id, value) {
  */
 export function nextBlockId(formData, currentBlock) {
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
-  const currentIndex = formData[blocksLayoutFieldname].items.indexOf(
-    currentBlock,
-  );
+  const currentIndex =
+    formData[blocksLayoutFieldname].items.indexOf(currentBlock);
 
   if (currentIndex === formData[blocksLayoutFieldname].items.length - 1) {
     // We are already at the bottom block don't do anything
@@ -312,9 +311,8 @@ export function nextBlockId(formData, currentBlock) {
  */
 export function previousBlockId(formData, currentBlock) {
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
-  const currentIndex = formData[blocksLayoutFieldname].items.indexOf(
-    currentBlock,
-  );
+  const currentIndex =
+    formData[blocksLayoutFieldname].items.indexOf(currentBlock);
 
   if (currentIndex === 0) {
     // We are already at the top block don't do anything
@@ -343,6 +341,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 +548,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;
+}

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

@@ -19,6 +19,8 @@ import {
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
+  blocksFormGenerator,
+  findBlocks,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -586,26 +588,26 @@ describe('Blocks', () => {
       const d = {
         data: {
           blocks: {
-            '1': {
+            1: {
               blocks: {
-                '2': {},
-                '3': {
+                2: {},
+                3: {
                   data: {
                     blocks: {
-                      '11': {},
-                      '12': {},
-                      '13': {},
+                      11: {},
+                      12: {},
+                      13: {},
                     },
                     blocks_layout: {
                       items: ['11', '12', '13'],
                     },
                   },
                 },
-                '7': {
+                7: {
                   blocks: {
-                    '8': {},
-                    '9': {},
-                    '10': {},
+                    8: {},
+                    9: {},
+                    10: {},
                   },
                   blocks_layout: {
                     items: ['8', '9', '10'],
@@ -616,10 +618,10 @@ describe('Blocks', () => {
                 items: ['2', '3', '7'],
               },
             },
-            '4': {
+            4: {
               blocks: {
-                '5': {},
-                '6': {},
+                5: {},
+                6: {},
               },
               blocks_layout: {
                 items: ['5', '6'],
@@ -1275,4 +1277,81 @@ describe('Blocks', () => {
       ]);
     });
   });
+
+  describe('blocksFormGenerator', () => {
+    it('Returns an empty blocks/blocks_layout pair', () => {
+      expect(blocksFormGenerator(0, '')).toEqual({
+        blocks: {},
+        blocks_layout: { items: [] },
+      });
+    });
+    it('Returns a filled blocks/blocks_layout pair with type block', () => {
+      const result = blocksFormGenerator(2, 'teaser');
+      expect(Object.keys(result.blocks).length).toEqual(2);
+      expect(result.blocks_layout.items.length).toEqual(2);
+      expect(result.blocks[result.blocks_layout.items[0]]['@type']).toEqual(
+        'teaser',
+      );
+      expect(result.blocks[result.blocks_layout.items[1]]['@type']).toEqual(
+        'teaser',
+      );
+    });
+  });
+});
+
+describe('findBlocks', () => {
+  it('Get all blocks in the first level (main block container)', () => {
+    const blocks = {
+      1: { title: 'title', '@type': 'title' },
+      2: { title: 'an image', '@type': 'image' },
+      3: { title: 'description', '@type': 'description' },
+      4: { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3']);
+  });
+
+  it('Get all blocks in the first level (main block container) given a list', () => {
+    const blocks = {
+      1: { title: 'title', '@type': 'title' },
+      2: { title: 'an image', '@type': 'image' },
+      3: { title: 'description', '@type': 'description' },
+      4: { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4']);
+  });
+
+  it('Get all blocks in the first level (main block container) given a list', () => {
+    const blocks = {
+      1: { title: 'title', '@type': 'title' },
+      2: { title: 'an image', '@type': 'image' },
+      3: { title: 'description', '@type': 'description' },
+      4: { title: 'a text', '@type': 'slate' },
+      5: { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '5']);
+  });
+
+  it('Get all blocks, including containers, given a list', () => {
+    const blocks = {
+      1: { title: 'title', '@type': 'title' },
+      2: { title: 'an image', '@type': 'image' },
+      3: { title: 'description', '@type': 'description' },
+      4: { title: 'a text', '@type': 'slate' },
+      5: {
+        title: 'a container',
+        '@type': 'gridBlock',
+        blocks: {
+          6: { title: 'title', '@type': 'title' },
+          7: { title: 'an image', '@type': 'image' },
+          8: { title: 'description', '@type': 'description' },
+          9: { title: 'a text', '@type': 'slate' },
+        },
+      },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '8', '9']);
+  });
 });

package/src/helpers/Extensions/index.js

@@ -1,5 +1,6 @@
 export * from './withBlockSchemaEnhancer';
-export withBlockExtensions, {
+export {
+  default as withBlockExtensions,
   resolveExtension,
   resolveBlockExtensions,
 } from './withBlockExtensions';

package/src/helpers/Extensions/withBlockSchemaEnhancer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defineMessages } from 'react-intl';
 import { useIntl } from 'react-intl';
+import { find, isEmpty } from 'lodash';
 import config from '@plone/volto/registry';
 import { cloneDeepSchema } from '@plone/volto/helpers/Utils/Utils';
 
@@ -109,61 +110,59 @@ export const addExtensionFieldToSchema = ({
  *  }
  * ```
  */
-export const withBlockSchemaEnhancer = (
-  FormComponent,
-  extensionName = 'vendor',
-  insertFieldToOrder = _addField,
-) => ({ ...props }) => {
-  const { formData, schema: originalSchema } = props;
-  const intl = useIntl();
+export const withBlockSchemaEnhancer =
+  (FormComponent, extensionName = 'vendor', insertFieldToOrder = _addField) =>
+  ({ ...props }) => {
+    const { formData, schema: originalSchema } = props;
+    const intl = useIntl();
 
-  const blocksConfig = getBlocksConfig(props);
+    const blocksConfig = getBlocksConfig(props);
 
-  const blockType = formData['@type'];
-  const extensionConfig =
-    blocksConfig?.[blockType]?.extensions?.[extensionName];
-
-  if (!extensionConfig)
-    return <FormComponent {...props} schema={originalSchema} />;
-
-  const activeItemName = formData?.[extensionName];
-  let activeItem = extensionConfig.items?.find(
-    (item) => item.id === activeItemName,
-  );
-  if (!activeItem)
-    activeItem = extensionConfig.items?.find((item) => item.isDefault);
-
-  const schemaEnhancer =
-    // For the main "variation" of blocks, allow simply passing a
-    // schemaEnhancer in the block configuration
-    activeItem?.['schemaEnhancer'] ||
-    (extensionName === 'variation' &&
-      blocksConfig?.[blockType]?.schemaEnhancer);
-
-  let schema = schemaEnhancer
-    ? schemaEnhancer({
-        schema: cloneDeepSchema(originalSchema),
-        formData,
-        intl,
-      })
-    : cloneDeepSchema(originalSchema);
+    const blockType = formData['@type'];
+    const extensionConfig =
+      blocksConfig?.[blockType]?.extensions?.[extensionName];
 
-  const { title = messages.variation, description } = extensionConfig;
+    if (!extensionConfig)
+      return <FormComponent {...props} schema={originalSchema} />;
 
-  if (extensionConfig.items?.length > 1) {
-    addExtensionFieldToSchema({
-      schema,
-      name: extensionName,
-      items: extensionConfig.items || [],
-      intl,
-      title,
-      description,
-      insertFieldToOrder,
-    });
-  }
+    const activeItemName = formData?.[extensionName];
+    let activeItem = extensionConfig.items?.find(
+      (item) => item.id === activeItemName,
+    );
+    if (!activeItem)
+      activeItem = extensionConfig.items?.find((item) => item.isDefault);
+
+    const schemaEnhancer =
+      // For the main "variation" of blocks, allow simply passing a
+      // schemaEnhancer in the block configuration
+      activeItem?.['schemaEnhancer'] ||
+      (extensionName === 'variation' &&
+        blocksConfig?.[blockType]?.schemaEnhancer);
+
+    let schema = schemaEnhancer
+      ? schemaEnhancer({
+          schema: cloneDeepSchema(originalSchema),
+          formData,
+          intl,
+        })
+      : cloneDeepSchema(originalSchema);
+
+    const { title = messages.variation, description } = extensionConfig;
+
+    if (extensionConfig.items?.length > 1) {
+      addExtensionFieldToSchema({
+        schema,
+        name: extensionName,
+        items: extensionConfig.items || [],
+        intl,
+        title,
+        description,
+        insertFieldToOrder,
+      });
+    }
 
-  return <FormComponent {...props} schema={schema} />;
-};
+    return <FormComponent {...props} schema={schema} />;
+  };
 
 /**
  * Apply block variation schema enhancers to the provided schema, using block
@@ -291,20 +290,23 @@ export const EMPTY_STYLES_SCHEMA = {
 };
 
 /**
- * Creates the `styles` field and fieldset in a schema
+ * Adds the `styles` field and 'styling' fieldset in a given schema
  */
 export const addStyling = ({ schema, formData, intl }) => {
-  schema.fieldsets.push({
-    id: 'styling',
-    title: intl.formatMessage(messages.styling),
-    fields: ['styles'],
-  });
+  if (isEmpty(find(schema.fieldsets, { id: 'styling' }))) {
+    schema.fieldsets.push({
+      id: 'styling',
+      title: intl.formatMessage(messages.styling),
+      fields: ['styles'],
+    });
+
+    schema.properties.styles = {
+      widget: 'object',
+      title: intl.formatMessage(messages.styling),
+      schema: cloneDeepSchema(EMPTY_STYLES_SCHEMA),
+    };
+  }
 
-  schema.properties.styles = {
-    widget: 'object',
-    title: intl.formatMessage(messages.styling),
-    schema: EMPTY_STYLES_SCHEMA,
-  };
   return schema;
 };
 

package/src/helpers/Extensions/withBlockSchemaEnhancer.test.js

@@ -2,6 +2,7 @@ import {
   addExtensionFieldToSchema,
   applySchemaEnhancer,
   composeSchema,
+  addStyling,
 } from './withBlockSchemaEnhancer';
 
 import config from '@plone/volto/registry';
@@ -246,3 +247,147 @@ describe('composeSchema', () => {
     expect(res).toStrictEqual([6, 9]);
   });
 });
+
+describe('addStyling', () => {
+  it('returns an enhanced schema with the styling wrapper object on it', () => {
+    const intl = { formatMessage: () => 'Styling' };
+
+    const schema = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const result = addStyling({ schema, intl });
+
+    expect(result).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: [],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {},
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+  });
+
+  it('multiple schema enhancers', () => {
+    const intl = { formatMessage: () => 'Styling' };
+
+    const schema1 = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const schema2 = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const result = addStyling({ schema: schema1, intl });
+
+    // We add some fields to the styling schema
+    result.properties.styles.schema.properties.align = {
+      widget: 'align',
+      title: 'align',
+      actions: ['left', 'right', 'center'],
+      default: 'left',
+    };
+
+    result.properties.styles.schema.fieldsets[0].fields = ['align'];
+
+    const result2 = addStyling({ schema: schema2, intl });
+
+    expect(result).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: ['align'],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {
+              align: {
+                widget: 'align',
+                title: 'align',
+                actions: ['left', 'right', 'center'],
+                default: 'left',
+              },
+            },
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+
+    expect(result2).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: [],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {},
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+  });
+});