@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/components/Widgets/ThemeColorSwatch.tsx

@@ -2,16 +2,12 @@ import ColorSwatchWidget from './ColorSwatch';
 import config from '@plone/volto/registry';
 import type { ColorSwatchProps } from './ColorSwatch';
 
-const ThemeColorSwatch = (props: ColorSwatchProps) => {
-  const colors: ColorSwatchProps['colors'] = config.blocks.themes;
+const ThemeColorSwatch = (
+  props: Omit<ColorSwatchProps, 'themes' | 'colors'>,
+) => {
+  const themes: ColorSwatchProps['themes'] = config.blocks.themes;
 
-  const defaultValue = colors.find(
-    (color) => color.name === config.settings.defaultBackgroundColor,
-  )?.style;
-
-  return (
-    <ColorSwatchWidget {...props} default={defaultValue} colors={colors} />
-  );
+  return <ColorSwatchWidget {...props} themes={themes} />;
 };
 
 export default ThemeColorSwatch;

package/src/config/blocks.tsx

@@ -4,8 +4,12 @@ import type { StyleDefinition } from '@plone/types';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { composeSchema } from '@plone/volto/helpers/Extensions';
-import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
 import { defaultStylingSchema } from '../components/Blocks/schema';
+import {
+  blockThemesEnhancer,
+  styleDefinitionsEnhancer,
+} from '../helpers/styleDefinitions';
+
 import {
   gridTeaserDisableStylingSchema,
   teaserSchemaEnhancer,
@@ -26,6 +30,8 @@ import {
   standAloneImageBlockSchemaEnhancer,
 } from '../components/Blocks/Image/schema';
 import { ImageBlockDataAdapter } from '../components/Blocks/Image/adapter';
+import { VideoBlockDataAdapter } from '../components/Blocks/Video/adapter';
+import { MapsBlockDataAdapter } from '../components/Blocks/Maps/adapter';
 
 import { AccordionSchemaEnhancer } from '../components/Blocks/Accordion/schema';
 
@@ -40,7 +46,6 @@ import { tocBlockSchemaEnhancer } from '../components/Blocks/Toc/schema';
 import { mapsBlockSchemaEnhancer } from '../components/Blocks/Maps/schema';
 import { sliderBlockSchemaEnhancer } from '../components/Blocks/Slider/schema';
 import EventMetadataView from '../components/Blocks/EventMetadata/View';
-import isEmpty from 'lodash/isEmpty';
 
 import SearchBlockViewEvent from '../components/Blocks/EventCalendar/Search/SearchBlockView';
 import SearchBlockEditEvent from '../components/Blocks/EventCalendar/Search/SearchBlockEdit';
@@ -51,6 +56,7 @@ declare module '@plone/types' {
   export interface BlocksConfigData {
     introduction: BlockConfigBase;
     heading: BlockConfigBase;
+    banner: BlockConfigBase;
     __button: BlockConfigBase;
     separator: BlockConfigBase;
     slider: BlockConfigBase;
@@ -62,6 +68,8 @@ declare module '@plone/types' {
   }
   export interface BlockConfigBase {
     themes?: StyleDefinition[];
+    alignments?: StyleDefinition[];
+    defaultTheme: string;
     allowedBlocks?: string[];
     allowed_headline_tags?: string[][];
     unwantedButtons?: string[];
@@ -76,6 +84,10 @@ declare module '@plone/types' {
   export interface SettingsConfig {
     blockModel?: number;
   }
+
+  export interface BlocksConfig {
+    alignments: StyleDefinition[];
+  }
 }
 
 export default function install(config: ConfigType) {
@@ -142,31 +154,30 @@ export default function install(config: ConfigType) {
     },
   ];
 
-  function blockThemesEnhancer({ data, container }) {
-    if (!data['@type']) return {};
-    const blockConfig = config.blocks.blocksConfig[data['@type']];
-    if (!blockConfig) return {};
-    const blockStyleDefinitions =
-      // We look up for the blockThemes in the block's config, then in the global config
-      // We keep `colors` for BBB, but `themes` should be used
-      blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
-
-    if (
-      !isEmpty(container) &&
-      container.theme &&
-      (!data.theme || data.theme === 'default')
-    ) {
-      return findStyleByName(blockStyleDefinitions, container.theme);
-    }
-    if (data.theme) {
-      return data.theme
-        ? findStyleByName(blockStyleDefinitions, data.theme)
-        : {};
-    } else {
-      // No theme, return default color
-      return findStyleByName(config.blocks.themes, 'default');
-    }
-  }
+  // Default block alignments
+  config.blocks.alignments = [
+    {
+      style: {
+        '--block-alignment': 'var(--align-left)',
+      },
+      name: 'left',
+      label: 'Left',
+    },
+    {
+      style: {
+        '--block-alignment': 'var(--align-center)',
+      },
+      name: 'center',
+      label: 'Center',
+    },
+    {
+      style: {
+        '--block-alignment': 'var(--align-right)',
+      },
+      name: 'right',
+      label: 'Right',
+    },
+  ];
 
   config.registerUtility({
     name: 'blockThemesEnhancer',
@@ -174,6 +185,26 @@ export default function install(config: ConfigType) {
     method: blockThemesEnhancer,
   });
 
+  config.registerUtility({
+    name: 'styleDefinitionsEnhancer',
+    type: 'styleWrapperStyleObjectEnhancer',
+    method: styleDefinitionsEnhancer,
+  });
+
+  config.registerUtility({
+    name: 'align:noprefix',
+    type: 'styleFieldDefinition',
+    method: ({ data }: { data: { '@type'?: string } }) =>
+      config.blocks.blocksConfig?.[data?.['@type'] ?? '']?.alignments ||
+      config.blocks.alignments,
+  });
+
+  config.registerUtility({
+    name: 'blockWidth:noprefix',
+    type: 'styleFieldDefinition',
+    method: () => config.blocks.widths,
+  });
+
   // No required blocks except eventMetadata
   config.blocks.requiredBlocks = [
     ...config.blocks.requiredBlocks,
@@ -314,6 +345,10 @@ export default function install(config: ConfigType) {
       ),
     );
 
+  config.blocks.blocksConfig.banner = {
+    ...config.blocks.blocksConfig.banner,
+    schemaEnhancer: defaultStylingSchema,
+  };
   config.blocks.blocksConfig.introduction = {
     ...config.blocks.blocksConfig.introduction,
     unwantedButtons: ['heading-three', 'blockquote'],
@@ -334,15 +369,25 @@ export default function install(config: ConfigType) {
     category: 'title',
   };
 
+  const getTeaserSizes = ({ inGrid = false, columns = 1 } = {}) => {
+    const { defaultContainerWidth, tabletBreakpoint } = config.settings.layout;
+    const desktopWidth = Math.floor(
+      defaultContainerWidth / (inGrid ? columns : 2),
+    );
+    return `(max-width: ${tabletBreakpoint}px) 100vw, ${desktopWidth}px`;
+  };
+
   config.blocks.blocksConfig.teaser = {
     ...config.blocks.blocksConfig.teaser,
     group: 'teasers',
     imageScale: 'larger',
+    getSizes: getTeaserSizes,
     schemaEnhancer: composeSchema(defaultStylingSchema, teaserSchemaEnhancer),
   };
 
   config.blocks.blocksConfig.video = {
     ...config.blocks.blocksConfig.video,
+    dataAdapter: VideoBlockDataAdapter,
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       videoBlockSchemaEnhancer,
@@ -350,6 +395,7 @@ export default function install(config: ConfigType) {
   };
   config.blocks.blocksConfig.maps = {
     ...config.blocks.blocksConfig.maps,
+    dataAdapter: MapsBlockDataAdapter,
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       mapsBlockSchemaEnhancer,
@@ -416,7 +462,16 @@ export default function install(config: ConfigType) {
   };
 
   // Slider Block
-  config.blocks.blocksConfig.slider.schemaEnhancer = sliderBlockSchemaEnhancer;
+  config.blocks.blocksConfig.slider = {
+    ...config.blocks.blocksConfig.slider,
+    schemaEnhancer: sliderBlockSchemaEnhancer,
+  };
+
+  // Highlight Block
+  config.blocks.blocksConfig.highlight = {
+    ...config.blocks.blocksConfig.highlight,
+    schemaEnhancer: defaultStylingSchema,
+  };
 
   return config;
 }

package/src/config/classExtenders.ts

@@ -1,6 +1,5 @@
 import type { ConfigType } from '@plone/registry';
 import { getPreviousNextBlock } from '@plone/volto/helpers/Blocks/Blocks';
-import { getCurrentStyleByName } from '../helpers/helpers';
 
 export default function install(config: ConfigType) {
   // Register custom StyleWrapper ClassNames
@@ -71,15 +70,17 @@ export default function install(config: ConfigType) {
   config.settings.styleClassNameExtenders.push(
     ({ data, classNames }: { data: any; classNames: Array<string> }) => {
       const currentBlockWidth =
-        getCurrentStyleByName(
-          config.blocks.widths,
-          'blockWidth:noprefix',
-          data,
-        ) || 'default';
-      if (currentBlockWidth) {
-        return [...classNames, `has--block-width--${currentBlockWidth}`];
-      }
-      return classNames;
+        data?.styles?.['blockWidth:noprefix'] || 'default';
+      return [...classNames, `has--block-width--${currentBlockWidth}`];
+    },
+  );
+
+  // Blocks alignment convenience classes injection
+  config.settings.styleClassNameExtenders.push(
+    ({ data, classNames }: { data: any; classNames: Array<string> }) => {
+      const currentBlockAlignment =
+        data?.styles?.['align:noprefix'] || 'center';
+      return [...classNames, `has--block-alignment--${currentBlockAlignment}`];
     },
   );
 

package/src/config/settings.ts

@@ -28,6 +28,12 @@ export default function install(config: ConfigType) {
   config.settings.contentMetadataTagsImageField = 'preview_image';
   config.settings.querystringSearchGet = true;
 
+  config.settings.layout = {
+    ...config.settings.layout,
+    defaultContainerWidth: 940,
+    tabletBreakpoint: 768,
+  };
+
   config.settings.slidingSearchAnimation = true;
   config.settings.openExternalLinkInNewTab = true;
 

package/src/config/slots.ts

@@ -5,6 +5,7 @@ import FollowUsLogoAndLinks from '../components/Footer/slots/FollowUsLogoAndLink
 import Colophon from '../components/Footer/slots/Colophon';
 import CoreFooter from '../components/Footer/slots/CoreFooter';
 import StickyMenu from '../components/StickyMenu/StickyMenu';
+import MobileStickyMenu from '../components/StickyMenu/MobileStickyMenu';
 import Anontools from '../components/Anontools/Anontools';
 import type { Content } from '@plone/types';
 
@@ -57,5 +58,11 @@ export default function install(config: ConfigType) {
     component: Colophon,
   });
 
+  config.registerSlotComponent({
+    name: 'MobileStickyMenu',
+    slot: 'preFooter',
+    component: MobileStickyMenu,
+  });
+
   return config;
 }

package/src/config/widgets.ts

@@ -1,8 +1,5 @@
 import type { ConfigType } from '@plone/registry';
-import BlockWidth from '../components/Widgets/BlockWidth';
-import BlockAlignment from '../components/Widgets/BlockAlignment';
 import ColorSwatch from '../components/Widgets/ColorSwatch';
-import Size from '../components/Widgets/Size';
 import ColorPicker from '../components/Widgets/ColorPicker';
 import ThemeColorSwatch from '../components/Widgets/ThemeColorSwatch';
 // import BlocksObject from '../components/Widgets/BlocksObject';
@@ -12,7 +9,8 @@ import { footerLogosSchema } from '../components/Widgets/schema/footerLogosSchem
 import { footerLinksSchema } from '../components/Widgets/schema/footerLinksSchema';
 import { iconLinkListSchema } from '../components/Widgets/schema/iconLinkListSchema';
 import ModalJSONEditor from '../components/Widgets/ModalJSONEditor';
-import AlignWidget from '../components/Widgets/AlignWidget';
+import SoftTextWidget from '../components/Widgets/SoftTextWidget';
+import SoftTextareaWidget from '../components/Widgets/SoftTextareaWidget';
 
 export default function install(config: ConfigType) {
   // Color picker widget override - use our own non-semanticUI widget
@@ -20,21 +18,19 @@ export default function install(config: ConfigType) {
   // `color_picker` is a terrible name for this widget, it should be `colorSwatch`
   // ToDo: Rename it in Volto 19
   config.widgets.widget.color_picker = ColorSwatch;
+  config.widgets.widget.colorSwatch = ColorSwatch;
 
   // ObjectList widget override - use our own non-semanticUI widget
   // it uses also dnd-kit for drag and drop
   config.widgets.widget.object_list = ObjectList;
 
-  config.widgets.widget.align = AlignWidget;
-
   // Force Preview image link widget to the image widget
   config.widgets.id.preview_image_link = config.widgets.widget.image;
 
-  config.widgets.widget.blockWidth = BlockWidth;
-  config.widgets.widget.blockAlignment = BlockAlignment;
   config.widgets.widget.colorPicker = ColorPicker;
-  config.widgets.widget.size = Size;
   config.widgets.widget.themeColorSwatch = ThemeColorSwatch;
+  config.widgets.widget.softTextWidget = SoftTextWidget;
+  config.widgets.widget.softTextareaWidget = SoftTextareaWidget;
 
   config.widgets.widget.modalJSONEditor = ModalJSONEditor;
 

package/src/customizations/volto/components/manage/Blocks/Maps/MapsSidebar.jsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE MapsSidebar.jsx
+ * REASON: Route field changes through dataAdapter to enforce default block width when floating.
+ * DATE: 2026-04-16
+ * DEVELOPER: @danalvrz
+ */
+
+import MapsSidebar from '../../../../../../components/Blocks/Maps/MapsSidebar';
+
+export default MapsSidebar;

package/src/customizations/volto/components/manage/Blocks/Maps/View.jsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE View.jsx
+ * REASON: Use align:noprefix and blockWidth:noprefix CSS custom properties instead of align class.
+ * DATE: 2026-04-16
+ * DEVELOPER: @danalvrz
+ */
+
+import MapsView from '../../../../../../components/Blocks/Maps/View';
+
+export default MapsView;

package/src/customizations/volto/components/manage/Blocks/Video/VideoSidebar.jsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE VideoSidebar.jsx
+ * REASON: Route field changes through dataAdapter to enforce default block width when floating.
+ * DATE: 2026-04-16
+ * DEVELOPER: @danalvrz
+ */
+
+import VideoSidebar from '../../../../../../components/Blocks/Video/VideoSidebar';
+
+export default VideoSidebar;

package/src/customizations/volto/components/manage/Blocks/Video/View.jsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE View.jsx
+ * REASON: Use align:noprefix and blockWidth:noprefix CSS custom properties instead of align class.
+ * DATE: 2026-04-16
+ * DEVELOPER: @danalvrz
+ */
+
+import VideoView from '../../../../../../components/Blocks/Video/View';
+
+export default VideoView;

package/src/customizations/volto/components/manage/DragDropList/DragDropList.jsx

@@ -0,0 +1,263 @@
+/**
+ * OVERRIDE: DragDropList.jsx
+ * REASON: Adding BlockModelv3 guards and customizations.
+ *  Not moved to core yet, and as it's temporary, we keep it here.
+ * DATE: 2025-12-01
+ * DEVELOPER: @sneridagh
+ */
+
+import React, { useRef } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { v4 as uuid } from 'uuid';
+import config from '@plone/volto/registry';
+
+const getVerticalPlaceholder = (
+  draggedDOM,
+  sourceIndex,
+  destinationIndex,
+  parentDOM,
+) => {
+  // Because of the margin rendering rules, there is no easy
+  // way to calculate the offset of the placeholder.
+  //
+  // (Note that this is the reason we cannot use the solutions
+  // published on the net, because they assume that we are in control
+  // of the content and there are no additional margins involved.)
+  //
+  // To get a placeholder that looks good in all cases, we
+  // fill up the space between the previous and the next element.
+  const childrenArray = [...parentDOM.children];
+  // Remove the source element
+  childrenArray.splice(sourceIndex, 1);
+  // Also remove the placeholder that the library always inserts at the end
+  childrenArray.splice(-1, 1);
+  const parentRect = parentDOM.getBoundingClientRect();
+  const prevNode = childrenArray[destinationIndex - 1];
+  const nextNode = childrenArray[destinationIndex];
+  let top, bottom;
+  if (prevNode) {
+    const prevRect = prevNode.getBoundingClientRect();
+    top = prevRect.top + prevRect.height - parentRect.top;
+  } else {
+    top = 0;
+  }
+  if (nextNode) {
+    const nextRect = nextNode.getBoundingClientRect();
+    bottom = nextRect.top - parentRect.top;
+  } else {
+    bottom =
+      parentRect.bottom +
+      draggedDOM.getBoundingClientRect().height -
+      parentRect.top;
+  }
+  return {
+    clientY: top,
+    clientHeight: bottom - top,
+    clientX: parseFloat(window.getComputedStyle(parentDOM).paddingLeft),
+    clientWidth: draggedDOM.clientWidth,
+  };
+};
+
+const getHorizontalPlaceholder = (draggedDOM, destinationIndex, parentDOM) => {
+  // The next element will be the one with a gray placeholder behind it.
+  //
+  // If the element is the last (doesn't have a next element), the whole draggable
+  // area will be highlighted
+
+  const parentRect = parentDOM.getBoundingClientRect();
+  let height;
+
+  height = parentRect.bottom - parentRect.top;
+
+  let clientWidth = draggedDOM.clientWidth;
+
+  let innerDroppablePlaceholderMarginLeft =
+    parentDOM.children[destinationIndex].getBoundingClientRect().x;
+  if (parentDOM.children.length - 1 === destinationIndex) {
+    innerDroppablePlaceholderMarginLeft = parentRect.x;
+    clientWidth = parentDOM.getBoundingClientRect().width;
+  }
+  return {
+    clientY: 0,
+    clientHeight: height,
+    clientX: parseFloat(innerDroppablePlaceholderMarginLeft - parentRect.x),
+    clientWidth: clientWidth,
+  };
+};
+
+const DragDropList = (props) => {
+  const {
+    childList,
+    children,
+    direction = 'vertical',
+    onMoveItem,
+    as = 'div',
+    style,
+    forwardedAriaLabelledBy,
+    reactBeautifulDnd,
+  } = props; //renderChild
+  const { DragDropContext, Draggable, Droppable } = reactBeautifulDnd;
+  const [placeholderProps, setPlaceholderProps] = React.useState({});
+  const [uid] = React.useState(uuid());
+  // queueing timed action
+  const timer = useRef(null);
+  const parentRef = useRef(null);
+  const onDragStart = React.useCallback(
+    (event) => {
+      clearTimeout(timer.current);
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${event.draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = event.source.index;
+      setPlaceholderProps(
+        direction === 'horizontal'
+          ? getHorizontalPlaceholder(draggedDOM, sourceIndex, parentRef.current)
+          : getVerticalPlaceholder(
+              draggedDOM,
+              sourceIndex,
+              sourceIndex,
+              parentRef.current,
+            ),
+      );
+    },
+    [direction],
+  );
+
+  const onDragEnd = React.useCallback(
+    (result) => {
+      clearTimeout(timer.current);
+      onMoveItem(result);
+      setPlaceholderProps({});
+    },
+    [onMoveItem],
+  );
+
+  const onDragUpdate = React.useCallback(
+    (update) => {
+      clearTimeout(timer.current);
+      setPlaceholderProps({});
+      if (!update.destination) {
+        return;
+      }
+      const draggableId = update.draggableId;
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = update.source.index;
+      const destinationIndex = update.destination.index;
+      // Wait until the animations have finished, to make it look good.
+      timer.current = setTimeout(() => {
+        setPlaceholderProps(
+          direction === 'horizontal'
+            ? getHorizontalPlaceholder(
+                draggedDOM,
+                destinationIndex,
+                parentRef.current,
+              )
+            : getVerticalPlaceholder(
+                draggedDOM,
+                sourceIndex,
+                destinationIndex,
+                parentRef.current,
+              ),
+        );
+      }, 250);
+    },
+    [direction],
+  );
+
+  const AsDomComponent = as;
+  return (
+    <DragDropContext
+      onDragStart={onDragStart}
+      onDragUpdate={onDragUpdate}
+      onDragEnd={onDragEnd}
+    >
+      <Droppable
+        droppableId={uid}
+        direction={direction}
+        renderClone={(provided, snapshot, rubric) => {
+          const index = rubric.source.index;
+          return children({
+            child: childList[index][1],
+            childId: childList[index][0],
+            index,
+            draginfo: provided,
+          });
+        }}
+      >
+        {(provided, snapshot) => (
+          <AsDomComponent
+            ref={(el) => {
+              provided.innerRef(el);
+              parentRef.current = el;
+            }}
+            {...provided.droppableProps}
+            style={{ ...style, position: 'relative' }}
+            aria-labelledby={forwardedAriaLabelledBy}
+          >
+            {childList
+              .filter(([id, child]) => id && child) // beware numbers!
+              .map(([childId, child], index) => {
+                const dragDisabled =
+                  config.blocks.blocksConfig?.[child?.['@type']]?.blockModel ===
+                  3;
+                if (!dragDisabled) {
+                  return (
+                    <Draggable
+                      draggableId={childId.toString()}
+                      index={index}
+                      key={childId}
+                      isDragDisabled={!!dragDisabled}
+                      style={{
+                        userSelect: 'none',
+                      }}
+                    >
+                      {(draginfo) =>
+                        children({ child, childId, index, draginfo })
+                      }
+                    </Draggable>
+                  );
+                } else {
+                  return (
+                    <React.Fragment key={childId}>
+                      {children({
+                        child,
+                        childId,
+                        index,
+                        draginfo: { draggableProps: {} },
+                      })}
+                    </React.Fragment>
+                  );
+                }
+              })}
+            {provided.placeholder}
+            {!isEmpty(placeholderProps) && snapshot.isDraggingOver && (
+              <div
+                style={{
+                  position: 'absolute',
+                  top: placeholderProps.clientY,
+                  left: placeholderProps.clientX,
+                  height: placeholderProps.clientHeight,
+                  background: '#eee',
+                  width: placeholderProps.clientWidth,
+                  borderRadius: '3px',
+                  ...(direction === 'horizontal' && { zIndex: -1 }),
+                }}
+              />
+            )}
+          </AsDomComponent>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};
+
+export default injectLazyLibs(['reactBeautifulDnd'])(DragDropList);

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

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE LanguageSelector.tsx
+ * REASON: Show only two letters of the native language name.
+ * 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;