@plone/volto 16.0.0 → 16.2.0

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

@@ -19,6 +19,7 @@ const ListingData = (props) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
       block={block}
     />

package/src/components/manage/Blocks/Maps/MapsSidebar.jsx

@@ -39,6 +39,7 @@ const MapsSidebar = (props) => {
               [id]: value,
             });
           }}
+          onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
         />

package/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -80,6 +80,7 @@ const SearchBlockEdit = (props) => {
               [id]: value,
             });
           }}
+          onChangeBlock={onChangeBlock}
           formData={data}
         />
       </SidebarPortal>

package/src/components/manage/Blocks/Search/components/SelectFacet.jsx

@@ -3,6 +3,7 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   Option,
   DropdownIndicator,
+  MultiValueContainer,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 import { selectTheme, customSelectStyles } from './SelectStyling';
 import {
@@ -32,7 +33,7 @@ const SelectFacet = (props) => {
       options={choices}
       styles={customSelectStyles}
       theme={selectTheme}
-      components={{ DropdownIndicator, Option }}
+      components={{ DropdownIndicator, Option, MultiValueContainer }}
       isDisabled={isEditMode}
       onChange={(data) => {
         if (data) {

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

@@ -24,6 +24,7 @@ class Edit extends Component {
                 [id]: value,
               });
             }}
+            onChangeBlock={this.props.onChangeBlock}
             formData={this.props.data}
           />
         </SidebarPortal>

package/src/components/manage/Blocks/Video/VideoSidebar.jsx

@@ -39,8 +39,8 @@ const VideoSidebar = (props) => {
               [id]: value,
             });
           }}
+          onChangeBlock={onChangeBlock}
           formData={data}
-          fieldIndex={data.index}
           block={block}
         />
       )}

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -140,7 +140,7 @@ class UsersControlpanel extends Component {
       (this.props.createRequest.loading && nextProps.createRequest.loaded)
     ) {
       this.props.listUsers({
-        query: this.state.search,
+        search: this.state.search,
       });
     }
     if (this.props.createRequest.loading && nextProps.createRequest.loaded) {
@@ -172,7 +172,7 @@ class UsersControlpanel extends Component {
   onSearch(event) {
     event.preventDefault();
     this.props.listUsers({
-      query: this.state.search,
+      search: this.state.search,
     });
   }
 
@@ -439,23 +439,27 @@ class UsersControlpanel extends Component {
                       messages.addUserFormUsernameTitle,
                     ),
                     type: 'string',
-                    description:
-                      'Enter a user name, usually something like "jsmith". No spaces or special characters. Usernames and passwords are case sensitive, make sure the caps lock key is not enabled. This is the name used to log in.',
+                    description: this.props.intl.formatMessage(
+                      messages.addUserFormUsernameDescription,
+                    ),
                   },
                   fullname: {
                     title: this.props.intl.formatMessage(
                       messages.addUserFormFullnameTitle,
                     ),
                     type: 'string',
-                    description: 'Enter full name, e.g. John Smith.',
+                    description: this.props.intl.formatMessage(
+                      messages.addUserFormFullnameDescription,
+                    ),
                   },
                   email: {
                     title: this.props.intl.formatMessage(
                       messages.addUserFormEmailTitle,
                     ),
                     type: 'string',
-                    description:
-                      'Enter an email address. This is necessary in case the password is lost. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
+                    description: this.props.intl.formatMessage(
+                      messages.addUserFormEmailDescription,
+                    ),
                     widget: 'email',
                   },
                   password: {
@@ -463,8 +467,9 @@ class UsersControlpanel extends Component {
                       messages.addUserFormPasswordTitle,
                     ),
                     type: 'password',
-                    description:
-                      'Enter your new password. Minimum 5 characters.',
+                    description: this.props.intl.formatMessage(
+                      messages.addUserFormPasswordDescription,
+                    ),
                     widget: 'password',
                   },
                   sendPasswordReset: {
@@ -480,7 +485,6 @@ class UsersControlpanel extends Component {
                     type: 'array',
                     choices: this.props.roles.map((role) => [role.id, role.id]),
                     noValueOption: false,
-                    description: '',
                   },
                   groups: {
                     title: this.props.intl.formatMessage(
@@ -492,7 +496,6 @@ class UsersControlpanel extends Component {
                       group.id,
                     ]),
                     noValueOption: false,
-                    description: '',
                   },
                 },
                 required: ['username', 'email'],

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

@@ -43,7 +43,7 @@ const NumberWidget = (props) => {
         disabled={isDisabled}
         min={minimum || null}
         max={maximum || null}
-        value={value}
+        value={value ?? ''}
         placeholder={placeholder}
         onChange={({ target }) =>
           onChange(id, target.value === '' ? undefined : target.value)

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

@@ -57,7 +57,9 @@ const messages = defineMessages({
  *      }
  *      mutated.fieldsets[0].fields.push('extraField');
  *      return mutated;
- *    }
+ *    },
+ *    activeObject: 0, // Current active object drilled down from the schema (if present)
+ *    setActiveObject: () => {} // The current active object state updater function drilled down from the schema (if present)
  *  },
  * ```
  */
@@ -71,7 +73,22 @@ const ObjectListWidget = (props) => {
     onChange,
     schemaExtender,
   } = props;
-  const [activeObject, setActiveObject] = React.useState(value.length - 1);
+  const [localActiveObject, setLocalActiveObject] = React.useState(
+    props.activeObject ?? value.length - 1,
+  );
+
+  let activeObject, setActiveObject;
+  if (
+    (props.activeObject || props.activeObject === 0) &&
+    props.setActiveObject
+  ) {
+    activeObject = props.activeObject;
+    setActiveObject = props.setActiveObject;
+  } else {
+    activeObject = localActiveObject;
+    setActiveObject = setLocalActiveObject;
+  }
+
   const intl = useIntl();
 
   function handleChangeActiveObject(e, blockProps) {

package/src/components/theme/Error/ErrorBoundary.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // eslint-disable-next-line
+    console.error(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <pre className="error">{`<error: ${this.props.name}>`}</pre>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/components/theme/Error/ErrorBoundary.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 { MemoryRouter } from 'react-router-dom';
+import ErrorBoundary from './ErrorBoundary';
+
+const mockStore = configureStore();
+
+describe('Error boundary', () => {
+  it('renders an Error', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const ThrowError = () => {
+      throw new Error('Test');
+    };
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ErrorBoundary name={'test'}>
+            <ThrowError />
+          </ErrorBoundary>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

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

@@ -9,6 +9,7 @@ import {
 } from '@plone/volto/helpers';
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
 import config from '@plone/volto/registry';
+import { ViewDefaultBlock } from '@plone/volto/components';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -32,7 +33,8 @@ const RenderBlocks = (props) => {
     <CustomTag>
       {map(content[blocksLayoutFieldname].items, (block) => {
         const Block =
-          blocksConfig[content[blocksFieldname]?.[block]?.['@type']]?.view;
+          blocksConfig[content[blocksFieldname]?.[block]?.['@type']]?.view ||
+          ViewDefaultBlock;
 
         const blockData = applyBlockDefaults({
           data: content[blocksFieldname][block],

package/src/config/Style.jsx

@@ -0,0 +1,9 @@
+export const styleClassNameConverters = {
+  default: (name, value, prefix = '') => {
+    return value
+      ? `has--${prefix}${name}--${(value || '').toString().replace(/^#/, '')}`
+      : null;
+  },
+  noprefix: (name, value) => value,
+  bool: (name, value) => (value ? name : ''),
+};

package/src/config/index.js

@@ -24,6 +24,7 @@ import { loadables } from './Loadables';
 import { workflowMapping } from './Workflows';
 
 import { contentIcons } from './ContentIcons';
+import { styleClassNameConverters } from './Style';
 import {
   controlPanelsIcons,
   filterControlPanels,
@@ -167,6 +168,7 @@ let config = {
     addonsInfo: addonsInfo,
     workflowMapping,
     errorHandlers: [], // callables for unhandled errors
+    styleClassNameConverters,
   },
   experimental: {
     addBlockButton: {

package/src/helpers/Blocks/Blocks.js

@@ -3,16 +3,7 @@
  * @module helpers/Blocks
  */
 
-import {
-  omit,
-  without,
-  endsWith,
-  find,
-  isObject,
-  keys,
-  toPairs,
-  merge,
-} from 'lodash';
+import { omit, without, endsWith, find, isObject, keys, merge } from 'lodash';
 import move from 'lodash-move';
 import { v4 as uuid } from 'uuid';
 import config from '@plone/volto/registry';
@@ -450,35 +441,43 @@ export function applyBlockDefaults({ data, intl, ...rest }, blocksConfig) {
   return applySchemaDefaults({ data, schema, intl });
 }
 
-export const buildStyleClassNamesFromData = (styles) => {
-  // styles has the form
+/**
+ * Converts a name+value style pair (ex: color/red) to a classname,
+ * such as "has--color--red"
+ *
+ * This can be expanded via the style names, by suffixing them with special
+ * converters. See config.settings.styleClassNameConverters. Examples:
+ *
+ * styleToClassName('theme:noprefix', 'primary') returns "primary"
+ * styleToClassName('inverted:bool', true) returns 'inverted'
+ * styleToClassName('inverted:bool', false) returns ''
+ */
+export const styleToClassName = (key, value, prefix = '') => {
+  const converters = config.settings.styleClassNameConverters;
+  const [name, ...convIds] = key.split(':');
+
+  return (convIds.length ? convIds : ['default'])
+    .map((id) => converters[id])
+    .reduce((acc, conv) => conv(acc, value, prefix), name);
+};
+
+export const buildStyleClassNamesFromData = (obj = {}, prefix = '') => {
+  // styles has the form:
   // const styles = {
-  // color: 'red',
-  // backgroundColor: '#AABBCC',
+  //   color: 'red',
+  //   backgroundColor: '#AABBCC',
   // }
   // Returns: ['has--color--red', 'has--backgroundColor--AABBCC']
-  let styleArray = [];
-  const pairedStyles = toPairs(styles);
-  pairedStyles.forEach((item) => {
-    if (isObject(item[1])) {
-      const flattenedNestedStyles = toPairs(item[1]).map((nested) => [
-        item[0],
-        ...nested,
-      ]);
-      flattenedNestedStyles.forEach((sub) => styleArray.push(sub));
-    } else {
-      styleArray.push(item);
-    }
-  });
-  return styleArray.map((item) => {
-    const classname = item.map((item) => {
-      const str_item = item ? item.toString() : '';
-      return str_item && str_item.startsWith('#')
-        ? str_item.replace('#', '')
-        : str_item;
-    });
-    return `has--${classname[0]}--${classname[1]}${
-      classname[2] ? `--${classname[2]}` : ''
-    }`;
-  });
+
+  return Object.entries(obj)
+    .reduce(
+      (acc, [k, v]) => [
+        ...acc,
+        ...(isObject(v)
+          ? buildStyleClassNamesFromData(v, `${prefix}${k}--`)
+          : [styleToClassName(k, v, prefix)]),
+      ],
+      [],
+    )
+    .filter((v) => !!v);
 };

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

@@ -819,6 +819,7 @@ describe('Blocks', () => {
       expect(applyBlockDefaults({ data })).toEqual({});
     });
   });
+
   describe('buildStyleClassNamesFromData', () => {
     it('Sets styles classname array according to style values', () => {
       const styles = {
@@ -830,6 +831,7 @@ describe('Blocks', () => {
         'has--backgroundColor--AABBCC',
       ]);
     });
+
     it('Sets styles classname array according to style values with nested', () => {
       const styles = {
         color: 'red',
@@ -846,6 +848,7 @@ describe('Blocks', () => {
         'has--nested--bar--black',
       ]);
     });
+
     it('Sets styles classname array according to style values with nested and colors', () => {
       const styles = {
         color: 'red',
@@ -863,6 +866,27 @@ describe('Blocks', () => {
       ]);
     });
 
+    it('Supports multiple nested level', () => {
+      const styles = {
+        color: 'red',
+        backgroundColor: '#AABBCC',
+        nested: {
+          l1: 'white',
+          level2: {
+            foo: '#fff',
+            bar: '#000',
+          },
+        },
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual([
+        'has--color--red',
+        'has--backgroundColor--AABBCC',
+        'has--nested--l1--white',
+        'has--nested--level2--foo--fff',
+        'has--nested--level2--bar--000',
+      ]);
+    });
+
     it('Sets styles classname array according to style values with int values', () => {
       const styles = {
         color: 'red',
@@ -873,5 +897,45 @@ describe('Blocks', () => {
         'has--borderRadius--8',
       ]);
     });
+
+    it('Understands noprefix converter for style values', () => {
+      const styles = {
+        color: 'red',
+        'theme:noprefix': 'primary',
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual([
+        'has--color--red',
+        'primary',
+      ]);
+    });
+
+    it('Understands bool converter for trueish value', () => {
+      const styles = {
+        color: 'red',
+        'inverted:bool': true,
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual([
+        'has--color--red',
+        'inverted',
+      ]);
+    });
+
+    it('Understands bool converter for false value', () => {
+      const styles = {
+        color: 'red',
+        'inverted:bool': false,
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual(['has--color--red']);
+    });
+
+    it('Ugly edge cases', () => {
+      const styles = {
+        color: undefined,
+        nested: {
+          l1: {},
+        },
+      };
+      expect(buildStyleClassNamesFromData(styles)).toEqual([]);
+    });
   });
 });

package/src/helpers/MessageLabels/MessageLabels.js

@@ -114,6 +114,24 @@ export const messages = defineMessages({
     id: 'Username',
     defaultMessage: 'Username',
   },
+  addUserFormUsernameDescription: {
+    id: 'addUserFormUsernameDescription',
+    defaultMessage:
+      'Enter a user name, usually something like "jsmith". No spaces or special characters. Usernames and passwords are case sensitive, make sure the caps lock key is not enabled. This is the name used to log in.',
+  },
+  addUserFormFullnameDescription: {
+    id: 'addUserFormFullnameDescription',
+    defaultMessage: 'Enter full name, e.g. John Smith.',
+  },
+  addUserFormEmailDescription: {
+    id: 'addUserFormEmailDescription',
+    defaultMessage:
+      'Enter an email address. This is necessary in case the password is lost. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
+  },
+  addUserFormPasswordDescription: {
+    id: 'addUserFormPasswordDescription',
+    defaultMessage: 'Enter your new password. Minimum 8 characters.',
+  },
   addGroupsFormTitleTitle: {
     id: 'Title',
     defaultMessage: 'Title',

package/test-setup-config.js

@@ -20,6 +20,7 @@ import {
 } from '@plone/volto/config/RichTextEditor/Blocks';
 import FromHTMLCustomBlockFn from '@plone/volto/config/RichTextEditor/FromHTML';
 import { contentIcons } from '@plone/volto/config/ContentIcons';
+import { styleClassNameConverters } from '@plone/volto/config/Style';
 
 import {
   controlPanelsIcons,
@@ -74,6 +75,7 @@ config.set('settings', {
   apiExpanders: [],
   downloadableObjects: ['File'],
   viewableInBrowserObjects: [],
+  styleClassNameConverters,
 });
 config.set('blocks', {
   blocksConfig: {
@@ -163,3 +165,8 @@ config.set('widgets', {
 });
 
 config.set('components', {});
+config.set('experimental', {
+  addBlockButton: {
+    enabled: false,
+  },
+});