@plone/volto 16.8.0 → 16.9.0

package/.changelog.draft

@@ -1,15 +1,21 @@
-## 16.8.0 (2023-01-18)
+## 16.9.0 (2023-01-27)
 
 ### Feature
 
-- Autocomplete widget support for QueryStringWidget @sneridagh [#4177](https://github.com/plone/volto/issues/4177)
-- Enhance the StyleWrapper classNames generator by adding look around classNames depending on the sorounding previous/next blocks. @sneridagh [#4260](https://github.com/plone/volto/issues/4260)
+- Enable scrolling to ids via hashes in internal links @jackahl [#4165](https://github.com/plone/volto/issues/4165)
+- Read listing block schema from configuration registry @pnicolli [#4231](https://github.com/plone/volto/issues/4231)
+- Add displayName when registering a component @sneridagh [#4282](https://github.com/plone/volto/issues/4282)
+- Support for all default expanders (breadcrumbs, navigation, actions, types) in actions/reducers. Conditional loading of actions if the expanders are present. @sneridagh [#4285](https://github.com/plone/volto/issues/4285)
+- Add `addNewBlock` Cypress support command @sneridagh [#4313](https://github.com/plone/volto/issues/4313)
 
 ### Bugfix
 
-- Fix typo in 4260 @sneridagh [#4268](https://github.com/plone/volto/issues/4268)
+- Fixed maxLength validation for string type fields @pnicolli [#4189](https://github.com/plone/volto/issues/4189)
+- bugfix : add pathname as required proptype in Blocks/Edit @akshatgarg12 [#4194](https://github.com/plone/volto/issues/4194)
+- (Fix) Select Widgets scrolls the page when the options are not visible @dobri1408 [#4223](https://github.com/plone/volto/issues/4223)
+- Updated volto-slate to check for slateSettings before falling back to config @danalvrz [#4311](https://github.com/plone/volto/issues/4311)
 
-### Documentation
+### Internal
 
-- Update links to docs to use correct versions. [stevepiercy] [#4256](https://github.com/plone/volto/issues/4256)
+- Updated 4 Dependencies @SaiRev0 [#4104](https://github.com/plone/volto/issues/4104)
 

package/CHANGELOG.md

@@ -8,6 +8,36 @@
 
 <!-- towncrier release notes start -->
 
+## 16.9.0 (2023-01-27)
+
+### Feature
+
+- Enable scrolling to ids via hashes in internal links @jackahl [#4165](https://github.com/plone/volto/issues/4165)
+- Read listing block schema from configuration registry @pnicolli [#4231](https://github.com/plone/volto/issues/4231)
+- Add displayName when registering a component @sneridagh [#4282](https://github.com/plone/volto/issues/4282)
+- Support for all default expanders (breadcrumbs, navigation, actions, types) in actions/reducers. Conditional loading of actions if the expanders are present. @sneridagh [#4285](https://github.com/plone/volto/issues/4285)
+- Add `addNewBlock` Cypress support command @sneridagh [#4313](https://github.com/plone/volto/issues/4313)
+
+### Bugfix
+
+- Fixed maxLength validation for string type fields @pnicolli [#4189](https://github.com/plone/volto/issues/4189)
+- bugfix : add pathname as required proptype in Blocks/Edit @akshatgarg12 [#4194](https://github.com/plone/volto/issues/4194)
+- (Fix) Select Widgets scrolls the page when the options are not visible @dobri1408 [#4223](https://github.com/plone/volto/issues/4223)
+- Updated volto-slate to check for slateSettings before falling back to config @danalvrz [#4311](https://github.com/plone/volto/issues/4311)
+
+### Internal
+
+- Updated 4 Dependencies @SaiRev0 [#4104](https://github.com/plone/volto/issues/4104)
+
+
+## 16.8.1 (2023-01-18)
+
+### Bugfix
+
+- Fix StyleWrapper extenders, the classNames were not being re-fed into the pipe @sneridagh [#4275](https://github.com/plone/volto/issues/4275)
+- Fix bug where label of search facet wasn't translated when the content object is being translated @robgietema
+
+
 ## 16.8.0 (2023-01-18)
 
 ### Feature

package/cypress/support/commands.js

@@ -806,6 +806,12 @@ function createHtmlPasteEvent(htmlContent) {
   );
 }
 
+Cypress.Commands.add('addNewBlock', (blockName, createNewSlate = false) => {
+  let block;
+  block = cy.getSlate(createNewSlate).type(`/${blockName}{enter}`);
+  return block;
+});
+
 Cypress.Commands.add('navigate', (route = '') => {
   return cy.window().its('appHistory').invoke('push', route);
 });

package/news/4104.internal

@@ -0,0 +1 @@
+Updated 4 Dependencies @SaiRev0

package/news/4165.feature

@@ -0,0 +1 @@
+Enable scrolling to ids via hashes in internal links @jackahl

package/news/4189.bugfix

@@ -0,0 +1 @@
+Fixed maxLength validation for string type fields @pnicolli

package/news/4194.bugfix

@@ -0,0 +1 @@
+bugfix : add pathname as required proptype in Blocks/Edit @akshatgarg12

package/news/4223.bugfix

@@ -0,0 +1 @@
+(Fix) Select Widgets scrolls the page when the options are not visible @dobri1408

package/news/4231.feature

@@ -0,0 +1 @@
+Read listing block schema from configuration registry @pnicolli

package/news/4282.feature

@@ -0,0 +1 @@
+Add displayName when registering a component @sneridagh

package/news/4285.feature

@@ -0,0 +1 @@
+Support for all default expanders (breadcrumbs, navigation, actions, types) in actions/reducers. Conditional loading of actions if the expanders are present. @sneridagh

package/news/4311.bugfix

@@ -0,0 +1 @@
+Updated volto-slate to check for slateSettings before falling back to config @danalvrz

package/news/4313.feature

@@ -0,0 +1 @@
+Add `addNewBlock` Cypress support command @sneridagh

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.8.0",
+  "version": "16.9.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -281,7 +281,7 @@
     "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-react": "7.20.0",
     "eslint-plugin-react-hooks": "4.0.2",
-    "express": "4.17.1",
+    "express": "4.17.3",
     "filesize": "6",
     "glob": "7.1.6",
     "hamburgers": "1.1.3",
@@ -349,6 +349,7 @@
     "react-router": "5.2.0",
     "react-router-config": "5.1.1",
     "react-router-dom": "5.2.0",
+    "react-router-hash-link": "2.4.3",
     "react-select": "4.3.1",
     "react-select-async-paginate": "0.5.3",
     "react-share": "2.3.1",

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "16.8.0",
+  "version": "16.9.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/packages/volto-slate/src/blocks/Text/DetachedTextBlockEditor.jsx

@@ -51,6 +51,7 @@ export const DetachedTextBlockEditor = (props) => {
         value={value}
         block={block /* is this needed? */}
         debug={DEBUG}
+        slateSettings={props.slateSettings}
         onFocus={() => {
           if (!selected) {
             onSelectBlock(block);

package/packages/volto-slate/src/editor/SlateEditor.jsx

@@ -262,7 +262,11 @@ class SlateEditor extends Component {
           >
             {selected ? (
               <>
-                <InlineToolbar editor={editor} className={className} />
+                <InlineToolbar
+                  editor={editor}
+                  className={className}
+                  slateSettings={this.props.slateSettings}
+                />
                 {Object.keys(slateSettings.elementToolbarButtons).map(
                   (t, i) => {
                     return (

package/packages/volto-slate/src/editor/ui/InlineToolbar.jsx

@@ -17,7 +17,8 @@ const InlineToolbar = (props) => {
     setShowExpandedToolbar,
   } = props;
 
-  const { slate } = config.settings;
+  const slate = props.slateSettings || config.settings.slate;
+
   const [showMainToolbar, setShowMainToolbar] = React.useState(
     !!(editor.selection && hasRangeSelection(editor)),
   );
@@ -58,6 +59,7 @@ const InlineToolbar = (props) => {
         showExpandedToolbar={showExpandedToolbar}
         setShowExpandedToolbar={setShowExpandedToolbar}
         show={showMainToolbar}
+        slateSettings={slate}
       />
       <SlateContextToolbar
         editor={editor}

package/packages/volto-slate/src/editor/ui/SlateToolbar.jsx

@@ -26,7 +26,9 @@ const SlateToolbar = (props) => {
     enableExpando = false,
     show,
   } = props;
-  const { slate } = config.settings;
+
+  const slate = props.slateSettings || config.settings.slate;
+
   const { toolbarButtons, expandedToolbarButtons, buttons } = slate;
 
   function renderButton(name, index) {

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

@@ -52,6 +52,7 @@ export class Edit extends Component {
     onMoveBlock: PropTypes.func.isRequired,
     onDeleteBlock: PropTypes.func.isRequired,
     editable: PropTypes.bool,
+    pathname: PropTypes.string.isRequired,
   };
 
   /**

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

@@ -2,12 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
-import { schemaListing } from './schema';
+import config from '@plone/volto/registry';
 
 const ListingData = (props) => {
   const { data, block, onChangeBlock } = props;
   const intl = useIntl();
-  const schema = schemaListing({ ...props, intl });
+  const schema = config.blocks.blocksConfig.listing.blockSchema({
+    ...props,
+    intl,
+  });
 
   return (
     <BlockDataForm

package/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx

@@ -195,7 +195,7 @@ class SelectWidget extends Component {
           styles={customSelectStyles}
           theme={selectTheme}
           components={{ DropdownIndicator, Option }}
-          value={value}
+          value={{ value: value?.value, label: indexes[value?.value]?.title }}
           onChange={(data) => {
             let dataValue = [];
             if (Array.isArray(data)) {

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { asyncConnect } from '@plone/volto/helpers';
+import { asyncConnect, hasApiExpander } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Grid, Menu } from 'semantic-ui-react';
 import { Portal } from 'react-portal';
@@ -475,7 +475,10 @@ export default compose(
     {
       key: 'actions',
       promise: async ({ location, store: { dispatch } }) => {
-        await dispatch(listActions(getBaseUrl(location.pathname)));
+        // Do not trigger the actions action if the expander is present
+        if (!hasApiExpander('actions', getBaseUrl(location.pathname))) {
+          return await dispatch(listActions(getBaseUrl(location.pathname)));
+        }
       },
     },
     {

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -29,7 +29,12 @@ import {
   unlockContent,
 } from '@plone/volto/actions';
 import { Icon } from '@plone/volto/components';
-import { BodyClass, getBaseUrl, getCookieOptions } from '@plone/volto/helpers';
+import {
+  BodyClass,
+  getBaseUrl,
+  getCookieOptions,
+  hasApiExpander,
+} from '@plone/volto/helpers';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 
 import penSVG from '@plone/volto/icons/pen.svg';
@@ -197,8 +202,14 @@ class Toolbar extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    this.props.listActions(getBaseUrl(this.props.pathname));
-    this.props.getTypes(getBaseUrl(this.props.pathname));
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
+    // Do not trigger the types action if the expander is present
+    if (!hasApiExpander('types', getBaseUrl(this.props.pathname))) {
+      this.props.getTypes(getBaseUrl(this.props.pathname));
+    }
     this.props.setExpandedToolbar(this.state.expanded);
     document.addEventListener('mousedown', this.handleClickOutside, false);
   }
@@ -211,8 +222,14 @@ class Toolbar extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
-      this.props.getTypes(getBaseUrl(nextProps.pathname));
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
+      // Do not trigger the types action if the expander is present
+      if (!hasApiExpander('types', getBaseUrl(nextProps.pathname))) {
+        this.props.getTypes(getBaseUrl(nextProps.pathname));
+      }
     }
 
     // Unlock

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { HashLink as Link } from 'react-router-hash-link';
 import { useSelector } from 'react-redux';
 import {
   flattenToAppURL,
@@ -78,13 +78,13 @@ const UniversalLink = ({
   const checkedURL = URLUtils.checkAndNormalizeUrl(url);
 
   url = checkedURL.url;
-
   let tag = (
     <Link
       to={flattenToAppURL(url)}
       target={openLinkInNewTab ?? false ? '_blank' : null}
       title={title}
       className={className}
+      smooth={config.settings.hashLinkSmoothScroll}
       {...props}
     >
       {children}

package/src/components/manage/Widgets/ArrayWidget.jsx

@@ -307,6 +307,7 @@ class ArrayWidget extends Component {
           // react-sortable-hoc props:
           axis="xy"
           onSortEnd={this.onSortEnd}
+          menuShouldScrollIntoView={false}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}

package/src/components/manage/Widgets/SelectWidget.jsx

@@ -210,6 +210,7 @@ class SelectWidget extends Component {
           id={`field-${id}`}
           key={choices}
           name={id}
+          menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}
           className="react-select-container"

package/src/components/manage/Widgets/TokenWidget.jsx

@@ -174,6 +174,7 @@ class TokenWidget extends Component {
         <CreatableSelect
           id={`field-${this.props.id}`}
           key={this.props.id}
+          menuShouldScrollIntoView={false}
           isDisabled={this.props.isDisabled}
           className="react-select-container"
           classNamePrefix="react-select"

package/src/components/theme/App/App.jsx

@@ -32,7 +32,13 @@ import {
   AppExtras,
   SkipLinks,
 } from '@plone/volto/components';
-import { BodyClass, getBaseUrl, getView, isCmsUi } from '@plone/volto/helpers';
+import {
+  BodyClass,
+  getBaseUrl,
+  getView,
+  hasApiExpander,
+  isCmsUi,
+} from '@plone/volto/helpers';
 import {
   getBreadcrumbs,
   getContent,
@@ -257,8 +263,15 @@ export default compose(
   asyncConnect([
     {
       key: 'breadcrumbs',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ && dispatch(getBreadcrumbs(getBaseUrl(location.pathname))),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the breadcrumbs action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('breadcrumbs', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(getBreadcrumbs(getBaseUrl(location.pathname)));
+        }
+      },
     },
     {
       key: 'content',
@@ -267,19 +280,32 @@ export default compose(
     },
     {
       key: 'navigation',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ &&
-        dispatch(
-          getNavigation(
-            getBaseUrl(location.pathname),
-            config.settings.navDepth,
-          ),
-        ),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the navigation action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('navigation', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(
+            getNavigation(
+              getBaseUrl(location.pathname),
+              config.settings.navDepth,
+            ),
+          );
+        }
+      },
     },
     {
       key: 'types',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the types action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('types', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(getTypes(getBaseUrl(location.pathname)));
+        }
+      },
     },
     {
       key: 'workflow',

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

@@ -24,6 +24,7 @@ import {
   getBaseUrl,
   flattenToAppURL,
   getLayoutFieldname,
+  hasApiExpander,
 } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
@@ -118,7 +119,10 @@ class View extends Component {
   };
 
   componentDidMount() {
-    this.props.listActions(getBaseUrl(this.props.pathname));
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
     this.props.getContent(
       getBaseUrl(this.props.pathname),
       this.props.versionId,
@@ -134,7 +138,10 @@ class View extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
       this.props.getContent(
         getBaseUrl(nextProps.pathname),
         this.props.versionId,

package/src/config/index.js

@@ -75,11 +75,18 @@ let config = {
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
     apiPath,
-    apiExpanders: [],
+    apiExpanders: [
+      // 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'],
+      // },
+    ],
     // Internal proxy to bypass CORS *while developing*. NOT intended for production use.
     // In production is recommended you use a Seamless mode deployment using a web server in
     // front of both the frontend and the backend so you can bypass CORS safely.
-    // https://docs.voltocms.com/deploying/seamless-mode/
+    // https://6.docs.plone.org/volto/deploying/seamless-mode.html
     devProxyToApiPath:
       process.env.RAZZLE_DEV_PROXY_API_PATH ||
       process.env.RAZZLE_API_PATH ||
@@ -169,6 +176,7 @@ let config = {
     workflowMapping,
     errorHandlers: [], // callables for unhandled errors
     styleClassNameConverters,
+    hashLinkSmoothScroll: false,
     styleClassNameExtenders,
   },
   experimental: {

package/src/helpers/Blocks/Blocks.js

@@ -489,10 +489,15 @@ export const buildStyleClassNamesFromData = (obj = {}, prefix = '') => {
  * @param {Object} params An object with data, content and block (current block id)
  * @return {Array} Extender classNames resultant array
  */
-export const buildStyleClassNamesExtenders = ({ block, content, data }) => {
+export const buildStyleClassNamesExtenders = ({
+  block,
+  content,
+  data,
+  classNames,
+}) => {
   return config.settings.styleClassNameExtenders.reduce(
     (acc, extender) => extender({ block, content, data, classNames: acc }),
-    [],
+    classNames,
   );
 };
 

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

@@ -1063,9 +1063,9 @@ describe('Blocks', () => {
       };
       const block = 2;
       const data = content['blocks'][2];
-
+      const classNames = [];
       expect(
-        buildStyleClassNamesExtenders({ block, content, data }),
+        buildStyleClassNamesExtenders({ block, content, data, classNames }),
       ).toStrictEqual([
         'next--is--slate',
         'previous--is--same--block-type',
@@ -1103,9 +1103,10 @@ describe('Blocks', () => {
       };
       const block = 2;
       const data = content['blocks'][2];
+      const classNames = [];
 
       expect(
-        buildStyleClassNamesExtenders({ block, content, data }),
+        buildStyleClassNamesExtenders({ block, content, data, classNames }),
       ).toStrictEqual([
         'next--is--slate',
         'previous--is--same--block-type',
@@ -1140,9 +1141,10 @@ describe('Blocks', () => {
       };
       const block = 2;
       const data = content['blocks'][2];
+      const classNames = [];
 
       expect(
-        buildStyleClassNamesExtenders({ block, content, data }),
+        buildStyleClassNamesExtenders({ block, content, data, classNames }),
       ).toStrictEqual([
         'next--is--slate',
         'next--is--same--block-type',
@@ -1174,10 +1176,47 @@ describe('Blocks', () => {
       };
       const block = 2;
       const data = content['blocks'][2];
+      const classNames = [];
+
+      expect(
+        buildStyleClassNamesExtenders({ block, content, data, classNames }),
+      ).toStrictEqual([
+        'next--is--slate',
+        'previous--is--same--block-type',
+        'is--last--of--block-type',
+        'previous--has--same--backgroundColor',
+        'next--has--different--backgroundColor',
+      ]);
+    });
+
+    it('grid + grid + slate grey - with existing classNames list', () => {
+      const content = {
+        blocks: {
+          1: {
+            '@type': '__grid',
+          },
+          2: {
+            '@type': '__grid',
+          },
+          3: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+        },
+        blocks_layout: {
+          items: [1, 2, 3],
+        },
+      };
+      const block = 2;
+      const data = content['blocks'][2];
+      const classNames = ['has--align--center'];
 
       expect(
-        buildStyleClassNamesExtenders({ block, content, data }),
+        buildStyleClassNamesExtenders({ block, content, data, classNames }),
       ).toStrictEqual([
+        'has--align--center',
         'next--is--slate',
         'previous--is--same--block-type',
         'is--last--of--block-type',