Merge branch 'main' into externallink

CHANGELOG.md

@@ -8,6 +8,32 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.8 (2024-12-13)
+
+### Bugfix
+
+- Remove the `aspect-ratio` handler by default in images and teasers. @sneridagh [#448](https://github.com/kitconcept/volto-light-theme/pull/448)
+
+## 6.0.0-alpha.7 (2024-12-11)
+
+### Feature
+
+- Image aspect-ratio handlers for Teaser/Image inside a grid. @sneridagh [#447](https://github.com/kitconcept/volto-light-theme/pull/447)
+
+### Bugfix
+
+- Don't show image size and alignment settings for image block inside a grid. @danalvrz [#435](https://github.com/kitconcept/volto-light-theme/pull/435)
+
+### Documentation
+
+- Update compatibility matrix. @sneridagh [#447](https://github.com/kitconcept/volto-light-theme/pull/447)
+
+## 6.0.0-alpha.6 (2024-12-10)
+
+### Bugfix
+
+- Fixed footerlinks error if the link is created but not set. @sneridagh [#445](https://github.com/kitconcept/volto-light-theme/pull/445)
+
 ## 6.0.0-alpha.5 (2024-12-09)
 
 ### Bugfix

docs/compatibility.md

@@ -13,8 +13,12 @@ myst:
 |-------------|---------------|
 | 3.x.x       |   >= Volto 17.0.0-alpha.16  |
 | 4.x.x       |   < Volto 17.18.0  |
-| 5.x.x / 6.x.x |   >= Volto 17.18.0 or >=Volto 18.0.0-alpha.36  |
+| 5.x.x       |   >= Volto 17.18.0 |
+| 6.x.x       |   >=Volto 18.0.0  |
 
 Compatibility with Volto 16 might be achieved, but it has to be at the customization level in the specific project add-on.
 This is mainly due to the `RenderBlocks` customization that is based on the one in Volto 17, because of the Grid block in core and the autogrouping feature.
+
+Same applies for achieving compatibility with Volto 17 beyond 5.x.x series, it will require backporting the utilities registry along with the client transforms for Redux reducers and the `styleWrapperStyleObjectEnhancer` feature.
+
 See more information about the other dependencies in `peerDependencies` in {file}`package.json`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme-dev",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.8",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "types": "src/types/index.d.ts",

packages/volto-light-theme/CHANGELOG.md

@@ -8,6 +8,32 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.8 (2024-12-13)
+
+### Bugfix
+
+- Remove the `aspect-ratio` handler by default in images and teasers. @sneridagh [#448](https://github.com/kitconcept/volto-light-theme/pull/448)
+
+## 6.0.0-alpha.7 (2024-12-11)
+
+### Feature
+
+- Image aspect-ratio handlers for Teaser/Image inside a grid. @sneridagh [#447](https://github.com/kitconcept/volto-light-theme/pull/447)
+
+### Bugfix
+
+- Don't show image size and alignment settings for image block inside a grid. @danalvrz [#435](https://github.com/kitconcept/volto-light-theme/pull/435)
+
+### Documentation
+
+- Update compatibility matrix. @sneridagh [#447](https://github.com/kitconcept/volto-light-theme/pull/447)
+
+## 6.0.0-alpha.6 (2024-12-10)
+
+### Bugfix
+
+- Fixed footerlinks error if the link is created but not set. @sneridagh [#445](https://github.com/kitconcept/volto-light-theme/pull/445)
+
 ## 6.0.0-alpha.5 (2024-12-09)
 
 ### Bugfix

packages/volto-light-theme/news/449.bugfix

@@ -0,0 +1 @@
+Remove teaser styling tab inside grids since it's empty. @sneridagh

packages/volto-light-theme/news/450.bugfix

@@ -0,0 +1 @@
+Remove the last dangling `aspect-ratio` handler from image block. @sneridagh

packages/volto-light-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.8",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/types/index.d.ts",

packages/volto-light-theme/src/components/Blocks/Image/schema.js

@@ -1,5 +1,6 @@
 import { defineMessages } from 'react-intl';
-import { insertInArray, reorderArray } from '@plone/volto/helpers/Utils/Utils';
+import { insertInArray } from '@plone/volto/helpers/Utils/Utils';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -19,7 +20,6 @@ const messages = defineMessages({
 
 export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
   if (formData.url) {
-    schema.fieldsets = reorderArray(schema.fieldsets, 2, 1);
     schema.fieldsets[0].fields = insertInArray(
       schema.fieldsets[0].fields,
       'description',
@@ -31,46 +31,64 @@ export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
       1,
     );
 
-    schema.properties.styles.schema.fieldsets[0].fields = [
-      'blockWidth:noprefix',
-      '--image-aspect-ratio',
-      ...schema.properties.styles.schema.fieldsets[0].fields,
-    ];
-
-    schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
-      widget: 'blockWidth',
-      title: intl.formatMessage(messages.BlockWidth),
-      default: 'default',
-      filterActions: ['narrow', 'default', 'layout', 'full'],
-      actions: config.blocks.widths,
-    };
-
-    schema.properties.styles.schema.properties['--image-aspect-ratio'] = {
-      widget: 'select',
-      title: 'Aspect Ratio',
-      choices: [
-        ['1', '1:1'],
-        ['16 / 9', '16/9'],
-      ],
-    };
-
     schema.properties.description = {
       title: intl.formatMessage(messages.Description),
       widget: 'textarea',
     };
     schema.properties.title = {
       title: intl.formatMessage(messages.Title),
     };
+  }
+
+  return schema;
+};
 
+export const standAloneImageBlockSchemaEnhancer = ({
+  formData,
+  schema,
+  intl,
+}) => {
+  if (formData.url) {
     schema.properties.align.default = 'center';
     schema.properties.align.actions = ['left', 'right', 'center'];
 
     schema.properties.size.default = 'l';
     schema.properties.size.disabled = formData.align === 'center';
+    schema.properties.styles.schema.fieldsets[0].fields = [
+      'blockWidth:noprefix',
+      ...schema.properties.styles.schema.fieldsets[0].fields,
+    ];
+
+    schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+      widget: 'blockWidth',
+      title: intl.formatMessage(messages.BlockWidth),
+      default: 'default',
+      filterActions: ['narrow', 'default', 'layout', 'full'],
+      actions: config.blocks.widths,
+    };
 
     schema.properties.styles.schema.properties['blockWidth:noprefix'].disabled =
       formData.align === 'left' || formData.align === 'right';
   }
 
   return schema;
 };
+
+export function aspectRatioSchemaEnhancer({ schema, intl }) {
+  addStyling({ schema, intl });
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+    '--image-aspect-ratio',
+  ];
+  schema.properties.styles.schema.properties['--image-aspect-ratio'] = {
+    widget: 'select',
+    title: 'Aspect Ratio',
+    choices: [
+      ['16 / 9', '16/9'],
+      ['1', '1:1'],
+    ],
+  };
+
+  return schema;
+}

packages/volto-light-theme/src/components/Blocks/Teaser/schema.js

@@ -1,30 +1,22 @@
 export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
   schema.properties.href.selectedItemAttrs.push('getRemoteUrl');
 
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-    '--image-aspect-ratio',
-  ];
-
-  schema.properties.styles.schema.properties['--image-aspect-ratio'] = {
-    widget: 'select',
-    title: 'Aspect Ratio',
-    choices: [
-      ['1', '1:1'],
-      ['16 / 9', '16/9'],
-    ],
-  };
-
   return schema;
 };
 
-// Not sure why, but it was in the new one, check with blockModel3
-// export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
-//   schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
-//   return schema;
-// };
 export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
-  // Remove all the existing fields from the default schema
-  schema.properties.styles.schema.fieldsets[0].fields = [];
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  return schema;
+};
+
+export const gridTeaserDisableAlignHandlersSchema = ({
+  schema,
+  formData,
+  intl,
+}) => {
+  schema.properties.styles.schema.fieldsets[0].fields =
+    schema.properties.styles.schema.fieldsets[0].fields.filter(
+      (item) => !['align'].includes(item),
+    );
   return schema;
 };

packages/volto-light-theme/src/components/Footer/FooterLinks.tsx

@@ -14,8 +14,11 @@ const FooterLinks = (props: FooterLinksProps) => {
       {!isEmpty(links?.blocks)
         ? links.blocks_layout.items.map((itemId) => {
             const link = links.blocks[itemId];
+
+            if (isEmpty(link) || !link.href) return null;
+
             const title = link.title || link.href[0]['title'];
-            const href = flattenToAppURL(link.href[0]['@id']);
+            const href = flattenToAppURL(link.href[0]?.['@id']);
 
             if (!href) return null;
 

packages/volto-light-theme/src/components/Widgets/BackgroundColorWidget.tsx

@@ -3,8 +3,7 @@ import config from '@plone/volto/registry';
 import type { ColorPickerWidgetProps } from '@plone/volto/components/manage/Widgets/ColorPickerWidget';
 
 const BackgroundColorWidget = (props: ColorPickerWidgetProps) => {
-  const colors: ColorPickerWidgetProps['colors'] =
-    config.settings.backgroundColors;
+  const colors: ColorPickerWidgetProps['colors'] = config.blocks.themes;
 
   const defaultValue = colors.find(
     (color) => color.name === config.settings.defaultBackgroundColor,

packages/volto-light-theme/src/config/blocks.tsx

@@ -6,9 +6,12 @@ import cloneDeep from 'lodash/cloneDeep';
 import { composeSchema } from '@plone/volto/helpers/Extensions';
 import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
 import { defaultStylingSchema } from '../components/Blocks/schema';
-import { teaserSchemaEnhancer } from '../components/Blocks/Teaser/schema';
+import {
+  gridTeaserDisableStylingSchema,
+  teaserSchemaEnhancer,
+} from '../components/Blocks/Teaser/schema';
 import { videoBlockSchemaEnhancer } from '../components/Blocks/Video/schema';
-import { gridTeaserDisableStylingSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
+
 import { gridImageDisableSizeAndPositionHandlersSchema } from '@plone/volto/components/manage/Blocks/Image/schema';
 import { disableBgColorSchema } from '../components/Blocks/disableBgColorSchema';
 
@@ -18,7 +21,10 @@ import GridListingBlockTemplate from '../components/Blocks/Listing/GridTemplate'
 import { ButtonStylingSchema } from '../components/Blocks/Button/schema';
 import { SeparatorStylingSchema } from '../components/Blocks/Separator/schema';
 
-import { imageBlockSchemaEnhancer } from '../components/Blocks/Image/schema';
+import {
+  imageBlockSchemaEnhancer,
+  standAloneImageBlockSchemaEnhancer,
+} from '../components/Blocks/Image/schema';
 import { ImageBlockDataAdapter } from '../components/Blocks/Image/adapter';
 
 import { AccordionSchemaEnhancer } from '../components/Blocks/Accordion/schema';
@@ -129,6 +135,7 @@ export default function install(config: ConfigType) {
     if (!data['@type']) return {};
     if (data.theme) {
       const blockConfig = config.blocks.blocksConfig[data['@type']];
+      if (!blockConfig) return {};
       const blockStyleDefinitions =
         // We look up for the blockThemes in the block's config, then in the global config
         // We keep `colors` for BBB, but `themes` should be used
@@ -206,6 +213,7 @@ export default function install(config: ConfigType) {
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       imageBlockSchemaEnhancer,
+      standAloneImageBlockSchemaEnhancer,
     ),
     dataAdapter: ImageBlockDataAdapter,
   };
@@ -244,7 +252,7 @@ export default function install(config: ConfigType) {
     ImageBlockDataAdapter;
 
   config.blocks.blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
-    composeSchema(gridTeaserDisableStylingSchema, teaserSchemaEnhancer);
+    composeSchema(teaserSchemaEnhancer, gridTeaserDisableStylingSchema);
 
   config.blocks.blocksConfig.gridBlock.blocksConfig.listing.allowed_headline_tags =
     [['h2', 'h2']];

packages/volto-light-theme/src/theme/_variables.scss

@@ -145,11 +145,11 @@ $secondary-grey: #ececec !default;
   --link-foreground-color: var(--link-color);
 
   // It is possible to set an aspect ratio for all images, using the folowing CSS custom property:
-  // --image-aspect-ratio: 16/9;
+  // --image-aspect-ratio: calc(16 / 9);
 }
 
 // Image Aspect Ratio
-$aspect-ratio: 16/9 !default;
+$aspect-ratio: calc(16 / 9) !default;
 
 // Weights
 $thin: 100 !default;

packages/volto-light-theme/src/theme/blocks/_grid.scss

@@ -30,7 +30,7 @@
 
   // Override the Image component `aspect-ratio`
   .block.image img {
-    aspect-ratio: $aspect-ratio !important;
+    aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
   }
 
   .block.teaser {

packages/volto-light-theme/src/theme/blocks/_teaser.scss

@@ -19,7 +19,7 @@
     }
   }
 
-  .teaser-item {
+  .teaser-item:not(.placeholder) {
     align-items: start;
     padding-bottom: 40px; // same as vertical spacing in margin-bottom
     border-bottom: 1px solid $black;