@plone/volto 17.2.0 → 17.4.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+---
+myst:
+  html_meta:
+    "description": "Volto Release Notes for the Plone content management system"
+    "property=og:description": "Volto Release Notes for the Plone content management system"
+    "property=og:title": "Volto Release Notes"
+    "keywords": "Volto, Plone, frontend, Release Notes, change log, changelog, change history"
+---
+
 # Volto Release Notes
 
 <!-- You should *NOT* be adding new change log entries to this file.
@@ -8,6 +17,51 @@
 
 <!-- towncrier release notes start -->
 
+## 17.4.0 (2023-11-04)
+
+### Feature
+
+- add cypress test for search block via url - @ionlizarazu [#5298](https://github.com/plone/volto/issues/5298)
+- Add type definitions for Volto Javascript files @sneridagh [#5355](https://github.com/plone/volto/issues/5355)
+
+### Bugfix
+
+- Add support for TS files in add-on registry shadowing system @sneridagh [#5354](https://github.com/plone/volto/issues/5354)
+
+### Documentation
+
+- Fix Sphinx toctree warnings from included `CHANGELOG.md`. @stevepiercy [#5135](https://github.com/plone/volto/issues/5135)
+- Remove regular expression from `sphinx-copybutton` configuration, now that `linenos` are excluded by default. @stevepiercy [#5346](https://github.com/plone/volto/issues/5346)
+
+## 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/addon-registry.js

@@ -478,12 +478,16 @@ class AddonConfigurationRegistry {
 
       reg.forEach(({ customPath, name, sourcePath }) => {
         map(
-          glob(`${customPath}/**/*.*(svg|png|jpg|jpeg|gif|ico|less|js|jsx)`),
+          glob(
+            `${customPath}/**/*.*(svg|png|jpg|jpeg|gif|ico|less|js|jsx|ts|tsx)`,
+          ),
           (filename) => {
             const targetPath = filename.replace(customPath, sourcePath);
             if (fs.existsSync(targetPath)) {
               aliases[
-                filename.replace(customPath, name).replace(/\.(js|jsx)$/, '')
+                filename
+                  .replace(customPath, name)
+                  .replace(/\.(js|jsx|ts|tsx)$/, '')
               ] = path.resolve(filename);
             } else {
               debug(

package/cypress/support/commands.js

@@ -904,3 +904,12 @@ Cypress.Commands.add('configureListingWith', (contentType) => {
     .contains(contentType)
     .click();
 });
+
+Cypress.Commands.add('queryCounter', (path, steps, number = 1) => {
+  cy.intercept(path, cy.spy().as('counterName'));
+  steps.forEach((element) => {
+    element();
+  });
+
+  cy.get('@counterName').its('callCount').should('equal', number);
+});

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.2.0",
+  "version": "17.4.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -32,12 +32,14 @@
       "package": "@plone/volto-slate"
     }
   },
+  "types": "types/index.d.ts",
   "scripts": {
     "postinstall": "make patches",
     "analyze": "BUNDLE_ANALYZE=true razzle build",
     "start": "razzle start",
     "start:coresandbox": "ADDONS=coresandbox razzle start",
     "build": "razzle build --noninteractive",
+    "build:types": "tsc src/**/*.{js,jsx} --declaration --allowJs --emitDeclarationOnly --outDir types --skipLibCheck",
     "prepare": "husky install",
     "test": "razzle test --maxWorkers=50%",
     "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test",
@@ -184,10 +186,14 @@
   "release-it": {
     "hooks": {
       "before:bump": [
-        "yarn i18n",
-        "git add locales"
+        "yarn i18n"
+      ],
+      "after:bump": [
+        "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft && pipx run towncrier build --yes --version ${version}",
+        "make corepackagebump VERSION=${version}",
+        "make copyreleasenotestodocs",
+        "yarn build:types"
       ],
-      "after:bump": "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft && pipx run towncrier build --yes --version ${version} && make corepackagebump VERSION=${version}",
       "after:release": "rm .changelog.draft"
     },
     "git": {
@@ -316,7 +322,7 @@
     "moment-locales-webpack-plugin": "1.2.0",
     "object-assign": "4.1.1",
     "pofile": "1.0.10",
-    "postcss": "8.4.13",
+    "postcss": "8.4.31",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-less": "6.0.0",
     "postcss-load-config": "3.1.4",

package/packages/volto-slate/package.json

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

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

@@ -1,8 +1,3 @@
-/**
- * Edit title/description block.
- * @module volto-slate/blocks/Title/TitleBlockEdit
- */
-
 import React, {
   useCallback,
   useEffect,
@@ -35,12 +30,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-/**
- * Edit title block component.
- * @class TitleBlockEdit
- * @extends Component
- */
-export const TitleBlockEdit = (props) => {
+export const DescriptionBlockEdit = (props) => {
   const {
     block,
     blockNode,
@@ -187,7 +177,7 @@ export const TitleBlockEdit = (props) => {
   );
 };
 
-TitleBlockEdit.propTypes = {
+DescriptionBlockEdit.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
   selected: PropTypes.bool.isRequired,
   block: PropTypes.string.isRequired,
@@ -204,9 +194,9 @@ TitleBlockEdit.propTypes = {
   blockNode: PropTypes.any,
 };
 
-TitleBlockEdit.defaultProps = {
+DescriptionBlockEdit.defaultProps = {
   detached: false,
   editable: true,
 };
 
-export default TitleBlockEdit;
+export default DescriptionBlockEdit;

package/src/components/manage/Blocks/Description/View.jsx

@@ -1,17 +1,7 @@
-/**
- * View title/description block.
- * @module volto-slate/blocks/Title/TitleBlockView
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
-/**
- * View title block component.
- * @class View
- * @extends Component
- */
-const TitleBlockView = ({ properties, metadata }) => {
+const DescriptionBlockView = ({ properties, metadata }) => {
   return (
     <p className="documentDescription">
       {(metadata || properties)['description'] || ''}
@@ -24,9 +14,9 @@ const TitleBlockView = ({ properties, metadata }) => {
  * @property {Object} propTypes Property types.
  * @static
  */
-TitleBlockView.propTypes = {
+DescriptionBlockView.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
   metadata: PropTypes.objectOf(PropTypes.any),
 };
 
-export default TitleBlockView;
+export default DescriptionBlockView;

package/src/components/manage/Blocks/HTML/View.jsx

@@ -1,16 +1,6 @@
-/**
- * View html block.
- * @module components/manage/Blocks/HTML/View
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
-/**
- * View html block class.
- * @class View
- * @extends Component
- */
 const View = ({ data }) => (
   <div className="block html" dangerouslySetInnerHTML={{ __html: data.html }} />
 );

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

@@ -1,18 +1,8 @@
-/**
- * View image block.
- * @module components/manage/Blocks/Hero/View
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { LinkMore } from '@plone/volto/components';
 
-/**
- * View image block class.
- * @class View
- * @extends Component
- */
 const View = ({ data }) => (
   <div className="block hero">
     <div className="block-inner-wrapper">

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

@@ -1,8 +1,3 @@
-/**
- * View image block.
- * @module components/manage/Blocks/Image/View
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
@@ -14,11 +9,6 @@ import {
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-/**
- * View image block class.
- * @class View
- * @extends Component
- */
 export const View = ({ className, data, detached, properties }) => {
   const href = data?.href?.[0]?.['@id'] || '';
 

package/src/components/manage/Blocks/LeadImage/View.jsx

@@ -1,19 +1,9 @@
-/**
- * View image block.
- * @module components/manage/Blocks/Image/View
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
 
-/**
- * View image block class.
- * @class View
- * @extends Component
- */
 const View = ({ data, properties }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
 

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

@@ -106,4 +106,4 @@ export const SearchBlockViewComponent = compose(
   (Component) => React.memo(Component, blockPropsAreChanged),
 )(SearchBlockView);
 
-export default compose(withQueryString, withSearch())(SearchBlockViewComponent);
+export default withSearch()(withQueryString(SearchBlockViewComponent));

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/Blocks/Search/hocs/withSearch.jsx

@@ -329,11 +329,19 @@ const withSearch = (options) => (WrappedComponent) => {
     );
 
     const deepFacets = JSON.stringify(facets);
+    const deepData = JSON.stringify(data);
     React.useEffect(() => {
       setSearchData(
-        getInitialState(data, facets, urlSearchText, id, sortOn, sortOrder),
+        getInitialState(
+          JSON.parse(deepData),
+          JSON.parse(deepFacets),
+          urlSearchText,
+          id,
+          sortOn,
+          sortOrder,
+        ),
       );
-    }, [deepFacets, facets, data, urlSearchText, id, sortOn, sortOrder]);
+    }, [deepData, deepFacets, urlSearchText, id, sortOn, sortOrder]);
 
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;

package/src/components/manage/Blocks/Table/View.jsx

@@ -1,8 +1,3 @@
-/**
- * View table block.
- * @module components/manage/Blocks/Table/View
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
@@ -10,11 +5,6 @@ import { map } from 'lodash';
 import redraft from 'redraft';
 import config from '@plone/volto/registry';
 
-/**
- * View table block class.
- * @class View
- * @extends Component
- */
 const View = ({ data }) =>
   data &&
   data.table && (

package/src/components/manage/Blocks/Text/View.jsx

@@ -1,18 +1,8 @@
-/**
- * View text block.
- * @module components/manage/Blocks/Text/View
- */
-
 import PropTypes from 'prop-types';
 import redraft from 'redraft';
 import React from 'react';
 import config from '@plone/volto/registry';
 
-/**
- * View text block class.
- * @class View
- * @extends Component
- */
 const View = ({ data }) =>
   data.text ? (
     redraft(

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

@@ -1,8 +1,3 @@
-/**
- * Edit title/description block.
- * @module volto-slate/blocks/Title/TitleBlockEdit
- */
-
 import React, {
   useCallback,
   useEffect,
@@ -34,11 +29,6 @@ function usePrevious(value) {
   return ref.current;
 }
 
-/**
- * Edit title block component.
- * @class TitleBlockEdit
- * @extends Component
- */
 export const TitleBlockEdit = (props) => {
   const {
     block,

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

@@ -1,8 +1,3 @@
-/**
- * Body video block.
- * @module components/manage/Blocks/Video/Body
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
@@ -10,11 +5,6 @@ import { Embed, Message } from 'semantic-ui-react';
 import cx from 'classnames';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 
-/**
- * Body video block class.
- * @class Body
- * @extends Component
- */
 const Body = ({ data, isEditMode }) => {
   let placeholder = data.preview_image
     ? isInternalURL(data.preview_image)

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/LinkMore/LinkMore.jsx

@@ -1,19 +1,9 @@
-/**
- * LinkMore component
- * @module components/manage/LinkMore/LinkMore
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import { ConditionalLink, UniversalLink } from '@plone/volto/components';
 
-/**
- * LinkMore component.
- * @class LinkMore
- * @extends Component
- */
 const LinkMore = ({ data, isEditMode }) => {
   let href = data.linkHref?.[0]?.['@id'] || '';
   let link = null;

package/src/components/manage/Multilingual/TranslationObject.jsx

@@ -1,8 +1,3 @@
-/**
- * Add container.
- * @module components/manage/Add/Add
- */
-
 import React, { useEffect, useState } from 'react';
 import { map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
@@ -26,11 +21,6 @@ const messages = defineMessages({
   },
 });
 
-/**
- * TranslationObject class.
- * @class TranslationObject
- * @extends Component
- */
 const TranslationObject = ({
   translationObject,
   schema,

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();