From a9a4b00d815894189c49391a0f29ef6933b6d817 Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Tue, 7 Nov 2023 20:23:35 +0200
Subject: [PATCH] breaking(columns): removed extra div that wrapped the column
 children

- it was added to set padding custom padding for that column area but we
  can simply add the padding as inline style to the column just like we
  do with background color and vertical align
---
 package.json                                  |  2 +-
 src/ColumnsBlock/ColumnVariations.test.js     |  1 +
 src/ColumnsBlock/ColumnsBlockView.jsx         | 34 ++++---------------
 .../ColumnsBlockView.test.js.snap             |  8 ++---
 src/Styles/utils.js                           | 14 ++++++++
 5 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 46108ba..4433786 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-columns-block",
-  "version": "6.4.0",
+  "version": "7.0.0",
   "description": "volto-columns-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
diff --git a/src/ColumnsBlock/ColumnVariations.test.js b/src/ColumnsBlock/ColumnVariations.test.js
index 2657ef9..9940841 100644
--- a/src/ColumnsBlock/ColumnVariations.test.js
+++ b/src/ColumnsBlock/ColumnVariations.test.js
@@ -12,6 +12,7 @@ test('renders column variations component', () => {
     intl: {
       locale: 'en',
       formatMessage: () => 'Select layout',
+      messages: {},
     },
   });
 
diff --git a/src/ColumnsBlock/ColumnsBlockView.jsx b/src/ColumnsBlock/ColumnsBlockView.jsx
index 398f051..18ca235 100644
--- a/src/ColumnsBlock/ColumnsBlockView.jsx
+++ b/src/ColumnsBlock/ColumnsBlockView.jsx
@@ -9,18 +9,6 @@ import cx from 'classnames';
 import { getColumns } from './utils';
 import { getStyle } from '@eeacms/volto-columns-block/Styles';
 
-const getSide = (side, v) => {
-  const v_unit = v.unit ? v.unit : 'px';
-  return `${v?.[side] ? `${v[side]}${v_unit}` : '0'}`;
-};
-
-const getSides = (v) => {
-  return `${getSide('top', v)} ${getSide('right', v)} ${getSide(
-    'bottom',
-    v,
-  )} ${getSide('left', v)}`;
-};
-
 const ColumnsBlockView = (props) => {
   const location = useLocation();
   const { gridSizes } = config.blocks.blocksConfig[COLUMNSBLOCK];
@@ -52,22 +40,12 @@ const ColumnsBlockView = (props) => {
               )}
               {...getStyle(column.settings || {})}
             >
-              <div
-                style={
-                  column.settings?.padding
-                    ? {
-                        padding: getSides(column.settings?.padding),
-                      }
-                    : {}
-                }
-              >
-                <RenderBlocks
-                  {...props}
-                  location={location}
-                  metadata={metadata}
-                  content={column}
-                />
-              </div>
+              <RenderBlocks
+                {...props}
+                location={location}
+                metadata={metadata}
+                content={column}
+              />
             </Grid.Column>
           );
         })}
diff --git a/src/ColumnsBlock/__snapshots__/ColumnsBlockView.test.js.snap b/src/ColumnsBlock/__snapshots__/ColumnsBlockView.test.js.snap
index 74b3786..6ae61b1 100644
--- a/src/ColumnsBlock/__snapshots__/ColumnsBlockView.test.js.snap
+++ b/src/ColumnsBlock/__snapshots__/ColumnsBlockView.test.js.snap
@@ -11,16 +11,12 @@ exports[`renders 2 columns 1`] = `
       <div
         class="six wide computer twelve wide mobile six wide tablet column column-blocks-wrapper"
       >
-        <div>
-          left marker
-        </div>
+        left marker
       </div>
       <div
         class="six wide computer twelve wide mobile six wide tablet column column-blocks-wrapper"
       >
-        <div>
-          right
-        </div>
+        right
       </div>
     </div>
   </div>
diff --git a/src/Styles/utils.js b/src/Styles/utils.js
index 1ea5709..39e10f4 100644
--- a/src/Styles/utils.js
+++ b/src/Styles/utils.js
@@ -1,8 +1,22 @@
+const getSide = (side, v) => {
+  const v_unit = v.unit ? v.unit : 'px';
+  return `${v?.[side] ? `${v[side]}${v_unit}` : '0'}`;
+};
+
+const getSides = (v) => {
+  if (!v) return null;
+  return `${getSide('top', v)} ${getSide('right', v)} ${getSide(
+    'bottom',
+    v,
+  )} ${getSide('left', v)}`;
+};
+
 export function getStyle(props) {
   return {
     verticalAlign: props.grid_vertical_align,
     style: {
       backgroundColor: props.backgroundColor,
+      padding: getSides(props.padding),
     },
   };
 }