From f35f9afbfab03547f2bdc39da4dacf1560cecd29 Mon Sep 17 00:00:00 2001 From: Sara Bianchi Date: Mon, 29 Jan 2024 17:19:27 +0100 Subject: [PATCH 1/3] chore: customized EditBlockWrapper with size class to focus image block --- .../manage/Blocks/Block/EditBlockWrapper.jsx | 129 ++++++++++++++++++ src/theme/ItaliaTheme/Blocks/_imageBlock.scss | 93 ++++++++++++- 2 files changed, 217 insertions(+), 5 deletions(-) create mode 100644 src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx diff --git a/src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx b/src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx new file mode 100644 index 000000000..b84f41e09 --- /dev/null +++ b/src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx @@ -0,0 +1,129 @@ +/** + * Customizations: + * - added "size" class to block wrapper + */ + +import React from 'react'; +import { Icon } from '@plone/volto/components'; +import { + blockHasValue, + buildStyleClassNamesFromData, +} from '@plone/volto/helpers'; +import dragSVG from '@plone/volto/icons/drag.svg'; +import { Button } from 'semantic-ui-react'; +import includes from 'lodash/includes'; +import isBoolean from 'lodash/isBoolean'; +import { defineMessages, injectIntl } from 'react-intl'; +import cx from 'classnames'; +import config from '@plone/volto/registry'; +import { BlockChooserButton } from '@plone/volto/components'; + +import trashSVG from '@plone/volto/icons/delete.svg'; + +const messages = defineMessages({ + delete: { + id: 'delete', + defaultMessage: 'delete', + }, +}); + +const EditBlockWrapper = (props) => { + const hideHandler = (data) => { + return ( + !!data.fixed || + (!config.experimental.addBlockButton.enabled && + !(blockHasValue(data) && props.blockProps.editable)) + ); + }; + + const { intl, blockProps, draginfo, children } = props; + const { + allowedBlocks, + block, + blocksConfig, + selected, + type, + onChangeBlock, + onDeleteBlock, + onInsertBlock, + onSelectBlock, + onMutateBlock, + data, + editable, + properties, + showBlockChooser, + navRoot, + contentType, + } = blockProps; + + const visible = selected && !hideHandler(data); + + const required = isBoolean(data.required) + ? data.required + : includes(config.blocks.requiredBlocks, type); + + const styles = buildStyleClassNamesFromData(data.styles); + + return ( +
+
+
+ +
+
+ {children} + {selected && !required && editable && ( + + )} + {config.experimental.addBlockButton.enabled && showBlockChooser && ( + { + if (blockHasValue(data)) { + onSelectBlock(onInsertBlock(id, value)); + } else { + onChangeBlock(id, value); + } + }} + onMutateBlock={onMutateBlock} + allowedBlocks={allowedBlocks} + blocksConfig={blocksConfig} + size="24px" + properties={properties} + navRoot={navRoot} + contentType={contentType} + /> + )} +
+
+
+ ); +}; + +export default injectIntl(EditBlockWrapper); diff --git a/src/theme/ItaliaTheme/Blocks/_imageBlock.scss b/src/theme/ItaliaTheme/Blocks/_imageBlock.scss index 1f79d377c..a4334132f 100644 --- a/src/theme/ItaliaTheme/Blocks/_imageBlock.scss +++ b/src/theme/ItaliaTheme/Blocks/_imageBlock.scss @@ -13,12 +13,95 @@ } } - &.left, - &.right { - margin-bottom: 0; - } - .external-link { display: none; } + + &.align.left, + &.align.right { + margin-bottom: 0.5rem; + } +} + +.cms-ui { + .block.image { + &.align.left, + &.align.right { + margin-bottom: 0; + + img.small, + img.medium, + img.large { + max-width: 100%; + } + } + } + + .block-editor-image { + &.right, + &.left { + .ui.drag.block.image { + z-index: 99; + margin-bottom: 0.3rem; + margin-top: 0.2rem; + max-width: 50%; + + .block.image, + .block.image img { + margin-bottom: 0; + } + } + + &.size-s { + .ui.drag.block.image { + max-width: 15%; + } + } + &.size-m { + .ui.drag.block.image { + max-width: 25%; + } + } + &.size-l { + .ui.drag.block.image { + max-width: 50%; + } + } + } + + &.right { + .block.image { + float: right; + } + .ui.drag.block.image { + margin-left: 1rem; + } + .drag.handle.wrapper { + left: 50%; + } + &.size-l { + .drag.handle.wrapper { + left: 50%; + } + } + &.size-m { + .drag.handle.wrapper { + left: 75%; + } + } + &.size-s { + .drag.handle.wrapper { + left: 85%; + } + } + } + &.left { + .block.image { + float: left; + } + .ui.drag.block.image { + margin-right: 1.7rem; + } + } + } } From b3cb8bc83e2f05e6cca4093ee7527cbbd22b5b07 Mon Sep 17 00:00:00 2001 From: Sara Bianchi Date: Mon, 29 Jan 2024 17:39:34 +0100 Subject: [PATCH 2/3] chore: updated Release.md --- RELEASE.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/RELEASE.md b/RELEASE.md index 2002f3d4b..029f64d93 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -41,6 +41,12 @@ - ... --> +## Versione X.X.X (dd/mm/yyyy) + +### Migliorie + +- Migliorato il focus sulle immagini in edit del blocco Immagine quando queste sono allineate a sinistra o a destra. + ## Versione 11.3.2 (19/01/2023) ### Fix From 7d7764090dca0e237592e53c1e8d81b7afffaf8c Mon Sep 17 00:00:00 2001 From: Sara Bianchi Date: Tue, 30 Jan 2024 16:29:54 +0100 Subject: [PATCH 3/3] chore: removed EditBlockWrapper customization and used has css selector --- .../manage/Blocks/Block/EditBlockWrapper.jsx | 129 ------------------ src/theme/ItaliaTheme/Blocks/_imageBlock.scss | 48 ++++--- 2 files changed, 29 insertions(+), 148 deletions(-) delete mode 100644 src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx diff --git a/src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx b/src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx deleted file mode 100644 index b84f41e09..000000000 --- a/src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx +++ /dev/null @@ -1,129 +0,0 @@ -/** - * Customizations: - * - added "size" class to block wrapper - */ - -import React from 'react'; -import { Icon } from '@plone/volto/components'; -import { - blockHasValue, - buildStyleClassNamesFromData, -} from '@plone/volto/helpers'; -import dragSVG from '@plone/volto/icons/drag.svg'; -import { Button } from 'semantic-ui-react'; -import includes from 'lodash/includes'; -import isBoolean from 'lodash/isBoolean'; -import { defineMessages, injectIntl } from 'react-intl'; -import cx from 'classnames'; -import config from '@plone/volto/registry'; -import { BlockChooserButton } from '@plone/volto/components'; - -import trashSVG from '@plone/volto/icons/delete.svg'; - -const messages = defineMessages({ - delete: { - id: 'delete', - defaultMessage: 'delete', - }, -}); - -const EditBlockWrapper = (props) => { - const hideHandler = (data) => { - return ( - !!data.fixed || - (!config.experimental.addBlockButton.enabled && - !(blockHasValue(data) && props.blockProps.editable)) - ); - }; - - const { intl, blockProps, draginfo, children } = props; - const { - allowedBlocks, - block, - blocksConfig, - selected, - type, - onChangeBlock, - onDeleteBlock, - onInsertBlock, - onSelectBlock, - onMutateBlock, - data, - editable, - properties, - showBlockChooser, - navRoot, - contentType, - } = blockProps; - - const visible = selected && !hideHandler(data); - - const required = isBoolean(data.required) - ? data.required - : includes(config.blocks.requiredBlocks, type); - - const styles = buildStyleClassNamesFromData(data.styles); - - return ( -
-
-
- -
-
- {children} - {selected && !required && editable && ( - - )} - {config.experimental.addBlockButton.enabled && showBlockChooser && ( - { - if (blockHasValue(data)) { - onSelectBlock(onInsertBlock(id, value)); - } else { - onChangeBlock(id, value); - } - }} - onMutateBlock={onMutateBlock} - allowedBlocks={allowedBlocks} - blocksConfig={blocksConfig} - size="24px" - properties={properties} - navRoot={navRoot} - contentType={contentType} - /> - )} -
-
-
- ); -}; - -export default injectIntl(EditBlockWrapper); diff --git a/src/theme/ItaliaTheme/Blocks/_imageBlock.scss b/src/theme/ItaliaTheme/Blocks/_imageBlock.scss index a4334132f..847dbe203 100644 --- a/src/theme/ItaliaTheme/Blocks/_imageBlock.scss +++ b/src/theme/ItaliaTheme/Blocks/_imageBlock.scss @@ -19,21 +19,19 @@ &.align.left, &.align.right { - margin-bottom: 0.5rem; + img { + margin-bottom: 0.5rem; + } } } .cms-ui { - .block.image { - &.align.left, - &.align.right { - margin-bottom: 0; - - img.small, - img.medium, - img.large { - max-width: 100%; - } + .block.image:has(.align.left), + .block.image:has(.align.right) { + img.small, + img.medium, + img.large { + max-width: 100%; } } @@ -42,9 +40,9 @@ &.left { .ui.drag.block.image { z-index: 99; - margin-bottom: 0.3rem; - margin-top: 0.2rem; max-width: 50%; + margin-top: 0.2rem; + margin-bottom: 0.3rem; .block.image, .block.image img { @@ -52,53 +50,65 @@ } } - &.size-s { + &:has(img.small) { .ui.drag.block.image { max-width: 15%; } } - &.size-m { + + &:has(img.medium) { .ui.drag.block.image { max-width: 25%; } } - &.size-l { + + &:has(img.large) { .ui.drag.block.image { max-width: 50%; } } } + /* Image right */ &.right { .block.image { float: right; } + .ui.drag.block.image { margin-left: 1rem; } + .drag.handle.wrapper { left: 50%; } - &.size-l { + + /* Drag and drop icon position */ + &:has(img.large) { .drag.handle.wrapper { left: 50%; } } - &.size-m { + + &:has(img.medium) { .drag.handle.wrapper { left: 75%; } } - &.size-s { + + &:has(img.small) { .drag.handle.wrapper { left: 85%; } } } + + /* Image left */ &.left { .block.image { float: left; } + .ui.drag.block.image { margin-right: 1.7rem; }