@kitconcept/volto-light-theme 6.0.0-alpha.6 → 6.0.0-alpha.7

package/.changelog.draft

@@ -1,7 +1,15 @@
-## 6.0.0-alpha.6 (2024-12-10)
+## 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
 
-- Fixed footerlinks error if the link is created but not set. @sneridagh [#445](https://github.com/kitconcept/volto-light-theme/pull/445)
+- 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)
 
 

package/CHANGELOG.md

@@ -8,6 +8,20 @@
 
 <!-- towncrier release notes start -->
 
+## 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

package/package.json

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

package/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,6 +31,29 @@ export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
       1,
     );
 
+    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',
       '--image-aspect-ratio',
@@ -49,28 +72,33 @@ export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
       widget: 'select',
       title: 'Aspect Ratio',
       choices: [
-        ['1', '1:1'],
         ['16 / 9', '16/9'],
+        ['1', '1:1'],
       ],
     };
 
-    schema.properties.description = {
-      title: intl.formatMessage(messages.Description),
-      widget: 'textarea',
-    };
-    schema.properties.title = {
-      title: intl.formatMessage(messages.Title),
-    };
-
-    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.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;
+}

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

@@ -28,3 +28,15 @@ export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
   schema.properties.styles.schema.fieldsets[0].fields = [];
   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;
+};

package/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,

package/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 {
+  gridTeaserDisableAlignHandlersSchema,
+  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,11 @@ 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,
+  aspectRatioSchemaEnhancer,
+} from '../components/Blocks/Image/schema';
 import { ImageBlockDataAdapter } from '../components/Blocks/Image/adapter';
 
 import { AccordionSchemaEnhancer } from '../components/Blocks/Accordion/schema';
@@ -206,6 +213,7 @@ export default function install(config: ConfigType) {
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       imageBlockSchemaEnhancer,
+      standAloneImageBlockSchemaEnhancer,
     ),
     dataAdapter: ImageBlockDataAdapter,
   };
@@ -238,13 +246,14 @@ export default function install(config: ConfigType) {
   config.blocks.blocksConfig.gridBlock.blocksConfig.image.schemaEnhancer =
     composeSchema(
       imageBlockSchemaEnhancer,
+      aspectRatioSchemaEnhancer,
       gridImageDisableSizeAndPositionHandlersSchema,
     );
   config.blocks.blocksConfig.gridBlock.blocksConfig.image.dataAdapter =
     ImageBlockDataAdapter;
 
   config.blocks.blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
-    composeSchema(gridTeaserDisableStylingSchema, teaserSchemaEnhancer);
+    composeSchema(gridTeaserDisableAlignHandlersSchema, teaserSchemaEnhancer);
 
   config.blocks.blocksConfig.gridBlock.blocksConfig.listing.allowed_headline_tags =
     [['h2', 'h2']];

package/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;

package/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 {