@kitconcept/volto-light-theme 8.0.0-alpha.28 → 8.0.0-alpha.29

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

@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import type { GetSiteResponse } from '@plone/types';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
@@ -5,6 +6,7 @@ import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/Def
 import type { SummaryComponentType } from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
 import Card from '../../../primitives/Card/Card';
 import config from '@plone/volto/registry';
+import { GridContext } from '@plone/volto/components/manage/Blocks/Grid/context';
 
 type FormState = {
   site: { data: GetSiteResponse };
@@ -15,7 +17,13 @@ const TeaserDefaultTemplate = (props) => {
     (state) => state.site?.data,
   );
   const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
-  const { data, isEditMode } = props;
+  const { data, isEditMode, isContainer } = props;
+  const columns = useContext(GridContext);
+  const sizes = config.blocks.blocksConfig.teaser?.getSizes?.({
+    data,
+    inGrid: isContainer,
+    columns,
+  });
   const href = data.href?.[0] || {};
   const image = data.preview_image?.[0];
   const url = data.preview_image?.[0]?.['@id'];
@@ -50,6 +58,7 @@ const TeaserDefaultTemplate = (props) => {
         item={!data.overwrite ? href : { ...href, ...localOverrides }}
         image={data.overwrite ? image : undefined}
         imageComponent={Image}
+        sizes={sizes}
       />
       <Card.Summary>
         <Summary

package/src/components/Blocks/Video/VideoSidebar.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { VideoBlockSchema } from '@plone/volto/components/manage/Blocks/Video/schema';
+import { Segment } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import videoSVG from '@plone/volto/icons/videocamera.svg';
+
+const messages = defineMessages({
+  Video: {
+    id: 'Video',
+    defaultMessage: 'Video',
+  },
+  NoVideo: {
+    id: 'No Video selected',
+    defaultMessage: 'No Video selected',
+  },
+});
+
+const VideoSidebar = (props) => {
+  const {
+    blocksConfig,
+    blocksErrors,
+    data,
+    block,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
+  const intl = useIntl();
+  const schema = VideoBlockSchema({ ...props, intl });
+  const dataAdapter = blocksConfig[data['@type']].dataAdapter;
+
+  return (
+    <>
+      {!data.url ? (
+        <Segment className="sidebar-metadata-container" secondary>
+          {intl.formatMessage(messages.NoVideo)}
+          <Icon name={videoSVG} size="100px" color="#b8c6c8" />
+        </Segment>
+      ) : (
+        <BlockDataForm
+          schema={schema}
+          title={intl.formatMessage(messages.Video)}
+          // START CUSTOMIZATION
+          onChangeField={(id, value) => {
+            dataAdapter({
+              block,
+              data,
+              id,
+              onChangeBlock,
+              value,
+            });
+          }}
+          // END CUSTOMIZATION
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+          navRoot={navRoot}
+          contentType={contentType}
+          errors={blocksErrors}
+        />
+      )}
+    </>
+  );
+};
+
+export default VideoSidebar;

package/src/components/Blocks/Video/View.jsx

@@ -0,0 +1,38 @@
+/**
+ * View video block.
+ * @module components/manage/Blocks/Video/View
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Body from '@plone/volto/components/manage/Blocks/Video/Body';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import cx from 'classnames';
+
+/**
+ * View video block class.
+ * @class View
+ * @extends Component
+ */
+const View = (props) => {
+  const { data, className, style } = props;
+
+  return (
+    // START CUSTOMIZATION
+    <div className={cx('block video', className)} style={style}>
+      {/* // END CUSTOMIZATION */}
+      <Body data={data} />
+    </div>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default withBlockExtensions(View);

package/src/components/Blocks/Video/adapter.js

@@ -0,0 +1,28 @@
+export const VideoBlockDataAdapter = ({
+  block,
+  data,
+  id,
+  item,
+  onChangeBlock,
+  value,
+}) => {
+  let dataSaved = {
+    ...data,
+    [id]: value,
+  };
+
+  const align = dataSaved.styles?.['align:noprefix'];
+  const isFloating = align === 'left' || align === 'right';
+
+  if (isFloating) {
+    dataSaved = {
+      ...dataSaved,
+      styles: {
+        ...dataSaved.styles,
+        'blockWidth:noprefix': 'default',
+      },
+    };
+  }
+
+  onChangeBlock(block, dataSaved);
+};

package/src/components/Blocks/Video/adapter.test.js

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from 'vitest';
+import { VideoBlockDataAdapter } from './adapter';
+
+const alignLeft = { 'align:noprefix': 'left' };
+const alignCenter = { 'align:noprefix': 'center' };
+
+describe('VideoBlockDataAdapter', () => {
+  it('applies the default width for a floating video', () => {
+    const onChangeBlock = vi.fn();
+
+    VideoBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'video', styles: { ...alignLeft } },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://example.com/video',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'video',
+      url: 'https://example.com/video',
+      styles: {
+        ...alignLeft,
+        'blockWidth:noprefix': 'default',
+      },
+    });
+  });
+
+  it('leaves the styles untouched for a non-floating video', () => {
+    const onChangeBlock = vi.fn();
+
+    VideoBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'video', styles: { ...alignCenter } },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://example.com/video',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'video',
+      url: 'https://example.com/video',
+      styles: { ...alignCenter },
+    });
+  });
+
+  it('leaves the styles untouched when no alignment is set', () => {
+    const onChangeBlock = vi.fn();
+
+    VideoBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'video' },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://example.com/video',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'video',
+      url: 'https://example.com/video',
+    });
+  });
+});

package/src/components/Blocks/Video/schema.js

@@ -1,5 +1,45 @@
+import config from '@plone/volto/registry';
+import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+
+const messages = defineMessages({
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
+  },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+});
 export const videoBlockSchemaEnhancer = ({ formData, schema, intl }) => {
-  schema.properties.align.default = 'wide';
-  schema.properties.align.actions = ['left', 'right', 'center', 'wide', 'full'];
+  addStyling({ schema, intl });
+
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (f) => f !== 'align',
+  );
+
+  const align = formData.styles?.['align:noprefix'];
+  const isFloating = align === 'left' || align === 'right';
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'align:noprefix',
+    'blockWidth:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+  schema.properties.styles.schema.properties['align:noprefix'] = {
+    widget: 'blockAlignment',
+    title: intl.formatMessage(messages.Alignment),
+    default: 'center',
+    actions: config.blocks.alignments.map((alignment) => alignment.name),
+  };
+  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+    widget: 'blockWidth',
+    title: intl.formatMessage(messages.BlockWidth),
+    default: 'default',
+    actions: config.blocks.widths.map((width) => width.name),
+  };
+  schema.properties.styles.schema.properties['blockWidth:noprefix'].disabled =
+    isFloating;
   return schema;
 };

package/src/components/Footer/Footer.tsx

@@ -20,9 +20,9 @@ const Footer = () => {
 
   return (
     <footer id="footer">
-      <div className="pre-footer">
+      <Container className="pre-footer">
         <SlotRenderer name="preFooter" content={content} />
-      </div>
+      </Container>
       <SlotRenderer name="footer" content={content} />
       <Container className="post-footer">
         <SlotRenderer name="postFooter" content={content} />

package/src/components/Footer/slots/FollowUsLogoAndLinks.tsx

@@ -1,5 +1,4 @@
 import { FormattedMessage } from 'react-intl';
-import cx from 'classnames';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import { Container } from '@plone/components';
@@ -34,27 +33,12 @@ const FollowUsPostFooterLogoAndLinks = ({ content }: { content: Content }) => {
     : flattenToAppURL(post_footer_logo?.download);
 
   return content ? (
-    <Container
-      className={cx('default follow-us-links-and-logo', {
-        'no-logo': !post_footer_logo?.data && !post_footer_logo?.download,
-      })}
-    >
-      <div className="followus-and-links">
-        {social_links?.length > 0 && (
-          <div className="follow-us">
-            <span>
-              <FormattedMessage id="Follow us:" defaultMessage="Follow us:" />
-            </span>
-            <SlotRenderer name="followUs" content={content} />
-          </div>
-        )}
-        {footer_links?.length > 0 && (
-          <div className="footer-links">
-            <SlotRenderer name="footerLinks" content={content} />
-            <LinkList links={footer_links} />
-          </div>
-        )}
-      </div>
+    <Container className="default follow-us-links-and-logo">
+      {social_links?.length > 0 && (
+        <div className="follow-us">
+          <SlotRenderer name="followUs" content={content} />
+        </div>
+      )}
       {post_footer_logo?.data || post_footer_logo?.download ? (
         <div className="footer-logo">
           <span>
@@ -63,7 +47,6 @@ const FollowUsPostFooterLogoAndLinks = ({ content }: { content: Content }) => {
               defaultMessage="Sponsored by:"
             />
           </span>
-          {/* @ts-ignore */}
           <ConditionalLink
             condition={content?.post_footer_logo_link}
             to={content?.post_footer_logo_link}
@@ -73,6 +56,12 @@ const FollowUsPostFooterLogoAndLinks = ({ content }: { content: Content }) => {
           </ConditionalLink>
         </div>
       ) : null}
+      {footer_links?.length > 0 && (
+        <div className="footer-links">
+          <SlotRenderer name="footerLinks" content={content} />
+          <LinkList links={footer_links} />
+        </div>
+      )}
     </Container>
   ) : null;
 };

package/src/components/Theme/ImageView.jsx

@@ -23,6 +23,7 @@ const ImageView = ({ content }) => {
   const Image = config.getComponent('Image').component;
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const width = config.settings.layout.defaultContainerWidth;
 
   return (
     <Container id="page-document" className="view-wrapper image-view">
@@ -30,7 +31,13 @@ const ImageView = ({ content }) => {
       <h1 className="documentFirstHeading">{content.title}</h1>
       {content?.image?.download && (
         <figure>
-          <Image item={content} imageField="image" alt="" responsive={true} />
+          <Image
+            item={content}
+            imageField="image"
+            alt=""
+            responsive={true}
+            sizes={`(max-width: ${width}px) 100vw, ${width}px`}
+          />
           <Caption
             title={content.title}
             description={content.description}

package/src/config/blocks.tsx

@@ -30,6 +30,8 @@ import {
   standAloneImageBlockSchemaEnhancer,
 } from '../components/Blocks/Image/schema';
 import { ImageBlockDataAdapter } from '../components/Blocks/Image/adapter';
+import { VideoBlockDataAdapter } from '../components/Blocks/Video/adapter';
+import { MapsBlockDataAdapter } from '../components/Blocks/Maps/adapter';
 
 import { AccordionSchemaEnhancer } from '../components/Blocks/Accordion/schema';
 
@@ -66,6 +68,7 @@ declare module '@plone/types' {
   }
   export interface BlockConfigBase {
     themes?: StyleDefinition[];
+    alignments?: StyleDefinition[];
     defaultTheme: string;
     allowedBlocks?: string[];
     allowed_headline_tags?: string[][];
@@ -81,6 +84,10 @@ declare module '@plone/types' {
   export interface SettingsConfig {
     blockModel?: number;
   }
+
+  export interface BlocksConfig {
+    alignments: StyleDefinition[];
+  }
 }
 
 export default function install(config: ConfigType) {
@@ -147,6 +154,31 @@ export default function install(config: ConfigType) {
     },
   ];
 
+  // Default block alignments
+  config.blocks.alignments = [
+    {
+      style: {
+        '--block-alignment': 'var(--align-left)',
+      },
+      name: 'left',
+      label: 'Left',
+    },
+    {
+      style: {
+        '--block-alignment': 'var(--align-center)',
+      },
+      name: 'center',
+      label: 'Center',
+    },
+    {
+      style: {
+        '--block-alignment': 'var(--align-right)',
+      },
+      name: 'right',
+      label: 'Right',
+    },
+  ];
+
   config.registerUtility({
     name: 'blockThemesEnhancer',
     type: 'styleWrapperStyleObjectEnhancer',
@@ -159,6 +191,20 @@ export default function install(config: ConfigType) {
     method: styleDefinitionsEnhancer,
   });
 
+  config.registerUtility({
+    name: 'align:noprefix',
+    type: 'styleFieldDefinition',
+    method: ({ data }: { data: { '@type'?: string } }) =>
+      config.blocks.blocksConfig?.[data?.['@type'] ?? '']?.alignments ||
+      config.blocks.alignments,
+  });
+
+  config.registerUtility({
+    name: 'blockWidth:noprefix',
+    type: 'styleFieldDefinition',
+    method: () => config.blocks.widths,
+  });
+
   // No required blocks except eventMetadata
   config.blocks.requiredBlocks = [
     ...config.blocks.requiredBlocks,
@@ -323,15 +369,25 @@ export default function install(config: ConfigType) {
     category: 'title',
   };
 
+  const getTeaserSizes = ({ inGrid = false, columns = 1 } = {}) => {
+    const { defaultContainerWidth, tabletBreakpoint } = config.settings.layout;
+    const desktopWidth = Math.floor(
+      defaultContainerWidth / (inGrid ? columns : 2),
+    );
+    return `(max-width: ${tabletBreakpoint}px) 100vw, ${desktopWidth}px`;
+  };
+
   config.blocks.blocksConfig.teaser = {
     ...config.blocks.blocksConfig.teaser,
     group: 'teasers',
     imageScale: 'larger',
+    getSizes: getTeaserSizes,
     schemaEnhancer: composeSchema(defaultStylingSchema, teaserSchemaEnhancer),
   };
 
   config.blocks.blocksConfig.video = {
     ...config.blocks.blocksConfig.video,
+    dataAdapter: VideoBlockDataAdapter,
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       videoBlockSchemaEnhancer,
@@ -339,6 +395,7 @@ export default function install(config: ConfigType) {
   };
   config.blocks.blocksConfig.maps = {
     ...config.blocks.blocksConfig.maps,
+    dataAdapter: MapsBlockDataAdapter,
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       mapsBlockSchemaEnhancer,
@@ -410,5 +467,11 @@ export default function install(config: ConfigType) {
     schemaEnhancer: sliderBlockSchemaEnhancer,
   };
 
+  // Highlight Block
+  config.blocks.blocksConfig.highlight = {
+    ...config.blocks.blocksConfig.highlight,
+    schemaEnhancer: defaultStylingSchema,
+  };
+
   return config;
 }

package/src/config/classExtenders.ts

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

package/src/config/settings.ts

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

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

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

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

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

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

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

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

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

package/src/index.ts

@@ -6,6 +6,7 @@ import { Container } from '@plone/components';
 import EventView from './components/Theme/EventView';
 
 import { migrateToVLT6ColorAndWidthModel } from './transforms/to6';
+import { migrateToVLT8FloatingBlocks } from './transforms/to8';
 
 import installSettings from './config/settings';
 import installBlocks from './config/blocks';
@@ -98,6 +99,13 @@ const applyConfig = (config: ConfigType) => {
     method: migrateToVLT6ColorAndWidthModel,
   });
 
+  config.registerUtility({
+    name: 'migrateToVLT8FloatingBlocks',
+    type: 'transform',
+    dependencies: { reducer: 'content' },
+    method: migrateToVLT8FloatingBlocks,
+  });
+
   config.views.contentTypesViews.Event = EventView;
 
   config.addonReducers = {

package/src/primitives/Card/Card.tsx

@@ -94,10 +94,12 @@ type CardImageProps = {
   imageComponent?: React.ComponentType<any>;
   children?: React.ReactNode;
   showPlaceholderImage?: boolean;
+  sizes?: string;
 };
 
 const CardImage = (props: CardImageProps) => {
-  const { src, item, image, imageComponent, showPlaceholderImage } = props;
+  const { src, item, image, imageComponent, showPlaceholderImage, sizes } =
+    props;
   const Image = imageComponent || DefaultImage;
 
   return (
@@ -115,6 +117,7 @@ const CardImage = (props: CardImageProps) => {
             alt=""
             loading="lazy"
             responsive={true}
+            sizes={sizes}
           />
         )
       ) : (