chore: customized EditBlockWrapper with size class to focus image block

RELEASE.md

@@ -43,6 +43,9 @@
 
 ## 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.
 ### Fix
 
 - Risolto un problema di visualizzazione degli argomenti indicati come altri argomenti nel blocco Argomenti quando il loro numero è esiguo

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 (
+    <div
+      ref={draginfo.innerRef}
+      {...draginfo.draggableProps}
+      // Right now, we can have the alignment information in the styles property or in the
+      // block data root, we inject the classname here for having control over the whole
+      // Block Edit wrapper
+      className={cx(`block-editor-${data['@type']}`, styles, {
+        [data.align]: data.align,
+        [`size-${data.size}`]: data.size,
+      })}
+    >
+      <div style={{ position: 'relative' }}>
+        <div
+          style={{
+            visibility: visible ? 'visible' : 'hidden',
+            display: 'inline-block',
+          }}
+          {...draginfo.dragHandleProps}
+          className="drag handle wrapper"
+        >
+          <Icon name={dragSVG} size="18px" />
+        </div>
+        <div className={`ui drag block inner ${type}`}>
+          {children}
+          {selected && !required && editable && (
+            <Button
+              icon
+              basic
+              onClick={() => onDeleteBlock(block, true)}
+              className="delete-button"
+              aria-label={intl.formatMessage(messages.delete)}
+            >
+              <Icon name={trashSVG} size="18px" />
+            </Button>
+          )}
+          {config.experimental.addBlockButton.enabled && showBlockChooser && (
+            <BlockChooserButton
+              data={data}
+              block={block}
+              onInsertBlock={(id, value) => {
+                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}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default injectIntl(EditBlockWrapper);

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;
+      }
+    }
+  }
 }