Fix image block schema (#435)

Co-authored-by: Steve Piercy <[email protected]>
Co-authored-by: David Glick <[email protected]>

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

@@ -0,0 +1 @@
+Don't show image size and alignment settings for image block inside a grid. @danalvrz 

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

@@ -1,5 +1,5 @@
 import { defineMessages } from 'react-intl';
-import { insertInArray, reorderArray } from '@plone/volto/helpers/Utils/Utils';
+import { insertInArray } from '@plone/volto/helpers/Utils/Utils';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -19,7 +19,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 +30,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',
@@ -54,20 +76,6 @@ export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
       ],
     };
 
-    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';
   }

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

@@ -18,7 +18,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';
@@ -206,6 +209,7 @@ export default function install(config: ConfigType) {
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       imageBlockSchemaEnhancer,
+      standAloneImageBlockSchemaEnhancer,
     ),
     dataAdapter: ImageBlockDataAdapter,
   };

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;