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

@@ -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",

src/ColumnsBlock/ColumnVariations.test.js

@@ -12,6 +12,7 @@ test('renders column variations component', () => {
     intl: {
       locale: 'en',
       formatMessage: () => 'Select layout',
+      messages: {},
     },
   });
 

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

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>

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),
     },
   };
 }