@plone/volto 18.0.0-alpha.18 → 18.0.0-alpha.19

package/src/components/manage/Controlpanels/Groups/RenderGroups.jsx

@@ -9,6 +9,7 @@ import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { Icon } from '@plone/volto/components';
+import { canAssignRole } from '@plone/volto/helpers';
 
 /**
  * UsersControlpanelGroups class.
@@ -38,6 +39,7 @@ class RenderGroups extends Component {
     ).isRequired,
     inheritedRole: PropTypes.array,
     onDelete: PropTypes.func.isRequired,
+    isUserManager: PropTypes.bool.isRequired,
   };
 
   /**
@@ -69,6 +71,12 @@ class RenderGroups extends Component {
   isAuthGroup = (roleId) => {
     return this.props.inheritedRole.includes(roleId);
   };
+
+  canDeleteGroup() {
+    if (this.props.isUserManager) return true;
+    return !this.props.group.roles.includes('Manager');
+  }
+
   /**
    * Render method.
    * @method render
@@ -98,22 +106,25 @@ class RenderGroups extends Component {
                 }
                 onChange={this.onChange}
                 value={`${this.props.group.id}&role=${role.id}`}
+                disabled={!canAssignRole(this.props.isUserManager, role)}
               />
             )}
           </Table.Cell>
         ))}
         <Table.Cell textAlign="right">
-          <Dropdown icon="ellipsis horizontal">
-            <Dropdown.Menu className="left">
-              <Dropdown.Item
-                onClick={this.props.onDelete}
-                value={this.props.group['@id']}
-              >
-                <Icon name={trashSVG} size="15px" />
-                <FormattedMessage id="Delete" defaultMessage="Delete" />
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
+          {this.canDeleteGroup() && (
+            <Dropdown icon="ellipsis horizontal">
+              <Dropdown.Menu className="left">
+                <Dropdown.Item
+                  onClick={this.props.onDelete}
+                  value={this.props.group['@id']}
+                >
+                  <Icon name={trashSVG} size="15px" />
+                  <FormattedMessage id="Delete" defaultMessage="Delete" />
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
         </Table.Cell>
       </Table.Row>
     );

package/src/components/manage/Controlpanels/Groups/RenderGroups.test.jsx

@@ -49,6 +49,27 @@ describe('UsersControlpanelGroups', () => {
           group={testGroups}
           roles={testRoles}
           onDelete={() => {}}
+          isUserManager={true}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a UsersControlpanelGroups component with no Manager user', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <RenderGroups
+          group={testGroups}
+          roles={testRoles}
+          onDelete={() => {}}
+          isUserManager={false}
         />
       </Provider>,
     );

package/src/components/manage/Controlpanels/Users/RenderUsers.jsx

@@ -13,7 +13,7 @@ import { updateUser } from '@plone/volto/actions';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { messages } from '@plone/volto/helpers';
+import { messages, canAssignRole } from '@plone/volto/helpers';
 import { toast } from 'react-toastify';
 
 /**
@@ -39,6 +39,7 @@ class RenderUsers extends Component {
       }),
     ).isRequired,
     onDelete: PropTypes.func.isRequired,
+    isUserManager: PropTypes.bool.isRequired,
   };
 
   /**
@@ -110,6 +111,11 @@ class RenderUsers extends Component {
     this.setState({ user: { ...formData } });
   }
 
+  canDeleteUser() {
+    if (this.props.isUserManager) return true;
+    return !this.props.user.roles.includes('Manager');
+  }
+
   /**
    * Render method.
    * @method render
@@ -139,35 +145,38 @@ class RenderUsers extends Component {
                 checked={this.props.user.roles.includes(role.id)}
                 onChange={this.onChange}
                 value={`${this.props.user.id}&role=${role.id}`}
+                disabled={!canAssignRole(this.props.isUserManager, role)}
               />
             )}
           </Table.Cell>
         ))}
         <Table.Cell textAlign="right">
-          <Dropdown icon="ellipsis horizontal">
-            <Dropdown.Menu className="left">
-              {this.props.userschema && (
+          {this.canDeleteUser() && (
+            <Dropdown icon="ellipsis horizontal">
+              <Dropdown.Menu className="left">
+                {this.props.userschema && (
+                  <Dropdown.Item
+                    id="edit-user-button"
+                    onClick={() => {
+                      this.onClickEdit({ formData: this.props.user });
+                    }}
+                    value={this.props.user['@id']}
+                  >
+                    <Icon name={editSVG} size="15px" />
+                    <FormattedMessage id="Edit" defaultMessage="Edit" />
+                  </Dropdown.Item>
+                )}
                 <Dropdown.Item
-                  id="edit-user-button"
-                  onClick={() => {
-                    this.onClickEdit({ formData: this.props.user });
-                  }}
+                  id="delete-user-button"
+                  onClick={this.props.onDelete}
                   value={this.props.user['@id']}
                 >
-                  <Icon name={editSVG} size="15px" />
-                  <FormattedMessage id="Edit" defaultMessage="Edit" />
+                  <Icon name={trashSVG} size="15px" />
+                  <FormattedMessage id="Delete" defaultMessage="Delete" />
                 </Dropdown.Item>
-              )}
-              <Dropdown.Item
-                id="delete-user-button"
-                onClick={this.props.onDelete}
-                value={this.props.user['@id']}
-              >
-                <Icon name={trashSVG} size="15px" />
-                <FormattedMessage id="Delete" defaultMessage="Delete" />
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
         </Table.Cell>
         {Object.keys(this.state.user).length > 0 &&
           this.props.userschema.loaded && (

package/src/components/manage/Controlpanels/Users/RenderUsers.test.jsx

@@ -47,7 +47,33 @@ describe('UsersControlpanelUser', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <RenderUsers user={testUser} roles={testRoles} onDelete={() => {}} />
+        <RenderUsers
+          user={testUser}
+          roles={testRoles}
+          onDelete={() => {}}
+          isUserManager={true}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a UsersControlpanelUser component with options disabled if not allowed', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <RenderUsers
+          user={testUser}
+          roles={testRoles}
+          onDelete={() => {}}
+          isUserManager={false}
+        />
       </Provider>,
     );
     const json = component.toJSON();

package/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { cloneDeep, uniqBy } from 'lodash';
 import { useIntl } from 'react-intl';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 import { Button, Checkbox } from 'semantic-ui-react';
-import { messages } from '@plone/volto/helpers';
-import { listGroups } from '@plone/volto/actions';
+import { messages, isManager, canAssignGroup } from '@plone/volto/helpers';
+import { listGroups, getUser } from '@plone/volto/actions';
 import { Icon, Toast } from '@plone/volto/components';
 import { updateGroup, listUsers } from '@plone/volto/actions';
 
@@ -25,6 +26,16 @@ const ListingTemplate = ({
   const pageSize = 25;
   const [userLimit, setUserLimit] = useState(pageSize);
 
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const user = useSelector((state) => state.users.user);
+  const userId = token ? jwtDecode(token).sub : '';
+
+  useEffect(() => {
+    dispatch(getUser(userId));
+  }, [dispatch, userId]);
+
+  const isUserManager = isManager(user);
+
   // y axis
   let items = useSelector((state) => state.users.users);
   let show_users =
@@ -51,12 +62,17 @@ const ListingTemplate = ({
 
   // x axis
   let groups = useSelector((state) => state.groups.groups);
+
+  const getRoles = (group_id) => {
+    return groups.find((group) => group.id === group_id)?.roles || [];
+  };
+
   let show_matrix_options =
     !many_groups ||
     (many_groups && query_group.length > 1) ||
     groups_filter.length > 0 ||
     add_joined_groups;
-  let matrix_options; // list of Objects (value, label)
+  let matrix_options; // list of Objects (value, label, roles)
   if (show_matrix_options) {
     matrix_options =
       !many_groups || (many_groups && query_group.length > 1)
@@ -90,6 +106,10 @@ const ListingTemplate = ({
       }
       return 0;
     });
+    matrix_options = matrix_options.map((matrix_option) => ({
+      ...matrix_option,
+      roles: getRoles(matrix_option.value),
+    }));
   } else {
     matrix_options = [];
   }
@@ -126,7 +146,7 @@ const ListingTemplate = ({
         },
       }),
     )
-      .then((resp) => {
+      .then(() => {
         singleClick &&
           dispatch(
             listUsers({
@@ -209,13 +229,14 @@ const ListingTemplate = ({
                     <Checkbox
                       className="toggle-target"
                       defaultChecked={false}
-                      onChange={(event, { checked }) =>
+                      onChange={(_event, { checked }) =>
                         onSelectAllHandler(
                           matrix_option.value,
                           items.map((el) => el.id),
                           checked,
                         )
                       }
+                      disabled={!canAssignGroup(isUserManager, matrix_option)}
                     />
                   </div>
                 ))}
@@ -251,13 +272,14 @@ const ListingTemplate = ({
                         checked={item.groups?.items
                           ?.map((el) => el.id)
                           .includes(matrix_option.value)}
-                        onChange={(event, { checked }) => {
+                        onChange={(_event, { checked }) => {
                           onSelectOptionHandler(
                             { y: matrix_option.value, x: item.id },
                             checked,
                             true,
                           );
                         }}
+                        disabled={!canAssignGroup(isUserManager, matrix_option)}
                       />
                     ))}
                   </div>

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -12,7 +12,9 @@ import {
   updateUser,
   updateGroup,
   getUserSchema,
+  getUser,
 } from '@plone/volto/actions';
+import jwtDecode from 'jwt-decode';
 import {
   Icon,
   ModalForm,
@@ -23,7 +25,12 @@ import {
   Error,
 } from '@plone/volto/components';
 import { Link } from 'react-router-dom';
-import { Helmet, messages } from '@plone/volto/helpers';
+import {
+  Helmet,
+  messages,
+  isManager,
+  canAssignGroup,
+} from '@plone/volto/helpers';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import addUserSvg from '@plone/volto/icons/add-user.svg';
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -77,6 +84,19 @@ class UsersControlpanel extends Component {
         roles: PropTypes.arrayOf(PropTypes.string),
       }),
     ).isRequired,
+    user: PropTypes.shape({
+      '@id': PropTypes.string,
+      id: PropTypes.string,
+      description: PropTypes.string,
+      email: PropTypes.string,
+      fullname: PropTypes.string,
+      groups: PropTypes.object,
+      location: PropTypes.string,
+      portrait: PropTypes.string,
+      home_page: PropTypes.string,
+      roles: PropTypes.arrayOf(PropTypes.string),
+      username: PropTypes.string,
+    }).isRequired,
   };
 
   /**
@@ -124,6 +144,7 @@ class UsersControlpanel extends Component {
       });
     }
     await this.props.getUserSchema();
+    await this.props.getUser(this.props.userId);
   };
 
   // Because username field needs to be disabled if email login is enabled!
@@ -406,6 +427,20 @@ class UsersControlpanel extends Component {
     }
   }
 
+  /**
+   * Filters the roles a user can assign when adding a user.
+   * @method canAssignAdd
+   * @returns {arry}
+   */
+  canAssignAdd(isManager) {
+    if (isManager) return this.props.roles;
+    return this.props.user?.roles
+      ? this.props.roles.filter((role) =>
+          this.props.user.roles.includes(role.id),
+        )
+      : [];
+  }
+
   /**
    * Render method.
    * @method render
@@ -426,7 +461,9 @@ class UsersControlpanel extends Component {
     // of the userschema is changed and it is used like that through
     // the lifecycle of the application
     let adduserschema = {};
+    let isUserManager = false;
     if (this.props?.userschema?.loaded) {
+      isUserManager = isManager(this.props.user);
       adduserschema = JSON.parse(
         JSON.stringify(this.props?.userschema?.userschema),
       );
@@ -454,13 +491,18 @@ class UsersControlpanel extends Component {
       adduserschema.properties['roles'] = {
         title: this.props.intl.formatMessage(messages.addUserFormRolesTitle),
         type: 'array',
-        choices: this.props.roles.map((role) => [role.id, role.title]),
+        choices: this.canAssignAdd(isUserManager).map((role) => [
+          role.id,
+          role.title,
+        ]),
         noValueOption: false,
       };
       adduserschema.properties['groups'] = {
         title: this.props.intl.formatMessage(messages.addUserGroupNameTitle),
         type: 'array',
-        choices: this.props.groups.map((group) => [group.id, group.id]),
+        choices: this.props.groups
+          .filter((group) => canAssignGroup(isUserManager, group))
+          .map((group) => [group.id, group.id]),
         noValueOption: false,
       };
       if (
@@ -598,6 +640,7 @@ class UsersControlpanel extends Component {
                         inheritedRole={this.props.inheritedRole}
                         userschema={this.props.userschema}
                         listUsers={this.props.listUsers}
+                        isUserManager={isUserManager}
                       />
                     ))}
                 </Table.Body>
@@ -686,6 +729,10 @@ export default compose(
     (state, props) => ({
       roles: state.roles.roles,
       users: state.users.users,
+      user: state.users.user,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
       groups: state.groups.groups,
       many_users: state.controlpanels?.controlpanel?.data?.many_users,
       many_groups: state.controlpanels?.controlpanel?.data?.many_groups,
@@ -710,6 +757,7 @@ export default compose(
           updateUser,
           updateGroup,
           getUserSchema,
+          getUser,
         },
         dispatch,
       ),

package/src/components/manage/Controlpanels/Users/UsersControlpanel.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import jwt from 'jsonwebtoken';
 
 import UsersControlpanel from './UsersControlpanel';
 
@@ -11,10 +12,17 @@ jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 describe('UsersControlpanel', () => {
   it('renders a user control component', () => {
     const store = mockStore({
+      userSession: {
+        token: jwt.sign({ sub: 'john' }, 'secret'),
+      },
       roles: { roles: [] },
       users: {
         users: [],
         create: { loading: false },
+        user: {
+          roles: ['Manager'],
+          '@id': 'admin',
+        },
       },
       groups: {
         groups: [],

package/src/config/Blocks.jsx

@@ -1,22 +1,19 @@
 import { defineMessages } from 'react-intl';
+import { cloneDeep } from 'lodash';
 
 import ViewTitleBlock from '@plone/volto/components/manage/Blocks/Title/View';
 import ViewDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/View';
 import ViewToCBlock from '@plone/volto/components/manage/Blocks/ToC/View';
-import ViewTextBlock from '@plone/volto/components/manage/Blocks/Text/View';
 import ViewImageBlock from '@plone/volto/components/manage/Blocks/Image/View';
 import ViewLeadImageBlock from '@plone/volto/components/manage/Blocks/LeadImage/View';
 import ViewListingBlock from '@plone/volto/components/manage/Blocks/Listing/View';
 import ViewVideoBlock from '@plone/volto/components/manage/Blocks/Video/View';
-import ViewHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroImageLeft/View';
 import ViewMapBlock from '@plone/volto/components/manage/Blocks/Maps/View';
 import ViewHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/View';
-import ViewTableBlock from '@plone/volto/components/manage/Blocks/Table/View';
 
 import EditTitleBlock from '@plone/volto/components/manage/Blocks/Title/Edit';
 import EditDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/Edit';
 import EditToCBlock from '@plone/volto/components/manage/Blocks/ToC/Edit';
-import EditTextBlock from '@plone/volto/components/manage/Blocks/Text/Edit';
 import EditImageBlock from '@plone/volto/components/manage/Blocks/Image/Edit';
 import EditLeadImageBlock from '@plone/volto/components/manage/Blocks/LeadImage/Edit';
 import EditListingBlock from '@plone/volto/components/manage/Blocks/Listing/Edit';
@@ -25,20 +22,15 @@ import GalleryNoResultsComponent from '@plone/volto/components/manage/Blocks/Lis
 import DefaultListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/DefaultTemplate';
 import SummaryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/SummaryTemplate';
 import EditVideoBlock from '@plone/volto/components/manage/Blocks/Video/Edit';
-import EditHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroImageLeft/Edit';
 import EditMapBlock from '@plone/volto/components/manage/Blocks/Maps/Edit';
 import EditHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/Edit';
-import EditTableBlock from '@plone/volto/components/manage/Blocks/Table/Edit';
 
 import descriptionSVG from '@plone/volto/icons/description.svg';
 import titleSVG from '@plone/volto/icons/text.svg';
-import textSVG from '@plone/volto/icons/subtext.svg';
 import cameraSVG from '@plone/volto/icons/camera.svg';
 import videoSVG from '@plone/volto/icons/videocamera.svg';
 import globeSVG from '@plone/volto/icons/globe.svg';
 import codeSVG from '@plone/volto/icons/code.svg';
-import heroSVG from '@plone/volto/icons/hero.svg';
-import tableSVG from '@plone/volto/icons/table.svg';
 import listingBlockSVG from '@plone/volto/icons/content-listing.svg';
 import tocSVG from '@plone/volto/icons/list-bullet.svg';
 import searchSVG from '@plone/volto/icons/zoom.svg';
@@ -47,7 +39,6 @@ import imagesSVG from '@plone/volto/icons/images.svg';
 
 import ImageGalleryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/ImageGallery';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
-import TextSettingsSchema from '@plone/volto/components/manage/Blocks/Text/Schema';
 import ImageSettingsSchema from '@plone/volto/components/manage/Blocks/Image/LayoutSchema';
 import ToCSettingsSchema from '@plone/volto/components/manage/Blocks/ToC/Schema';
 
@@ -79,7 +70,6 @@ import { getImageBlockSizes } from '@plone/volto/components/manage/Blocks/Image/
 import { getLeadImageBlockSizes } from '@plone/volto/components/manage/Blocks/LeadImage/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
-import HeroImageLeftBlockSchema from '@plone/volto/components/manage/Blocks/HeroImageLeft/schema';
 import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
 import SearchBlockSchema from '@plone/volto/components/manage/Blocks/Search/schema';
 
@@ -191,6 +181,63 @@ defineMessages({
     id: 'toggleFacet',
     defaultMessage: 'Toggle',
   },
+  // BBB Table messages
+  Table: {
+    id: 'Table',
+    defaultMessage: 'Table',
+  },
+  cell: {
+    id: 'Cell',
+    defaultMessage: 'Cell',
+  },
+  insertRowBefore: {
+    id: 'Insert row before',
+    defaultMessage: 'Insert row before',
+  },
+  insertRowAfter: {
+    id: 'Insert row after',
+    defaultMessage: 'Insert row after',
+  },
+  deleteRow: {
+    id: 'Delete row',
+    defaultMessage: 'Delete row',
+  },
+  insertColBefore: {
+    id: 'Insert col before',
+    defaultMessage: 'Insert col before',
+  },
+  insertColAfter: {
+    id: 'Insert col after',
+    defaultMessage: 'Insert col after',
+  },
+  deleteCol: {
+    id: 'Delete col',
+    defaultMessage: 'Delete col',
+  },
+  fixed: {
+    id: 'Fixed width table cells',
+    defaultMessage: 'Fixed width columns',
+  },
+  compact: {
+    id: 'Make the table compact',
+    defaultMessage: 'Reduce cell padding',
+  },
+  basic: {
+    id: 'Reduce complexity',
+    defaultMessage: 'Minimalistic table design',
+  },
+  celled: {
+    id: 'Divide each row into separate cells',
+    defaultMessage: 'Add border to inner columns',
+  },
+  striped: {
+    id: 'Stripe alternate rows with color',
+    defaultMessage: 'Alternate row background color',
+  },
+  headerCell: {
+    id: 'Header cell',
+    defaultMessage: 'Header cell',
+  },
 });
 
 const groupBlocksOrder = [
@@ -230,25 +277,6 @@ const blocksConfig = {
     blockHasOwnFocusManagement: true,
     sidebarTab: 0,
   },
-  text: {
-    id: 'text',
-    title: 'Text',
-    icon: textSVG,
-    group: 'text',
-    view: ViewTextBlock,
-    edit: EditTextBlock,
-    schema: TextSettingsSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 0,
-    blockHasValue: (data) => {
-      const isEmpty =
-        !data.text ||
-        (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
-      return !isEmpty;
-    },
-  },
   image: {
     id: 'image',
     title: 'Image',
@@ -335,21 +363,6 @@ const blocksConfig = {
     mostUsed: false,
     sidebarTab: 1,
   },
-  hero: {
-    id: 'hero',
-    title: 'Hero',
-    icon: heroSVG,
-    group: 'common',
-    view: ViewHeroImageLeftBlock,
-    edit: EditHeroImageLeftBlock,
-    schema: BlockSettingsSchema,
-    blockSchema: HeroImageLeftBlockSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 1,
-  },
-
   maps: {
     id: 'maps',
     title: 'Maps',
@@ -374,19 +387,6 @@ const blocksConfig = {
     mostUsed: false,
     sidebarTab: 0,
   },
-  table: {
-    id: 'table',
-    title: 'Table',
-    icon: tableSVG,
-    group: 'common',
-    view: ViewTableBlock,
-    edit: EditTableBlock,
-    schema: BlockSettingsSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 1,
-  },
   search: {
     id: 'search',
     title: 'Search',
@@ -519,15 +519,11 @@ const blocksConfig = {
 // for the grid block, since we need to modify how the inner teaser
 // block behave in it (= no schemaEnhancer fields for teasers inside a grid)
 // Afterwards, it can be further customized in add-ons using the same technique.
-blocksConfig.gridBlock.blocksConfig = { ...blocksConfig };
-blocksConfig.gridBlock.blocksConfig.teaser = {
-  ...blocksConfig.teaser,
-  schemaEnhancer: gridTeaserDisableStylingSchema,
-};
-blocksConfig.gridBlock.blocksConfig.image = {
-  ...blocksConfig.image,
-  schemaEnhancer: gridImageDisableSizeAndPositionHandlersSchema,
-};
+blocksConfig.gridBlock.blocksConfig = cloneDeep(blocksConfig);
+blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
+  gridTeaserDisableStylingSchema;
+blocksConfig.gridBlock.blocksConfig.image.schemaEnhancer =
+  gridImageDisableSizeAndPositionHandlersSchema;
 
 const requiredBlocks = ['title'];