make Image Block use image-aspect-ratio custom prop & minor Transform…

… fix
kitconcept · Nov 20, 2024 · d1b843e · d1b843e
1 parent cb56db1
commit d1b843e
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 16 deletions.
diff --git a/packages/volto-light-theme/src/components/Blocks/Separator/schema.js b/packages/volto-light-theme/src/components/Blocks/Separator/schema.js
@@ -30,8 +30,7 @@ export const SeparatorStylingSchema = ({ schema, formData, intl }) => {
     default: 'default',
     filterActions: ['narrow', 'default'],
   };
-
-  if (formData?.styles?.shortLine) {
+
     schema.properties.styles.schema.fieldsets[0].fields = [
       'align:noprefix',
       ...schema.properties.styles.schema.fieldsets[0].fields,
@@ -42,16 +41,22 @@ export const SeparatorStylingSchema = ({ schema, formData, intl }) => {
       title: intl.formatMessage(messages.Alignment),
       default: 'left',
     };
-  }
 
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'shortLine',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-  schema.properties.styles.schema.properties.shortLine = {
-    title: intl.formatMessage(messages.shortline),
-    type: 'boolean',
-  };
+    schema.properties.styles.schema.fieldsets[0].fields = [
+      'shortLine',
+      ...schema.properties.styles.schema.fieldsets[0].fields,
+    ];
+
+    schema.properties.styles.schema.properties.shortLine = {
+      title: intl.formatMessage(messages.shortline),
+      type: 'boolean',
+    };
+
+    // schema.properties.styles.schema.properties['align:noprefix'].disabled =
+    // !formData?.styles?.shortLine;
+
+
+
 
   return schema;
 };
diff --git a/packages/volto-light-theme/src/theme/blocks/_image.scss b/packages/volto-light-theme/src/theme/blocks/_image.scss
@@ -36,6 +36,7 @@ figure {
     img {
       width: 100% !important;
       height: auto;
+      aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
     }
 
     &.right {

diff --git a/packages/volto-light-theme/src/theme/blocks/_separator.scss b/packages/volto-light-theme/src/theme/blocks/_separator.scss
@@ -17,6 +17,11 @@
     max-width: var(--block-width) !important;
     justify-content: var(--block-alignment);
     @include variable-container-width();
+
+    &::after {
+      max-width: inherit;
+      width: var(--layout-container-width);
+    }
   }
 
   @include vertical-space-separator();

diff --git a/packages/volto-light-theme/src/transforms/to6.ts b/packages/volto-light-theme/src/transforms/to6.ts
@@ -36,14 +36,41 @@ export function migrateToVLT6ColorAndWidthModel(data: BlocksFormData) {
       delete block.styles.backgroundColor;
     }
 
-    if (block?.styles?.buttonAlign) {
-      block.styles['blockWidth:noprefix'] = findStyleByName(
-        NORMALIZED_WIDTHS,
-        block.styles.buttonAlign,
-      );
+    if (block['@type'] === '__button') {
+      block.styles = {
+        ...block.styles,
+        'blockWidth:noprefix':
+          block.styles?.['blockWidth:noprefix'] ??
+          findStyleByName(
+            NORMALIZED_WIDTHS,
+            `${block.styles?.buttonAlign === 'wide' ? 'default' : 'narrow'}`,
+          ),
+      }
+
       delete block.styles.buttonAlign;
     }
 
+    if (block['@type'] === 'separator') {
+      block.styles = {
+        ...block.styles,
+        shortLine:
+          block.styles?.['shortLine'] ?? block?.styles?.align === 'left'
+            ? true
+            : false,
+        'align:noprefix': block.styles?.['align:noprefix'] ?? {
+          '--block-alignment': 'var(--align-left)',
+        },
+        'blockWidth:noprefix':
+          block.styles?.['blockWidth:noprefix'] ??
+          findStyleByName(
+            NORMALIZED_WIDTHS,
+            `${block.styles?.align === 'full' ? 'default' : 'narrow'}`,
+          ),
+      };
+
+      delete block.styles.align;
+    }
+
     if (
       block['@type'] === 'image' &&
       block?.align &&