unset default aspect ratio in schema & minor fixes to transform & spa…

…cings
kitconcept · Nov 21, 2024 · db94556 · db94556
1 parent 82ab6d9
commit db94556
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 28 deletions.
diff --git a/packages/volto-light-theme/src/components/Blocks/Image/schema.js b/packages/volto-light-theme/src/components/Blocks/Image/schema.js
@@ -52,7 +52,6 @@ export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
         ['1', '1:1'],
         ['16 / 9', '16/9'],
       ],
-      default: '1',
     };
 
     schema.properties.description = {

diff --git a/packages/volto-light-theme/src/components/Blocks/Teaser/schema.js b/packages/volto-light-theme/src/components/Blocks/Teaser/schema.js
@@ -13,7 +13,6 @@ export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
       ['1', '1:1'],
       ['16 / 9', '16/9'],
     ],
-    default: '16 / 9',
   };
 
   return schema;

diff --git a/packages/volto-light-theme/src/theme/_layout.scss b/packages/volto-light-theme/src/theme/_layout.scss
@@ -220,7 +220,6 @@ External link removal for all the blocks.
   & > .block.search .searchBlock-container,
   & > .block h2.headline,
   & > .block.heading .heading-wrapper,
-  & > .block.introduction .block-container,
   & > .block.teaser .teaser-item.default,
   & > .block.highlight .teaser-description-title,
   & > table,

diff --git a/packages/volto-light-theme/src/theme/_variables.scss b/packages/volto-light-theme/src/theme/_variables.scss
@@ -143,10 +143,14 @@ $secondary-grey: #ececec !default;
   --link-color: #0070a2;
   // Comment out following line to turn <a> links the same color as the text
   --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
-$aspect-ratio: var(--image-aspect-ratio, 16/9) !default;
+$aspect-ratio: 16/9 !default;
+
 
 // Weights
 $thin: 100 !default;

diff --git a/packages/volto-light-theme/src/theme/blocks/_image.scss b/packages/volto-light-theme/src/theme/blocks/_image.scss
@@ -21,22 +21,20 @@ figure {
     margin-bottom: 0 !important;
   }
 
-  &.align.left.has--backgroundColor--grey,
-  &.align.right.has--backgroundColor--grey {
-    margin-top: 0;
-
-    figure {
-      // Paddings do not collapse, so we have to substract the ever
-      // present padding bottom for every block
-      padding-top: $heading-text-top-spacing - $block-vertical-space;
+  &.has--block-width--default,
+  &.has--block-width--narrow,
+  &.has--block-width--full {
+    figure:not(.left, .right) {
+      margin-top: $spacing-large;
+      margin-bottom: $spacing-large;
     }
   }
 
   figure {
     img {
       width: 100% !important;
       height: auto;
-      aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
+      aspect-ratio: var(--image-aspect-ratio, auto);
     }
 
     &.right {

diff --git a/packages/volto-light-theme/src/theme/blocks/_introduction.scss b/packages/volto-light-theme/src/theme/blocks/_introduction.scss
@@ -39,6 +39,10 @@
     margin-bottom: $block-vertical-space;
   }
 
+  .block-container {
+    @include default-container-width(); 
+  }
+
   h2 {
     @include highlight-title();
     margin-bottom: $spacing-large;

diff --git a/packages/volto-light-theme/src/theme/blocks/_separator.scss b/packages/volto-light-theme/src/theme/blocks/_separator.scss
@@ -19,7 +19,7 @@
     @include variable-container-width();
 
     &::after {
-      width: var(--layout-container-width);
+      width: calc(100cqw - 2 * $horizontal-space-small-screens);
       max-width: inherit;
     }
   }

diff --git a/packages/volto-light-theme/src/theme/blocks/_teaser.scss b/packages/volto-light-theme/src/theme/blocks/_teaser.scss
@@ -1,6 +1,6 @@
 // Override the Image component `aspect-ratio`
 .teaser-item .image-wrapper img {
-  aspect-ratio: $aspect-ratio !important;
+  aspect-ratio: var( --image-aspect-ratio, $aspect-ratio) !important;
 }
 
 // Block Teaser Standalone

diff --git a/packages/volto-light-theme/src/transforms/to6.ts b/packages/volto-light-theme/src/transforms/to6.ts
@@ -71,23 +71,15 @@ export function migrateToVLT6ColorAndWidthModel(data: BlocksFormData) {
       delete block.styles.align;
     }
 
-    if (
-      block['@type'] === 'image' &&
-      block?.align &&
-      (block?.align === 'wide' || block?.align === 'full')
-    ) {
+    if (block['@type'] === 'image' && !['left', 'right'].includes(block?.align)) {
       block.styles = {
         ...block.styles,
-        'blockWidth:noprefix': findStyleByName(NORMALIZED_WIDTHS, block.align),
+        'blockWidth:noprefix': block.styles?.['blockWidth:noprefix'] ?? findStyleByName(
+          NORMALIZED_WIDTHS,
+          block?.align === 'wide' ? 'default' : (block?.align === 'center' ? 'narrow' : block.align),
+        ),
       };
       block.align = 'center';
     }
-
-    if (block['@type'] === 'image' && !block?.styles?.['blockWidth:noprefix']) {
-      block.styles = {
-        ...block.styles,
-        'blockWidth:noprefix': findStyleByName(NORMALIZED_WIDTHS, 'default'),
-      };
-    }
   }
 }