@kitconcept/volto-light-theme 8.0.0-alpha.27 → 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/components/Widgets/ObjectList.tsx

@@ -16,10 +16,11 @@ import deleteSVG from '@plone/volto/icons/delete.svg';
 import addSVG from '@plone/volto/icons/add.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { v4 as uuid } from 'uuid';
-import type { BlockConfigBase, Content, JSONSchema } from '@plone/types';
+import type { Content, JSONSchema } from '@plone/types';
 import type { IntlShape } from 'react-intl';
 import config from '@plone/volto/registry';
 import isEmpty from 'lodash/isEmpty';
+import { type DragEndEvent } from '@dnd-kit/core';
 
 const messages = defineMessages({
   labelRemoveItem: {
@@ -114,11 +115,22 @@ export type ObjectListWidgetProps = {
    */
   schemaEnhancer?: (args: {
     schema: JSONSchema & { addMessage: string };
-    formData: BlockConfigBase;
+    formData: object;
     intl: IntlShape;
-    navRoot: Content;
-    contentType: string;
+    navRoot?: Content;
+    contentType?: string;
   }) => JSONSchema;
+  /**
+   * Another optional function to enhance the schema.
+   * (Deprecated API with fewer supported arguments.
+   * This is here for backwards-compatibility
+   * with the ObjectListWidget in Volto.)
+   */
+  schemaExtender?: (
+    schema: JSONSchema,
+    formData: object,
+    intl: IntlShape,
+  ) => JSONSchema;
 };
 
 const EMPTY_SCHEMA = {
@@ -141,14 +153,16 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
     value = [],
     onChange,
     schemaEnhancer,
+    schemaExtender,
     schemaName,
   } = props;
 
   const schema =
-    config.getUtility({
-      type: 'schema',
-      name: schemaName,
-    }).method ||
+    (schemaName &&
+      config.getUtility({
+        type: 'schema',
+        name: schemaName,
+      }).method) ||
     props.schema ||
     EMPTY_SCHEMA;
 
@@ -170,7 +184,7 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
 
   const intl = useIntl();
 
-  function handleChangeActiveObject(index) {
+  function handleChangeActiveObject(index: number) {
     const newIndex = activeObject === index ? -1 : index;
 
     setActiveObject(newIndex);
@@ -178,13 +192,22 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
 
   const objectSchema =
     typeof schema === 'function' ? schema({ ...props, activeObject }) : schema;
+  const getEnhancedSchema = (data: object) => {
+    const enhancedSchema = schemaEnhancer
+      ? schemaEnhancer({ schema: objectSchema, formData: data, intl })
+      : objectSchema;
+    const extendedSchema = schemaExtender
+      ? schemaExtender(objectSchema, data, intl)
+      : enhancedSchema;
+    return extendedSchema;
+  };
 
-  function handleDragEnd(event) {
+  function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
 
-    if (active.id !== over.id) {
+    if (active.id !== over?.id) {
       const source = value.findIndex((item) => item['@id'] === active.id);
-      const destination = value.findIndex((item) => item['@id'] === over.id);
+      const destination = value.findIndex((item) => item['@id'] === over?.id);
 
       const newValue = reorderArray(value, source, destination);
       onChange(id, newValue);
@@ -205,13 +228,9 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
                 '@id': uuid(),
               };
 
-              const objSchema = schemaEnhancer
-                ? // @ts-ignore - TODO Make sure this continues to have sense
-                  schemaEnhancer({ schema: objectSchema, formData: data, intl })
-                : objectSchema;
               const dataWithDefaults = applySchemaDefaults({
                 data,
-                schema: objSchema,
+                schema: getEnhancedSchema(data),
                 intl,
               });
 
@@ -318,16 +337,7 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
                       id={`${uid}`}
                       key={`olw-${uid}`}
                       block={block}
-                      schema={
-                        schemaEnhancer
-                          ? // @ts-ignore - TODO Make sure this continues to have sense
-                            schemaEnhancer({
-                              schema: objectSchema,
-                              formData: item,
-                              intl,
-                            })
-                          : objectSchema
-                      }
+                      schema={getEnhancedSchema(item)}
                       value={item}
                       onChange={(fieldId: string, fieldValue: any) => {
                         const newvalue = value.map((v, i) =>

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;