@kitconcept/volto-light-theme 8.0.0-alpha.0 → 8.0.0-alpha.2

package/.changelog.draft

@@ -1,15 +1,8 @@
-## 8.0.0-alpha.0 (2025-10-24)
-
-### Breaking
-
-- Use Volto 19a9. @sneridagh
-  Use `@plone/components` 4.0.0 alpha.
-  Recommended add-ons are not included by default as `peerDependencies`.
-
-  Breaking change: Please, check the [upgrade guide](https://volto-light-theme.readthedocs.io/how-to-guides/upgrade-guide.html) for more information. [#693](https://github.com/kitconcept/volto-light-theme/pull/693)
+## 8.0.0-alpha.2 (2025-10-29)
 
 ### Feature
 
-- To reduce the size of the main VLT repository, snapshots for visual regression testing are now stored in a separate repository (kitconcept/vlt-visual-regression). @sneridagh [#690](https://github.com/kitconcept/volto-light-theme/pull/690)
+- Refactor `volto-button-block`, transfer all the customizations to the block. @sneridagh [#697](https://github.com/kitconcept/volto-light-theme/pull/697)
+- Refactor `volto-separator-block`, transfer all the customizations to the block. @sneridagh [#698](https://github.com/kitconcept/volto-light-theme/pull/698)
 
 

package/CHANGELOG.md

@@ -8,6 +8,19 @@
 
 <!-- towncrier release notes start -->
 
+## 8.0.0-alpha.2 (2025-10-29)
+
+### Feature
+
+- Refactor `volto-button-block`, transfer all the customizations to the block. @sneridagh [#697](https://github.com/kitconcept/volto-light-theme/pull/697)
+- Refactor `volto-separator-block`, transfer all the customizations to the block. @sneridagh [#698](https://github.com/kitconcept/volto-light-theme/pull/698)
+
+## 8.0.0-alpha.1 (2025-10-27)
+
+### Breaking
+
+- Transfer all custom code related to slider to the add-on. @sneridagh [#694](https://github.com/kitconcept/volto-light-theme/pull/694)
+
 ## 8.0.0-alpha.0 (2025-10-24)
 
 ### Breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/Blocks/Button/schema.js

@@ -1,48 +1,7 @@
-import { defineMessages } from 'react-intl';
 import { defaultStylingSchema } from '../schema';
 
-const messages = defineMessages({
-  BlockWidth: {
-    id: 'Block Width',
-    defaultMessage: 'Block Width',
-  },
-  Alignment: {
-    id: 'Alignment',
-    defaultMessage: 'Alignment',
-  },
-});
-
 export const ButtonStylingSchema = ({ schema, formData, intl }) => {
   defaultStylingSchema({ schema, formData, intl });
 
-  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
-    (field) => field !== 'inneralign',
-  );
-
-  delete schema.properties?.inneralign;
-
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'blockWidth:noprefix',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'align:noprefix',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-
-  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
-    widget: 'blockWidth',
-    title: intl.formatMessage(messages.BlockWidth),
-    default: 'default',
-    filterActions: ['narrow', 'default'],
-  };
-
-  schema.properties.styles.schema.properties['align:noprefix'] = {
-    widget: 'blockAlignment',
-    title: intl.formatMessage(messages.Alignment),
-    default: 'left',
-  };
-
   return schema;
 };

package/src/components/Blocks/Separator/schema.js

@@ -1,59 +1,7 @@
-import { defineMessages } from 'react-intl';
 import { defaultStylingSchema } from '../schema';
 
-const messages = defineMessages({
-  BlockWidth: {
-    id: 'Block Width',
-    defaultMessage: 'Block Width',
-  },
-  Alignment: {
-    id: 'Alignment',
-    defaultMessage: 'Alignment',
-  },
-  shortline: {
-    id: 'Short line',
-    defaultMessage: 'Short line',
-  },
-});
-
 export const SeparatorStylingSchema = ({ schema, formData, intl }) => {
   defaultStylingSchema({ schema, formData, intl });
 
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'blockWidth:noprefix',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-
-  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
-    widget: 'blockWidth',
-    title: intl.formatMessage(messages.BlockWidth),
-    default: 'default',
-    filterActions: ['narrow', 'default'],
-  };
-
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'align:noprefix',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-
-  schema.properties.styles.schema.properties['align:noprefix'] = {
-    widget: 'blockAlignment',
-    title: intl.formatMessage(messages.Alignment),
-    default: 'left',
-  };
-
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'shortLine',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-
-  schema.properties.styles.schema.properties.shortLine = {
-    title: intl.formatMessage(messages.shortline),
-    type: 'boolean',
-  };
-
-  schema.properties.styles.schema.properties['align:noprefix'].disabled =
-    !formData?.styles?.shortLine;
-
   return schema;
 };

package/src/components/Blocks/Slider/schema.js

@@ -1,41 +1,7 @@
-import { defineMessages } from 'react-intl';
 import { defaultStylingSchema } from '../schema';
 
-const messages = defineMessages({
-  flagAlign: {
-    id: 'Flag align',
-    defaultMessage: 'Align',
-  },
-  buttonText: {
-    id: 'Button text',
-    defaultMessage: 'Button text',
-  },
-  hideButton: {
-    id: 'Hide Button',
-    defaultMessage: 'Hide Button',
-  },
-});
-
 export const sliderBlockSchemaEnhancer = ({ formData, schema, intl }) => {
   defaultStylingSchema({ schema, formData, intl });
 
-  schema.properties.slides.schema.fieldsets[0].fields.push('buttonText');
-  schema.properties.slides.schema.properties.buttonText = {
-    title: intl.formatMessage(messages.buttonText),
-  };
-  schema.properties.slides.schema.fieldsets[0].fields.push('hideButton');
-  schema.properties.slides.schema.properties.hideButton = {
-    title: intl.formatMessage(messages.hideButton),
-    type: 'boolean',
-  };
-
-  schema.properties.slides.schema.fieldsets[0].fields.push('flagAlign');
-  schema.properties.slides.schema.properties.flagAlign = {
-    widget: 'inner_align',
-    title: intl.formatMessage(messages.flagAlign),
-    actions: ['left', 'right'],
-    default: 'left',
-  };
-
   return schema;
 };

package/src/components/Widgets/AlignWidget.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './Buttons';
+import imageLeftSVG from '@plone/volto/icons/image-left.svg';
+import imageRightSVG from '@plone/volto/icons/image-right.svg';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+  narrow: {
+    id: 'Narrow',
+    defaultMessage: 'Narrow',
+  },
+  wide: {
+    id: 'Wide',
+    defaultMessage: 'Wide',
+  },
+  full: {
+    id: 'Full',
+    defaultMessage: 'Full',
+  },
+});
+
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
+  left: [imageLeftSVG, intl.formatMessage(messages.left)],
+  center: [imageFitSVG, intl.formatMessage(messages.center)],
+  right: [imageRightSVG, intl.formatMessage(messages.right)],
+  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
+  wide: [imageWideSVG, intl.formatMessage(messages.wide)],
+  full: [imageFullSVG, intl.formatMessage(messages.full)],
+});
+
+type AlignWidgetProps = ButtonsWidgetProps & {
+  defaultAction?: string;
+};
+
+const AlignWidget = (props: AlignWidgetProps) => {
+  const intl = useIntl();
+
+  const {
+    actions = ['left', 'center', 'right', 'full'],
+    actionsInfoMap,
+    default: defaultValue,
+    defaultAction,
+  } = props;
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={actions}
+      actionsInfoMap={actionsInfo}
+      default={defaultValue ?? defaultAction ?? 'center'}
+    />
+  );
+};
+
+export default AlignWidget;

package/src/components/Widgets/BlockAlignment.tsx

@@ -8,6 +8,7 @@ import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageLeftSVG from '@plone/volto/icons/image-left.svg';
 import imageRightSVG from '@plone/volto/icons/image-right.svg';
 import type { IntlShape } from 'react-intl';
+import type { StyleDefinition } from '@plone/types';
 
 const messages = defineMessages({
   left: {
@@ -34,7 +35,7 @@ export const defaultActionsInfo = ({
   center: [imageFitSVG, intl.formatMessage(messages.center)],
 });
 
-const DEFAULT_ACTIONS = [
+const DEFAULT_ACTIONS: StyleDefinition[] = [
   {
     style: {
       '--block-alignment': 'var(--align-left)',
@@ -62,14 +63,13 @@ const BlockAlignmentWidget = (props: ButtonsWidgetProps) => {
   const intl = useIntl();
 
   const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  let filteredActions;
-  if (filterActions) {
-    filteredActions = actions.filter((action) =>
-      filterActions.includes(action.name),
-    );
-  } else {
-    filteredActions = actions;
-  }
+  const filteredActions =
+    filterActions && filterActions.length > 0
+      ? actions.filter((action) => {
+          const actionName = typeof action === 'string' ? action : action.name;
+          return filterActions.includes(actionName);
+        })
+      : actions;
 
   const actionsInfo = {
     ...defaultActionsInfo({ intl }),

package/src/components/Widgets/BlockWidth.tsx

@@ -9,6 +9,7 @@ import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import type { StyleDefinition } from '@plone/types';
 
 const messages = defineMessages({
   narrow: {
@@ -40,7 +41,7 @@ export const defaultActionsInfo = ({
   full: [imageFullSVG, intl.formatMessage(messages.full)],
 });
 
-const DEFAULT_ACTIONS = [
+const DEFAULT_ACTIONS: StyleDefinition[] = [
   {
     style: {
       '--block-width': 'var(--narrow-container-width)',
@@ -75,14 +76,13 @@ const BlockWidthWidget = (props: ButtonsWidgetProps) => {
   const intl = useIntl();
 
   const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  let filteredActions;
-  if (filterActions) {
-    filteredActions = actions.filter((action) =>
-      filterActions.includes(action.name),
-    );
-  } else {
-    filteredActions = actions;
-  }
+  const filteredActions =
+    filterActions && filterActions.length > 0
+      ? actions.filter((action) => {
+          const actionName = typeof action === 'string' ? action : action.name;
+          return filterActions.includes(actionName);
+        })
+      : actions;
 
   const actionsInfo = {
     ...defaultActionsInfo({ intl }),

package/src/components/Widgets/Buttons.tsx

@@ -3,25 +3,15 @@ import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWr
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { Button } from '@plone/components';
 import isEqual from 'lodash/isEqual';
-import find from 'lodash/find';
-
-export type Actions =
-  | {
-      name: string;
-      label: string;
-      style: Record<`--${string}`, string>;
-    }
-  | {
-      name: string;
-      label: string;
-      style: undefined;
-    };
+import type { StyleDefinition } from '@plone/types';
 
 /**
  * A tuple that has an icon in the first element and a i18n string in the second.
  */
 export type ActionInfo = [React.ReactElement<any>, string] | [string, string];
 
+type ActionValue = string | Record<`--${string}`, string>;
+
 export type ButtonsWidgetProps = {
   /**
    * Unique identifier for the widget.
@@ -31,84 +21,121 @@ export type ButtonsWidgetProps = {
   /**
    * Callback function to handle changes.
    */
-  onChange: Function;
+  onChange: (id: string, value: ActionValue) => void;
 
   /**
    * List of actions available for the widget.
    */
-  actions: Actions[];
+  actions?: Array<StyleDefinition | string>;
 
   /**
    * Map containing additional the information (icon and i18n string) for each action.
    */
-  actionsInfoMap: Record<string, ActionInfo>;
+  actionsInfoMap?: Record<string, ActionInfo>;
 
   /**
    * List of actions to be filtered out. In case that we don't want the default ones
    * we can filter them out.
    */
-  filterActions: string[];
+  filterActions?: string[];
 
   /**
    * Current value of the widget.
    */
-  value: string;
+  value?: ActionValue;
 
   /**
    * Default value of the widget.
    */
-  default: string;
+  default?: ActionValue;
 
   /**
    * Indicates if the widget is disabled.
    */
-  disabled: boolean;
+  disabled?: boolean;
 
   /**
    * Indicates if the widget is disabled (alternative flag for compatibility reasons).
    */
-  isDisabled: boolean;
+  isDisabled?: boolean;
+  [key: string]: any;
+};
+
+type NormalizedAction = {
+  name: string;
+  value: ActionValue;
 };
 
 const ButtonsWidget = (props: ButtonsWidgetProps) => {
-  const { disabled, id, onChange, actions, actionsInfoMap, value, isDisabled } =
-    props;
+  const {
+    disabled,
+    id,
+    onChange,
+    actions = [],
+    actionsInfoMap,
+    value,
+    isDisabled,
+    default: defaultValue,
+  } = props;
+  const normalizedActions = React.useMemo<NormalizedAction[]>(
+    () =>
+      actions.map((action) =>
+        typeof action === 'string'
+          ? { name: action, value: action }
+          : {
+              name: action.name,
+              value: action.style ?? action.name,
+            },
+      ),
+    [actions],
+  );
 
   React.useEffect(() => {
-    if (!props.value && props.default) {
-      props.onChange(
-        props.id,
-        find(actions, { name: props.default })?.style || props.default,
-      );
+    if (!value && defaultValue) {
+      const nextValue =
+        typeof defaultValue === 'string'
+          ? normalizedActions.find(({ name }) => name === defaultValue)
+              ?.value ?? defaultValue
+          : defaultValue;
+
+      onChange(id, nextValue);
     }
-  });
+  }, [defaultValue, id, normalizedActions, onChange, value]);
 
   return (
     <FormFieldWrapper {...props} className="widget">
       <div className="buttons buttons-widget">
-        {actions.map((action) => (
-          <Button
-            key={action.name}
-            aria-label={actionsInfoMap[action.name][1]}
-            onPress={() => onChange(id, action.style || action.name)}
-            className={
-              isEqual(value, action.style || action.name) ? 'active' : null
-            }
-            isDisabled={disabled || isDisabled}
-          >
-            {typeof actionsInfoMap[action.name][0] === 'string' ? (
-              <div className="image-sizes-text">
-                {actionsInfoMap[action.name][0]}
-              </div>
-            ) : (
-              <Icon
-                name={actionsInfoMap[action.name][0]}
-                title={actionsInfoMap[action.name][1] || action.name}
-                size="24px"
-              />
-            )}
-          </Button>
-        ))}
+        {normalizedActions.map((action) => {
+          const actionInfo = actionsInfoMap?.[action.name];
+          const [iconOrText, ariaLabel] = actionInfo ?? [
+            action.name,
+            action.name,
+          ];
+
+          return (
+            <Button
+              key={action.name}
+              aria-label={ariaLabel}
+              onPress={() => onChange(id, action.value)}
+              className={
+                isEqual(value, action.value)
+                  ? 'react-aria-Button active'
+                  : 'react-aria-Button'
+              }
+              isDisabled={disabled || isDisabled}
+            >
+              {typeof iconOrText === 'string' ? (
+                <div className="image-sizes-text">{iconOrText}</div>
+              ) : (
+                <Icon
+                  name={iconOrText}
+                  title={ariaLabel || action.name}
+                  size="24px"
+                />
+              )}
+            </Button>
+          );
+        })}
       </div>
     </FormFieldWrapper>
   );

package/src/components/Widgets/ObjectList.tsx

@@ -215,8 +215,14 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
                 intl,
               });
 
-              onChange(id, [...(value || []), dataWithDefaults]);
-              setActiveObject(value?.length || 0);
+              const newValue = [...(value || []), dataWithDefaults];
+
+              onChange(id, newValue);
+
+              // Set active the new object ensuring the state is updated after adding the new item
+              setTimeout(() => {
+                setActiveObject(newValue.length - 1);
+              }, 0);
             }}
           >
             <Icon name={addSVG} size="18px" />

package/src/components/Widgets/Size.tsx

@@ -4,6 +4,7 @@ import ButtonsWidget, {
   type ButtonsWidgetProps,
 } from './Buttons';
 import type { IntlShape } from 'react-intl';
+import type { StyleDefinition } from '@plone/types';
 
 const messages = defineMessages({
   s: {
@@ -30,18 +31,21 @@ export const defaultActionsInfo = ({
   l: ['L', intl.formatMessage(messages.l)],
 });
 
-const DEFAULT_ACTIONS = [
+const DEFAULT_ACTIONS: StyleDefinition[] = [
   {
     name: 's',
     label: 'Small',
+    style: undefined,
   },
   {
     name: 'm',
     label: 'Medium',
+    style: undefined,
   },
   {
     name: 'l',
     label: 'Large',
+    style: undefined,
   },
 ];
 
@@ -49,14 +53,13 @@ const SizeWidget = (props: ButtonsWidgetProps) => {
   const intl = useIntl();
 
   const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  let filteredActions;
-  if (filterActions) {
-    filteredActions = actions.filter((action) =>
-      filterActions.includes(action.name),
-    );
-  } else {
-    filteredActions = actions;
-  }
+  const filteredActions =
+    filterActions && filterActions.length > 0
+      ? actions.filter((action) => {
+          const actionName = typeof action === 'string' ? action : action.name;
+          return filterActions.includes(actionName);
+        })
+      : actions;
 
   const actionsInfo = {
     ...defaultActionsInfo({ intl }),

package/src/config/blocks.tsx

@@ -46,8 +46,6 @@ import SearchBlockViewEvent from '../components/Blocks/EventCalendar/Search/Sear
 import SearchBlockEditEvent from '../components/Blocks/EventCalendar/Search/SearchBlockEdit';
 import SearchBlockSchemaEvent from '../components/Blocks/EventCalendar/Search/schema';
 import EventCalenderTemplate from '../components/Blocks/EventCalendar/Search/components/EventTemplate';
-import SliderVariants from '../components/Blocks/Slider/SliderVariants';
-import DefaultBody from '../customizations/@kitconcept/volto-slider-block/components/DefaultBody';
 
 declare module '@plone/types' {
   export interface BlocksConfigData {
@@ -403,10 +401,10 @@ export default function install(config: ConfigType) {
 
   // Check if the separator is present before enhancing it
   if (config.blocks.blocksConfig?.separator?.id) {
-    config.blocks.blocksConfig.separator = {
-      ...config.blocks.blocksConfig.separator,
-      schemaEnhancer: SeparatorStylingSchema,
-    };
+    config.blocks.blocksConfig.separator.schemaEnhancer = composeSchema(
+      config.blocks.blocksConfig.separator.schemaEnhancer,
+      SeparatorStylingSchema,
+    );
   }
 
   // TOC Block
@@ -418,24 +416,7 @@ export default function install(config: ConfigType) {
   };
 
   // Slider Block
-  config.blocks.blocksConfig.slider = {
-    ...config.blocks.blocksConfig.slider,
-    variations: [
-      {
-        id: 'default',
-        title: 'Default',
-        isDefault: true,
-        view: DefaultBody,
-      },
-
-      {
-        id: 'simple',
-        title: 'Simple',
-        view: SliderVariants,
-      },
-    ],
-    schemaEnhancer: sliderBlockSchemaEnhancer,
-  };
+  config.blocks.blocksConfig.slider.schemaEnhancer = sliderBlockSchemaEnhancer;
 
   return config;
 }