wrap block helpers in edit mode

kitconcept · Nov 30, 2024 · 4a62545 · 4a62545
1 parent 2ea72ee
commit 4a62545
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 54 deletions.
diff --git a/...-light-theme/src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx b/...-light-theme/src/customizations/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx
@@ -158,51 +158,52 @@ const EditBlockWrapper = (props) => {
         classNames,
       )}
     >
-      <div className="block-controls">
-        {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>
-        )}
-        {index > 0 && selected && (
-          <Button
-            icon
-            basic
-            onClick={() =>
-              onChangeFormData(moveBlock(properties, index, index - 1))
-            }
-            className="move-up-button"
-            aria-label={intl.formatMessage(messages.moveUp)}
-          >
-            <Icon name={upSVG} size="18px" />
-          </Button>
-        )}
-        {index < blocks_layout.items.length - 1 && selected && (
-          <Button
-            icon
-            basic
-            onClick={() =>
-              onChangeFormData(moveBlock(properties, index, index + 1))
-            }
-            className="move-down-button"
-            aria-label={intl.formatMessage(messages.moveDown)}
-          >
-            <Icon name={downSVG} size="18px" />
-          </Button>
-        )}
-      </div>
-      <div className="border-top border-line"></div>
-      <div className="border-bottom border-line"></div>
-      <div className="border-left border-line"></div>
-      <div className="border-right border-line"></div>
-
-      {config.experimental.addBlockButton.enabled && showBlockChooser && (
+      <div className="block-edit-helpers">
+        <div className="block-controls">
+          {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>
+          )}
+          {index > 0 && selected && (
+            <Button
+              icon
+              basic
+              onClick={() =>
+                onChangeFormData(moveBlock(properties, index, index - 1))
+              }
+              className="move-up-button"
+              aria-label={intl.formatMessage(messages.moveUp)}
+            >
+              <Icon name={upSVG} size="18px" />
+            </Button>
+          )}
+          {index < blocks_layout.items.length - 1 && selected && (
+            <Button
+              icon
+              basic
+              onClick={() =>
+                onChangeFormData(moveBlock(properties, index, index + 1))
+              }
+              className="move-down-button"
+              aria-label={intl.formatMessage(messages.moveDown)}
+            >
+              <Icon name={downSVG} size="18px" />
+            </Button>
+          )}
+        </div>
+        <div className="border-top border-line"></div>
+        <div className="border-bottom border-line"></div>
+        <div className="border-left border-line"></div>
+        <div className="border-right border-line"></div>
+
+        {config.experimental.addBlockButton.enabled && showBlockChooser && (
         <BlockChooserButton
           data={data}
           block={block}
@@ -222,6 +223,9 @@ const EditBlockWrapper = (props) => {
           contentType={contentType}
         />
       )}
+      </div>
+
+
 
       {children}
     </div>

diff --git a/packages/volto-light-theme/src/theme/_layout.scss b/packages/volto-light-theme/src/theme/_layout.scss
@@ -109,15 +109,15 @@ footer {
 
 // Container widths for configurable via block styling wrapper
 // TODO: consider renaming "align" property to something more meaningful
-[style*='--block-width: var(--narrow-container-width)'] {
-  @include adjustMarginsToContainer($narrow-container-width);
-}
-[style*='--block-width: var(--default-container-width)'] {
-  @include adjustMarginsToContainer($default-container-width);
-}
-[style*='--block-width: var(--layout-container-width)'] {
-  @include adjustMarginsToContainer($layout-container-width);
-}
+// [style*='--block-width: var(--narrow-container-width)'] {
+//   @include adjustMarginsToContainer($narrow-container-width);
+// }
+// [style*='--block-width: var(--default-container-width)'] {
+//   @include adjustMarginsToContainer($default-container-width);
+// }
+// [style*='--block-width: var(--layout-container-width)'] {
+//   @include adjustMarginsToContainer($layout-container-width);
+// }
 
 // Container defaults definitions for elements
 // BMv3 compliant, we target the block inner container only