diff --git a/packages/volto-light-theme/news/435.bugfix b/packages/volto-light-theme/news/435.bugfix new file mode 100644 index 00000000..f10ab461 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/packages/volto-light-theme/src/components/Blocks/Image/schema.js b/packages/volto-light-theme/src/components/Blocks/Image/schema.js index e3fc4b19..0128e265 100644 --- a/packages/volto-light-theme/src/components/Blocks/Image/schema.js +++ b/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'; } diff --git a/packages/volto-light-theme/src/config/blocks.tsx b/packages/volto-light-theme/src/config/blocks.tsx index e5ef35a4..ef58bf2a 100644 --- a/packages/volto-light-theme/src/config/blocks.tsx +++ b/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, }; diff --git a/packages/volto-light-theme/src/theme/_variables.scss b/packages/volto-light-theme/src/theme/_variables.scss index eb2a2651..a5ef82ac 100644 --- a/packages/volto-light-theme/src/theme/_variables.scss +++ b/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;