@plone/volto 16.0.0 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 16.1.0 (2022-11-23)
+
+### Feature
+
+- Support for drilled down current state and updater function from schema in `ObjectListWidget`. This allows to sync the current object selected from the UI and the block settings and viceversa @sneridagh
+- Allow custom style wrapper classnames via fieldname suffixes. Added `config.settings.styleClassNameConverters` to register new suffix converters @tiberiuichim
+
+### Bugfix
+
+- Fix jest moduleNameMapper for `@plone/volto/babel` @tiberiuichim
+- Fix addons loader test @tiberiuichim
+- Pass down `onChangeBlock` prop to all stock blocks in core @sneridagh
+- Fix user search by full name in users control panel @reebalazs
+
 ## 16.0.0 (2022-11-22)
 
 ### Breaking
@@ -127,8 +141,6 @@ See https://6.dev-docs.plone.org/volto/upgrade-guide/index.html for more informa
 - Allow passing ariaHidden, id and style to an Icon's SVG @JeffersonBledsoe #3908
 - All Fields now understand the `default` prop as a fallback value in case their data value is missing. As a convenience, the `defaultValue` is also used as a fallback, but this shouldn't proliferate. @tiberiuichim
 - There is an experimental setting to move the button for adding a new block to show below any selected block, instead of only on the left of empty text blocks. Set `config.experimental.addBlockButton.enabled = true` to enable it. @davisagli
-- Allow custom style wrapper classnames via fieldname suffixes. Added `config.settings.styleClassNameConverters` to register new suffix converters @tiberiuichim
-- Support for drilled down current state and updater function from schema in `ObjectListWidget`. This allows to sync the current object selected from the UI and the block settings and viceversa @sneridagh
 
 ### Bugfix
 
@@ -257,7 +269,7 @@ See https://6.dev-docs.plone.org/volto/upgrade-guide/index.html for more informa
 - Fix image tag for Plone 5.2.x, use 5.2.9 for now @sneridagh
 - Cover an additional edge case for defaults @tiberiuichim
 - Fix issue when using list markdown when list is already active (volto-slate) @robgietema
-- Fix translation spelling of toggle  @iFlameing
+- Fix translation spelling of toggle @iFlameing
 - Fix keyboard accessibility issue of Clear button in Folder content view @iFlameing
 
 ### Internal
@@ -365,7 +377,7 @@ See https://6.dev-docs.plone.org/volto/upgrade-guide/index.html for more informa
 
 - Fix keyboard accessibility issue of Clear button in Folder content view @iFlameing
 - Fix issue when using list markdown when list is already active (volto-slate) @robgietema
-- Fix translation spelling of toggle  @iFlameing
+- Fix translation spelling of toggle @iFlameing
 
 ### Documentation
 

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -85,6 +85,7 @@
     },
     "moduleNameMapper": {
       "@plone/volto/package.json": "<rootDir>/package.json",
+      "@plone/volto/babel": "<rootDir>/babel.js",
       "@plone/volto/(.*)$": "<rootDir>/src/$1",
       "@plone/volto-slate": "<rootDir>/packages/volto-slate/src",
       "~/config": "<rootDir>/src/config",

package/src/components/manage/Blocks/HeroImageLeft/Data.jsx

@@ -9,7 +9,6 @@ const HeroImageLeftBlockData = (props) => {
   const schema = schemaHero({ ...props, intl });
   return (
     <BlockDataForm
-      block={block}
       schema={schema}
       title={schema.title}
       onChangeField={(id, value) => {
@@ -18,7 +17,9 @@ const HeroImageLeftBlockData = (props) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
+      block={block}
     />
   );
 };

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

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

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/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,
     });
   }
 

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