Add guard in case of malformed blocks are present (at least id and ti… (

#4809)

news/4802.bugfix

@@ -0,0 +1 @@
+Add guard in case of malformed blocks are present (at least id and title should be present) @sneridagh

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

@@ -110,7 +110,7 @@ const PersistentSlashMenu = ({ editor }) => {
 
   const [slashMenuSelected, setSlashMenuSelected] = React.useState(0);
 
-  const hasAllowedBlocks  = !isEmpty(allowedBlocks);
+  const hasAllowedBlocks = !isEmpty(allowedBlocks);
   const slashCommand = data.plaintext
     ?.toLowerCase()
     .trim()
@@ -119,12 +119,13 @@ const PersistentSlashMenu = ({ editor }) => {
   const availableBlocks = React.useMemo(
     () =>
       filter(blocksConfig, (item) =>
-      hasAllowedBlocks
+        hasAllowedBlocks
           ? allowedBlocks.includes(item.id)
           : typeof item.restricted === 'function'
           ? !item.restricted({ properties, block: item })
           : !item.restricted,
       )
+        .filter((block) => Boolean(block.title && block.id))
         .filter((block) => {
           // typed text is a substring of the title or id
           const title = translateBlockTitle(block, intl).toLowerCase();
@@ -150,8 +151,7 @@ const PersistentSlashMenu = ({ editor }) => {
       intl,
       properties,
       slashCommand,
-      hasAllowedBlocks
-,
+      hasAllowedBlocks,
     ],
   );
 

src/components/manage/BlockChooser/BlockChooser.jsx

@@ -33,17 +33,22 @@ const BlockChooser = ({
   properties = {},
 }) => {
   const intl = useIntl();
-  const useAllowedBlocks = !isEmpty(allowedBlocks);
+  const hasAllowedBlocks = !isEmpty(allowedBlocks);
 
   const filteredBlocksConfig = filter(blocksConfig, (item) => {
+    // Check if the block is well formed (has at least id and title)
+    const blockIsWellFormed = Boolean(item.title && item.id);
+    if (!blockIsWellFormed) {
+      return false;
+    }
     if (showRestricted) {
-      if (useAllowedBlocks) {
+      if (hasAllowedBlocks) {
         return allowedBlocks.includes(item.id);
       } else {
         return true;
       }
     } else {
-      if (useAllowedBlocks) {
+      if (hasAllowedBlocks) {
         return allowedBlocks.includes(item.id);
       } else {
         // Overload restricted as a function, so we can decide the availability of a block

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

@@ -108,6 +108,11 @@ config.blocks.blocksConfig = {
     restricted: false,
     mostUsed: false,
   },
+  malformedBlock: {
+    icon: blockSVG,
+    group: 'common',
+    restricted: false,
+  },
 };
 
 const mockStore = configureStore();