diff --git a/packages/volto-light-theme/src/components/Blocks/Separator/schema.js b/packages/volto-light-theme/src/components/Blocks/Separator/schema.js index 91b39ec1..5cdd1693 100644 --- 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 index f6133e35..7c759f0c 100644 --- 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 index 3d57952e..fdce38a7 100644 --- 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 index 60305c82..abc04513 100644 --- 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 &&