@kitconcept/volto-light-theme 7.0.0-alpha.3 → 7.0.0-alpha.5

package/.changelog.draft

@@ -1,8 +1,13 @@
-## 7.0.0-alpha.3 (2025-05-20)
+## 7.0.0-alpha.5 (2025-06-04)
+
+### Breaking
+
+- The `Body` Teaser component has been shadowed, including the `placeholder` in case that the Teaser is empty. @sneridagh
+  See [the upgrade guide](https://volto-light-theme.readthedocs.io/how-to-guides/upgrade-guide.html) for more information. [#555](https://github.com/kitconcept/volto-light-theme/pull/555)
 
 ### Feature
 
-- Improve Footer color handling. @danalvrz [#551](https://github.com/kitconcept/volto-light-theme/pull/551)
-- Added support for a customizable colophon footer. @sneridagh 
+- Add support for Person content type in teasers, teasers in grids and listings. @sneridagh [#555](https://github.com/kitconcept/volto-light-theme/pull/555)
+- Added string interpolation {searchTerm} in the custom searchURL in intranet header search widget. @sneridagh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,24 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.5 (2025-06-04)
+
+### Breaking
+
+- The `Body` Teaser component has been shadowed, including the `placeholder` in case that the Teaser is empty. @sneridagh
+  See [the upgrade guide](https://volto-light-theme.readthedocs.io/how-to-guides/upgrade-guide.html) for more information. [#555](https://github.com/kitconcept/volto-light-theme/pull/555)
+
+### Feature
+
+- Add support for Person content type in teasers, teasers in grids and listings. @sneridagh [#555](https://github.com/kitconcept/volto-light-theme/pull/555)
+- Added string interpolation {searchTerm} in the custom searchURL in intranet header search widget. @sneridagh 
+
+## 7.0.0-alpha.4 (2025-05-22)
+
+### Internal
+
+- Added some of the Volto's Cypress tests. @sneridagh [#540](https://github.com/kitconcept/volto-light-theme/pull/540)
+
 ## 7.0.0-alpha.3 (2025-05-20)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.0.0-alpha.3",
+  "version": "7.0.0-alpha.5",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -26,6 +26,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "addons": [
+    "@kitconcept/volto-bm3-compat"
+  ],
   "devDependencies": {
     "@plone/scripts": "^3.6.2",
     "@storybook/react": "^8.6.12",
@@ -47,6 +50,7 @@
     "@plone/components": "^3.0.2"
   },
   "peerDependencies": {
+    "@kitconcept/volto-bm3-compat": "^1.0.0-alpha.1",
     "@eeacms/volto-accordion-block": "^10.4.6",
     "@kitconcept/volto-banner-block": "^1.0.1",
     "@kitconcept/volto-button-block": "^4.0.0-alpha.0",

package/src/components/Blocks/Listing/DefaultTemplate.jsx

@@ -5,6 +5,7 @@ import UniversalLink from '@plone/volto/components/manage/UniversalLink/Universa
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
+import cx from 'classnames';
 
 const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
   let link = null;
@@ -30,7 +31,12 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               dependencies: [item['@type']],
             }).component || DefaultSummary;
           return (
-            <div className="listing-item" key={item['@id']}>
+            <div
+              className={cx('listing-item', {
+                [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
+              })}
+              key={item['@id']}
+            >
               <ConditionalLink item={item} condition={!isEditMode}>
                 <div className="listing-body">
                   <Summary item={item} HeadingTag="h2" />

package/src/components/Blocks/Listing/ListingBody.jsx

@@ -35,7 +35,7 @@ const Headline = ({
   );
 };
 
-const ListingBody = withQuerystringResults((props) => {
+export const ListingBody = (props) => {
   const {
     data = {},
     isEditMode,
@@ -68,11 +68,9 @@ const ListingBody = withQuerystringResults((props) => {
     ListingBodyTemplate =
       variation?.template ?? defaultVariation?.template ?? null;
   }
-  let galleryRef;
 
-  if (data.variation === 'imageGallery') {
-    galleryRef = useRef();
-  }
+  const galleryRef = useRef();
+
   const listingRef = createRef();
   const NoResults = variation?.noResultsComponent
     ? variation.noResultsComponent
@@ -95,7 +93,7 @@ const ListingBody = withQuerystringResults((props) => {
           <ListingBodyTemplate
             items={listingItems}
             isEditMode={isEditMode}
-            ref={galleryRef}
+            ref={data.variation === 'imageGallery' ? galleryRef : undefined}
             {...data}
             {...variation}
           />
@@ -192,6 +190,6 @@ const ListingBody = withQuerystringResults((props) => {
       )}
     </>
   );
-});
+};
 
-export default injectIntl(ListingBody);
+export default injectIntl(withQuerystringResults(ListingBody));

package/src/components/Blocks/Listing/SummaryTemplate.jsx

@@ -5,6 +5,7 @@ import Component from '@plone/volto/components/theme/Component/Component';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
+import cx from 'classnames';
 
 const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
   let link = null;
@@ -46,7 +47,12 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               </>
             );
           return (
-            <div className="listing-item" key={item['@id']}>
+            <div
+              className={cx('listing-item', {
+                [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
+              })}
+              key={item['@id']}
+            >
               <ConditionalLink item={item} condition={!isEditMode}>
                 <ItemBodyTemplate item={item} />
               </ConditionalLink>

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

@@ -0,0 +1,53 @@
+import DefaultBody from './DefaultBody';
+import { BlockWrapper } from '@kitconcept/volto-bm3-compat';
+import config from '@plone/volto/registry';
+import cx from 'classnames';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import isEmpty from 'lodash/isEmpty';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+});
+
+const TeaserBody = (props) => {
+  const { variation, data, className, isEditMode } = props;
+  const intl = useIntl();
+
+  const hasType = data.href?.[0]?.['@type'];
+
+  const BodyComponent =
+    (config?.getComponent &&
+      hasType &&
+      config.getComponent({ name: 'Teaser', dependencies: [hasType] })
+        .component) ||
+    variation?.template ||
+    DefaultBody;
+
+  return (
+    <BlockWrapper
+      {...props}
+      className={cx(
+        { [`${hasType?.toLowerCase()}-teaser`]: hasType },
+        className,
+      )}
+    >
+      {isEmpty(data.href) && isEditMode ? (
+        <div className="ui message">
+          <div className="teaser-item placeholder">
+            <img src={imageBlockSVG} alt="" />
+            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+          </div>
+        </div>
+      ) : (
+        <BodyComponent {...props} />
+      )}
+    </BlockWrapper>
+  );
+};
+
+export default TeaserBody;

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

@@ -0,0 +1,45 @@
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
+import Card from '../../../primitives/Card/Card';
+import config from '@plone/volto/registry';
+
+const TeaserDefaultTemplate = (props) => {
+  const { data, isEditMode } = props;
+  const href = data.href?.[0] || {};
+  const image = data.preview_image?.[0];
+  const url = data.preview_image?.[0]?.['@id'];
+
+  const Image = config.getComponent('Image').component;
+  const Summary =
+    config.getComponent({
+      name: 'Summary',
+      dependencies: [href['@type']],
+    }).component || DefaultSummary;
+  const { openExternalLinkInNewTab } = config.settings;
+  const openLinkInNewTab =
+    data.openLinkInNewTab ||
+    (openExternalLinkInNewTab && !isInternalURL(href['@id']));
+  const { '@id': id, ...filteredData } = data;
+
+  return (
+    <Card
+      href={!isEditMode ? href['@id'] : null}
+      openLinkInNewTab={openLinkInNewTab}
+    >
+      <Card.Image
+        src={url && !image?.image_field ? url : undefined}
+        item={!data.overwrite ? href : { ...href, ...filteredData }}
+        image={data.overwrite ? image : undefined}
+        imageComponent={Image}
+      />
+      <Card.Summary>
+        <Summary
+          item={!data.overwrite ? href : { ...href, ...filteredData }}
+          HeadingTag="h2"
+        />
+      </Card.Summary>
+    </Card>
+  );
+};
+
+export default TeaserDefaultTemplate;

package/src/components/SearchWidget/IntranetSearchWidget.jsx

@@ -87,11 +87,11 @@ class IntranetSearchWidget extends Component {
         : '';
 
     if (searchURL) {
-      window.open(
-        `${searchURL}?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-        '_blank',
-        'noopener,noreferrer',
-      );
+      // If searchURL contains {searchTerm}, replace it with the encoded search text
+      const externalUrl =
+        searchURL.replace('{searchTerm}', encodeURIComponent(this.state.text)) +
+        path;
+      window.open(externalUrl, '_blank', 'noopener,noreferrer');
     } else {
       this.props.history.push(
         `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,

package/src/components/Summary/PersonSummary.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import mailSVG from '@plone/volto/icons/email.svg';
+import locationSVG from '@plone/volto/icons/map.svg';
+import phoneSVG from '@plone/volto/icons/mobile.svg';
+import type { DefaultSummaryProps } from './DefaultSummary';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  phone: {
+    id: 'Phone',
+    defaultMessage: 'Phone',
+  },
+  email: {
+    id: 'eMail',
+    defaultMessage: 'eMail',
+  },
+  room: {
+    id: 'Room',
+    defaultMessage: 'Room',
+  },
+});
+
+const PersonSummary = (props: DefaultSummaryProps) => {
+  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const intl = useIntl();
+
+  return (
+    <>
+      {item?.head_title && <div className="headline">{item.head_title}</div>}
+      <HeadingTag className="title" id={a11yLabelId}>
+        {item.title ? item.title : item.id}
+      </HeadingTag>
+      {!hide_description && <p className="description">{item.description}</p>}
+
+      {item.contact_email && (
+        <div className="summary-extra-info">
+          <Icon
+            title={intl.formatMessage(messages.email)}
+            name={mailSVG}
+            size="24px"
+          />
+          <a href={`mailto:${item.contact_email}`}>{item.contact_email}</a>
+        </div>
+      )}
+
+      <div className="summary-room-phone">
+        {item.contact_room && (
+          <div className="summary-extra-info">
+            <Icon
+              title={intl.formatMessage(messages.room)}
+              name={locationSVG}
+              size="24px"
+            />
+            {item.contact_room}
+          </div>
+        )}
+        {item.contact_phone && (
+          <div className="summary-extra-info">
+            <Icon
+              title={intl.formatMessage(messages.phone)}
+              name={phoneSVG}
+              size="24px"
+            />
+            {item.contact_phone}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default PersonSummary;

package/src/config/summary.ts

@@ -2,6 +2,7 @@ import type { ConfigType } from '@plone/registry';
 import NewsItemSummary from '../components/Summary/NewsItemSummary';
 import EventSummary from '../components/Summary/EventSummary';
 import FileSummary from '../components/Summary/FileSummary';
+import PersonSummary from '../components/Summary/PersonSummary';
 
 export default function install(config: ConfigType) {
   config.registerComponent({
@@ -19,6 +20,11 @@ export default function install(config: ConfigType) {
     component: FileSummary,
     dependencies: ['File'],
   });
+  config.registerComponent({
+    name: 'Summary',
+    component: PersonSummary,
+    dependencies: ['Person'],
+  });
 
   return config;
 }

package/src/config/widgets.ts

@@ -13,6 +13,10 @@ import { footerLinksSchema } from '../components/Widgets/schema/footerLinksSchem
 import { iconLinkListSchema } from '../components/Widgets/schema/iconLinkListSchema';
 
 declare module '@plone/types' {
+  export interface WidgetsConfigById {
+    preview_image_link: React.ComponentType;
+  }
+
   export interface WidgetsConfigByWidget {
     themeColorSwatch: typeof ColorSwatch;
     blockWidth: typeof BlockWidth;
@@ -20,6 +24,7 @@ declare module '@plone/types' {
     size: typeof Size;
     colorPicker: typeof ColorPicker;
     blocksObject: typeof BlocksObject;
+    image: React.ComponentType;
   }
 }
 

package/src/customizations/volto/components/manage/Blocks/Teaser/Body.jsx

@@ -0,0 +1,8 @@
+/**
+ * OVERRIDE Body.jsx
+ * REASON: Better wrap for Teasers.
+ */
+
+import TeaserBody from '../../../../../../components/Blocks/Teaser/Body';
+
+export default TeaserBody;

package/src/index.ts

@@ -61,6 +61,14 @@ declare module '@plone/types' {
       'plonegovbr.socialmedia.settings': CustomInheritBehavior<PloneGobrSocialMediaSettings>;
     };
   }
+
+  export interface ObjectBrowserItem {
+    contact_email: string;
+    contact_phone: string;
+    contact_room: string;
+    contact_website: string;
+    contact_building: string;
+  }
 }
 
 const applyConfig = (config: ConfigType) => {

package/src/stories/grid.teaser.stories.tsx

@@ -5,6 +5,11 @@ import {
   gridBlockTwo,
   gridBlockThree,
   gridBlockFour,
+  gridBlockTwoDocumentPerson,
+  gridBlockOnePerson,
+  gridBlockTwoPerson,
+  gridBlockThreePerson,
+  gridBlockFourPerson,
 } from './mocks';
 import Wrapper from '@plone/volto/storybook';
 import BlockWrapper from './BlockWrapper';
@@ -154,3 +159,78 @@ export const FourInversed: Story = {
     data: { ...gridBlockFour, theme: 'grey' },
   },
 };
+
+export const OnePerson: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockOnePerson,
+  },
+};
+
+export const TwoDocumentPerson: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockTwoDocumentPerson,
+  },
+};
+
+export const TwoPerson: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockTwoPerson,
+  },
+};
+
+export const ThreePerson: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockThreePerson,
+  },
+};
+
+export const FourPerson: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockFourPerson,
+  },
+};

package/src/stories/listing.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ListingBody } from '../components/Blocks/Listing/ListingBody';
+import SummaryTemplate from '../components/Blocks/Listing/SummaryTemplate';
+import { listingBlockPerson } from './mocks';
+import Wrapper from '@plone/volto/storybook';
+import BlockWrapper from './BlockWrapper';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Blocks/Listing',
+  component: ListingBody,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ListingBody>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PersonListing: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <div className="block listing">
+            <ListingBody {...args} />
+          </div>
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: listingBlockPerson,
+    listingItems: listingBlockPerson.items,
+  },
+};
+
+export const PersonListingSummary: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <div className="block listing summary">
+            <ListingBody {...args} />
+          </div>
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: {
+      ...listingBlockPerson,
+    },
+    listingItems: listingBlockPerson.items,
+    variation: {
+      id: 'summary',
+      template: SummaryTemplate,
+      title: 'List with images',
+    },
+  },
+};

package/src/stories/mocks.ts

@@ -1,4 +1,5 @@
 const demoImage = 'black-starry-night.jpg';
+const personImage = 'person.png';
 
 export function ObjectBrowserItem(demoImage) {
   return {
@@ -169,6 +170,98 @@ export const teaserBlock = {
   title: 'Headline H2',
 };
 
+export const personBlock = {
+  '@type': 'teaser',
+  href: [
+    {
+      '@id': '.',
+      '@type': 'Person',
+      title: 'Kathryn Janeway',
+      Title: 'Kathryn Janeway',
+      description:
+        'USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.',
+      Description:
+        'USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.',
+      contact_email: 'janeway@ufp.earth.com',
+      contact_room: "Captain's Ready Room",
+      contact_phone: '123456789',
+      contact_building: 'Sapphire Building',
+      contact_website: null,
+      getRemoteUrl: null,
+      hasPreviewImage: true,
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            'content-type': 'image/jpeg',
+            download: personImage,
+            filename: 'black-starry-night.jpg',
+            height: 1708,
+            scales: {
+              great: {
+                download: personImage,
+                height: 854,
+                width: 1200,
+              },
+              huge: {
+                download: personImage,
+                height: 1138,
+                width: 1600,
+              },
+              icon: {
+                download: personImage,
+                height: 22,
+                width: 32,
+              },
+              large: {
+                download: personImage,
+                height: 569,
+                width: 800,
+              },
+              larger: {
+                download: personImage,
+                height: 711,
+                width: 1000,
+              },
+              mini: {
+                download: personImage,
+                height: 142,
+                width: 200,
+              },
+              preview: {
+                download: personImage,
+                height: 284,
+                width: 400,
+              },
+              teaser: {
+                download: personImage,
+                height: 427,
+                width: 600,
+              },
+              thumb: {
+                download: personImage,
+                height: 91,
+                width: 128,
+              },
+              tile: {
+                download: personImage,
+                height: 45,
+                width: 64,
+              },
+            },
+            size: 693013,
+            width: 2400,
+          },
+        ],
+      },
+    },
+  ],
+  styles: {
+    align: 'left',
+  },
+  title: 'Headline H2',
+};
+
 export const gridBlockOne = {
   '@type': 'gridBlock',
   blocks: {
@@ -502,3 +595,194 @@ export const gridBlock = {
     backgroundColor: 'grey',
   },
 };
+
+export const gridBlockTwoDocumentPerson = {
+  '@type': 'gridBlock',
+  blocks: {
+    '281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
+      ...teaserBlock,
+    },
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
+      ...personBlock,
+    },
+  },
+  blocks_layout: {
+    items: [
+      '281a22fb-c353-4b91-b2bc-88e6a52ed65a',
+      'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
+    ],
+  },
+};
+
+export const gridBlockOnePerson = {
+  '@type': 'gridBlock',
+  blocks: {
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
+      ...personBlock,
+    },
+  },
+  blocks_layout: {
+    items: ['f34fa7dd-ce59-4f7f-b795-7d7f1e388df1'],
+  },
+};
+
+export const gridBlockTwoPerson = {
+  '@type': 'gridBlock',
+  blocks: {
+    '281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
+      ...personBlock,
+    },
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
+      ...personBlock,
+    },
+  },
+  blocks_layout: {
+    items: [
+      '281a22fb-c353-4b91-b2bc-88e6a52ed65a',
+      'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
+    ],
+  },
+};
+
+export const gridBlockThreePerson = {
+  '@type': 'gridBlock',
+  blocks: {
+    '281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
+      ...personBlock,
+    },
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
+      ...personBlock,
+    },
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df2': {
+      ...personBlock,
+    },
+  },
+  blocks_layout: {
+    items: [
+      '281a22fb-c353-4b91-b2bc-88e6a52ed65a',
+      'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
+      'f34fa7dd-ce59-4f7f-b795-7d7f1e388df2',
+    ],
+  },
+};
+
+export const gridBlockFourPerson = {
+  '@type': 'gridBlock',
+  blocks: {
+    '281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
+      ...personBlock,
+    },
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
+      ...personBlock,
+    },
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df2': {
+      ...personBlock,
+    },
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df3': {
+      ...personBlock,
+    },
+  },
+  blocks_layout: {
+    items: [
+      '281a22fb-c353-4b91-b2bc-88e6a52ed65a',
+      'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
+      'f34fa7dd-ce59-4f7f-b795-7d7f1e388df2',
+      'f34fa7dd-ce59-4f7f-b795-7d7f1e388df3',
+    ],
+  },
+};
+
+export const listingBlockPerson = {
+  '@type': 'listing',
+  items: [
+    {
+      '@id': 'http://localhost:3000/asdasd-asdasdasd',
+      '@type': 'Person',
+      CreationDate: '2025-05-19T17:23:06+02:00',
+      Creator: 'admin',
+      Date: '2025-05-22T09:10:50+02:00',
+      Description:
+        'USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.',
+      EffectiveDate: 'None',
+      ExpirationDate: 'None',
+      ModificationDate: '2025-05-22T09:10:50+02:00',
+      Subject: [],
+      Title: 'Kathryn Janeway',
+      Type: 'Person',
+      UID: '2b730627efc24a089e00a315735bfe5b',
+      cmf_uid: 1,
+      contact_building: null,
+      contact_email: 'janeway@ufp.earth.com',
+      contact_phone: '124312312313',
+      contact_room: 'Ready room',
+      country: null,
+      created: '2025-05-19T15:23:06+00:00',
+      description:
+        'USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.',
+      effective: '1969-12-30T22:00:00+00:00',
+      end: null,
+      exclude_from_nav: false,
+      expires: '2499-12-30T22:00:00+00:00',
+      getIcon: null,
+      getId: 'asdasd-asdasdasd',
+      getObjSize: '0 KB',
+      getPath: '/Plone/asdasd-asdasdasd',
+      getRemoteUrl: null,
+      getURL: 'http://localhost:3000/asdasd-asdasdasd',
+      hasPreviewImage: null,
+      head_title: null,
+      id: 'asdasd-asdasdasd',
+      image_field: 'preview_image_link',
+      image_scales: {
+        preview_image_link: [
+          {
+            base_path: './',
+            'content-type': 'image/png',
+            download: personImage,
+            filename: 'person.png',
+            height: 286,
+            scales: {
+              icon: {
+                download: personImage,
+                height: 32,
+                width: 24,
+              },
+              mini: {
+                download: personImage,
+                height: 260,
+                width: 200,
+              },
+              thumb: {
+                download: personImage,
+                height: 128,
+                width: 98,
+              },
+              tile: {
+                download: personImage,
+                height: 64,
+                width: 49,
+              },
+            },
+            size: 37757,
+            width: 220,
+          },
+        ],
+      },
+      is_folderish: true,
+      listCreators: ['admin'],
+      location: null,
+      mime_type: 'text/plain',
+      modified: '2025-05-22T07:10:50+00:00',
+      nav_title: null,
+      portal_type: 'Person',
+      review_state: 'private',
+      roles: ['member'],
+      start: null,
+      sync_uid: null,
+      title: 'Kathryn Janeway',
+      type_title: 'Person',
+      username: null,
+    },
+  ],
+  items_total: 1,
+};

package/src/stories/teaser.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import TeaserDefaultBody from '@plone/volto/components/manage/Blocks/Teaser/DefaultBody';
-import { teaserBlock } from './mocks';
+import TeaserBody from '@plone/volto/components/manage/Blocks/Teaser/Body';
+import { teaserBlock, personBlock } from './mocks';
 import Wrapper from '@plone/volto/storybook';
 import BlockWrapper from './BlockWrapper';
 
@@ -8,12 +8,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
   title: 'Blocks/Teaser',
-  component: TeaserDefaultBody,
+  component: TeaserBody,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof TeaserDefaultBody>;
+} satisfies Meta<typeof TeaserBody>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -23,7 +23,7 @@ export const Left: Story = {
     <Wrapper>
       <div style={{ width: 'var(--default-container-width)' }}>
         <BlockWrapper {...args}>
-          <TeaserDefaultBody {...args} />
+          <TeaserBody {...args} />
         </BlockWrapper>
       </div>
     </Wrapper>
@@ -38,7 +38,7 @@ export const Right: Story = {
     <Wrapper>
       <div style={{ width: 'var(--default-container-width)' }}>
         <BlockWrapper {...args}>
-          <TeaserDefaultBody {...args} />
+          <TeaserBody {...args} />
         </BlockWrapper>
       </div>
     </Wrapper>
@@ -58,7 +58,7 @@ export const Center: Story = {
     <Wrapper>
       <div style={{ width: 'var(--default-container-width)' }}>
         <BlockWrapper {...args}>
-          <TeaserDefaultBody {...args} />
+          <TeaserBody {...args} />
         </BlockWrapper>
       </div>
     </Wrapper>
@@ -72,3 +72,18 @@ export const Center: Story = {
     },
   },
 };
+
+export const PersonTeaser: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div style={{ width: 'var(--default-container-width)' }}>
+        <BlockWrapper {...args}>
+          <TeaserBody {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: personBlock,
+  },
+};

package/src/theme/_footer.scss

@@ -316,7 +316,6 @@
   .colophon {
     @include add(size, xs);
     @include add(height, s);
-    padding-bottom: $spacing-small;
 
     a {
       @include add(size, xs);

package/src/theme/_layout.scss

@@ -358,6 +358,7 @@ External link removal for all the blocks.
   .block.teaser.has--align--center,
   .block.eventMetadata .details-container,
   .block-editor-teaser .teaser-item.default,
+  .block-editor-teaser .card-inner, // deprecate when category is in place
   .block-editor-slateTable .block.table,
   .block-editor-highlight .teaser-description-title,
   .block-editor-toc .table-of-contents {
@@ -460,6 +461,7 @@ body.has-toolbar.has-sidebar .block .ui.basic.button.delete-button {
 #page-edit,
 #page-document {
   img {
+    object-fit: cover;
     object-position: center;
   }
 }

package/src/theme/card.scss

@@ -67,7 +67,7 @@
   }
 }
 
-// // Left-aligned
+// // Side-aligned
 .card {
   .has--align--left:not(.contained) &,
   .has--align--right:not(.contained) & {
@@ -149,7 +149,6 @@
     display: flex;
 
     .image-wrapper {
-      // width: 50%;
       flex: 0 1 var(--card-listing-image-size, 220px);
       margin-right: 20px;
 
@@ -160,7 +159,6 @@
     }
 
     .card-summary {
-      // width: 50%;
       flex: 1 1 50%;
       padding: 0;
     }

package/src/theme/main.scss

@@ -37,6 +37,7 @@
 @import 'sticky-menu';
 @import 'card';
 @import 'insets';
+@import 'person';
 
 @import 'temp';
 

package/src/theme/person.scss

@@ -0,0 +1,123 @@
+.card {
+  .person-teaser.has--align--left:not(.contained) &,
+  .has--align--left:not(.contained) .person-teaser &,
+  .person-teaser.has--align--right:not(.contained) & {
+    .card-inner {
+      .image-wrapper {
+        flex: 0 1 var(--card-listing-image-size, 220px);
+        img {
+          aspect-ratio: initial !important;
+        }
+      }
+    }
+
+    .card-summary {
+      align-self: center;
+
+      .description {
+        margin-bottom: $spacing-small;
+      }
+    }
+  }
+
+  .person-teaser & {
+    .card-summary {
+      .description {
+        margin-bottom: $spacing-small;
+      }
+    }
+  }
+
+  .contained.person-teaser & {
+    .image-wrapper {
+      display: flex;
+      height: 255px;
+      justify-content: center;
+      aspect-ratio: var(--image-aspect-ratio, 1.7777777778);
+
+      img {
+        max-width: 198px; // 255x198px Roughly 3:4 (enough to cover the 16:9 portrait height)
+        height: 100%;
+        flex: 0 1 auto;
+        aspect-ratio: initial !important;
+        object-fit: cover;
+        object-position: top center;
+      }
+    }
+  }
+}
+
+// One column exception for contained person-teasers
+.one .contained.person-teaser {
+  width: calc(var(--default-container-width) / 2);
+
+  .column & {
+    align-items: center;
+  }
+}
+
+.one .column:has(.contained.person-teaser) {
+  align-items: center;
+}
+
+// Three column exception for contained person-teasers
+.three .contained.person-teaser,
+.four .contained.person-teaser {
+  .summary-room-phone {
+    flex-direction: column;
+
+    .summary-extra-info {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// contained person-teasers do not have background color, so we need to set it to --theme-color
+body .block.gridBlock .block.teaser.contained.person-teaser .card-inner {
+  background: var(--theme-color);
+}
+
+// contained person-teasers do not have background color, so we need to remove the padding
+// to snap to the default container width
+.contained.person-teaser {
+  .card-summary {
+    padding-right: 0px;
+    padding-left: 0px;
+    text-align: center;
+  }
+
+  .summary-extra-info,
+  .summary-room-phone {
+    justify-content: center;
+  }
+}
+
+.summary-extra-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: $spacing-small;
+}
+
+.summary-room-phone {
+  display: flex;
+  gap: $spacing-small;
+}
+
+// Listings (no card)
+.block.listing {
+  .listing-item.person-listing {
+    &,
+    & a {
+      align-items: center;
+    }
+
+    h2,
+    h3 {
+      margin-bottom: $spacing-small !important;
+    }
+
+    img {
+      aspect-ratio: initial !important;
+    }
+  }
+}

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

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Message } from 'semantic-ui-react';
-import { defineMessages, useIntl } from 'react-intl';
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import { isInternalURL } from '@plone/volto/helpers/Url/Url';
-import cx from 'classnames';
-import config from '@plone/volto/registry';
-import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
-import Card from '../../../primitives/Card/Card';
-import isEmpty from 'lodash/isEmpty';
-
-const messages = defineMessages({
-  PleaseChooseContent: {
-    id: 'Please choose an existing content as source for this element',
-    defaultMessage:
-      'Please choose an existing content as source for this element',
-  },
-});
-
-const TeaserDefaultTemplate = (props) => {
-  const { className, data, isEditMode, style } = props;
-  const intl = useIntl();
-  const href = data.href?.[0] || {};
-  const image = data.preview_image?.[0];
-  const url = data.preview_image?.[0]?.['@id'];
-
-  const Image = config.getComponent('Image').component;
-  const Summary =
-    config.getComponent({
-      name: 'Summary',
-      dependencies: [href['@type']],
-    }).component || DefaultSummary;
-  const { openExternalLinkInNewTab } = config.settings;
-  const openLinkInNewTab =
-    data.openLinkInNewTab ||
-    (openExternalLinkInNewTab && !isInternalURL(href['@id']))
-      ? '_blank'
-      : null;
-  const { '@id': id, ...filteredData } = data;
-
-  return (
-    <div className={cx('block teaser', className)} style={style}>
-      <>
-        {isEmpty(href) && isEditMode ? (
-          <Message>
-            <div className="teaser-item placeholder">
-              <img src={imageBlockSVG} alt="" />
-              <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
-            </div>
-          </Message>
-        ) : (
-          <Card
-            href={!isEditMode ? href['@id'] : null}
-            openLinkInNewTab={openLinkInNewTab}
-          >
-            <Card.Image
-              src={url && !image?.image_field ? url : undefined}
-              item={!data.overwrite ? href : { ...href, ...filteredData }}
-              image={data.overwrite ? image : undefined}
-              imageComponent={Image}
-            />
-            <Card.Summary>
-              <Summary
-                item={!data.overwrite ? href : { ...href, ...filteredData }}
-                HeadingTag="h2"
-              />
-            </Card.Summary>
-          </Card>
-        )}
-      </>
-    </div>
-  );
-};
-
-TeaserDefaultTemplate.propTypes = {
-  data: PropTypes.objectOf(PropTypes.any).isRequired,
-  isEditMode: PropTypes.bool,
-};
-
-export default TeaserDefaultTemplate;