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

package/.changelog.draft

@@ -1,7 +1,15 @@
-## 7.3.1 (2025-10-08)
+## 8.0.0-alpha.0 (2025-10-24)
 
-### Bugfix
+### Breaking
 
-- Several fixes. Update to use Volto 18.28.0. @sneridagh 
+- 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)
+
+### 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)
 
 

package/CHANGELOG.md

@@ -8,6 +8,20 @@
 
 <!-- towncrier release notes start -->
 
+## 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)
+
+### 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)
+
 ## 7.3.1 (2025-10-08)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.3.1",
+  "version": "8.0.0-alpha.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -45,7 +45,7 @@
     "release-it": "^19.0.3",
     "typescript": "^5.7.3",
     "vitest": "^3.1.2",
-    "@plone/types": "1.4.5"
+    "@plone/types": "2.0.0-alpha.7"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -57,23 +57,10 @@
     "react-aria-components": "^1.7.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
-    "@plone/components": "^3.0.2"
+    "@plone/components": "^4.0.0-alpha.1"
   },
   "peerDependencies": {
-    "@eeacms/volto-accordion-block": "^10.4.6",
-    "@kitconcept/volto-banner-block": "^1.1.0",
-    "@kitconcept/volto-bm3-compat": "^1.0.0-alpha.1",
-    "@kitconcept/volto-button-block": "^4.0.0-alpha.0",
-    "@kitconcept/volto-carousel-block": "^2.0.0-alpha.3",
-    "@kitconcept/volto-dsgvo-banner": "^2.5.1",
-    "@kitconcept/volto-heading-block": "^2.5.0",
-    "@kitconcept/volto-highlight-block": "^4.4.0",
-    "@kitconcept/volto-introduction-block": "^1.1.0",
-    "@kitconcept/volto-logos-block": "^3.0.0-alpha.1",
-    "@kitconcept/volto-separator-block": "^4.2.1",
-    "@kitconcept/volto-slider-block": "^6.4.0",
-    "@plonegovbr/volto-social-media": "^2.0.0-alpha.10",
-    "classnames": "^2.2.6",
+    "classnames": "^2.5.1",
     "lodash": "4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/components/Blocks/Block/Edit.jsx

@@ -151,7 +151,7 @@ export class Edit extends Component {
    */
   render() {
     const { blocksConfig = config.blocks.blocksConfig } = this.props;
-    const { editable, type } = this.props;
+    const { editable, type, isContainer: parentIsContainer } = this.props;
     const required = isBoolean(this.props.data.required)
       ? this.props.data.required
       : includes(config.blocks.requiredBlocks, type);
@@ -275,6 +275,7 @@ export class Edit extends Component {
                 selected: this.props.selected || this.props.multiSelected,
                 multiSelected: this.props.multiSelected,
                 hovered: this.props.hovered === this.props.id,
+                error: !!this.props.blocksErrors?.[this.props.id],
               },
             )}
             ref={this.blockNode}
@@ -291,6 +292,7 @@ export class Edit extends Component {
                 {...this.props}
                 blockNode={this.blockNode}
                 data={this.props.data}
+                className={cx({ contained: parentIsContainer })}
               />
             </MaybeWrap>
 
@@ -433,6 +435,7 @@ export class Edit extends Component {
               selected: this.props.selected || this.props.multiSelected,
               multiSelected: this.props.multiSelected,
               hovered: this.props.hovered === this.props.id,
+              error: !!this.props.blocksErrors?.[this.props.id],
             })}
             // END CUSTOMIZATION
             style={{ outline: 'none' }}

package/src/components/Blocks/Block/EditBlockWrapper.jsx

@@ -21,9 +21,13 @@ import BlockChooserButton from '@plone/volto/components/manage/BlockChooser/Bloc
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
-  delete: {
-    id: 'delete',
-    defaultMessage: 'delete',
+  delete_block: {
+    id: 'delete_block',
+    defaultMessage: 'delete {type} block',
+  },
+  drag_block: {
+    id: 'drag_block',
+    defaultMessage: 'drag {type} block',
   },
 });
 
@@ -99,6 +103,7 @@ const EditBlockWrapper = (props) => {
           }}
           {...draginfo.dragHandleProps}
           className="drag handle wrapper"
+          aria-label={intl.formatMessage(messages.drag_block, { type })}
         >
           <Icon name={dragSVG} size="18px" />
         </div>
@@ -111,7 +116,7 @@ const EditBlockWrapper = (props) => {
               basic
               onClick={() => onDeleteBlock(block, true)}
               className="delete-button"
-              aria-label={intl.formatMessage(messages.delete)}
+              aria-label={intl.formatMessage(messages.delete_block, { type })}
             >
               <Icon name={trashSVG} size="18px" />
             </Button>

package/src/components/Blocks/Image/ImageSidebar.jsx

@@ -11,7 +11,15 @@ import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const ImageSidebar = (props) => {
-  const { blocksConfig, data, block, onChangeBlock } = props;
+  const {
+    blocksConfig,
+    blocksErrors,
+    data,
+    block,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const intl = useIntl();
   const schema = ImageSchema({ formData: data, intl });
   // START CUSTOMIZATION
@@ -26,6 +34,7 @@ const ImageSidebar = (props) => {
         </h2>
         <Button.Group>
           <Button
+            type="button"
             title={intl.formatMessage(messages.clear)}
             basic
             disabled={!data.url}
@@ -107,6 +116,9 @@ const ImageSidebar = (props) => {
         formData={data}
         block={block}
         blocksConfig={blocksConfig}
+        navRoot={navRoot}
+        contentType={contentType}
+        errors={blocksErrors}
       />
     </>
   );

package/src/components/Blocks/Slider/DefaultBody.jsx

@@ -30,6 +30,7 @@ const messages = defineMessages({
   },
 });
 
+// eslint-disable-next-line no-restricted-syntax
 const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
 
 const SliderBody = ({
@@ -78,7 +79,7 @@ const SliderBody = ({
       {!href && isEditMode && (
         <Message>
           <div className="grid-teaser-item default">
-            <img src={imageBlockSVG} alt="" />
+            <Image src={imageBlockSVG} alt="" />
             <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             <div className="toolbar-inner">
               <Button.Group>

package/src/components/Blocks/Slider/SliderVariants.jsx

@@ -30,6 +30,7 @@ const messages = defineMessages({
   },
 });
 
+// eslint-disable-next-line no-restricted-syntax
 const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
 
 const SliderVariants = ({
@@ -78,7 +79,7 @@ const SliderVariants = ({
       {!href && isEditMode && (
         <Message>
           <div className="grid-teaser-item default">
-            <img src={imageBlockSVG} alt="" />
+            <Image src={imageBlockSVG} alt="" />
             <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             <div className="toolbar-inner">
               <Button.Group>

package/src/components/Blocks/Slider/View.jsx

@@ -116,6 +116,7 @@ const SliderView = (props) => {
         {(data.slides?.length === 0 || !data.slides) && isEditMode && (
           <Message>
             <div className="teaser-item default">
+              {/* eslint-disable-next-line no-restricted-syntax */}
               <img src={teaserTemplate} alt="" />
               <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             </div>

package/src/components/Theme/RenderBlocks.jsx

@@ -80,6 +80,7 @@ const RenderBlocks = (props) => {
                   content={content}
                   data={blockData}
                   blocksConfig={blocksConfig}
+                  isContainer={isContainer}
                 >
                   <Block
                     id={block}

package/src/components/Widgets/ColorPicker.tsx

@@ -1,7 +1,8 @@
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
-import { ColorSwatch, CloseIcon } from '@plone/components';
+import { ColorSwatch } from '@plone/components';
+import { CloseIcon } from '@plone/components/Icons';
 import ColorContrastChecker from './ColorContrastChecker';
 import config from '@plone/volto/registry';
 

package/src/components/LanguageSelector/LanguageSelector.jsx

@@ -1,76 +0,0 @@
-/**
- * Language selector component.
- * @module components/LanguageSelector/LanguageSelector
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-
-import { useSelector } from 'react-redux';
-import cx from 'classnames';
-import { find, map } from 'lodash';
-
-import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
-
-import config from '@plone/volto/registry';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-const messages = defineMessages({
-  switchLanguageTo: {
-    id: 'Switch to',
-    defaultMessage: 'Switch to',
-  },
-});
-
-const LanguageSelector = (props) => {
-  const intl = useIntl();
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-
-  const { settings } = config;
-
-  return settings.isMultilingual ? (
-    <div className="language-selector">
-      {map(settings.supportedLanguages, (lang) => {
-        const translation = find(translations, { language: lang });
-        return (
-          <Link
-            aria-label={`${intl.formatMessage(
-              messages.switchLanguageTo,
-            )} ${langmap[lang].nativeName.toLowerCase()}`}
-            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
-            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[lang].nativeName}
-            onClick={() => {
-              props.onClickAction();
-            }}
-            key={`language-selector-${lang}`}
-          >
-            {langmap[lang].nativeName}
-          </Link>
-        );
-      })}
-    </div>
-  ) : (
-    <Helmet>
-      <html lang={toReactIntlLang(settings.defaultLanguage)} />
-    </Helmet>
-  );
-};
-
-LanguageSelector.propTypes = {
-  onClickAction: PropTypes.func,
-};
-
-LanguageSelector.defaultProps = {
-  onClickAction: () => {},
-};
-
-export default LanguageSelector;

package/src/customizations/volto/components/theme/LanguageSelector/LanguageSelector.js

@@ -1,11 +0,0 @@
-/**
- * OVERRIDE LanguageSelector.js
- * REASON: This theme uses a custom pre-@plone/components component
- * SemanticUI-free located at the components folder.
- * To override it, override the @kitconcept/volto-light-theme one instead of
- * this one.
- */
-
-import LanguageSelector from '../../../../../components/LanguageSelector/LanguageSelector';
-
-export default LanguageSelector;