@kitconcept/volto-light-theme 7.0.0-alpha.15 → 7.0.0-alpha.16

package/.changelog.draft

@@ -1,23 +1,17 @@
-## 7.0.0-alpha.15 (2025-07-17)
-
-### Breaking
-
-- We renamed this three fields in the `kitconcept.footer` behavior. @sneridagh
-  `footer_main_logo_inversed` => `footer_logo`
-  `footer_logo` => `post_footer_logo`
-  `footer_logo_link` => `post_footer_logo_link` 
+## 7.0.0-alpha.16 (2025-07-23)
 
 ### Feature
 
-- Added block model v3 as opt-in. @sneridagh [#532](https://github.com/kitconcept/volto-light-theme/pull/532)
-- Update Spanish translation [@macagua] [#596](https://github.com/kitconcept/volto-light-theme/pull/596)
+- Add query support in eventCalendar Block. @iFlameing [#609](https://github.com/kitconcept/volto-light-theme/pull/609)
+- Added support for the blocks configuration TTW behavior. @sneridagh [#614](https://github.com/kitconcept/volto-light-theme/pull/614)
+- Update carousel block version, example content and cypress @iRohitSingh [#616](https://github.com/kitconcept/volto-light-theme/pull/616)
 
 ### Bugfix
 
-- Fixed the use case where the sticky menu item is allowed to not have link. @sneridagh 
-
-### Internal
-
-- Improve listing template of Listing, Search and Grid block with Card Component. @iFlameing [#601](https://github.com/kitconcept/volto-light-theme/pull/601)
+- Fixed missing hide_description prop in the Summary component within
+  TeaserDefaultBodyTemplate and add cypress test for carousel block @iRohitSingh [#610](https://github.com/kitconcept/volto-light-theme/pull/610)
+- Fix the layout of eventCalendar block. @iFlameing [#612](https://github.com/kitconcept/volto-light-theme/pull/612)
+- Fix extra request in edit mode of event calendar block. @iFlameing [#613](https://github.com/kitconcept/volto-light-theme/pull/613)
+- Fix extra request in view mode of event calendar block. @iFlameing [#615](https://github.com/kitconcept/volto-light-theme/pull/615)
 
 

package/.release-it-local.json

@@ -0,0 +1,31 @@
+{
+  "plugins": {
+    "../../core/packages/scripts/prepublish.js": {}
+  },
+  "hooks": {
+    "after:bump": [
+      "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft",
+      "pipx run towncrier build --yes --version ${version}",
+      "cp ../../README.md ./ && cp CHANGELOG.md ../../CHANGELOG.md",
+      "python3 -c 'import json; data = json.load(open(\"../../package.json\")); data[\"version\"] = \"${version}\"; json.dump(data, open(\"../../package.json\", \"w\"), indent=2)'",
+      "git add ../../CHANGELOG.md ../../package.json"
+    ],
+    "after:release": "rm .changelog.draft README.md"
+  },
+  "npm": {
+    "publish": false
+  },
+  "git": {
+    "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
+    "requireUpstream": false,
+    "requireCleanWorkingDir": false,
+    "commitMessage": "Release ${version}",
+    "tagName": "${version}",
+    "tagAnnotation": "Release ${version}"
+  },
+  "github": {
+    "release": true,
+    "releaseName": "${version}",
+    "releaseNotes": "cat .changelog.draft"
+  }
+}

package/CHANGELOG.md

@@ -8,6 +8,22 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.16 (2025-07-23)
+
+### Feature
+
+- Add query support in eventCalendar Block. @iFlameing [#609](https://github.com/kitconcept/volto-light-theme/pull/609)
+- Added support for the blocks configuration TTW behavior. @sneridagh [#614](https://github.com/kitconcept/volto-light-theme/pull/614)
+- Update carousel block version, example content and cypress @iRohitSingh [#616](https://github.com/kitconcept/volto-light-theme/pull/616)
+
+### Bugfix
+
+- Fixed missing hide_description prop in the Summary component within
+  TeaserDefaultBodyTemplate and add cypress test for carousel block @iRohitSingh [#610](https://github.com/kitconcept/volto-light-theme/pull/610)
+- Fix the layout of eventCalendar block. @iFlameing [#612](https://github.com/kitconcept/volto-light-theme/pull/612)
+- Fix extra request in edit mode of event calendar block. @iFlameing [#613](https://github.com/kitconcept/volto-light-theme/pull/613)
+- Fix extra request in view mode of event calendar block. @iFlameing [#615](https://github.com/kitconcept/volto-light-theme/pull/615)
+
 ## 7.0.0-alpha.15 (2025-07-17)
 
 ### Breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.0.0-alpha.15",
+  "version": "7.0.0-alpha.16",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -59,7 +59,7 @@
     "@eeacms/volto-accordion-block": "^10.4.6",
     "@kitconcept/volto-banner-block": "^1.0.1",
     "@kitconcept/volto-button-block": "^4.0.0-alpha.0",
-    "@kitconcept/volto-carousel-block": "^2.0.0-alpha.1",
+    "@kitconcept/volto-carousel-block": "^2.0.0-alpha.3",
     "@kitconcept/volto-dsgvo-banner": "^2.4.0",
     "@kitconcept/volto-heading-block": "^2.4.0",
     "@kitconcept/volto-highlight-block": "^4.1.0",

package/src/components/Blocks/EventCalendar/Search/SearchBlockEdit.jsx

@@ -71,8 +71,8 @@ const SearchBlockEdit = (props) => {
     onTriggerSearch(
       '',
       data?.facets,
-      data?.query?.sort_on,
-      data?.query?.sort_order,
+      data?.query?.sort_on || 'start',
+      data?.query?.sort_order || 'ascending',
     );
   }, [deepQuery, onTriggerSearch, data]);
 

package/src/components/Blocks/EventCalendar/Search/components/DateRangePicker.tsx

@@ -18,20 +18,26 @@ import {
   Text,
   type ValidationResult,
 } from 'react-aria-components';
+import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import CalendarSVG from '@plone/volto/icons/calendar.svg';
+import ClearSVG from '@plone/volto/icons/clear.svg';
 
 export interface DateRangePickerProps<T extends DateValue>
   extends RACDateRangePickerProps<T> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
+  onResetDateRange: () => void;
+  dateRange?: { start: DateValue; end: DateValue } | null;
 }
 
 export function DateRangePicker<T extends DateValue>({
   label,
   description,
   errorMessage,
+  onResetDateRange,
+  dateRange,
   ...props
 }: DateRangePickerProps<T>) {
   return (
@@ -45,10 +51,17 @@ export function DateRangePicker<T extends DateValue>({
         <DateInput slot="end">
           {(segment) => <DateSegment segment={segment} />}
         </DateInput>
-        <Button>
+        <button
+          className={cx('reset-date-range', { visibility: dateRange?.start })}
+          onClick={onResetDateRange}
+        >
+          <Icon name={ClearSVG} color="#000" size="30px" />
+        </button>
+        <Button slot="trigger">
           <Icon name={CalendarSVG} color="#000" />
         </Button>
       </Group>
+
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
       <Popover>

package/src/components/Blocks/EventCalendar/Search/components/EventTemplate.tsx

@@ -4,7 +4,7 @@ import Card from '@kitconcept/volto-light-theme/primitives/Card/Card';
 import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
 import cx from 'classnames';
 
-const EventItem = ({ item, lang }) => {
+const EventItem = ({ item, lang, isEditMode }) => {
   const formatter = new Intl.DateTimeFormat(lang, {
     year: 'numeric',
     month: 'short',
@@ -16,6 +16,7 @@ const EventItem = ({ item, lang }) => {
   });
   const start = item.start ? new Date(item.start) : null;
   const end = item.end ? new Date(item.end) : null;
+  const notSameDay = end && start.getDate() !== end.getDate();
   const formattedStartDate = start ? formatter.format(start) : '';
   const formattedEndDate = end ? formatter.format(end) : '';
   const formattedHeaderDate = !end
@@ -23,14 +24,14 @@ const EventItem = ({ item, lang }) => {
     : headFormatter.formatRange(start, end);
   return (
     <div className="card-listing">
-      <Card href={item['@id']} className="event-card">
+      <Card href={isEditMode ? '' : item['@id']} className="event-card">
         <Card.Image>
-          <div className={cx('date-inset', { 'has-end-date': end })}>
+          <div className={cx('date-inset', { 'has-end-date': notSameDay })}>
             <div className="day">
               {String(start.getDate()).padStart(2, '0')}
             </div>
             <div className="month">{formattedStartDate}</div>
-            {end && (
+            {notSameDay && (
               <>
                 <div className="separator"></div>
                 <div className="day">
@@ -60,7 +61,12 @@ const EventCalenderTemplate = (props) => {
   return (
     <div className="event-calendar items">
       {props.items.map((item: any, index: number) => (
-        <EventItem key={index} item={item} lang={lang} />
+        <EventItem
+          key={index}
+          item={item}
+          lang={lang}
+          isEditMode={props.isEditMode}
+        />
       ))}
     </div>
   );

package/src/components/Blocks/EventCalendar/Search/hocs/withSearch.jsx

@@ -36,6 +36,7 @@ function getInitialState(
   id,
   sortOnParam,
   sortOrderParam,
+  dateRangeQuery = [],
 ) {
   const { types: facetWidgetTypes } =
     config.blocks.blocksConfig.search.extensions.facetWidgets;
@@ -69,6 +70,7 @@ function getInitialState(
             },
           ]
         : []),
+      ...(dateRangeQuery || []),
     ],
     sort_on: sortOnParam || data.query?.sort_on,
     sort_order: sortOrderParam || data.query?.sort_order,
@@ -88,6 +90,7 @@ function getInitialState(
  */
 function normalizeState({
   query, // base query
+  dateRangeQuery,
   facets, // facet values
   id, // block id
   searchText, // SearchableText
@@ -156,6 +159,10 @@ function normalizeState({
     });
   }
 
+  if (dateRangeQuery) {
+    params.query.push(...dateRangeQuery);
+  }
+
   return params;
 }
 
@@ -272,8 +279,10 @@ const withSearch = (options) => (WrappedComponent) => {
 
     // TODO: refactor, should use only useLocationStateManager()!!!
     const [searchText, setSearchText] = React.useState(urlSearchText);
+    const [dateRangeQuery, setDateRangeQuery] = React.useState([]);
 
     const handleDateRangeChange = (query) => {
+      setDateRangeQuery(query);
       setSearchData((prevSearchData) => {
         const filteredQuery = prevSearchData.query?.filter(
           (item) => item.i !== 'start' && item.i !== 'end',
@@ -380,8 +389,10 @@ const withSearch = (options) => (WrappedComponent) => {
       preventOverrideOfFacetState,
     ]);
 
-    const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
-    const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
+    const [sortOn, setSortOn] = React.useState(data?.query?.sort_on || 'start');
+    const [sortOrder, setSortOrder] = React.useState(
+      data?.query?.sort_order || 'ascending',
+    );
 
     const [searchData, setSearchData] = React.useState(
       getInitialState(data, facets, urlSearchText, id),
@@ -398,9 +409,18 @@ const withSearch = (options) => (WrappedComponent) => {
           id,
           sortOn,
           sortOrder,
+          dateRangeQuery,
         ),
       );
-    }, [deepData, deepFacets, urlSearchText, id, sortOn, sortOrder]);
+    }, [
+      deepData,
+      deepFacets,
+      urlSearchText,
+      id,
+      sortOn,
+      sortOrder,
+      dateRangeQuery,
+    ]);
 
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;
@@ -419,9 +439,10 @@ const withSearch = (options) => (WrappedComponent) => {
             const newSearchData = normalizeState({
               id,
               query: data.query || {},
+              dateRangeQuery: dateRangeQuery,
               facets: toSearchFacets || facets,
               searchText: toSearchText ? toSearchText.trim() : '',
-              sortOn: toSortOn || undefined,
+              sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
             });
@@ -445,6 +466,7 @@ const withSearch = (options) => (WrappedComponent) => {
         sortOn,
         sortOrder,
         facetSettings,
+        dateRangeQuery,
       ],
     );
 

package/src/components/Blocks/EventCalendar/Search/layout/TopSideFacets.jsx

@@ -82,13 +82,20 @@ const TopSideFacets = (props) => {
   } = props;
   const { showSearchButton } = data;
   const isLive = !showSearchButton;
+  const [dateRange, setDateRange] = React.useState({ start: null, end: null });
   const onhandleDateRangeChange = (value) => {
-    const start = toJSDate(value.start);
-    const end = toJSDate(value.end);
+    setDateRange(value);
+    const start = toJSDate(value?.start);
+    const end = toJSDate(value?.end);
     const dateRangeQuery = getDateRangeIOV(start, end);
     handleDateRangeChange(dateRangeQuery);
   };
 
+  const onResetDateRange = () => {
+    setDateRange({ start: null, end: null });
+    handleDateRangeChange([]);
+  };
+
   const FacetWrapper = ({ children }) => {
     const colWidth = data.facets.length < 5 ? 12 / data.facets.length : 4;
     return (
@@ -102,7 +109,12 @@ const TopSideFacets = (props) => {
     <div className="search-block-event searchBlock-facets">
       {data.headline && <h2 className="headline">{data.headline}</h2>}
       <div className="first-row">
-        <DateRangePicker onChange={onhandleDateRangeChange} />
+        <DateRangePicker
+          value={dateRange}
+          onChange={onhandleDateRangeChange}
+          onResetDateRange={onResetDateRange}
+          dateRange={dateRange}
+        />
         {/* <SearchDetails
           text={searchedText}
           total={totalItems}

package/src/components/Blocks/EventCalendar/Search/schema.js

@@ -210,6 +210,11 @@ const SearchSchema = ({ data = {}, intl }) => {
         title: 'Default',
         fields: ['headline'],
       },
+      {
+        id: 'searchquery',
+        title: intl.formatMessage(messages.baseSearchQuery),
+        fields: ['query'],
+      },
       {
         id: 'facets',
         title: intl.formatMessage(messages.facets),
@@ -272,6 +277,9 @@ const SearchSchema = ({ data = {}, intl }) => {
       facetsTitle: {
         title: intl.formatMessage(messages.sectionTitle),
       },
+      query: {
+        title: 'Query',
+      },
     },
     required: [],
   };

package/src/components/Blocks/Teaser/DefaultBody.tsx

@@ -36,6 +36,7 @@ const TeaserDefaultTemplate = (props) => {
         <Summary
           item={!data.overwrite ? href : { ...href, ...filteredData }}
           HeadingTag="h2"
+          hide_description={props.data?.hide_description}
         />
       </Card.Summary>
     </Card>

package/src/components/Theming/ConfigInjector.tsx

@@ -0,0 +1,32 @@
+import config from '@plone/volto/registry';
+import { useSelector } from 'react-redux';
+import { BlocksConfigMerger } from '../../helpers/BlocksConfigMerger';
+import type { Content } from '@plone/types';
+import type { MutatorDSL } from '../../types';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+};
+
+const ConfigInjector = () => {
+  const blockConfigData = useSelector<FormState, MutatorDSL>(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['kitconcept.blocks.config']
+        ?.data?.blocks_config_mutator,
+  );
+
+  if (blockConfigData) {
+    config.blocks.blocksConfig = BlocksConfigMerger(
+      config.blocks.blocksConfig,
+      blockConfigData,
+    );
+  }
+
+  // This component does not render anything, it just injects config from the Redux
+  // store in the global config
+  return null;
+};
+
+export default ConfigInjector;

package/src/components/Widgets/BlockConfigJSONEditor.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Button, Modal } from '@plone/components';
+import { Dialog, DialogTrigger } from 'react-aria-components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+const BlockConfigJSONEditor = (props) => {
+  const [textValue, setTextValue] = React.useState(
+    JSON.stringify(props.value, null, 2),
+  );
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <FormFieldWrapper
+        {...props}
+        error={error ? [error] : undefined}
+        className="block-config-json-editor"
+      >
+        <DialogTrigger>
+          <div className="button-wrapper">
+            <Button aria-label="Open configuration">Open configuration</Button>
+          </div>
+          <Modal className="block-config-json-editor-modal">
+            <Dialog>
+              {({ close }) => (
+                <div className="block-config-json-editor-dialog">
+                  <textarea
+                    value={textValue}
+                    onChange={(e) => {
+                      setTextValue(e.target.value);
+                      try {
+                        const validJSON = JSON.parse(e.target.value);
+                        props.onChange(props.id, validJSON);
+                        setError('');
+                      } catch (error) {
+                        setError(`Invalid JSON: ${error.message}`);
+                      }
+                    }}
+                  />
+                  {error && (
+                    <div className="block-config-json-editor-error">
+                      {error}
+                    </div>
+                  )}
+                  <Button aria-label="Close" onPress={close}>
+                    Close
+                  </Button>
+                </div>
+              )}
+            </Dialog>
+          </Modal>
+        </DialogTrigger>
+      </FormFieldWrapper>
+    </>
+  );
+};
+
+export default BlockConfigJSONEditor;

package/src/config/settings.ts

@@ -21,7 +21,7 @@ type apiExpanderInherit = {
 
 export default function install(config: ConfigType) {
   const EXPANDERS_INHERIT_BEHAVIORS =
-    'voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer,kitconcept.footer,kitconcept.sticky_menu';
+    'voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer,kitconcept.footer,kitconcept.sticky_menu,kitconcept.blocks.config';
   config.settings.enableAutoBlockGroupingByBackgroundColor = true;
   config.settings.navDepth = 3;
   config.settings.slate.useLinkedHeadings = false;

package/src/config/slots.ts

@@ -7,6 +7,7 @@ import CoreFooter from '../components/Footer/slots/CoreFooter';
 import StickyMenu from '../components/StickyMenu/StickyMenu';
 import Anontools from '../components/Anontools/Anontools';
 import type { Content } from '@plone/types';
+import ConfigInjector from '../components/Theming/ConfigInjector';
 
 export function hasInheritedBehavior(behavior: string) {
   return ({ content }: { content: Content }) =>
@@ -19,6 +20,11 @@ export default function install(config: ConfigType) {
     name: 'Theming',
     component: Theming,
   });
+  config.registerSlotComponent({
+    slot: 'aboveHeader',
+    name: 'ConfigInjector',
+    component: ConfigInjector,
+  });
 
   config.registerSlotComponent({
     slot: 'aboveHeader',

package/src/config/widgets.ts

@@ -11,6 +11,7 @@ import { headerActionsSchema } from '../components/Widgets/schema/headerActionsS
 import { footerLogosSchema } from '../components/Widgets/schema/footerLogosSchema';
 import { footerLinksSchema } from '../components/Widgets/schema/footerLinksSchema';
 import { iconLinkListSchema } from '../components/Widgets/schema/iconLinkListSchema';
+import BlockConfigJSONEditor from '../components/Widgets/BlockConfigJSONEditor';
 
 declare module '@plone/types' {
   export interface WidgetsConfigById {
@@ -25,6 +26,7 @@ declare module '@plone/types' {
     colorPicker: typeof ColorPicker;
     blocksObject: typeof BlocksObject;
     image: React.ComponentType;
+    blockConfigEditor: typeof BlockConfigJSONEditor;
   }
 }
 
@@ -45,6 +47,8 @@ export default function install(config: ConfigType) {
   config.widgets.widget.size = Size;
   config.widgets.widget.themeColorSwatch = ThemeColorSwatch;
 
+  config.widgets.widget.blockConfigEditor = BlockConfigJSONEditor;
+
   config.registerUtility({
     name: 'headerActions',
     type: 'schema',

package/src/helpers/BlocksConfigMerger.test.ts

@@ -0,0 +1,97 @@
+import { BlocksConfigMerger } from './BlocksConfigMerger';
+
+const baseBlocksConfig = {
+  teaser: {
+    restricted: false,
+    variations: [
+      { id: 'variation1', label: 'Variation 1' },
+      { id: 'variation2', label: 'Variation 2' },
+      { id: 'variation3', label: 'Variation 3' },
+    ],
+    themes: [],
+  },
+  gridBlock: {
+    restricted: false,
+    variations: [
+      { id: 'variationA', label: 'Variation A' },
+      { id: 'variationB', label: 'Variation B' },
+    ],
+    themes: [],
+  },
+};
+
+const mutator = {
+  teaser: {
+    disable: true,
+    variations: ['variation1', 'variation2'],
+    themes: [
+      {
+        style: {
+          '--theme-color': '#fff',
+          '--theme-high-contrast-color': '#ecebeb',
+          '--theme-foreground-color': '#000',
+          '--theme-low-contrast-foreground-color': '#555555',
+        },
+        name: 'default',
+        label: 'Default',
+      },
+    ],
+  },
+  gridBlock: {
+    variations: ['variationB'],
+  },
+  description: {
+    disable: true,
+  },
+};
+
+describe('BlocksConfigMerger', () => {
+  it('disables the block if disable is true', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.teaser.restricted).toBe(true);
+  });
+
+  it('filters variations according to mutator', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.teaser.variations.map((v) => v.id)).toEqual([
+      'variation1',
+      'variation2',
+    ]);
+    expect(result.gridBlock.variations.map((v) => v.id)).toEqual([
+      'variationB',
+    ]);
+  });
+
+  it('assigns themes from mutator', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.teaser.themes).toEqual([
+      {
+        style: {
+          '--theme-color': '#fff',
+          '--theme-high-contrast-color': '#ecebeb',
+          '--theme-foreground-color': '#000',
+          '--theme-low-contrast-foreground-color': '#555555',
+        },
+        name: 'default',
+        label: 'Default',
+      },
+    ]);
+  });
+
+  it('does not modify blocks not present in mutator', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.teaser.variations.length).toBe(2);
+    expect(result.gridBlock.restricted).toBe(false);
+  });
+
+  it('ignores blocks in mutator that do not exist in blocksConfig', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.description).toBeUndefined();
+  });
+
+  it('does not mutate the original blocksConfig', () => {
+    const original = JSON.parse(JSON.stringify(baseBlocksConfig));
+    BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(baseBlocksConfig).toEqual(original);
+  });
+});

package/src/helpers/BlocksConfigMerger.ts

@@ -0,0 +1,42 @@
+import type { BlocksConfig } from '@plone/types';
+import cloneDeep from 'lodash/cloneDeep';
+import type { MutatorDSL } from '../types';
+
+// Utility type for deep recursive Partial
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object
+    ? T[P] extends Array<infer U>
+      ? Array<DeepPartial<U>>
+      : DeepPartial<T[P]>
+    : T[P];
+};
+
+export function BlocksConfigMerger(
+  blocksConfig: DeepPartial<BlocksConfig['blocksConfig']>,
+  merger: MutatorDSL,
+): BlocksConfig['blocksConfig'] {
+  const mergedConfig = cloneDeep(blocksConfig);
+
+  Object.entries(merger).forEach(([blockId, dsl]) => {
+    if (!mergedConfig[blockId]) return;
+
+    // 1. Disable block
+    if (dsl.disable) {
+      mergedConfig[blockId]!.restricted = true;
+    }
+
+    // 2. Filter variations
+    if (Array.isArray(dsl.variations) && mergedConfig[blockId]!.variations) {
+      mergedConfig[blockId]!.variations = mergedConfig[
+        blockId
+      ]!.variations!.filter((v) => dsl.variations!.includes(v.id));
+    }
+
+    // 3. Assign themes
+    if (Array.isArray(dsl.themes)) {
+      mergedConfig[blockId]!.themes = dsl.themes;
+    }
+  });
+
+  return mergedConfig as BlocksConfig['blocksConfig'];
+}

package/src/index.ts

@@ -23,6 +23,7 @@ import type {
   SiteFooterSettings,
   StickyMenuSettings,
   PloneGobrSocialMediaSettings,
+  BlocksConfigSettings,
 } from './types';
 
 defineMessages({
@@ -58,6 +59,7 @@ declare module '@plone/types' {
       'voltolighttheme.footer': CustomInheritBehavior<SiteFooterSettings>;
       'kitconcept.sticky_menu': CustomInheritBehavior<StickyMenuSettings>;
       'kitconcept.footer': CustomInheritBehavior<SiteFooterSettings>;
+      'kitconcept.blocks.config': CustomInheritBehavior<BlocksConfigSettings>;
       'plonegovbr.socialmedia.settings': CustomInheritBehavior<PloneGobrSocialMediaSettings>;
     };
   }

package/src/theme/_layout.scss

@@ -369,7 +369,8 @@ External link removal for all the blocks.
   .block-editor-teaser .card-inner, // deprecate when category is in place
   .block-editor-slateTable .block.table,
   .block-editor-highlight .teaser-description-title,
-  .block-editor-toc .table-of-contents {
+  .block-editor-toc .table-of-contents,
+  .block-editor-eventCalendar .search-block-event {
     @include default-container-width();
     @include adjustMarginsToEditContainer($default-container-width);
   }

package/src/theme/_widgets.scss

@@ -192,3 +192,63 @@ span.color-contrast-label {
     margin-top: 10px;
   }
 }
+
+.block-config-json-editor.field.inline {
+  .button-wrapper {
+    display: flex;
+    min-height: 60px;
+    justify-content: flex-end;
+    padding: 0;
+
+    button {
+      @include button-style;
+    }
+  }
+
+  .eight.wide.column:has(.button-wrapper) {
+    padding-right: 0;
+  }
+
+  .form-error-label {
+    text-align: end;
+  }
+}
+
+.block-config-json-editor-modal {
+  width: var(--narrow-block-width, 600px);
+  max-width: 600px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  box-shadow: 0 8px 20px #0000001a;
+  color: var(--text-color);
+  outline: none;
+}
+
+.block-config-json-editor-dialog {
+  display: flex;
+  flex-direction: column;
+
+  button {
+    @include button-style;
+    padding: 20px 10px;
+  }
+  textarea {
+    display: block;
+    width: 100%;
+    height: 500px;
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: $spacing-small;
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    resize: vertical;
+  }
+}
+
+.block-config-json-editor-error {
+  margin-bottom: $spacing-small;
+  color: #d01157 !important;
+  font-size: 14px;
+}

package/src/theme/blocks/_eventSearch.scss

@@ -32,7 +32,8 @@
         }
       }
       .react-aria-DateInput[slot='start'] {
-        margin-right: 10px;
+        min-width: 117px;
+        margin-right: 15px;
         outline-color: $black;
         span {
           color: $black;
@@ -42,8 +43,9 @@
         }
       }
       .react-aria-DateInput[slot='end'] {
-        margin-right: $spacing-small;
-        margin-left: 10px;
+        min-width: 117px;
+        margin-right: 5px;
+        margin-left: 15px;
         outline-color: $black;
         span {
           color: $black;
@@ -65,6 +67,23 @@
           min-width: 30px;
         }
       }
+
+      .reset-date-range {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        border: none;
+        margin-right: 5px;
+        background: none;
+        cursor: pointer;
+        pointer-events: none;
+        visibility: hidden;
+
+        &.visibility {
+          pointer-events: auto;
+          visibility: visible;
+        }
+      }
     }
 
     .search-details {

package/src/types.d.ts

@@ -1,4 +1,4 @@
-import type { Brain, Image } from '@plone/types';
+import type { Brain, Image, StyleDefinition } from '@plone/types';
 
 type hrefType = {
   '@id': string;
@@ -87,6 +87,19 @@ export type PloneGobrSocialMediaSettings = {
   social_links: Array<iconLink>;
 };
 
+export type MutatorDSL = Record<
+  string,
+  {
+    disable?: boolean;
+    variations?: string[];
+    themes?: StyleDefinition[];
+  }
+>;
+
+export type BlocksConfigSettings = {
+  blocks_config_mutator: MutatorDSL;
+};
+
 export type CustomInheritBehavior<T> = {
   data: T;
   from: {

package/vitest.config.mjs

@@ -4,10 +4,13 @@ import path from 'path';
 
 export default defineConfig({
   ...voltoVitestConfig,
-  resolve: {
-    alias: {
-      '@plone/volto': path.resolve(__dirname, '../../core/packages/volto/src'), // Add paths accordingly
-      // 'promise-file-reader': require.resolve('promise-file-reader') // Add to identify dependency from package
+  server: {
+    fs: {
+      allow: [
+        // Allow vite/vitest to access these folders
+        '..', // allow going up from frontend/
+        path.resolve(__dirname, '../../../../../core/packages/volto'),
+      ],
     },
   },
 });