@plone/volto 17.0.0-alpha.8 → 17.0.0

package/src/components/theme/View/TabularView.jsx

@@ -6,8 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container, Table } from 'semantic-ui-react';
+import { Container as SemanticContainer, Table } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
 
 /**
  * Tabular view component class.
@@ -15,59 +16,64 @@ import { FormattedMessage } from 'react-intl';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const TabularView = ({ content }) => (
-  <Container className="view-wrapper">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        <Table celled padded>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>
-                <FormattedMessage id="Title" defaultMessage="Title" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage
-                  id="Description"
-                  defaultMessage="Description"
-                />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="Type" defaultMessage="Type" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="State" defaultMessage="State" />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {content.items.map((item) => (
-              <Table.Row key={item.url}>
-                <Table.Cell>
-                  <UniversalLink
-                    item={item}
-                    className="summary url"
-                    title={item['@type']}
-                  >
-                    {item.title}
-                  </UniversalLink>
-                </Table.Cell>
-                <Table.Cell>{item.description}</Table.Cell>
-                <Table.Cell>{item['@type']}</Table.Cell>
-                <Table.Cell>{item.review_state}</Table.Cell>
+const TabularView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          <Table celled padded>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Title" defaultMessage="Title" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Description"
+                    defaultMessage="Description"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Type" defaultMessage="Type" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="State" defaultMessage="State" />
+                </Table.HeaderCell>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </section>
-    </article>
-  </Container>
-);
+            </Table.Header>
+            <Table.Body>
+              {content.items.map((item) => (
+                <Table.Row key={item.url}>
+                  <Table.Cell>
+                    <UniversalLink
+                      item={item}
+                      className="summary url"
+                      title={item['@type']}
+                    >
+                      {item.title}
+                    </UniversalLink>
+                  </Table.Cell>
+                  <Table.Cell>{item.description}</Table.Cell>
+                  <Table.Cell>{item['@type']}</Table.Cell>
+                  <Table.Cell>{item.review_state}</Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/View.jsx

@@ -123,6 +123,7 @@ class View extends Component {
     if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
       this.props.listActions(getBaseUrl(this.props.pathname));
     }
+
     this.props.getContent(
       getBaseUrl(this.props.pathname),
       this.props.versionId,
@@ -142,6 +143,7 @@ class View extends Component {
       if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
         this.props.listActions(getBaseUrl(nextProps.pathname));
       }
+
       this.props.getContent(
         getBaseUrl(nextProps.pathname),
         this.props.versionId,

package/src/components/theme/Widgets/ImageWidget.stories.jsx

@@ -17,8 +17,7 @@ Image.args = {
   value: {
     download: 'download/filename.png',
     file_name: 'filename.png',
-    data:
-      'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAKlUlEQVR4nOSbf2xT19nHvzVJXvu1oUnbNHanZEnjFOK1jYM0VCeetqa0CenvOpSCRoGw0S2UTQFGqqmptAVVS1uI1JV0BRoIaOnKkkCpIAnQhE1xUmAitujiQI1sFYqdQZe0s2tTAkzn+AJOcs+959oGuu0j+R/f85z7PM+995znOec5SbjeZBdMR47ZAkNuAVL1M2AwZgPIAJA2oeUIgGH43F6M+ofgO+mEx9EPr/P49VTvloT3qNZOQb51NvKLbci3Pgrgrjh7PANX7x647G1w9R5AOHgxQZpSEucAfW4GLLYqzCz7SQKMZnEGRzs3o7+tEf6Tw4noMH4HZBfoUbLoZeSYl5LnnwilOAjB42hCd/NaeJ3+eDqK3QFqbTLmLF+JmWUvA9DFo0QcBHC0cy06NqxHOHghlg5ic8CMYjOeqdkOje7emOQTTSjwCdrrf4whu1OpqHIHPL1mBWaWvQ7g/xTLkicWChyH3/0ZgHMAgsL/WgDp0BszodFNj/GNOo++1tXoaHxLiRC/A9TaFFQ2vAODcbGC/kPwubvgsnfC4/gL/O4TCAcvydxHBb3xHuQX/wg55lIYjKUANNx39Lm3oqn6BYSD3/A053OAWqtBZcNuGIyzudqTV3Kg8/fob/sTRoe/4pJhkZoxDRbbcygsW8H9yfncB9BU/QTCwZBcU3kHEONXvvcRNDqLbNtQYBD9rb9Gf9tuhIOXuZTlRa29BRbbE7BUvAqNzsShSz/Wz39IzgnSDoi89ns4nvzX6GutRU/zmwgHx2SViwe1NgkPLvoFiirqAPy/ZNvIm/Co1Ocg7YCqjVtkv/lQwIGW2mfhdX7KUDgFhWVzkV9MvuVMAGMIB1xw2XdioKtHsm8psgvysKBuBzQ6s2Q7MiY0LlvCusx2QGS0f1Om8xY0VS9FOBgWvW4u/SHKl2+FRpcten3EfxAttQvhP3la8j4s1Fo1KhvehcG4QLJdX+sK1uwwRVSAzPOly3YAYCdLg73r8F7tz5mvvLm0HLaaPUhOuZ3ZB3HMfSXP4tPDbQiMfClphBhjF8ZwrHsn7siaivQs9hiVaXoIPveHOHdqUvg82QEkwqts6EJyCjuep8a/shpjjOCL5AWL6nuE+V2a5JRpyJs1CwOdW5j9SUFkPunZB33uNAknJCFvlhVHdm/G2IVx0/BkBzxe/StkmdivFHntyZOXUvbx6t8gPauE2wiNLgv/GjmM0y7xcYQH9+H9yJuVh6m33Sd6PTnlTuhuC2LIbo/+WzWuEUlsIrG9OGTAi3zz0lOcyTpXmfZEprhCsUw0RCeiG9GRBbGN2BjFeAeQrI4dhn5NR3vWgHcFfS6Rz1Kie0TO+D3FMhMhurXUzqO6iqMTbLzKNQeQ7zaS0opD5nnWVBeNWhfbKpNGlxKT3ES8zhNUVxY55kpqq8A1B1hsVcx8nkR4JMjhwe/+KirJ4cfjOKVYhgXRlegsjkawlRJxgFo7RVjJEYeEt7wRHkl2fO6PlOoMn3u/Yhm2DmNUZxbEVmLzVQfMsM5mLmORxIbE9kroa1unTGP8E/1t2xTKSEN0JrqLc5dgs+CA/GIbsyOS1SlNbBxdf4XH8TZn68vo3vozjA4rD4SkIDoT3VkINkccYKKrt2KEaEobCy21K+Bzb5RpdR59rUvRs+3PMd1Djoju4tmgyVoO6oDsgunM19/n7oo5nw8HL6Jx2Qtor38EI37yfUdnZF/C49iGd6vvR0fjlpj654Ho7nPvY1z9DrE9iW5asPA4uuJWYqBrP/2lZqQgVU8cfQF+t092ZSg143Y8uGg58q3l0OhyAVzCiP84PI7d6GneyP1gPI5OGIxPil7LMVuSoM8tYAq77Ae5bsLD6PA3GB32crV98Pm5KFm8CcCt4/5P09+JtLIfYGbZKrTVL4Sj64BsX8SGIkaQqc8tUCFNP4MhGqBreDeaOVXzUbL4/UnGj0dPM01zqXy+EbEhIHotTT9DJezVTSYUOC77miaa7IK7UFSxkXOtMgW2mj8iNUM64yQ2EFvEMBizVcJG5WT87sRFZrxYbL9UuCSuh8XGDt+vwLYlQyWyS3uFswoUSQw55scVy+Rbn+BoxbIlTSUhpDyejxeNLk+xTJr+bo5WTFukHHAzSPx2vQxSDpBfzko8JxVLjPg9HK2YtqiEygwx0hUrEy+DvXsUy3gcHRytWLaMqGhZihh6Y6ZiZeKlv61BYjVHjH+gp3mTbCu2LcMqWpMjhkY3nW5U3ki8zlPoa62iGaI8F7HnrcWyWSSxIbLjPBmf26vCiH+IIaqju7Q3mo7GZvS1LpaZhb7A3g1P4eN2+dc/YoN4bDHiH5qC9CwDcsxPiTYIB/4O95G/cSsvR3bBVDruyK0uuY844XE008QpVT8NySlELkwXOI51v4OW2udpGx4stgpkmh4TvXas5+0kWoqGReLCOeYyAH/guhGLwtLvw2JbCYPxEQC3Cf+64eptR3fzemaxk9f5ObzOl7DztZfiun/EBnE8jkMqoQ7vjGgDonRqxrSYbqzW3oL5v63HMzWHYDA+F2U8wYh86xos3zQEc+mcmPrngegecbwYxMHHI4Mce/rR0OKEWFhQ9xpM1jUywU0qbDW7uLK6WIjoLl5dMti7F1cDIZe9jdlJYdkK+jSVYC61Ise8irN1Ct1BTs3gL4PhgehMdGch2BxxwFDvAeZnoNHdSyszlFBkW60orNXoMlFYOk/RPeQgOrNLas4INgsOCAcv0gpMZmcVr9LKDB7U2ikwGB9WrLDUYKUUoivRmQWxVSi5vRbo9Lc1MldQNToTLUvhQW/MkC1dEZfjyer4ILqy64hCgq2Uaw4g05HH0cTstKiijpalyBNbMXM4kJjaouyCe4T6IXGIjVFT7/hQt7t5LXP9jDzVBXU7aFmKFF7nsFAEqYxRP2svjx+i24K69yXewIBg41XGO8Dr9NPaWxYanZnW5MjNCh7HLiV6UwbtHyiWiYboVNmwRbJoitg2obh6crLTsWG9xJ4aaEHS0zWvSyrT3fw7GrryEgocgaNTeSoczdM1bwgBF+sex6htE5hcIjN24RLOftaH+0uWMIuk0rOKoM+dSstSxEplRodHoNaeRqbpSY7p8Cy21TyKc6e+kGknDnnyc2vXwWRdKdHqPHbUlcN/ctJUL14ldu7UMNTaUWSaypldEifkzcrDse69tFprIjRZuTyIHPNsZjQWCgxgW80crsILMSJlcttxt/mnku36WqvxcfuHYpcSVSg5j1ZmiJGacSsstkqh8Pm79Gl4HINw2Vsx0Lkr5r0HMtqTAe+6FUriv6JUdj+aqh+LvVQW/9HF0nasn/9wfMXS126uQWXDB9whbuLL5eejsOxFBeXy5Mk/mZhy+SvEfmBiH92idtkPxnBgokzI52/ygYlo5lS9iKKKN+I4MnNCODJzNmrdTwfgDuiNWdDo2Gt40pxHX+sqdDRuUCIU66GpAuHQlHhZ6o2GBDnt9QtjOTQlHgfIQeKEI7s309pbg/EBuqhxcwjgaOcr2F6zRCzI4SGRBycrFX2r8fEtODg5kf/Zo7MTGX94upxWY8XH53D17v32H55mETk+/wAMuWaFx+cH4HEcut7H5/8dAAD//1geHQaS0wzXAAAAAElFTkSuQmCC',
+    data: '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',
     size: 100,
     'content-type': 'image/png',
   },

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,8 @@
-import { App, PreviewImage } from '@plone/volto/components';
+import { App, PreviewImage, Image } from '@plone/volto/components';
 
+// Register components.
 export const components = {
   PreviewImage: { component: PreviewImage },
   App: { component: App },
+  Image: { component: Image },
 };

package/src/config/ControlPanels.js

@@ -75,7 +75,6 @@ export const filterControlPanelsSchema = (controlpanel) => {
       'toolbar_position',
       'toolbar_logo',
       'default_page',
-      'site_logo',
       'site_favicon',
       'site_favicon_mimetype',
       'exposeDCMetaTags',

package/src/config/Loadables.jsx

@@ -2,7 +2,7 @@ import loadable from '@loadable/component';
 
 export const loadables = {
   prettierStandalone: loadable.lib(() => import('prettier/standalone')),
-  prettierParserHtml: loadable.lib(() => import('prettier/parser-html')),
+  prettierParserHtml: loadable.lib(() => import('prettier/plugins/html')),
   prismCore: loadable.lib(() => import('prismjs/components/prism-core')),
   toastify: loadable.lib(() => import('react-toastify')),
   reactSelect: loadable.lib(() => import('react-select'), { ssr: false }),

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;
@@ -12,9 +12,8 @@ export default (props) => {
     },
   });
 
-  const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
-    blockRenderMap,
-  );
+  const extendedBlockRenderMap =
+    DefaultDraftBlockRenderMap.merge(blockRenderMap);
 
   const blockStyleFn = (contentBlock) => {
     const type = contentBlock.getType();
@@ -27,4 +26,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/Plugins.jsx

@@ -23,9 +23,8 @@ const breakOutOptions = {
 const plugins = (props) => {
   const { draftJsInlineToolbarPlugin, draftJsBlockBreakoutPlugin } = props;
   const { Separator } = draftJsInlineToolbarPlugin;
-  const blockBreakoutPlugin = draftJsBlockBreakoutPlugin.default(
-    breakOutOptions,
-  );
+  const blockBreakoutPlugin =
+    draftJsBlockBreakoutPlugin.default(breakOutOptions);
 
   const linkPlugin = createLinkPlugin({ libraries: props });
 

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/RichTextEditor/ToHTML.jsx

@@ -101,16 +101,18 @@ const splitSoftLinesOfLists = (children) =>
   });
 
 // Returns how the default lists should be rendered
-const getList = (ordered) => (children, { depth, keys }) =>
-  ordered ? (
-    <ol key={keys[0]} keys={keys} depth={depth}>
-      {splitSoftLinesOfLists(children)}
-    </ol>
-  ) : (
-    <ul key={keys[0]} keys={keys} depth={depth}>
-      {splitSoftLinesOfLists(children)}
-    </ul>
-  );
+const getList =
+  (ordered) =>
+  (children, { depth, keys }) =>
+    ordered ? (
+      <ol key={keys[0]} keys={keys} depth={depth}>
+        {splitSoftLinesOfLists(children)}
+      </ol>
+    ) : (
+      <ul key={keys[0]} keys={keys} depth={depth}>
+        {splitSoftLinesOfLists(children)}
+      </ul>
+    );
 
 // Special function to deal with list clones
 /*const getSpecialList = type => (children, { depth, keys }) => (

package/src/config/RichTextEditor/index.js

@@ -5,9 +5,8 @@ import FromHTMLCustomBlockFn from './FromHTML';
 
 export const richtextEditorSettings = (props) => {
   const { plugins, inlineToolbarButtons } = Plugins(props);
-  const { extendedBlockRenderMap, blockStyleFn, listBlockTypes } = Blocks(
-    props,
-  );
+  const { extendedBlockRenderMap, blockStyleFn, listBlockTypes } =
+    Blocks(props);
 
   return {
     extendedBlockRenderMap,

package/src/config/Views.jsx

@@ -16,6 +16,7 @@ import RequestTimeout from '@plone/volto/components/theme/RequestTimeout/Request
 import AlbumView from '@plone/volto/components/theme/View/AlbumView';
 import Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorized';
 import Forbidden from '@plone/volto/components/theme/Forbidden/Forbidden';
+import ServerError from '@plone/volto/components/theme/Error/ServerError';
 
 const EventView = loadable(() =>
   import('@plone/volto/components/theme/View/EventView'),
@@ -110,10 +111,11 @@ export const contentTypesViews = {
 export const defaultView = DefaultView;
 
 export const errorViews = {
-  '404': NotFoundView,
-  '401': Unauthorized,
-  '403': Forbidden,
-  '408': RequestTimeout,
+  404: NotFoundView,
+  401: Unauthorized,
+  403: Forbidden,
+  408: RequestTimeout,
+  500: ServerError,
   ECONNREFUSED: ConnectionRefused,
   corsError: CorsError,
 };

package/src/config/Widgets.jsx

@@ -24,6 +24,7 @@ import InternalUrlWidget from '@plone/volto/components/manage/Widgets/InternalUr
 import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
 import NumberWidget from '@plone/volto/components/manage/Widgets/NumberWidget';
 import ImageSizeWidget from '@plone/volto/components/manage/Widgets/ImageSizeWidget';
+import RegistryImageWidget from '@plone/volto/components/manage/Widgets/RegistryImageWidget';
 
 import ReferenceWidget from '@plone/volto/components/manage/Widgets/ReferenceWidget';
 import ObjectBrowserWidget from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
@@ -72,6 +73,7 @@ export const widgetMapping = {
     recurrence: RecurrenceWidget,
     remoteUrl: UrlWidget,
     id: IdWidget,
+    site_logo: RegistryImageWidget,
   },
   widget: {
     richtext: WysiwygWidget,
@@ -148,6 +150,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

@@ -37,6 +37,8 @@ import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
 
 import ConfigRegistry from '@plone/volto/registry';
 
+import { getSiteAsyncPropExtender } from '@plone/volto/helpers';
+
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
 
@@ -74,13 +76,22 @@ 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
       // {
       //   match: '',
-      //   GET_CONTENT: ['breadcrumbs', 'navigation', 'actions', 'types'],
+      //   GET_CONTENT: [
+      //     'breadcrumbs',
+      //     'navigation',
+      //     'actions',
+      //     'types',
+      //     'navroot',
+      //   ],
       // },
     ],
     // Internal proxy to bypass CORS *while developing*. NOT intended for production use.
@@ -125,7 +136,7 @@ let config = {
     useEmailAsLogin: false,
     persistentReducers: ['blocksClipboard'],
     initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
-    asyncPropsExtenders: [], // per route asyncConnect customizers
+    asyncPropsExtenders: [getSiteAsyncPropExtender], // per route asyncConnect customizers
     contentIcons: contentIcons,
     loadables,
     lazyBundles: {
@@ -150,6 +161,7 @@ let config = {
     },
     appExtras: [],
     maxResponseSize: 2000000000, // This is superagent default (200 mb)
+    maxFileUploadSize: null,
     serverConfig,
     storeExtenders: [],
     showTags: true,
@@ -182,6 +194,12 @@ let config = {
     styleClassNameExtenders,
     querystringSearchGet: false,
     blockSettingsTabFieldsetsInitialStateOpen: true,
+    excludeLinksAndReferencesMenuItem: false,
+    containerBlockTypes: ['gridBlock'],
+    siteTitleFormat: {
+      includeSiteTitle: false,
+      titleAndSiteTitleSeparator: '-',
+    },
   },
   experimental: {
     addBlockButton: {
@@ -212,6 +230,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', 'navroot'],
+  },
+  {
+    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

@@ -39,6 +39,7 @@ 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 STATS_RELATIONS = 'STATS_RELATIONS';
 export const REBUILD_RELATIONS = 'REBUILD_RELATIONS';
 export const GET_SCHEMA = 'GET_SCHEMA';
 export const POST_SCHEMA = 'POST_SCHEMA';
@@ -137,3 +138,6 @@ export const REMOVE_ALIASES = 'REMOVE_ALIASES';
 export const GET_USERSCHEMA = 'GET_USERSCHEMA';
 export const GET_UPGRADE = 'GET_UPGRADE';
 export const POST_UPGRADE = 'POST_UPGRADE';
+export const RESET_LOGIN_REQUEST = 'RESET_LOGIN_REQUEST';
+export const GET_SITE = 'GET_SITE';
+export const GET_NAVROOT = 'GET_NAVROOT';

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/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

@@ -2,19 +2,21 @@ import express from 'express';
 import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 
 const HEADERS = [
-  'Accept-Ranges',
-  'Cache-Control',
-  'Content-Disposition',
-  'Content-Range',
-  'Content-Type',
+  'accept-ranges',
+  'cache-control',
+  'content-disposition',
+  'content-range',
+  'content-type',
+  'x-sendfile',
+  'x-accel-redirect',
 ];
 
-function fileMiddleware(req, res, next) {
+function filesMiddlewareFn(req, res, next) {
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
       HEADERS.forEach((header) => {
-        if (resource.get(header)) {
+        if (resource.headers[header]) {
           res.set(header, resource.get(header));
         }
       });
@@ -24,10 +26,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;
 }