@plone/volto 17.0.0-alpha.4 → 17.0.0-alpha.6

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

@@ -1,11 +1,11 @@
 import React from 'react';
-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 renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
-import Controlpanels from './Controlpanels';
 import config from '@plone/volto/registry';
+import Controlpanels from './Controlpanels';
 
 const mockStore = configureStore();
 
@@ -20,7 +20,30 @@ jest.mock('./VersionOverview', () =>
 describe('Controlpanels', () => {
   it('renders a controlpanels component', () => {
     const store = mockStore({
-      controlpanels: {
+      controlpanels: [
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
+          group: 'General',
+          title: 'Date and Time',
+        },
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/lang',
+          group: 'General',
+          title: 'Language',
+        },
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/editing',
+          group: 'Content',
+          title: 'Editing',
+        },
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+          group: 'Security',
+          title: 'test',
+        },
+      ],
+      reduxAsyncConnect: {
+        // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [
           {
             '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
@@ -40,10 +63,11 @@ describe('Controlpanels', () => {
           {
             '@id': 'http://localhost:8080/Plone/@controlpanels/security',
             group: 'Security',
-            title: 'Security',
+            title: 'test',
           },
         ],
       },
+      router: { location: '/blog' },
       intl: {
         locale: 'en',
         messages: {},
@@ -62,9 +86,24 @@ describe('Controlpanels', () => {
 
   it('renders an additional control panel', () => {
     const store = mockStore({
-      controlpanels: {
-        controlpanels: [],
+      controlpanels: [
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+          group: 'Security',
+          title: 'test',
+        },
+      ],
+      reduxAsyncConnect: {
+        // Mocked in redux async connect as it isn't fetch client-side.
+        controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+            group: 'Security',
+            title: 'test',
+          },
+        ],
       },
+      router: { location: '/blog' },
       intl: {
         locale: 'en',
         messages: {},

package/src/components/manage/Form/InlineForm.jsx

@@ -4,13 +4,21 @@ import { Accordion, Segment, Message } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import AnimateHeight from 'react-animate-height';
 import { keys, map, isEqual } from 'lodash';
-
+import { useAtom } from 'jotai';
+import { inlineFormFieldsetsState } from './InlineFormState';
+import {
+  insertInArray,
+  removeFromArray,
+  arrayRange,
+} from '@plone/volto/helpers/Utils/Utils';
 import { Field, Icon } from '@plone/volto/components';
 import { applySchemaDefaults } from '@plone/volto/helpers';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   editValues: {
     id: 'Edit values',
@@ -70,12 +78,34 @@ const InlineForm = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const [currentActiveFieldset, setCurrentActiveFieldset] = React.useState(0);
+  const [currentActiveFieldset, setCurrentActiveFieldset] = useAtom(
+    inlineFormFieldsetsState({
+      name: block,
+      fielsetList: other,
+      initialState: config.settings.blockSettingsTabFieldsetsInitialStateOpen
+        ? arrayRange(0, other.length - 1, 1)
+        : [],
+    }),
+  );
+
   function handleCurrentActiveFieldset(e, blockProps) {
     const { index } = blockProps;
-    const newIndex = currentActiveFieldset === index ? -1 : index;
-
-    setCurrentActiveFieldset(newIndex);
+    if (currentActiveFieldset.includes(index)) {
+      setCurrentActiveFieldset(
+        removeFromArray(
+          currentActiveFieldset,
+          currentActiveFieldset.indexOf(index),
+        ),
+      );
+    } else {
+      setCurrentActiveFieldset(
+        insertInArray(
+          currentActiveFieldset,
+          index,
+          currentActiveFieldset.length + 1,
+        ),
+      );
+    }
   }
 
   return (
@@ -136,22 +166,22 @@ const InlineForm = (props) => {
         <Accordion fluid styled className="form" key={fieldset.id}>
           <div key={fieldset.id} id={`blockform-fieldset-${fieldset.id}`}>
             <Accordion.Title
-              active={currentActiveFieldset === index}
+              active={currentActiveFieldset.includes(index)}
               index={index}
               onClick={handleCurrentActiveFieldset}
             >
               {fieldset.title && <>{fieldset.title}</>}
-              {currentActiveFieldset === index ? (
+              {currentActiveFieldset.includes(index) ? (
                 <Icon name={upSVG} size="20px" />
               ) : (
                 <Icon name={downSVG} size="20px" />
               )}
             </Accordion.Title>
-            <Accordion.Content active={currentActiveFieldset === index}>
+            <Accordion.Content active={currentActiveFieldset.includes(index)}>
               <AnimateHeight
                 animateOpacity
                 duration={500}
-                height={currentActiveFieldset === index ? 'auto' : 0}
+                height={currentActiveFieldset.includes(index) ? 'auto' : 0}
               >
                 <Segment className="attached">
                   {map(fieldset.fields, (field) => (

package/src/components/manage/Form/InlineFormState.js

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { isEqual } from 'lodash';
+
+export const inlineFormFieldsetsState = atomFamily(
+  ({ name, initialState }) => atom(initialState),
+  (a, b) => a.name === b.name && isEqual(a.fielsetList, b.fielsetList),
+);

package/src/components/manage/Widgets/ObjectListWidget.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
 import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
-import { applySchemaDefaults } from '@plone/volto/helpers';
+import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
@@ -164,13 +164,8 @@ const ObjectListWidget = (props) => {
           if (!destination) {
             return;
           }
-
-          const first = value[source.index];
-          const second = value[destination.index];
-          value[destination.index] = first;
-          value[source.index] = second;
-
-          onChange(id, value);
+          const newValue = reorderArray(value, source.index, destination.index);
+          onChange(id, newValue);
           return true;
         }}
       >

package/src/components/theme/Icon/Icon.jsx

@@ -44,8 +44,8 @@ const Icon = ({
   ariaHidden,
 }) => (
   <svg
-    xmlns={name.attributes && name.attributes.xmlns}
-    viewBox={name.attributes && name.attributes.viewBox}
+    xmlns={name?.attributes?.xmlns}
+    viewBox={name?.attributes?.viewBox}
     style={{
       height: size,
       width: 'auto',

package/src/components/theme/Login/Login.jsx

@@ -239,6 +239,7 @@ class Login extends Component {
                         <Input
                           type="password"
                           id="password"
+                          autocomplete="current-password"
                           name="password"
                           placeholder={this.props.intl.formatMessage(
                             messages.password,

package/src/config/index.js

@@ -181,6 +181,7 @@ let config = {
     hashLinkSmoothScroll: false,
     styleClassNameExtenders,
     querystringSearchGet: false,
+    blockSettingsTabFieldsetsInitialStateOpen: true,
   },
   experimental: {
     addBlockButton: {

package/src/express-middleware/sitemap.js

@@ -1,11 +1,34 @@
 import express from 'express';
-import { generateSitemap } from '@plone/volto/helpers/Sitemap/Sitemap';
+import {
+  generateSitemap,
+  generateSitemapIndex,
+  SITEMAP_BATCH_SIZE,
+} from '@plone/volto/helpers/Sitemap/Sitemap';
 
 export const sitemap = function (req, res, next) {
-  generateSitemap(req).then((sitemap) => {
+  let start = 0;
+  let size = undefined;
+  const { batch: batchStr } = req.params;
+  if (batchStr !== undefined) {
+    const batch = parseInt(batchStr);
+    if (isNaN(batch) || batch === 0 || '' + batch !== batchStr) {
+      res.status(404);
+      // Some data, such as the internal API address, may be sensitive to be published
+      res.send(
+        `Invalid sitemap name, use sitemap.xml.gz, or batched sitemapN.xml.gz where N is a positive integer.`,
+      );
+      return;
+    }
+    start = SITEMAP_BATCH_SIZE * (batch - 1);
+    size = SITEMAP_BATCH_SIZE;
+  }
+  generateSitemap(req, start, size).then((sitemap) => {
     if (Buffer.isBuffer(sitemap)) {
       res.set('Content-Type', 'application/x-gzip');
-      res.set('Content-Disposition', 'attachment; filename="sitemap.xml.gz"');
+      res.set(
+        'Content-Disposition',
+        `attachment; filename="sitemap${batchStr || ''}.xml.gz"`,
+      );
       res.send(sitemap);
     } else {
       // {"errno":-111, "code":"ECONNREFUSED", "host": ...}
@@ -16,10 +39,20 @@ export const sitemap = function (req, res, next) {
   });
 };
 
+export const sitemapIndex = function (req, res, next) {
+  generateSitemapIndex(req).then((sitemapIndex) => {
+    res.set('Content-Type', 'application/xml');
+    res.set('Content-Disposition', 'attachment; filename="sitemap-index.xml"');
+    res.send(sitemapIndex);
+  });
+};
+
 export default function () {
   const middleware = express.Router();
 
   middleware.all('**/sitemap.xml.gz', sitemap);
+  middleware.all('**/sitemap:batch.xml.gz', sitemap);
+  middleware.all('**/sitemap-index.xml', sitemapIndex);
   middleware.id = 'sitemap.xml.gz';
   return middleware;
 }

package/src/helpers/Robots/Robots.js

@@ -15,12 +15,9 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
  */
 export const generateRobots = (req) =>
   new Promise((resolve) => {
-    //const url = `${req.protocol}://${req.get('Host')}`;
-    const request = superagent.get(
-      `${
-        config.settings.internalApiPath ?? config.settings.apiPath
-      }/robots.txt`,
-    );
+    const internalUrl =
+      config.settings.internalApiPath ?? config.settings.apiPath;
+    const request = superagent.get(`${internalUrl}/robots.txt`);
     request.set('Accept', 'text/plain');
     const authToken = req.universalCookies.get('auth_token');
     if (authToken) {
@@ -31,6 +28,27 @@ export const generateRobots = (req) =>
       if (error) {
         resolve(text || error);
       } else {
+        // It appears that express does not take the x-forwarded headers into
+        // consideration, so we do it ourselves.
+        const {
+          'x-forwarded-proto': forwardedProto,
+          'x-forwarded-host': forwardedHost,
+          'x-forwarded-port': forwardedPort,
+        } = req.headers;
+        const proto = forwardedProto ?? req.protocol;
+        const host = forwardedHost ?? req.get('Host');
+        const portNum = forwardedPort ?? req.get('Port');
+        const port =
+          (proto === 'https' && '' + portNum === '443') ||
+          (proto === 'http' && '' + portNum === '80')
+            ? ''
+            : `:${portNum}`;
+        // Plone has probably returned the sitemap link with the internal url.
+        // If so, let's replace it with the current one.
+        const url = `${proto}://${host}${port}`;
+        text = text.replace(internalUrl, url);
+        // Replace the sitemap with the sitemap index.
+        text = text.replace('sitemap.xml.gz', 'sitemap-index.xml');
         resolve(text);
       }
     });

package/src/helpers/Sitemap/Sitemap.js

@@ -11,19 +11,23 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 
 import config from '@plone/volto/registry';
 
+export const SITEMAP_BATCH_SIZE = 5000;
+
 /**
  * Generate sitemap
  * @function generateSitemap
  * @param {Object} _req Request object
  * @return {string} Generated sitemap
  */
-export const generateSitemap = (_req) =>
+export const generateSitemap = (_req, start = 0, size = undefined) =>
   new Promise((resolve) => {
     const { settings } = config;
     const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=100000000&use_site_search_settings=1`,
+      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_start=${start}&b_size=${
+        size !== undefined ? size : 100000000
+      }&use_site_search_settings=1`,
     );
     request.set('Accept', 'application/json');
     request.use(addHeadersFactory(_req));
@@ -50,3 +54,41 @@ export const generateSitemap = (_req) =>
       }
     });
   });
+
+/**
+ * Generate sitemap
+ * @function generateSitemapIndex
+ * @param {Object} _req Request object
+ * @return {string} Generated sitemap index
+ */
+export const generateSitemapIndex = (_req) =>
+  new Promise((resolve) => {
+    const { settings } = config;
+    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiPath = settings.internalApiPath ?? settings.apiPath;
+    const request = superagent.get(
+      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
+    );
+    request.set('Accept', 'application/json');
+    const authToken = _req.universalCookies.get('auth_token');
+    if (authToken) {
+      request.set('Authorization', `Bearer ${authToken}`);
+    }
+    request.end((error, { body } = {}) => {
+      if (error) {
+        resolve(body || error);
+      } else {
+        const items = Array.from(
+          { length: Math.ceil(body.items_total / SITEMAP_BATCH_SIZE) },
+          (_, i) =>
+            `  <sitemap>
+    <loc>${toPublicURL('/sitemap' + (i + 1) + '.xml.gz')}</loc>
+  </sitemap>`,
+        );
+        const result = `<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${items.join('\n')}\n</sitemapindex>`;
+        resolve(result);
+      }
+    });
+  });

package/src/helpers/Url/Url.js

@@ -280,14 +280,14 @@ export function isTelephone(text) {
 }
 
 export function normaliseMail(email) {
-  if (email.toLowerCase().startsWith('mailto:')) {
+  if (email?.toLowerCase()?.startsWith('mailto:')) {
     return email;
   }
   return `mailto:${email}`;
 }
 
 export function normalizeTelephone(tel) {
-  if (tel.toLowerCase().startsWith('tel:')) {
+  if (tel?.toLowerCase()?.startsWith('tel:')) {
     return tel;
   }
   return `tel:${tel}`;
@@ -310,12 +310,17 @@ export function checkAndNormalizeUrl(url) {
     res.url = URLUtils.normalizeTelephone(url);
   } else {
     //url
-    if (!res.url.startsWith('/') && !res.url.startsWith('#')) {
+    if (
+      res.url?.length >= 0 &&
+      !res.url.startsWith('/') &&
+      !res.url.startsWith('#')
+    ) {
       res.url = URLUtils.normalizeUrl(url);
       if (!URLUtils.isUrl(res.url)) {
         res.isValid = false;
       }
     }
+    if (res.url === undefined || res.url === null) res.isValid = false;
   }
   return res;
 }

package/src/helpers/Url/Url.test.js

@@ -14,6 +14,9 @@ import {
   removeProtocol,
   addAppURL,
   expandToBackendURL,
+  checkAndNormalizeUrl,
+  normaliseMail,
+  normalizeTelephone,
 } from './Url';
 
 beforeEach(() => {
@@ -61,6 +64,17 @@ describe('Url', () => {
     it('return empty string if no url is empty string', () => {
       expect(getBaseUrl('')).toBe('');
     });
+    it('return a null/undefined mailto adress ', () => {
+      expect(normaliseMail(null)).toBe('mailto:null');
+      expect(normaliseMail(undefined)).toBe('mailto:undefined');
+    });
+    it('return a null/undefined telephone number', () => {
+      expect(normalizeTelephone(null)).toBe('tel:null');
+      expect(normalizeTelephone(undefined)).toBe('tel:undefined');
+    });
+    it('null returns an invalid link', () => {
+      expect(checkAndNormalizeUrl(null).isValid).toBe(false);
+    });
   });
 
   describe('getView', () => {

package/src/helpers/Utils/Utils.js

@@ -258,11 +258,11 @@ export const removeFromArray = (array, index) => {
 };
 
 /**
- * Reorder array
+ * Moves an item from origin to target inside an array in an immutable way
  * @param {Array} array Array with data
- * @param {number} origin Index of item to be reordered
- * @param {number} target Index of item to be reordered to
- * @returns {Array} Array with reordered elements
+ * @param {number} origin Index of item to be moved from
+ * @param {number} target Index of item to be moved to
+ * @returns {Array} Resultant array
  */
 export const reorderArray = (array, origin, target) => {
   const result = Array.from(array);
@@ -299,3 +299,16 @@ export const cloneDeepSchema = (object) => {
     }
   });
 };
+
+/**
+ * Creates an array given a range of numbers
+ * @param {number} start start number from
+ * @param {number} stop stop number at
+ * @param {number} step step every each number in the sequence
+ * @returns {array} The result, eg. [0, 1, 2, 3, 4]
+ */
+export const arrayRange = (start, stop, step) =>
+  Array.from(
+    { length: (stop - start) / step + 1 },
+    (value, index) => start + index * step,
+  );

package/src/helpers/Utils/usePagination.js

@@ -1,59 +1,25 @@
-import React, { useRef, useEffect } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import qs from 'query-string';
-import { useSelector } from 'react-redux';
-import { slugify } from '@plone/volto/helpers/Utils/Utils';
-
-/**
- * @function useCreatePageQueryStringKey
- * @description A hook that creates a key with an id if there are multiple blocks with pagination.
- * @returns {string} Example: page || page_012345678
- */
-const useCreatePageQueryStringKey = (id) => {
-  const blockTypesWithPagination = ['search', 'listing'];
-  const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
-  const blocksLayout =
-    useSelector((state) => state?.content?.data?.blocks_layout?.items) || [];
-  const displayedBlocks = blocksLayout?.map((item) => blocks[item]);
-  const hasMultiplePaginations =
-    displayedBlocks.filter((item) =>
-      blockTypesWithPagination.includes(item['@type']),
-    ).length > 1 || false;
-
-  return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
-};
+import React from 'react';
+import { isEqual } from 'lodash';
+import { usePrevious } from './usePrevious';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 
 /**
  * A pagination helper that tracks the query and resets pagination in case the
  * query changes.
  */
-export const usePagination = (id = null, defaultPage = 1) => {
-  const location = useLocation();
-  const history = useHistory();
-  const pageQueryStringKey = useCreatePageQueryStringKey(id);
-  const pageQueryParam =
-    qs.parse(location.search)[pageQueryStringKey] || defaultPage;
-  const [currentPage, setCurrentPage] = React.useState(
-    parseInt(pageQueryParam),
-  );
-  const queryRef = useRef(qs.parse(location.search)?.query);
+export const usePagination = (query, defaultPage = 1) => {
+  const previousQuery = usePrevious(query);
+  const [currentPage, setCurrentPage] = React.useState(defaultPage);
 
-  useEffect(() => {
-    if (queryRef.current !== qs.parse(location.search)?.query) {
-      setCurrentPage(defaultPage);
-      queryRef.current = qs.parse(location.search)?.query;
-    }
-    const newParams = {
-      ...qs.parse(location.search),
-      [pageQueryStringKey]: currentPage,
-    };
-    history.replace({
-      search: qs.stringify(newParams),
-    });
-  }, [currentPage, defaultPage, location.search, history, pageQueryStringKey]);
+  useDeepCompareEffect(() => {
+    setCurrentPage(defaultPage);
+  }, [query, previousQuery, defaultPage]);
 
   return {
-    currentPage,
+    currentPage:
+      previousQuery && !isEqual(previousQuery, query)
+        ? defaultPage
+        : currentPage,
     setCurrentPage,
   };
 };

package/src/helpers/index.js

@@ -85,6 +85,8 @@ export {
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,
+  arrayRange,
+  reorderArray,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
 export {

package/src/middleware/Api.test.js

@@ -53,6 +53,60 @@ describe('api middleware helpers', () => {
     );
     expect(result).toEqual('/de/mypage/@navigation?expand.navigation.depth=3');
   });
+  it('addExpandersToPath - Path matching, preserve query', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/de/mypage',
+        GET_CONTENT: ['mycustomexpander', 'mycustomexpander2'],
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage/@navigation?expand.navigation.depth=3',
+      GET_CONTENT,
+    );
+    expect(result).toEqual(
+      '/de/mypage/@navigation?expand=mycustomexpander,mycustomexpander2&expand.navigation.depth=3',
+    );
+  });
+  it('addExpandersToPath - Path matching, preserve query with multiple', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/de/mypage',
+        GET_CONTENT: ['mycustomexpander', 'mycustomexpander2'],
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage/@navigation?expand.navigation.depth=3&expand.other=2',
+      GET_CONTENT,
+    );
+    expect(result).toEqual(
+      '/de/mypage/@navigation?expand=mycustomexpander,mycustomexpander2&expand.navigation.depth=3&expand.other=2',
+    );
+  });
+  it('addExpandersToPath - Path not matching, preserve encoded query', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/de/otherpath',
+        GET_CONTENT: ['mycustomexpander'],
+      },
+    ];
+
+    const result = addExpandersToPath('/de/mypage?query=a%26b', GET_CONTENT);
+    expect(result).toEqual('/de/mypage?query=a%26b');
+  });
+  it('addExpandersToPath - Path matching, preserve encoded query', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/de/mypage',
+        GET_CONTENT: ['mycustomexpander'],
+      },
+    ];
+
+    const result = addExpandersToPath('/de/mypage?query=a%26b', GET_CONTENT);
+    expect(result).toEqual('/de/mypage?expand=mycustomexpander&query=a%26b');
+  });
   it('addExpandersToPath - Two custom expanders from settings', () => {
     config.settings.apiExpanders = [
       {

package/src/middleware/api.js

@@ -43,7 +43,7 @@ export function addExpandersToPath(path, type, isAnonymous) {
   const {
     url,
     query: { expand, ...query },
-  } = qs.parseUrl(path);
+  } = qs.parseUrl(path, { decode: false });
 
   const expandersFromConfig = apiExpanders
     .filter((expand) => matchPath(url, expand.match) && expand[type])

package/test-setup-config.js

@@ -82,6 +82,7 @@ config.set('settings', {
   viewableInBrowserObjects: [],
   styleClassNameConverters,
   styleClassNameExtenders,
+  blockSettingsTabFieldsetsInitialStateOpen: true,
 });
 config.set('blocks', {
   blocksConfig: {