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

package/.changelog.draft

@@ -1,8 +1,17 @@
-## 8.0.0-alpha.2 (2025-10-29)
+## 8.0.0-alpha.3 (2025-11-04)
 
 ### 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)
+- Recoverable Block Error Boundaries. @sneridagh [#708](https://github.com/kitconcept/volto-light-theme/pull/708)
+- Update `Buttons` widget to the one proposed for the Volto PR: #7555 @sneridagh 
+
+### Bugfix
+
+-  [#705](https://github.com/kitconcept/volto-light-theme/pull/705)
+- Fix Teaser Blocks for Person type email spacing in 4 columns gridBlock @Tishasoumya-02 
+
+### Internal
+
+- Add css for NotFound Page @Tishasoumya-02 
 
 

package/CHANGELOG.md

@@ -8,6 +8,22 @@
 
 <!-- towncrier release notes start -->
 
+## 8.0.0-alpha.3 (2025-11-04)
+
+### Feature
+
+- Recoverable Block Error Boundaries. @sneridagh [#708](https://github.com/kitconcept/volto-light-theme/pull/708)
+- Update `Buttons` widget to the one proposed for the Volto PR: #7555 @sneridagh 
+
+### Bugfix
+
+-  [#705](https://github.com/kitconcept/volto-light-theme/pull/705)
+- Fix Teaser Blocks for Person type email spacing in 4 columns gridBlock @Tishasoumya-02 
+
+### Internal
+
+- Add css for NotFound Page @Tishasoumya-02 
+
 ## 8.0.0-alpha.2 (2025-10-29)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "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": "2.0.0-alpha.7"
+    "@plone/types": "2.0.0-alpha.8"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -54,7 +54,7 @@
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
     "react-animate-height": "^3.2.3",
-    "react-aria-components": "^1.7.0",
+    "react-aria-components": "^1.12.1",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
     "@plone/components": "^4.0.0-alpha.1"

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: {
@@ -288,12 +289,19 @@ export class Edit extends Component {
               as={'div'}
               className="block-inner-container"
             >
-              <Block
-                {...this.props}
-                blockNode={this.blockNode}
-                data={this.props.data}
-                className={cx({ contained: parentIsContainer })}
-              />
+              <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}
+                  className={cx({ contained: parentIsContainer })}
+                />
+              </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,48 +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}
-                  isContainer={isContainer}
-                >
-                  <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/components/Widgets/Buttons.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { Button } from '@plone/components';
+import { RadioGroup } from '@plone/components';
+import { Radio } from 'react-aria-components';
 import isEqual from 'lodash/isEqual';
 import type { StyleDefinition } from '@plone/types';
 
@@ -90,6 +91,25 @@ const ButtonsWidget = (props: ButtonsWidgetProps) => {
     [actions],
   );
 
+  const selectedActionName = React.useMemo(
+    () =>
+      normalizedActions.find((action) => isEqual(value, action.value))?.name,
+    [normalizedActions, value],
+  );
+
+  const handleChange = React.useCallback(
+    (selectedName: string) => {
+      const selectedAction = normalizedActions.find(
+        ({ name }) => name === selectedName,
+      );
+
+      if (selectedAction) {
+        onChange(id, selectedAction.value);
+      }
+    },
+    [id, normalizedActions, onChange],
+  );
+
   React.useEffect(() => {
     if (!value && defaultValue) {
       const nextValue =
@@ -104,7 +124,14 @@ const ButtonsWidget = (props: ButtonsWidgetProps) => {
 
   return (
     <FormFieldWrapper {...props} className="widget">
-      <div className="buttons buttons-widget">
+      <RadioGroup
+        aria-label={props.title || props.label || id}
+        orientation="horizontal"
+        value={selectedActionName}
+        onChange={handleChange}
+        isDisabled={disabled || isDisabled}
+        className="buttons buttons-widget"
+      >
         {normalizedActions.map((action) => {
           const actionInfo = actionsInfoMap?.[action.name];
           const [iconOrText, ariaLabel] = actionInfo ?? [
@@ -113,16 +140,11 @@ const ButtonsWidget = (props: ButtonsWidgetProps) => {
           ];
 
           return (
-            <Button
+            <Radio
               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}
+              value={action.name}
+              className="buttons-widget-option"
             >
               {typeof iconOrText === 'string' ? (
                 <div className="image-sizes-text">{iconOrText}</div>
@@ -131,12 +153,13 @@ const ButtonsWidget = (props: ButtonsWidgetProps) => {
                   name={iconOrText}
                   title={ariaLabel || action.name}
                   size="24px"
+                  ariaHidden={true}
                 />
               )}
-            </Button>
+            </Radio>
           );
         })}
-      </div>
+      </RadioGroup>
     </FormFieldWrapper>
   );
 };

package/src/theme/_widgets.scss

@@ -6,21 +6,22 @@
 #sidebar-properties,
 #sidebar-metadata {
   .field.widget {
-    .buttons {
+    .buttons-widget {
       display: flex;
       align-items: center;
+      gap: 4px;
 
-      button {
+      .buttons-widget-option {
         padding: 5px;
         border-radius: 3px;
-        margin-right: 3px;
         aspect-ratio: 1/1;
         font-size: 1em;
         line-height: initial;
+
         &[data-hovered='true'] {
           box-shadow: inset 0 0 0 1px var(--border-color-pressed, #2996da);
         }
-        &.active {
+        &[data-selected='true'] {
           box-shadow: inset 0 0 0 1px var(--border-color-pressed, #2996da);
         }
 
@@ -134,12 +135,10 @@ span.color-contrast-label {
   background-color: var(--theme-color);
 }
 
-.buttons-widget {
-  button {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-      color: var(--text-color-disabled);
-    }
+.buttons-widget-option {
+  &[data-disabled] {
+    border-color: var(--border-color-disabled);
+    color: var(--text-color-disabled);
   }
 }
 

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 {