@plone/volto 17.2.0 → 17.3.0

package/CHANGELOG.md

@@ -8,6 +8,35 @@
 
 <!-- towncrier release notes start -->
 
+## 17.3.0 (2023-10-27)
+
+### Feature
+
+- Updated aria-label for landmarks @ichim-david
+  Added landmark on sidebar @ichim-david
+  Added Pluggable section for skiplinks @ichim-david [#5290](https://github.com/plone/volto/issues/5290)
+
+### Bugfix
+
+- (FIX): put padding so the text is not clipped #5305 @dobri1408 [#5305](https://github.com/plone/volto/issues/5305)
+- Fix compare translations view @sneridagh [#5327](https://github.com/plone/volto/issues/5327)
+- Fix DatetimeWidget on FF, the button default if no type is set is sending the form. @sneridagh
+  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formmethod [#5343](https://github.com/plone/volto/issues/5343)
+
+### Internal
+
+- For blocks that define their `blockSchema`, call `applyBlockDefaults` when creating the initial data for the blocks form.
+  It is now possible to define a block configuration function, `initialValue` that returns the initial value for a block. This is useful in use cases such as container blocks that want to create a complex initial data structure, to avoid the need to call `React.useEffect` on their initial block rendering and thus, avoid complex async "concurent" state mutations.
+  The `addBlock`, `mutateBlock`, `insertBlock` now allow passing a `blocksConfig` configuration object
+
+  @tiberiuichim [#5320](https://github.com/plone/volto/issues/5320)
+- Add a new set of acceptance tests with the multilingual fixture using seamless mode. @sneridagh [#5332](https://github.com/plone/volto/issues/5332)
+
+### Documentation
+
+- Fix reference link to installation. @stevepiercy [#5328](https://github.com/plone/volto/issues/5328)
+- Add upgrade docs for users of `@kitconcept/volto-blocks-grid` addon @sneridagh [#5333](https://github.com/plone/volto/issues/5333)
+
 ## 17.2.0 (2023-10-16)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.2.0",
+  "version": "17.3.0",
   "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": "17.2.0",
+  "version": "17.3.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -31,8 +31,7 @@ export const customSelectStyles = {
   }),
   valueContainer: (styles) => ({
     ...styles,
-    padding: '0px',
-    paddingLeft: 0,
+    padding: '8px',
   }),
   dropdownIndicator: (styles) => ({
     paddingRight: 0,

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

@@ -35,7 +35,11 @@ import {
   getSchema,
   listActions,
 } from '@plone/volto/actions';
-import { getBaseUrl, hasBlocksData } from '@plone/volto/helpers';
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  hasBlocksData,
+} from '@plone/volto/helpers';
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
 
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -260,7 +264,12 @@ class Edit extends Component {
 
   setComparingLanguage(lang, content_id) {
     this.setState({ comparingLanguage: lang });
-    this.props.getContent(content_id, null, 'compare_to', null);
+    this.props.getContent(
+      flattenToAppURL(content_id),
+      null,
+      'compare_to',
+      null,
+    );
   }
 
   form = React.createRef();

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

@@ -240,6 +240,8 @@ export class DatetimeWidgetComponent extends Component {
           )}
           {resettable && (
             <button
+              // FF needs that the type is "button" in order to not POST the form
+              type="button"
               disabled={this.props.isDisabled || !datetime}
               onClick={() => this.onResetDates()}
               className="item ui noborder button"

package/src/components/theme/Footer/Footer.jsx

@@ -41,6 +41,7 @@ const Footer = ({ intl }) => {
       color="grey"
       textAlign="center"
       id="footer"
+      aria-label="Footer"
     >
       <Container>
         <Segment basic inverted color="grey" className="discreet">

package/src/components/theme/Navigation/Navigation.jsx

@@ -50,7 +50,7 @@ const Navigation = (props) => {
   };
 
   return (
-    <nav className="navigation" id="navigation" aria-label="navigation">
+    <nav className="navigation" id="navigation" aria-label="Site">
       <div className="hamburger-wrapper mobile tablet only">
         <button
           className={cx('hamburger hamburger--spin', {

package/src/components/theme/SkipLinks/SkipLinks.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
+import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 
 const messages = defineMessages({
   mainView: {
@@ -23,7 +24,7 @@ const SkipLinks = () => {
     <div
       className="skiplinks-wrapper"
       role="complementary"
-      aria-label="skiplinks"
+      aria-label="Skiplinks"
     >
       <a className="skiplink" href="#view">
         {intl.formatMessage(messages.mainView)}
@@ -34,6 +35,7 @@ const SkipLinks = () => {
       <a className="skiplink" href="#footer">
         {intl.formatMessage(messages.footer)}
       </a>
+      <Pluggable name="main.skiplinks" />
     </div>
   );
 };

package/src/components/theme/SkipLinks/SkipLinks.test.jsx

@@ -3,6 +3,7 @@ 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 { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
 
 import SkipLinks from './SkipLinks';
 
@@ -18,9 +19,11 @@ describe('SkipLinks', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
-          <SkipLinks />
-        </MemoryRouter>
+        <PluggablesProvider>
+          <MemoryRouter>
+            <SkipLinks />
+          </MemoryRouter>
+        </PluggablesProvider>
       </Provider>,
     );
     const json = component.toJSON();

package/src/helpers/Blocks/Blocks.js

@@ -132,14 +132,14 @@ export function deleteBlock(formData, blockId) {
 }
 
 /**
- * Add block
+ * Adds a block to the blocks form
  * @function addBlock
  * @param {Object} formData Form data
  * @param {string} type Block type
  * @param {number} index Destination index
  * @return {Array} New block id, New form data
  */
-export function addBlock(formData, type, index) {
+export function addBlock(formData, type, index, blocksConfig) {
   const { settings } = config;
   const id = uuid();
   const idTrailingBlock = uuid();
@@ -148,81 +148,133 @@ export function addBlock(formData, type, index) {
   const totalItems = formData[blocksLayoutFieldname].items.length;
   const insert = index === -1 ? totalItems : index;
 
+  let value = applyBlockDefaults({
+    data: {
+      '@type': type,
+    },
+    intl: _dummyIntl,
+  });
+
   return [
     id,
-    {
-      ...formData,
-      [blocksLayoutFieldname]: {
-        items: [
-          ...formData[blocksLayoutFieldname].items.slice(0, insert),
-          id,
-          ...(type !== settings.defaultBlockType ? [idTrailingBlock] : []),
-          ...formData[blocksLayoutFieldname].items.slice(insert),
-        ],
-      },
-      [blocksFieldname]: {
-        ...formData[blocksFieldname],
-        [id]: {
-          '@type': type,
+    _applyBlockInitialValue({
+      id,
+      value,
+      blocksConfig,
+      formData: {
+        ...formData,
+        [blocksLayoutFieldname]: {
+          items: [
+            ...formData[blocksLayoutFieldname].items.slice(0, insert),
+            id,
+            ...(type !== settings.defaultBlockType ? [idTrailingBlock] : []),
+            ...formData[blocksLayoutFieldname].items.slice(insert),
+          ],
+        },
+        [blocksFieldname]: {
+          ...formData[blocksFieldname],
+          [id]: value,
+          ...(type !== settings.defaultBlockType && {
+            [idTrailingBlock]: {
+              '@type': settings.defaultBlockType,
+            },
+          }),
         },
-        ...(type !== settings.defaultBlockType && {
-          [idTrailingBlock]: {
-            '@type': settings.defaultBlockType,
-          },
-        }),
+        selected: id,
       },
-      selected: id,
-    },
+    }),
   ];
 }
 
 /**
- * Mutate block
+ * Gets an initial value for a block, based on configuration
+ *
+ * This allows blocks that need complex initial data structures to avoid having
+ * to call `onChangeBlock` at their creation time, as this is prone to racing
+ * issue on block data storage.
+ */
+const _applyBlockInitialValue = ({ id, value, blocksConfig, formData }) => {
+  const blocksFieldname = getBlocksFieldname(formData);
+  const type = value['@type'];
+  blocksConfig = blocksConfig || config.blocks.blocksConfig;
+
+  if (blocksConfig[type]?.initialValue) {
+    value = blocksConfig[type].initialValue({
+      id,
+      value,
+      formData,
+    });
+    formData[blocksFieldname][id] = value;
+  }
+
+  return formData;
+};
+
+/**
+ * Mutate block, changes the block @type
  * @function mutateBlock
  * @param {Object} formData Form data
  * @param {string} id Block uid to mutate
  * @param {number} value Block's new value
  * @return {Object} New form data
  */
-export function mutateBlock(formData, id, value) {
+export function mutateBlock(formData, id, value, blocksConfig) {
   const { settings } = config;
   const blocksFieldname = getBlocksFieldname(formData);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
   const index = formData[blocksLayoutFieldname].items.indexOf(id) + 1;
 
+  value = applyBlockDefaults({
+    data: value,
+    intl: _dummyIntl,
+  });
+  let newFormData;
+
   // Test if block at index is already a placeholder (trailing) block
   const trailId = formData[blocksLayoutFieldname].items[index];
   if (trailId) {
     const block = formData[blocksFieldname][trailId];
-    if (!blockHasValue(block)) {
-      return {
+    newFormData = _applyBlockInitialValue({
+      id,
+      value,
+      blocksConfig,
+      formData: {
         ...formData,
         [blocksFieldname]: {
           ...formData[blocksFieldname],
           [id]: value || null,
         },
-      };
+      },
+    });
+    if (!blockHasValue(block)) {
+      return newFormData;
     }
   }
 
   const idTrailingBlock = uuid();
-  return {
-    ...formData,
-    [blocksFieldname]: {
-      ...formData[blocksFieldname],
-      [id]: value || null,
-      [idTrailingBlock]: {
-        '@type': settings.defaultBlockType,
+  newFormData = _applyBlockInitialValue({
+    id,
+    value,
+    blocksConfig,
+    formData: {
+      ...formData,
+      [blocksFieldname]: {
+        ...formData[blocksFieldname],
+        [id]: value || null,
+        [idTrailingBlock]: {
+          '@type': settings.defaultBlockType,
+        },
+      },
+      [blocksLayoutFieldname]: {
+        items: [
+          ...formData[blocksLayoutFieldname].items.slice(0, index),
+          idTrailingBlock,
+          ...formData[blocksLayoutFieldname].items.slice(index),
+        ],
       },
     },
-    [blocksLayoutFieldname]: {
-      items: [
-        ...formData[blocksLayoutFieldname].items.slice(0, index),
-        idTrailingBlock,
-        ...formData[blocksLayoutFieldname].items.slice(index),
-      ],
-    },
-  };
+  });
+  return newFormData;
 }
 
 /**
@@ -233,15 +285,29 @@ export function mutateBlock(formData, id, value) {
  * @param {number} value New block's value
  * @return {Array} New block id, New form data
  */
-export function insertBlock(formData, id, value, current = {}, offset = 0) {
+export function insertBlock(
+  formData,
+  id,
+  value,
+  current = {},
+  offset = 0,
+  blocksConfig,
+) {
   const blocksFieldname = getBlocksFieldname(formData);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
   const index = formData[blocksLayoutFieldname].items.indexOf(id);
 
+  value = applyBlockDefaults({
+    data: value,
+    intl: _dummyIntl,
+  });
+
   const newBlockId = uuid();
-  return [
-    newBlockId,
-    {
+  const newFormData = _applyBlockInitialValue({
+    id,
+    value,
+    blocksConfig,
+    formData: {
       ...formData,
       [blocksFieldname]: {
         ...formData[blocksFieldname],
@@ -259,7 +325,9 @@ export function insertBlock(formData, id, value, current = {}, offset = 0) {
         ],
       },
     },
-  ];
+  });
+
+  return [newBlockId, newFormData];
 }
 
 /**
@@ -570,3 +638,7 @@ export function findBlocks(blocks, types, result = []) {
 
   return result;
 }
+
+const _dummyIntl = {
+  formatMessage() {},
+};

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

@@ -64,6 +64,24 @@ config.blocks.blocksConfig.text = {
   }),
 };
 
+config.blocks.blocksConfig.dummyText = {
+  id: 'dummyText',
+  title: 'Text',
+  group: 'text',
+  restricted: false,
+  mostUsed: false,
+  blockHasOwnFocusManagement: true,
+  blockHasValue: (data) => {
+    const isEmpty =
+      !data.text ||
+      (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
+    return !isEmpty;
+  },
+  initialValue: ({ value, id, formData }) => {
+    return { ...value, marker: true };
+  },
+};
+
 config.blocks.blocksConfig.enhancedBlock = {
   id: 'enhancedBlock',
   title: 'Text',
@@ -474,6 +492,63 @@ describe('Blocks', () => {
       );
       expect(form.blocks_layout.items).toStrictEqual(['a', newId, 'b']);
     });
+
+    it('initializes data for new block with initialValue', () => {
+      const [newId, form] = addBlock(
+        {
+          blocks: { a: { value: 1 }, b: { value: 2 } },
+          blocks_layout: { items: ['a', 'b'] },
+        },
+        'dummyText',
+        1,
+      );
+      expect(form.blocks[newId]).toStrictEqual({
+        '@type': 'dummyText',
+        marker: true,
+      });
+    });
+
+    it('initializes data for new block based on schema defaults', () => {
+      const [newId, form] = addBlock(
+        {
+          blocks: { a: { value: 1 }, b: { value: 2 } },
+          blocks_layout: { items: ['a', 'b'] },
+        },
+        'text',
+        1,
+      );
+      expect(form.blocks[newId]).toStrictEqual({
+        '@type': 'text',
+        booleanField: false,
+        description: 'Default description',
+        title: 'Default title',
+      });
+    });
+
+    it('initializes data for new block based on schema defaults and initialValue', () => {
+      config.blocks.blocksConfig.text.initialValue = ({ value }) => ({
+        ...value,
+        marker: true,
+      });
+      const [newId, form] = addBlock(
+        {
+          blocks: { a: { value: 1 }, b: { value: 2 } },
+          blocks_layout: { items: ['a', 'b'] },
+        },
+        'text',
+        1,
+      );
+
+      delete config.blocks.blocksConfig.text.initialValue;
+
+      expect(form.blocks[newId]).toStrictEqual({
+        '@type': 'text',
+        booleanField: false,
+        description: 'Default description',
+        title: 'Default title',
+        marker: true,
+      });
+    });
   });
 
   describe('moveBlock', () => {

package/src/helpers/Html/Html.jsx

@@ -177,7 +177,7 @@ class Html extends Component {
         <body className={bodyClass}>
           <div role="navigation" aria-label="Toolbar" id="toolbar" />
           <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
-          <div id="sidebar" />
+          <div role="complementary" aria-label="Sidebar" id="sidebar" />
           <script
             dangerouslySetInnerHTML={{
               __html: `window.__data=${serialize(