@plone/volto 16.7.0 → 16.8.1

package/.changelog.draft

@@ -1,25 +1,6 @@
-## 16.7.0 (2023-01-11)
-
-### Feature
-
-- Show project name and version in control panel @sneridagh [#4176](https://github.com/plone/volto/issues/4176)
-- Enhance Cypress content creation command @sneridagh [#4210](https://github.com/plone/volto/issues/4210)
+## 16.8.1 (2023-01-18)
 
 ### Bugfix
 
-- Improve matching in keyboard slash menu. [davisagli] [#4187](https://github.com/plone/volto/issues/4187)
-- (fix): sidebar is not displaying correctly when clicking on a lead image field. @dobri1408 [#4191](https://github.com/plone/volto/issues/4191)
-- Cleanup `package.json` scripts section @sneridagh [#4193](https://github.com/plone/volto/issues/4193)
-- Fixed condition to select without vocabulary @SaraBianchi [#4200](https://github.com/plone/volto/issues/4200)
-- fix iframe covering the page due to a react-error-overlay bug @reebalazs [#4242](https://github.com/plone/volto/issues/4242)
-
-### Documentation
-
-- Add description for different types of blocks. @MAX-786 [#3827](https://github.com/plone/volto/issues/3827)
-- Update makefile to use Vale for spell, grammar, and style checking. Fix linkcheckbroken to return the correct exit code for broken links. Fix broken links. [stevepiercy] [#4181](https://github.com/plone/volto/issues/4181)
-- Add todo regarding management of Plone's backend. Update versions. [stevepiercy] [#4198](https://github.com/plone/volto/issues/4198)
-- Pin Sphinx<5,>=3 due to sphinx-book-theme 0.3.3 requirement. [stevepiercy] [#4199](https://github.com/plone/volto/issues/4199)
-- Add message about the status of Volto and Plone 6 Installation docs, directing the reader to the main Plone 6 docs. [stevepiercy] [#4209](https://github.com/plone/volto/issues/4209)
-- Clean up Glossary and integrate with main docs. See https://github.com/plone/documentation/issues/1415. [stevepiercy] [#4211](https://github.com/plone/volto/issues/4211)
-- Add some instructions for dealing with untranspiled add-ons and a lazy loading example for functional components. [cguardia] [#4233](https://github.com/plone/volto/issues/4233)
+- Fix StyleWrapper extenders, the classNames were not being re-fed into the pipe @sneridagh [#4275](https://github.com/plone/volto/issues/4275)
 

package/CHANGELOG.md

@@ -8,6 +8,29 @@
 
 <!-- towncrier release notes start -->
 
+## 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)
+
+
+## 16.8.0 (2023-01-18)
+
+### 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)
+
+### Bugfix
+
+- Fix typo in 4260 @sneridagh [#4268](https://github.com/plone/volto/issues/4268)
+
+### Documentation
+
+- Update links to docs to use correct versions. [stevepiercy] [#4256](https://github.com/plone/volto/issues/4256)
+
+
 ## 16.7.0 (2023-01-11)
 
 ### Feature
@@ -17,6 +40,7 @@
 
 ### Bugfix
 
+- Use Grid instead of Table in Diffview @erral
 - Improve matching in keyboard slash menu. [davisagli] [#4187](https://github.com/plone/volto/issues/4187)
 - (fix): sidebar is not displaying correctly when clicking on a lead image field. @dobri1408 [#4191](https://github.com/plone/volto/issues/4191)
 - Cleanup `package.json` scripts section @sneridagh [#4193](https://github.com/plone/volto/issues/4193)

package/README.md

@@ -278,7 +278,7 @@ make start-backend-docker
 
 or running Plone on your machine (advanced), additional dependencies might be
 required, only for Plone experienced integrators/developers. Check the [Plone
-Installation Documentation](https://docs.plone.org/manage/installing/installation.html).
+Installation Documentation](https://6.docs.plone.org/install/index.html).
 
 ```shell
 make build-backend

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.7.0",
+  "version": "16.8.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/package.json

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

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

@@ -1,15 +1,26 @@
 import React from 'react';
 import cx from 'classnames';
-import { buildStyleClassNamesFromData } from '@plone/volto/helpers';
+import {
+  buildStyleClassNamesFromData,
+  buildStyleClassNamesExtenders,
+} from '@plone/volto/helpers';
 
 const StyleWrapper = (props) => {
-  const { children, data = {} } = props;
-  const styles = buildStyleClassNamesFromData(data.styles);
+  let classNames = [];
+  const { children, content, data = {}, block } = props;
+  classNames = buildStyleClassNamesFromData(data.styles);
+
+  classNames = buildStyleClassNamesExtenders({
+    block,
+    content,
+    data,
+    classNames,
+  });
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const childProps = {
         ...props,
-        className: cx([child.props.className, ...styles]),
+        className: cx([child.props.className, ...classNames]),
       };
       return React.cloneElement(child, childProps);
     }

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

@@ -14,6 +14,7 @@ import { getQuerystring } from '@plone/volto/actions';
 import { Icon } from '@plone/volto/components';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import cx from 'classnames';
+import config from '@plone/volto/registry';
 
 import {
   Option,
@@ -193,6 +194,23 @@ export class QuerystringWidgetComponent extends Component {
             />
           </Form.Field>
         );
+      case 'autocomplete':
+        const AutoCompleteComponent = config.widgets.widget.autocomplete;
+        const vocabulary = { '@id': this.props.indexes[row.i].vocabulary };
+        return (
+          <Form.Field style={{ flex: '1 0 auto', maxWidth: '92%' }}>
+            <AutoCompleteComponent
+              {...props}
+              vocabulary={vocabulary}
+              wrapped={false}
+              id={`id-${index}`}
+              title={`title-${index}`}
+              onChange={(_d, data) => {
+                this.onChangeValue(index, data);
+              }}
+            />
+          </Form.Field>
+        );
       case 'ReferenceWidget':
       default:
         // if (row.o === 'plone.app.querystring.operation.string.relativePath') {

package/src/config/Style.jsx

@@ -7,3 +7,5 @@ export const styleClassNameConverters = {
   noprefix: (name, value) => value,
   bool: (name, value) => (value ? name : ''),
 };
+
+export const styleClassNameExtenders = [];

package/src/config/index.js

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

package/src/helpers/Blocks/Blocks.js

@@ -481,3 +481,46 @@ export const buildStyleClassNamesFromData = (obj = {}, prefix = '') => {
     )
     .filter((v) => !!v);
 };
+
+/**
+ * Generate classNames from extenders
+ *
+ * @function buildStyleClassNamesExtenders
+ * @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,
+  classNames,
+}) => {
+  return config.settings.styleClassNameExtenders.reduce(
+    (acc, extender) => extender({ block, content, data, classNames: acc }),
+    classNames,
+  );
+};
+
+/**
+ * Return previous/next blocks given the content object and the current block id
+ *
+ * @function getPreviousNextBlock
+ * @param {Object} params An object with the content object and block (current block id)
+ * @return {Array} An array with the signature [previousBlock, nextBlock]
+ */
+export const getPreviousNextBlock = ({ content, block }) => {
+  const previousBlock =
+    content['blocks'][
+      content['blocks_layout'].items[
+        content['blocks_layout'].items.indexOf(block) - 1
+      ]
+    ];
+  const nextBlock =
+    content['blocks'][
+      content['blocks_layout'].items[
+        content['blocks_layout'].items.indexOf(block) + 1
+      ]
+    ];
+
+  return [previousBlock, nextBlock];
+};

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

@@ -17,6 +17,8 @@ import {
   applyBlockDefaults,
   applySchemaDefaults,
   buildStyleClassNamesFromData,
+  buildStyleClassNamesExtenders,
+  getPreviousNextBlock,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -938,4 +940,289 @@ describe('Blocks', () => {
       expect(buildStyleClassNamesFromData(styles)).toEqual([]);
     });
   });
+
+  describe('getPreviousNextBlock', () => {
+    it('basic functionality', () => {
+      const content = {
+        blocks: {
+          1: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+          2: {
+            '@type': 'slate',
+          },
+          3: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+        },
+        blocks_layout: {
+          items: [1, 2, 3],
+        },
+      };
+      const block = 2;
+      const [previousBlock, nextBlock] = getPreviousNextBlock({
+        content,
+        block,
+      });
+      expect(previousBlock).toEqual({
+        '@type': 'slate',
+        styles: {
+          backgroundColor: 'grey',
+        },
+      });
+      expect(nextBlock).toEqual({
+        '@type': 'slate',
+        styles: {
+          backgroundColor: 'grey',
+        },
+      });
+    });
+  });
+
+  describe('buildStyleClassNamesExtenders', () => {
+    beforeAll(() => {
+      // Example styleClassNameExtenders
+      config.settings.styleClassNameExtenders = [
+        ({ block, content, data, classNames }) => {
+          let styles = [];
+          const [previousBlock, nextBlock] = getPreviousNextBlock({
+            content,
+            block,
+          });
+
+          if (nextBlock?.['@type']) {
+            styles.push(`next--is--${nextBlock['@type']}`);
+          }
+
+          if (data?.['@type'] === previousBlock?.['@type']) {
+            styles.push('previous--is--same--block-type');
+          }
+
+          if (data?.['@type'] === nextBlock?.['@type']) {
+            styles.push('next--is--same--block-type');
+          }
+
+          if (data?.['@type'] !== previousBlock?.['@type']) {
+            styles.push('is--first--of--block-type');
+          }
+
+          if (data?.['@type'] !== nextBlock?.['@type']) {
+            styles.push('is--last--of--block-type');
+          }
+
+          const previousColor =
+            previousBlock?.styles?.backgroundColor ?? 'transparent';
+          const currentColor = data?.styles?.backgroundColor ?? 'transparent';
+          const nextColor = nextBlock?.styles?.backgroundColor ?? 'transparent';
+
+          if (currentColor === previousColor) {
+            styles.push('previous--has--same--backgroundColor');
+          } else if (currentColor !== previousColor) {
+            styles.push('previous--has--different--backgroundColor');
+          }
+
+          if (currentColor === nextColor) {
+            styles.push('next--has--same--backgroundColor');
+          } else if (currentColor !== nextColor) {
+            styles.push('next--has--different--backgroundColor');
+          }
+
+          return [...classNames, ...styles];
+        },
+      ];
+    });
+
+    it('slate grey + slate + slate grey ', () => {
+      const content = {
+        blocks: {
+          1: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+          2: {
+            '@type': 'slate',
+          },
+          3: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+        },
+        blocks_layout: {
+          items: [1, 2, 3],
+        },
+      };
+      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',
+        'next--is--same--block-type',
+        'previous--has--different--backgroundColor',
+        'next--has--different--backgroundColor',
+      ]);
+    });
+
+    it('slate grey + slate grey + slate grey ', () => {
+      const content = {
+        blocks: {
+          1: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+          2: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+          3: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+        },
+        blocks_layout: {
+          items: [1, 2, 3],
+        },
+      };
+      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',
+        'next--is--same--block-type',
+        'previous--has--same--backgroundColor',
+        'next--has--same--backgroundColor',
+      ]);
+    });
+
+    it('grid + slate grey + slate grey ', () => {
+      const content = {
+        blocks: {
+          1: {
+            '@type': '__grid',
+          },
+          2: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+          3: {
+            '@type': 'slate',
+            styles: {
+              backgroundColor: 'grey',
+            },
+          },
+        },
+        blocks_layout: {
+          items: [1, 2, 3],
+        },
+      };
+      const block = 2;
+      const data = content['blocks'][2];
+      const classNames = [];
+
+      expect(
+        buildStyleClassNamesExtenders({ block, content, data, classNames }),
+      ).toStrictEqual([
+        'next--is--slate',
+        'next--is--same--block-type',
+        'is--first--of--block-type',
+        'previous--has--different--backgroundColor',
+        'next--has--same--backgroundColor',
+      ]);
+    });
+
+    it('grid + grid + slate grey ', () => {
+      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 = [];
+
+      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, classNames }),
+      ).toStrictEqual([
+        'has--align--center',
+        'next--is--slate',
+        'previous--is--same--block-type',
+        'is--last--of--block-type',
+        'previous--has--same--backgroundColor',
+        'next--has--different--backgroundColor',
+      ]);
+    });
+  });
 });

package/src/helpers/index.js

@@ -56,6 +56,8 @@ export {
   applyBlockDefaults,
   applySchemaDefaults,
   buildStyleClassNamesFromData,
+  buildStyleClassNamesExtenders,
+  getPreviousNextBlock,
 } from '@plone/volto/helpers/Blocks/Blocks';
 export BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 export ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';

package/test-setup-config.js

@@ -20,7 +20,10 @@ 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 {
+  styleClassNameConverters,
+  styleClassNameExtenders,
+} from '@plone/volto/config/Style';
 
 import {
   controlPanelsIcons,
@@ -76,6 +79,7 @@ config.set('settings', {
   downloadableObjects: ['File'],
   viewableInBrowserObjects: [],
   styleClassNameConverters,
+  styleClassNameExtenders,
 });
 config.set('blocks', {
   blocksConfig: {

package/news/4160.bug

@@ -1,2 +0,0 @@
-Use Grid instead of Table in Diffview
-[erral]