From bdb53b95b89a9f42a88b942434fce8d01cf45af0 Mon Sep 17 00:00:00 2001
From: Sara Bianchi <43245702+SaraBianchi@users.noreply.github.com>
Date: Tue, 30 Jan 2024 17:24:41 +0100
Subject: [PATCH] fix: focus when editing image blocks (#500)

* chore: customized EditBlockWrapper with size class to focus image block

* chore: updated Release.md

* chore: removed EditBlockWrapper customization and used has css selector
---
 RELEASE.md                                    |   3 +
 src/theme/ItaliaTheme/Blocks/_imageBlock.scss | 103 +++++++++++++++++-
 2 files changed, 101 insertions(+), 5 deletions(-)

diff --git a/RELEASE.md b/RELEASE.md
index d5075166f..a8edf225c 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -43,6 +43,9 @@
 
 ## Versione 11.3.3 (30/01/2024)
 
+### Migliorie
+
+- Migliorato il focus sulle immagini in edit del blocco Immagine quando queste sono allineate a sinistra o a destra.
 ### Fix
 
 - Sistemato il layout del blocco elenco per i Bandi
diff --git a/src/theme/ItaliaTheme/Blocks/_imageBlock.scss b/src/theme/ItaliaTheme/Blocks/_imageBlock.scss
index 1f79d377c..847dbe203 100644
--- a/src/theme/ItaliaTheme/Blocks/_imageBlock.scss
+++ b/src/theme/ItaliaTheme/Blocks/_imageBlock.scss
@@ -13,12 +13,105 @@
     }
   }
 
-  &.left,
-  &.right {
-    margin-bottom: 0;
-  }
-
   .external-link {
     display: none;
   }
+
+  &.align.left,
+  &.align.right {
+    img {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+.cms-ui {
+  .block.image:has(.align.left),
+  .block.image:has(.align.right) {
+    img.small,
+    img.medium,
+    img.large {
+      max-width: 100%;
+    }
+  }
+
+  .block-editor-image {
+    &.right,
+    &.left {
+      .ui.drag.block.image {
+        z-index: 99;
+        max-width: 50%;
+        margin-top: 0.2rem;
+        margin-bottom: 0.3rem;
+
+        .block.image,
+        .block.image img {
+          margin-bottom: 0;
+        }
+      }
+
+      &:has(img.small) {
+        .ui.drag.block.image {
+          max-width: 15%;
+        }
+      }
+
+      &:has(img.medium) {
+        .ui.drag.block.image {
+          max-width: 25%;
+        }
+      }
+
+      &: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%;
+      }
+
+      /* Drag and drop icon position */
+      &:has(img.large) {
+        .drag.handle.wrapper {
+          left: 50%;
+        }
+      }
+
+      &:has(img.medium) {
+        .drag.handle.wrapper {
+          left: 75%;
+        }
+      }
+
+      &:has(img.small) {
+        .drag.handle.wrapper {
+          left: 85%;
+        }
+      }
+    }
+
+    /* Image left */
+    &.left {
+      .block.image {
+        float: left;
+      }
+
+      .ui.drag.block.image {
+        margin-right: 1.7rem;
+      }
+    }
+  }
 }