Pass the user, navRoot and contentType objects to the restricted function of the block settings

docs/source/recipes/how-to-restrict-blocks.md

@@ -22,12 +22,25 @@ The function has this signature:
     block: BlockConfigBase;
     navRoot: Content;
     contentType: string;
+    user: Object
   }) => boolean;
 }
 ```
 
-Where `properties` is the current object data and `block` is the block being evaluated in `BlockChooser`.
-`navRoot` is the nearest navigation root object and `contentType` is the current content type.
+`properties`
+:   The current object data.
+
+`block`
+:   The block being evaluated in `BlockChooser`.
+
+`navRoot`
+:   The nearest navigation root object.
+
+`contentType`
+:   The current content type.
+
+`user`
+:   An object that represents the currently authenticated user.
 
 In the following configuration example, you can restrict a block so that it cannot be added unless the content type is `News Item` or the content item is in a specific path in the content tree (`/folder`):
 

news/6264.feature

@@ -0,0 +1 @@
+Pass the `user`, `navRoot`, and `contentType` objects to the `restricted` function of the block settings. @wesleybl

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

@@ -4,6 +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 { useUser } from '@plone/volto/hooks';
 
 const emptySlateBlock = () => ({
   value: [
@@ -105,9 +106,13 @@ const PersistentSlashMenu = ({ editor }) => {
     selected,
     allowedBlocks,
     detached,
+    navRoot,
+    contentType,
   } = props;
   const disableNewBlocks = data?.disableNewBlocks || detached;
 
+  const user = useUser();
+
   const [slashMenuSelected, setSlashMenuSelected] = React.useState(0);
 
   const hasAllowedBlocks = !isEmpty(allowedBlocks);
@@ -122,7 +127,13 @@ const PersistentSlashMenu = ({ editor }) => {
         hasAllowedBlocks
           ? allowedBlocks.includes(item.id)
           : typeof item.restricted === 'function'
-          ? !item.restricted({ properties, block: item })
+          ? !item.restricted({
+              properties,
+              block: item,
+              navRoot,
+              contentType,
+              user,
+            })
           : !item.restricted,
       )
         .filter((block) => Boolean(block.title && block.id))
@@ -152,6 +163,9 @@ const PersistentSlashMenu = ({ editor }) => {
       properties,
       slashCommand,
       hasAllowedBlocks,
+      navRoot,
+      contentType,
+      user,
     ],
   );
 

src/components/manage/BlockChooser/BlockChooser.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+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';
@@ -35,6 +36,7 @@ const BlockChooser = ({
   contentType,
 }) => {
   const intl = useIntl();
+  const user = useUser();
   const hasAllowedBlocks = !isEmpty(allowedBlocks);
 
   const filteredBlocksConfig = filter(blocksConfig, (item) => {
@@ -57,7 +59,13 @@ const BlockChooser = ({
         // depending on this function, given properties (current present blocks) and the
         // block being evaluated
         return typeof item.restricted === 'function'
-          ? !item.restricted({ properties, block: item, navRoot, contentType })
+          ? !item.restricted({
+              properties,
+              block: item,
+              navRoot,
+              contentType,
+              user,
+            })
           : !item.restricted;
       }
     }

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

@@ -5,6 +5,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 = {};
 
@@ -122,6 +123,9 @@ const store = mockStore({
     locale: 'en',
     messages: {},
   },
+  userSession: {
+    token: jwt.sign({ fullname: 'John Doe' }, 'secret'),
+  },
 });
 
 describe('BlocksChooser', () => {

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';

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;