@kitconcept/volto-light-theme 7.5.0 → 7.6.0

package/.changelog.draft

@@ -1,7 +1,16 @@
-## 7.5.0 (2025-10-31)
+## 7.6.0 (2025-11-04)
+
+### Feature
+
+- Recoverable Block Error Boundaries. @sneridagh [#708](https://github.com/kitconcept/volto-light-theme/pull/708)
+
+### Bugfix
+
+- Fix Teaser Blocks for Person type email spacing in 4 columns gridBlock @Tishasoumya-02 
 
 ### Internal
 
-- Better pinned versions. Use volto-button-block 4.0.0 final. @sneridagh 
+- Add css for NotFound Page @Tishasoumya-02 
+- Use Volto 18.29.1. @sneridagh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,27 @@
 
 <!-- towncrier release notes start -->
 
+## 7.6.0 (2025-11-04)
+
+### Feature
+
+- Recoverable Block Error Boundaries. @sneridagh [#708](https://github.com/kitconcept/volto-light-theme/pull/708)
+
+### Bugfix
+
+- Fix Teaser Blocks for Person type email spacing in 4 columns gridBlock @Tishasoumya-02 
+
+### Internal
+
+- Add css for NotFound Page @Tishasoumya-02 
+- Use Volto 18.29.1. @sneridagh 
+
+## 7.5.1 (2025-10-31)
+
+### Bugfix
+
+-  [#705](https://github.com/kitconcept/volto-light-theme/pull/705)
+
 ## 7.5.0 (2025-10-31)
 
 ### Internal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.5.0",
+  "version": "7.6.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": "1.5.0"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",

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

@@ -35,6 +35,7 @@ import {
   buildStyleClassNamesExtenders,
 } from '@plone/volto/helpers/Blocks/Blocks';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
+import ErrorBoundary from './ErrorBoundary';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -287,11 +288,18 @@ export class Edit extends Component {
               as={'div'}
               className="block-inner-container"
             >
-              <Block
-                {...this.props}
-                blockNode={this.blockNode}
-                data={this.props.data}
-              />
+              <ErrorBoundary
+                name={`blockId-${this.props.id}-type-${type}`}
+                block={this.props.block}
+                type={type}
+                isEdit
+              >
+                <Block
+                  {...this.props}
+                  blockNode={this.blockNode}
+                  data={this.props.data}
+                />
+              </ErrorBoundary>
             </MaybeWrap>
 
             {blocksConfig?.[type]?.blockModel === 3 && (

package/src/components/Blocks/Block/ErrorBoundary.test.tsx

@@ -0,0 +1,55 @@
+import React, { type FC } from 'react';
+import { render, screen } from '@testing-library/react';
+import { afterAll, afterEach, describe, expect, it, vi } from 'vitest';
+import { Provider } from 'react-intl-redux';
+import { ErrorBoundary } from './ErrorBoundary';
+import configureStore from 'redux-mock-store';
+
+describe('Error boundary', () => {
+  const consoleErrorSpy = vi
+    .spyOn(console, 'error')
+    .mockImplementation(() => undefined);
+
+  afterEach(() => {
+    consoleErrorSpy.mockClear();
+  });
+
+  afterAll(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  const mockStore = configureStore();
+
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  it('renders fallback UI when a child throws', () => {
+    const ThrowError: FC = () => {
+      throw new Error('Test');
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <ErrorBoundary
+          name="test"
+          block="123"
+          type="slate"
+          blocks={null}
+          blocksLayout={null}
+          title={null}
+        >
+          <ThrowError />
+        </ErrorBoundary>
+      </Provider>,
+    );
+
+    expect(screen.getByText('Block error:')).toBeInTheDocument();
+    expect(
+      container.querySelector('.block-error-boundary .title'),
+    ).toBeInTheDocument();
+  });
+});

package/src/components/Blocks/Block/ErrorBoundary.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { ErrorInfo, ReactNode } from 'react';
+import { connect } from 'react-redux';
+import type { BlocksData } from '@plone/types';
+import ErrorBoundaryMessage from './ErrorBoundaryMessage';
+
+type OwnProps = {
+  name?: string;
+  block?: string;
+  type?: string;
+  isEdit?: boolean;
+  children?: ReactNode;
+};
+
+type StateProps = {
+  blocks: BlocksData['blocks'];
+  blocksLayout: BlocksData['blocks_layout'];
+  title: string | null;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+};
+
+type ErrorBoundaryProps = OwnProps & StateProps;
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(_error: Error): ErrorBoundaryState {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidUpdate(prevProps: ErrorBoundaryProps) {
+    const titleChanged = prevProps.title !== this.props.title;
+    const blocksChanged = prevProps.blocks !== this.props.blocks;
+    const blocksLayoutChanged =
+      prevProps.blocksLayout !== this.props.blocksLayout;
+
+    if (
+      (blocksChanged || blocksLayoutChanged || titleChanged) &&
+      this.state.hasError
+    ) {
+      this.setState({ hasError: false });
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // eslint-disable-next-line
+    console.error(error, errorInfo);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        <ErrorBoundaryMessage
+          name={this.props.name}
+          block={this.props.block}
+          type={this.props.type}
+          isEdit={this.props.isEdit}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+type ReduxState = {
+  form?: {
+    global?: {
+      blocks?: BlocksData['blocks'];
+      blocks_layout?: BlocksData['blocks_layout'];
+      title: string | null;
+    };
+  };
+};
+
+const mapStateToProps = (state: ReduxState): StateProps => ({
+  blocks: state.form?.global?.blocks ?? null,
+  blocksLayout: state.form?.global?.blocks_layout ?? null,
+  // Title is used for demonstration purposes
+  // If we want to use it in metadata sources, we should connect it to the full state
+  // which I am reluctant to do because nowadays the form state can be quite large
+  title: state.form?.global?.title ?? null,
+});
+
+export default connect(mapStateToProps)(ErrorBoundary);

package/src/components/Blocks/Block/ErrorBoundaryMessage.tsx

@@ -0,0 +1,66 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+type ErrorBoundaryMessageProps = {
+  name?: string;
+  block?: string;
+  type?: string;
+  isEdit?: boolean;
+};
+
+const messages = defineMessages({
+  title: {
+    id: 'blockErrorBoundaryTitle',
+    defaultMessage: 'Block error:',
+  },
+  description: {
+    id: 'blockErrorBoundaryDescription',
+    defaultMessage:
+      'The {type} block with the id {block} has encountered an error.{lineBreak}You can try to undo your changes (via the undo toolbar or pressing {shortcut}), or try to delete the block and recreate it again.',
+  },
+  viewDescription: {
+    id: 'blockErrorBoundaryViewDescription',
+    defaultMessage:
+      'The {type} block with the id {block} errored and cannot be displayed.{lineBreak}Please contact the site administrator for further assistance.',
+  },
+});
+
+const ErrorBoundaryMessage = (props: ErrorBoundaryMessageProps) => {
+  const intl = useIntl();
+
+  if (props.isEdit) {
+    return (
+      <div className="block-error-boundary">
+        <div className="title">{intl.formatMessage(messages.title)}</div>
+        <p>
+          <FormattedMessage
+            {...messages.description}
+            values={{
+              type: <code>{props.type}</code>,
+              block: <code>{props.block}</code>,
+              lineBreak: <br />,
+              shortcut: <code>ctrl/cmd + Z</code>,
+            }}
+          />
+        </p>
+      </div>
+    );
+  } else {
+    return (
+      <div className="block-error-boundary">
+        <div className="title">{intl.formatMessage(messages.title)}</div>
+        <p>
+          <FormattedMessage
+            {...messages.viewDescription}
+            values={{
+              type: <code>{props.type}</code>,
+              block: <code>{props.block}</code>,
+              lineBreak: <br />,
+            }}
+          />
+        </p>
+      </div>
+    );
+  }
+};
+
+export default ErrorBoundaryMessage;

package/src/components/Theme/RenderBlocks.jsx

@@ -12,6 +12,7 @@ import config from '@plone/volto/registry';
 import ViewDefaultBlock from '@plone/volto/components/manage/Blocks/Block/DefaultView';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBlock';
+import ErrorBoundary from '../Blocks/Block/ErrorBoundary';
 
 import StyleWrapperV3 from './StyleWrapperV3';
 import RenderBlocksV2 from './RenderBlocksV2';
@@ -69,47 +70,55 @@ const RenderBlocks = (props) => {
 
         if (Block) {
           return (
-            <MaybeWrap
-              key={block}
-              condition={blockWrapperTag}
-              as={blockWrapperTag}
+            <ErrorBoundary
+              key={`error-boundary-block-${block}`}
+              name={`blockId-${block}-type-${content[blocksFieldname]?.[block]?.['@type']}`}
+              block={block}
+              type={content[blocksFieldname]?.[block]?.['@type']}
             >
-              {currentBlockModel === 3 ? (
-                <StyleWrapperV3
-                  block={block}
-                  content={content}
-                  data={blockData}
-                  blocksConfig={blocksConfig}
-                >
-                  <Block
-                    id={block}
-                    metadata={metadata}
-                    properties={content}
+              <MaybeWrap
+                key={block}
+                condition={blockWrapperTag}
+                as={blockWrapperTag}
+              >
+                {currentBlockModel === 3 ? (
+                  <StyleWrapperV3
+                    block={block}
+                    content={content}
                     data={blockData}
-                    path={getBaseUrl(location?.pathname || '')}
                     blocksConfig={blocksConfig}
-                  />
-                </StyleWrapperV3>
-              ) : (
-                <StyleWrapper
-                  key={block}
-                  {...props}
-                  id={block}
-                  block={block}
-                  data={blockData}
-                  isContainer={isContainer}
-                >
-                  <Block
+                    isContainer={isContainer}
+                  >
+                    <Block
+                      id={block}
+                      metadata={metadata}
+                      properties={content}
+                      data={blockData}
+                      path={getBaseUrl(location?.pathname || '')}
+                      blocksConfig={blocksConfig}
+                    />
+                  </StyleWrapperV3>
+                ) : (
+                  <StyleWrapper
+                    key={block}
+                    {...props}
                     id={block}
-                    metadata={metadata}
-                    properties={content}
+                    block={block}
                     data={blockData}
-                    path={getBaseUrl(location?.pathname || '')}
-                    blocksConfig={blocksConfig}
-                  />
-                </StyleWrapper>
-              )}
-            </MaybeWrap>
+                    isContainer={isContainer}
+                  >
+                    <Block
+                      id={block}
+                      metadata={metadata}
+                      properties={content}
+                      data={blockData}
+                      path={getBaseUrl(location?.pathname || '')}
+                      blocksConfig={blocksConfig}
+                    />
+                  </StyleWrapper>
+                )}
+              </MaybeWrap>
+            </ErrorBoundary>
           );
         }
 

package/src/components/Theme/RenderBlocksV2.jsx

@@ -15,6 +15,7 @@ import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBlock';
 import cx from 'classnames';
 import { groupByBGColor } from '../../helpers/grouping';
+import ErrorBoundary from '../Blocks/Block/ErrorBoundary';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -92,29 +93,36 @@ const RenderBlocks = (props) => {
 
               if (Block) {
                 return (
-                  <MaybeWrap
-                    key={block}
-                    condition={blockWrapperTag}
-                    as={blockWrapperTag}
+                  <ErrorBoundary
+                    key={`error-boundary-block-${block}`}
+                    name={`blockId-${block}-type-${content[blocksFieldname]?.[block]?.['@type']}`}
+                    block={block}
+                    type={content[blocksFieldname]?.[block]?.['@type']}
                   >
-                    <StyleWrapper
+                    <MaybeWrap
                       key={block}
-                      {...props}
-                      id={block}
-                      block={block}
-                      data={blockData}
-                      isContainer={isContainer}
+                      condition={blockWrapperTag}
+                      as={blockWrapperTag}
                     >
-                      <Block
+                      <StyleWrapper
+                        key={block}
+                        {...props}
                         id={block}
-                        metadata={metadata}
-                        properties={content}
+                        block={block}
                         data={blockData}
-                        path={getBaseUrl(location?.pathname || '')}
-                        blocksConfig={blocksConfig}
-                      />
-                    </StyleWrapper>
-                  </MaybeWrap>
+                        isContainer={isContainer}
+                      >
+                        <Block
+                          id={block}
+                          metadata={metadata}
+                          properties={content}
+                          data={blockData}
+                          path={getBaseUrl(location?.pathname || '')}
+                          blocksConfig={blocksConfig}
+                        />
+                      </StyleWrapper>
+                    </MaybeWrap>
+                  </ErrorBoundary>
                 );
               }
 

package/src/theme/blocks/_listing.scss

@@ -471,3 +471,8 @@
     }
   }
 }
+
+.listing-item .headline span:not(:last-child)::after {
+  margin: 0 10px;
+  content: '|';
+}

package/src/theme/blocks/error-boundary.scss

@@ -0,0 +1,11 @@
+.block-error-boundary {
+  padding: 10px;
+  border: 2px dashed red;
+  background-color: #ffe6e6;
+}
+
+.block-error-boundary .title {
+  margin-bottom: 5px;
+  color: red;
+  font-weight: bold;
+}

package/src/theme/main.scss

@@ -36,10 +36,12 @@
 @import 'blocks/eventMetadata';
 @import 'blocks/rss';
 @import 'blocks/eventSearch';
+@import 'blocks/error-boundary';
 @import 'sticky-menu';
 @import 'card';
 @import 'insets';
 @import 'person';
+@import 'notfound';
 
 @import 'temp';
 

package/src/theme/notfound.scss

@@ -0,0 +1,25 @@
+.page-not-found {
+  .content-area {
+    @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
+    .view-wrapper {
+      padding-top: $spacing-xlarge;
+      padding-bottom: $spacing-xlarge;
+    }
+    h1 {
+      margin-bottom: $spacing-large;
+      font-size: 48px;
+      font-weight: 700;
+      line-height: 56px;
+    }
+    p,
+    a {
+      font-size: 24px;
+      font-weight: 300;
+      line-height: 33px;
+    }
+    a {
+      color: $black;
+    }
+  }
+}

package/src/theme/person.scss

@@ -325,24 +325,34 @@ body.person-squared-images,
     }
   }
 }
-// person with Four columns
+
+// person with Four columns (edit mode and view mode)
+.block.gridBlock .four.grid-items .person-teaser .card-summary,
+.ui.stackable.stretched.four.column.grid .card-summary {
+  .summary-extra-info {
+    &.email {
+      min-width: 0;
+
+      a {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+// Additional styles for view mode only
 .ui.stackable.stretched.four.column.grid {
   .card-summary {
     display: grid;
+
     .summary-extra-info {
       gap: 5px;
-      &.email {
-        min-width: 0;
-
-        a {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
     }
   }
+
   .block.listing,
   .block.search {
     .listing-item.person-listing .card-summary {