@plone/volto 17.0.0-alpha.14 → 17.0.0-alpha.16

package/src/components/manage/Blocks/Listing/DefaultTemplate.jsx

@@ -2,10 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ConditionalLink, UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
-const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
+const DefaultTemplate = ({
+  headlineTag,
+  items,
+  linkTitle,
+  linkHref,
+  isEditMode,
+}) => {
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
 
@@ -19,6 +24,16 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
     link = <UniversalLink href={href}>{linkTitle || href}</UniversalLink>;
   }
 
+  const getTitleTag = (tag) => {
+    const level = tag.slice(-1);
+    if (/\d/.test(level)) {
+      return `h${Number(level) + 1}`;
+    } else {
+      return 'h3';
+    }
+  };
+  const TitleTag = headlineTag ? getTitleTag(headlineTag) : 'h3';
+
   return (
     <>
       <div className="items">
@@ -26,7 +41,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
           <div className="listing-item" key={item['@id']}>
             <ConditionalLink item={item} condition={!isEditMode}>
               <div className="listing-body">
-                <h4>{item.title ? item.title : item.id}</h4>
+                <TitleTag>{item.title ? item.title : item.id}</TitleTag>
                 <p>{item.description}</p>
               </div>
             </ConditionalLink>

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -1,13 +1,13 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
 
-const getListingBlockAsyncData = ({
+export default function getListingBlockAsyncData({
   dispatch,
   id,
   data,
   path,
   blocksConfig,
-}) => {
+}) {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
   return [
@@ -24,6 +24,4 @@ const getListingBlockAsyncData = ({
       ),
     ),
   ];
-};
-
-export default getListingBlockAsyncData;
+}

package/src/components/manage/Blocks/Search/components/index.js

@@ -1,13 +1,13 @@
-export SearchDetails from './SearchDetails';
-export Facets from './Facets';
-export SelectFacet from './SelectFacet';
-export CheckboxFacet from './CheckboxFacet';
-export DateRangeFacet from './DateRangeFacet';
-export SearchInput from './SearchInput';
-export FilterList from './FilterList';
-export SortOn from './SortOn';
-export ToggleFacet from './ToggleFacet';
-export SelectFacetFilterListEntry from './SelectFacetFilterListEntry';
-export ToggleFacetFilterListEntry from './ToggleFacetFilterListEntry';
-export DateRangeFacetFilterListEntry from './DateRangeFacetFilterListEntry';
-export ViewSwitcher from './ViewSwitcher';
+export { default as SearchDetails } from './SearchDetails';
+export { default as Facets } from './Facets';
+export { default as SelectFacet } from './SelectFacet';
+export { default as CheckboxFacet } from './CheckboxFacet';
+export { default as DateRangeFacet } from './DateRangeFacet';
+export { default as SearchInput } from './SearchInput';
+export { default as FilterList } from './FilterList';
+export { default as SortOn } from './SortOn';
+export { default as ToggleFacet } from './ToggleFacet';
+export { default as SelectFacetFilterListEntry } from './SelectFacetFilterListEntry';
+export { default as ToggleFacetFilterListEntry } from './ToggleFacetFilterListEntry';
+export { default as DateRangeFacetFilterListEntry } from './DateRangeFacetFilterListEntry';
+export { default as ViewSwitcher } from './ViewSwitcher';

package/src/components/manage/Blocks/Search/hocs/index.js

@@ -1,2 +1,2 @@
-export withQueryString from './withQueryString';
-export withSearch from './withSearch';
+export { default as withQueryString } from './withQueryString';
+export { default as withSearch } from './withSearch';

package/src/components/manage/Blocks/Search/hocs/withQueryString.jsx

@@ -10,7 +10,7 @@ function getDisplayName(WrappedComponent) {
  * A HOC that injects querystring metadata information from the backend.
  *
  */
-export default (WrappedComponent) => {
+export default function withQueryString(WrappedComponent) {
   function WithQueryString(props) {
     const dispatch = useDispatch();
 
@@ -29,4 +29,4 @@ export default (WrappedComponent) => {
     WrappedComponent,
   )})`;
   return WithQueryString;
-};
+}

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

@@ -101,3 +101,8 @@ export const TeaserSchema = ({ intl }) => {
 
   return schema;
 };
+
+export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  return schema;
+};

package/src/components/manage/Blocks/ToC/variations/index.js

@@ -1,7 +1,7 @@
 import DefaultTocRenderer from './DefaultTocRenderer';
 import HorizontalMenu from './HorizontalMenu';
 
-export default [
+const ToCVariations = [
   {
     id: 'default',
     title: 'Listing (default)',
@@ -14,3 +14,5 @@ export default [
     view: HorizontalMenu,
   },
 ];
+
+export default ToCVariations;

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -53,6 +53,7 @@ const DragDropList = (props) => {
   const {
     childList,
     children,
+    direction = 'vertical',
     onMoveItem,
     as = 'div',
     style,
@@ -128,6 +129,7 @@ const DragDropList = (props) => {
     >
       <Droppable
         droppableId={uid}
+        direction={direction}
         renderClone={(provided, snapshot, rubric) => {
           const index = rubric.source.index;
           return children({
@@ -160,19 +162,22 @@ const DragDropList = (props) => {
                 </Draggable>
               ))}
             {provided.placeholder}
-            {!isEmpty(placeholderProps) && snapshot.isDraggingOver && (
-              <div
-                style={{
-                  position: 'absolute',
-                  top: placeholderProps.clientY,
-                  left: placeholderProps.clientX,
-                  height: placeholderProps.clientHeight,
-                  background: '#eee',
-                  width: placeholderProps.clientWidth,
-                  borderRadius: '3px',
-                }}
-              />
-            )}
+            {/* TODO: Fix the ghost problem if horizontal dnd is present */}
+            {direction !== 'horizontal' &&
+              !isEmpty(placeholderProps) &&
+              snapshot.isDraggingOver && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: placeholderProps.clientY,
+                    left: placeholderProps.clientX,
+                    height: placeholderProps.clientHeight,
+                    background: '#eee',
+                    width: placeholderProps.clientWidth,
+                    borderRadius: '3px',
+                  }}
+                />
+              )}
           </AsDomComponent>
         )}
       </Droppable>

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Button, Grid, Message } from 'semantic-ui-react';
+
+const TemplateChooser = ({ templates, onSelectTemplate }) => {
+  const intl = useIntl();
+  return (
+    <div className="template-chooser">
+      <Message>
+        <Grid columns={templates(intl).length}>
+          {templates(intl).map((template, index) => (
+            <Grid.Column key={template.id}>
+              <Button
+                className="template-chooser-item"
+                onClick={() => onSelectTemplate(index)}
+              >
+                <img src={template.image} alt="" />
+                <div className="template-chooser-title">
+                  {intl.formatMessage({
+                    id: template.id,
+                    defaultMessage: template.title,
+                  })}
+                </div>
+              </Button>
+            </Grid.Column>
+          ))}
+        </Grid>
+      </Message>
+    </div>
+  );
+};
+
+TemplateChooser.propTypes = {
+  templates: PropTypes.func.isRequired,
+  onSelectTemplate: PropTypes.func.isRequired,
+};
+
+export default TemplateChooser;

package/src/components/manage/TemplateChooser/TemplateChooser.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import TemplateChooser from './TemplateChooser';
+import templateSVG from './template.svg';
+
+const mockStore = configureStore();
+
+test('renders a TemplateChooser component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: { templateid: 'Template default translation' },
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <TemplateChooser
+        templates={() => [
+          {
+            image: templateSVG,
+            id: 'templateid',
+            defaultMessage: 'Template default translation',
+          },
+        ]}
+        onSelectTemplate={() => {}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/manage/TemplateChooser/template.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(9 21)">
+      <rect width="78" height="29"/>
+      <rect width="36" height="8" y="33"/>
+      <rect width="77" height="10" y="45"/>
+    </g>
+  </g>
+</svg>

package/src/components/theme/Anontools/Anontools.stories.jsx

@@ -1,15 +1,25 @@
 import React from 'react';
-import { Anontools as AnontoolsDefault } from './Anontools';
+import AnontoolsDefault from './Anontools';
 import Wrapper from '@plone/volto/storybook';
 
 const AnontoolsComponent = ({ children, ...args }) => {
   return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+    <Wrapper
+      anonymous
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={{
+        content: {
+          data: { '@id': 'http://myreturnURL' },
+          get: {
+            loaded: false,
+            loading: false,
+            error: null,
+          },
+        },
+      }}
+    >
       <div className="ui segment form attached" style={{ width: '400px' }}>
-        <AnontoolsDefault
-          userSession={{ token: null }}
-          content={{ '@id': 'myid' }}
-        />
+        <AnontoolsDefault />
       </div>
     </Wrapper>
   );

package/src/components/theme/Component/Component.jsx

@@ -1,7 +1,7 @@
 import registry from '@plone/volto/registry';
 
 /**
- * A component that can autommatically look up its implementation from the
+ * A component that can automatically look up its implementation from the
  * registry based on the provided component `componentName`
  */
 const Component = ({ componentName, dependencies, ...rest }) => {

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { map } from 'lodash';
+import { MaybeWrap } from '@plone/volto/components';
 import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
@@ -10,6 +11,7 @@ import {
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
 import config from '@plone/volto/registry';
 import { ViewDefaultBlock } from '@plone/volto/components';
+import RenderEmptyBlock from './RenderEmptyBlock';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -23,7 +25,8 @@ const messages = defineMessages({
 });
 
 const RenderBlocks = (props) => {
-  const { content, intl, location, metadata } = props;
+  const { content, location, metadata, blockWrapperTag } = props;
+  const intl = useIntl();
   const blocksFieldname = getBlocksFieldname(content);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
   const blocksConfig = props.blocksConfig || config.blocks.blocksConfig;
@@ -43,30 +46,56 @@ const RenderBlocks = (props) => {
           properties: content,
         });
 
-        return Block ? (
-          <StyleWrapper
-            key={block}
-            {...props}
-            id={block}
-            block={block}
-            data={blockData}
-          >
-            <Block
-              id={block}
-              metadata={metadata}
-              properties={content}
-              data={blockData}
-              path={getBaseUrl(location?.pathname || '')}
-              blocksConfig={blocksConfig}
-            />
-          </StyleWrapper>
-        ) : blockData ? (
-          <div key={block}>
-            {intl.formatMessage(messages.unknownBlock, {
-              block: content[blocksFieldname]?.[block]?.['@type'],
-            })}
-          </div>
-        ) : (
+        if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
+          return (
+            <MaybeWrap
+              key={block}
+              condition={blockWrapperTag}
+              as={blockWrapperTag}
+            >
+              <RenderEmptyBlock />
+            </MaybeWrap>
+          );
+        }
+
+        if (Block) {
+          return (
+            <MaybeWrap
+              key={block}
+              condition={blockWrapperTag}
+              as={blockWrapperTag}
+            >
+              <StyleWrapper
+                key={block}
+                {...props}
+                id={block}
+                block={block}
+                data={blockData}
+              >
+                <Block
+                  id={block}
+                  metadata={metadata}
+                  properties={content}
+                  data={blockData}
+                  path={getBaseUrl(location?.pathname || '')}
+                  blocksConfig={blocksConfig}
+                />
+              </StyleWrapper>
+            </MaybeWrap>
+          );
+        }
+
+        if (blockData) {
+          return (
+            <div key={block}>
+              {intl.formatMessage(messages.unknownBlock, {
+                block: content[blocksFieldname]?.[block]?.['@type'],
+              })}
+            </div>
+          );
+        }
+
+        return (
           <div key={block}>{intl.formatMessage(messages.invalidBlock)}</div>
         );
       })}
@@ -76,4 +105,4 @@ const RenderBlocks = (props) => {
   );
 };
 
-export default injectIntl(RenderBlocks);
+export default RenderBlocks;

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

@@ -0,0 +1,5 @@
+const RenderEmptyBlock = () => {
+  return null;
+};
+
+export default RenderEmptyBlock;

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';
 
@@ -458,6 +467,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 +511,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/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/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

@@ -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/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);