Merge branch 'main' into a11y-notes

docs/source/contributing/developing-core.md

@@ -71,9 +71,9 @@ Volto has the following folder structure.
 ```
 
 
-## Development pre-requisites
+## Development prerequisites
 
-To set up a Volto core development environment, your system must satisfy the following pre-requisites.
+To set up a Volto core development environment, your system must satisfy the following prerequisites.
 
 ```{include} ./install-operating-system.md
 ```

docs/source/upgrade-guide/index.md

@@ -395,7 +395,7 @@ If you shadowed the module {file}`packages/volto/src/helpers/FormValidation/Form
 This prop must be assigned with the new prop passed down from the blocks engine `blocksErrors`.
 If not passed down, the block can't display any field validation error.
 
-```tsx
+```jsx
 // More component code above here
 
   const {

packages/client/news/6349.bugfix

@@ -0,0 +1 @@
+Fixed client copy mutation, cleanup up move mutation for consistency @pnicolli

packages/client/src/restapi/copymove/copy.test.tsx

@@ -43,7 +43,7 @@ describe('[POST] Copy', () => {
     });
 
     act(() => {
-      result.current.mutate({ data: copyData });
+      result.current.mutate({ path: '/', data: copyData });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
@@ -80,7 +80,7 @@ describe('[POST] Copy', () => {
     });
 
     act(() => {
-      result.current.mutate({ data: copyMultipleData });
+      result.current.mutate({ path: '/', data: copyMultipleData });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));

packages/client/src/restapi/copymove/copy.ts

@@ -1,37 +1,35 @@
 import { z } from 'zod';
 import { ApiRequestParams, apiRequest } from '../../API';
-import {
-  PloneClientConfig,
-  PloneClientConfigSchema,
-} from '../../validation/config';
+import { PloneClientConfig } from '../../validation/config';
 import { copyMoveDataSchema as copyDataSchema } from '../../validation/copymove';
 import { CopyMoveResponse as CopyResponse } from '@plone/types';
 
-export const copyArgsSchema = z.object({
-  data: copyDataSchema,
-  config: PloneClientConfigSchema,
-});
-
-export type CopyArgs = z.infer<typeof copyArgsSchema>;
+export type CopyArgs = z.infer<typeof copyDataSchema> & {
+  config: PloneClientConfig;
+};
 
 export const copy = async ({
+  path,
   data,
   config,
 }: CopyArgs): Promise<CopyResponse> => {
-  const validatedArgs = copyArgsSchema.parse({
+  const validatedArgs = copyDataSchema.parse({
+    path,
     data,
-    config,
   });
 
   const options: ApiRequestParams = {
+    config,
     data: validatedArgs.data,
-    config: validatedArgs.config,
   };
 
-  return apiRequest('post', '/@copy', options);
+  const copyPath = `${validatedArgs.path}/@copy`;
+
+  return apiRequest('post', copyPath, options);
 };
 
 export const copyMutation = ({ config }: { config: PloneClientConfig }) => ({
   mutationKey: ['post', 'copy'],
-  mutationFn: ({ data }: Omit<CopyArgs, 'config'>) => copy({ data, config }),
+  mutationFn: ({ path, data }: Omit<CopyArgs, 'config'>) =>
+    copy({ path, data, config }),
 });

packages/client/src/restapi/copymove/move.ts

@@ -1,37 +1,29 @@
 import { z } from 'zod';
 import { ApiRequestParams, apiRequest } from '../../API';
-import {
-  PloneClientConfig,
-  PloneClientConfigSchema,
-} from '../../validation/config';
+import { PloneClientConfig } from '../../validation/config';
 import { copyMoveDataSchema as moveDataSchema } from '../../validation/copymove';
 import { CopyMoveResponse as MoveResponse } from '@plone/types';
 
-export const MoveArgsSchema = z.object({
-  path: z.string(),
-  data: moveDataSchema,
-  config: PloneClientConfigSchema,
-});
-
-export type MoveArgs = z.infer<typeof MoveArgsSchema>;
+export type MoveArgs = z.infer<typeof moveDataSchema> & {
+  config: PloneClientConfig;
+};
 
 export const move = async ({
   path,
   data,
   config,
 }: MoveArgs): Promise<MoveResponse> => {
-  const validatedArgs = MoveArgsSchema.parse({
+  const validatedArgs = moveDataSchema.parse({
     path,
     data,
-    config,
   });
 
   const options: ApiRequestParams = {
+    config,
     data: validatedArgs.data,
-    config: validatedArgs.config,
   };
 
-  const movePath = `/${validatedArgs.path}/@move`;
+  const movePath = `${validatedArgs.path}/@move`;
 
   return apiRequest('post', movePath, options);
 };

packages/client/src/validation/copymove.ts

@@ -1,5 +1,8 @@
 import { z } from 'zod';
 
 export const copyMoveDataSchema = z.object({
-  source: z.union([z.string(), z.array(z.string())]),
+  path: z.string(),
+  data: z.object({
+    source: z.union([z.string(), z.array(z.string())]),
+  }),
 });

packages/scripts/news/6354.documentation

@@ -0,0 +1 @@
+Added the configuration for VSCode not to reformat Markdown and MyST files. @aadityaforwork

packages/scripts/vscodesettings.js

@@ -13,9 +13,17 @@ if (fs.existsSync('.vscode')) {
 
 if (!vscodeSettingsJSON['eslint.workingDirectories']) {
   vscodeSettingsJSON['eslint.workingDirectories'] = [{ mode: 'auto' }];
+}
 
-  fs.writeFileSync(
-    '.vscode/settings.json',
-    `${stringify(vscodeSettingsJSON, null, 2)}`,
-  );
+if (!vscodeSettingsJSON['[markdown]']) {
+  vscodeSettingsJSON['[markdown]'] = {
+    'editor.formatOnSave': false,
+  };
+} else {
+  vscodeSettingsJSON['[markdown]']['editor.formatOnSave'] = false;
 }
+
+fs.writeFileSync(
+  '.vscode/settings.json',
+  `${stringify(vscodeSettingsJSON, null, 2)}`,
+);

packages/volto-slate/news/6293.bugfix

@@ -0,0 +1 @@
+Fetch `user` before pass it to the `restricted` function of the block settings. @wesleybl

packages/volto-slate/src/blocks/Text/SlashMenu.jsx

@@ -4,7 +4,7 @@ import { filter, isEmpty } from 'lodash';
 import { Menu } from 'semantic-ui-react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { Icon } from '@plone/volto/components';
-import { useSelector } from 'react-redux';
+import { useUser } from '@plone/volto/hooks';
 
 const emptySlateBlock = () => ({
   value: [
@@ -111,7 +111,7 @@ const PersistentSlashMenu = ({ editor }) => {
   } = props;
   const disableNewBlocks = data?.disableNewBlocks || detached;
 
-  const user = useSelector((state) => state.users?.user);
+  const user = useUser();
 
   const [slashMenuSelected, setSlashMenuSelected] = React.useState(0);
 

packages/volto/news/6259.bugfix

@@ -0,0 +1 @@
+- Fixed build style classnames in edit mode. Also use buildStyleClassNamesExtenders. @giuliaghisini

packages/volto/news/6293.bugfix

@@ -0,0 +1 @@
+Fetch `user` before pass it to the `restricted` function of the block settings. @wesleybl

packages/volto/news/6313.bugfix

@@ -0,0 +1 @@
+Fixed toolbar buttons not having a focus outline. @JeffersonBledsoe

packages/volto/news/6362.documentation

@@ -0,0 +1 @@
+Fixed spelling of prerequisites. @stevepiercy

packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useUser } from '@plone/volto/hooks';
 import PropTypes from 'prop-types';
 import { filter, map, groupBy, isEmpty } from 'lodash';
 import { Accordion, Button } from 'semantic-ui-react';
@@ -36,7 +36,7 @@ const BlockChooser = ({
   contentType,
 }) => {
   const intl = useIntl();
-  const user = useSelector((state) => state.users?.user);
+  const user = useUser();
   const hasAllowedBlocks = !isEmpty(allowedBlocks);
 
   const filteredBlocksConfig = filter(blocksConfig, (item) => {

packages/volto/src/components/manage/BlockChooser/BlockChooser.test.jsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import BlockChooser from './BlockChooser';
 import config from '@plone/volto/registry';
+import jwt from 'jsonwebtoken';
 
 const blockSVG = {};
 
@@ -121,6 +122,9 @@ const store = mockStore({
     locale: 'en',
     messages: {},
   },
+  userSession: {
+    token: jwt.sign({ fullname: 'John Doe' }, 'secret'),
+  },
 });
 
 describe('BlocksChooser', () => {

packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx

@@ -6,6 +6,7 @@ import {
   blockHasValue,
   buildStyleClassNamesFromData,
   buildStyleObjectFromData,
+  buildStyleClassNamesExtenders,
 } from '@plone/volto/helpers';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { Button } from 'semantic-ui-react';
@@ -61,7 +62,12 @@ const EditBlockWrapper = (props) => {
     ? data.required
     : includes(config.blocks.requiredBlocks, type);
 
-  const classNames = buildStyleClassNamesFromData(data.styles);
+  let classNames = buildStyleClassNamesFromData(data.styles);
+  classNames = buildStyleClassNamesExtenders({
+    block,
+    data,
+    classNames,
+  });
   const style = buildStyleObjectFromData(data.styles);
 
   // We need to merge the StyleWrapper styles with the draggable props from b-D&D

packages/volto/src/hooks/index.js

@@ -1,2 +1,3 @@
 export { default as useClipboard } from '@plone/volto/hooks/clipboard/useClipboard';
 export { useClient } from '@plone/volto/hooks/client/useClient';
+export { default as useUser } from '@plone/volto/hooks/user/useUser';

packages/volto/src/hooks/user/useUser.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import jwtDecode from 'jwt-decode';
+import { getUser } from '@plone/volto/actions';
+
+const useUser = () => {
+  const users = useSelector((state) => state.users);
+  const user = users?.user;
+  const userId = useSelector((state) =>
+    state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+  );
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!user?.id && users?.get.loading === false) {
+      dispatch(getUser(userId));
+    }
+  }, [dispatch, userId, user, users?.get.loading]);
+
+  return user;
+};
+
+export default useUser;

packages/volto/theme/themes/pastanaga/extras/toolbar.less

@@ -283,16 +283,28 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
 
   .toolbar-content,
   .toolbar {
-    button {
+    button,
+    a {
       // Default reset for button
       padding: 0;
       border: 0;
       background: transparent;
+      box-shadow: unset !important; // Some buttons have double outlines due to default styles. Safely disable those styles here.
       cursor: pointer;
       text-align: initial;
 
+      svg {
+        display: block; // SVGs are inline by default, causing the spacing to be odd
+        margin: 0; // Some SVGs have margin set by default styles.
+      }
+
       &:focus-visible {
-        outline: 1px auto;
+        outline: 2px solid black;
+        outline-offset: 2px;
+
+        &:has(.circled) {
+          border-radius: 50%;
+        }
       }
     }
   }

styles/Vocab/Plone/reject.txt

@@ -1,2 +1,3 @@
 [^.]js
 NodeJS
+[Pp]re-requisite