@kitconcept/volto-light-theme 8.0.0-alpha.7 → 8.0.0-alpha.9

package/.changelog.draft

@@ -1,14 +1,16 @@
-## 8.0.0-alpha.7 (2025-11-24)
+## 8.0.0-alpha.9 (2025-12-08)
 
-### Bugfix
+### Feature
 
-- Fix css of unauthorized Page @iRohitSingh [#unauthorizedpageCss](https://github.com/kitconcept/volto-light-theme/pull/unauthorizedpageCss)
-- Fixed Accordion arrow/buttons no longer shrink when the title text becomes too long. @jnptk 
+- Add volto-calendar-block @iRohitSingh 
+- Added cross language support for blocks chooser search @Tishasoumya-02 [#7657](https://github.com/plone/volto/issues/7657)
+  Added support for selecting Path and Depth in the Listing Block’s Location criteria using the ObjectBrowserWidget and NumberWidget. @iFlameing @giuliaghisini [#7661](https://github.com/plone/volto/issues/7661)
+  Added feature of drag and drop files in folder contents. @Tishasoumya-02
+  (Update to Volto 19a9) @sneridagh 
 
-### Internal
+### Bugfix
 
-- Refactoring to TS some components. @sneridagh [#731](https://github.com/kitconcept/volto-light-theme/pull/731)
-- Update to latest RAC to match the @plone/components one. @sneridagh 
-- Use forked Razzle. Update to use Volto 19a14. @sneridagh 
+- Fixed highlight block ENTER, create a new block consistently. Update highlight block to 4.5.1. @sneridagh 
+- Fixed introduction block error on pressing ENTER. Update add-on to 1.2.0. @sneridagh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,29 @@
 
 <!-- towncrier release notes start -->
 
+## 8.0.0-alpha.9 (2025-12-08)
+
+### Feature
+
+- Add volto-calendar-block @iRohitSingh 
+- Added cross language support for blocks chooser search @Tishasoumya-02 [#7657](https://github.com/plone/volto/issues/7657)
+  Added support for selecting Path and Depth in the Listing Block’s Location criteria using the ObjectBrowserWidget and NumberWidget. @iFlameing @giuliaghisini [#7661](https://github.com/plone/volto/issues/7661)
+  Added feature of drag and drop files in folder contents. @Tishasoumya-02
+  (Update to Volto 19a9) @sneridagh 
+
+### Bugfix
+
+- Fixed highlight block ENTER, create a new block consistently. Update highlight block to 4.5.1. @sneridagh 
+- Fixed introduction block error on pressing ENTER. Update add-on to 1.2.0. @sneridagh 
+
+## 8.0.0-alpha.8 (2025-12-01)
+
+### Bugfix
+
+- Improve block model 3 support across views. Fixed nasty BDandD console error. @sneridagh [#740](https://github.com/kitconcept/volto-light-theme/pull/740)
+- Fixed problem with the description not showing in rendering if the description was undefined. @sneridagh 
+- Hide complementary logo in mobile devices @Tishasoumya-02 
+
 ## 8.0.0-alpha.7 (2025-11-24)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.9",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -57,8 +57,8 @@
     "react-aria-components": "^1.13.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
-    "@plone/components": "^4.0.0-alpha.4",
-    "@kitconcept/volto-bm3-compat": "^1.0.0-alpha.1"
+    "@kitconcept/volto-bm3-compat": "^1.0.0-alpha.1",
+    "@plone/components": "^4.0.0-alpha.4"
   },
   "peerDependencies": {
     "classnames": "^2.5.1",

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

@@ -84,7 +84,15 @@ const EditBlockWrapper = (props) => {
     style: { ...style, ...draginfo.draggableProps.style },
   };
 
-  return blocksConfig?.[type]?.blockModel !== 3 ? (
+  if (blocksConfig?.[type]?.blockModel === 3) {
+    // We still need to attach the draggable props/ref so RBD stays happy,
+    // but we skip rendering the drag handle and friends
+    // consider removing the whole EditBlockWrapper for BlockModelv3 blocks in the future
+    // or moving the handlers here.
+    return <>{children}</>;
+  }
+
+  return (
     <div
       ref={draginfo.innerRef}
       {...styleMergedWithDragProps}
@@ -160,8 +168,6 @@ const EditBlockWrapper = (props) => {
         </div>
       </div>
     </div>
-  ) : (
-    <>{children}</>
   );
 };
 

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

@@ -20,19 +20,27 @@ const TeaserDefaultTemplate = (props) => {
   const openLinkInNewTab =
     data.openLinkInNewTab ||
     (openExternalLinkInNewTab && !isInternalURL(href['@id']));
-  const { '@id': id, ...filteredData } = data;
+
+  // Ensures that overridden fields are used when "overwrite" is true
+  // and fallbacks to empty strings if they are not provided to ensure no undefined
+  // values are passed
+  const localOverrides = {
+    title: data.title || '',
+    description: data.description || '',
+    head_title: data.head_title || '',
+  };
 
   return (
     <Card item={showLink ? href : null} openLinkInNewTab={openLinkInNewTab}>
       <Card.Image
         src={url && !image?.image_field ? url : undefined}
-        item={!data.overwrite ? href : { ...href, ...filteredData }}
+        item={!data.overwrite ? href : { ...href, ...localOverrides }}
         image={data.overwrite ? image : undefined}
         imageComponent={Image}
       />
       <Card.Summary>
         <Summary
-          item={!data.overwrite ? href : { ...href, ...filteredData }}
+          item={!data.overwrite ? href : { ...href, ...localOverrides }}
           HeadingTag="h2"
           hide_description={props.data?.hide_description}
         />

package/src/components/Theme/RenderBlocksV2.jsx

@@ -16,6 +16,7 @@ import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBloc
 import cx from 'classnames';
 import { groupByBGColor } from '../../helpers/grouping';
 import ErrorBoundary from '../Blocks/Block/ErrorBoundary';
+import StyleWrapperV3 from './StyleWrapperV3';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -68,6 +69,9 @@ const RenderBlocks = (props) => {
             }
           >
             {group.map((block) => {
+              const currentBlockModel =
+                blocksConfig[content[blocksFieldname]?.[block]?.['@type']]
+                  ?.blockModel;
               const Block =
                 blocksConfig[content[blocksFieldname]?.[block]?.['@type']]
                   ?.view || ViewDefaultBlock;
@@ -104,23 +108,42 @@ const RenderBlocks = (props) => {
                       condition={blockWrapperTag}
                       as={blockWrapperTag}
                     >
-                      <StyleWrapper
-                        key={block}
-                        {...props}
-                        id={block}
-                        block={block}
-                        data={blockData}
-                        isContainer={isContainer}
-                      >
-                        <Block
-                          id={block}
-                          metadata={metadata}
-                          properties={content}
+                      {currentBlockModel === 3 ? (
+                        <StyleWrapperV3
+                          block={block}
+                          content={content}
                           data={blockData}
-                          path={getBaseUrl(location?.pathname || '')}
                           blocksConfig={blocksConfig}
-                        />
-                      </StyleWrapper>
+                          isContainer={isContainer}
+                        >
+                          <Block
+                            id={block}
+                            metadata={metadata}
+                            properties={content}
+                            data={blockData}
+                            path={getBaseUrl(location?.pathname || '')}
+                            blocksConfig={blocksConfig}
+                          />
+                        </StyleWrapperV3>
+                      ) : (
+                        <StyleWrapper
+                          key={block}
+                          {...props}
+                          id={block}
+                          block={block}
+                          data={blockData}
+                          isContainer={isContainer}
+                        >
+                          <Block
+                            id={block}
+                            metadata={metadata}
+                            properties={content}
+                            data={blockData}
+                            path={getBaseUrl(location?.pathname || '')}
+                            blocksConfig={blocksConfig}
+                          />
+                        </StyleWrapper>
+                      )}
                     </MaybeWrap>
                   </ErrorBoundary>
                 );

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/theme/_header.scss

@@ -418,6 +418,10 @@
       flex: 1 1 auto;
       flex-direction: row-reverse;
 
+      @media only screen and (max-width: $largest-mobile-screen) {
+        display: none;
+      }
+
       @media only screen and (max-width: $computer-breakpoint) {
         flex: 0 1 55px;
       }

package/src/theme/notfound.scss

@@ -1,4 +1,5 @@
 .view-editview.is-anonymous,
+.view-unauthorized,
 .page-not-found {
   .content-area {
     @include default-container-width();