From 41907886f735b259f2903707b05efea8b135e9d4 Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Fri, 9 Oct 2020 15:57:44 +0300
Subject: [PATCH] Add vertical align to columns

---
 src/ColumnsBlock/ColumnsBlockEdit.jsx |  2 +-
 src/ColumnsBlock/ColumnsBlockView.jsx |  9 ++-------
 src/Styles/index.js                   |  5 ++++-
 src/Styles/schema.js                  | 10 +++++++++-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index 16f7a36..fd7eef0 100644
--- a/src/ColumnsBlock/ColumnsBlockEdit.jsx
+++ b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -192,7 +192,7 @@ class ColumnsBlockEdit extends React.Component {
                 className="block-column"
                 key={colId}
                 {...(gridSizes[gridCols[index]] || gridCols[index])}
-                style={getStyle(data?.data?.blocks?.[colId]?.settings || {})}
+                {...getStyle(data?.data?.blocks?.[colId]?.settings || {})}
               >
                 <div className="column-header"></div>
                 <BlocksForm
diff --git a/src/ColumnsBlock/ColumnsBlockView.jsx b/src/ColumnsBlock/ColumnsBlockView.jsx
index 26a56d2..993b3a3 100644
--- a/src/ColumnsBlock/ColumnsBlockView.jsx
+++ b/src/ColumnsBlock/ColumnsBlockView.jsx
@@ -9,12 +9,7 @@ import { getStyle } from '@eeacms/volto-columns-block/Styles';
 
 const ColumnsBlockView = (props) => {
   const { gridSizes } = blocks.blocksConfig[COLUMNSBLOCK];
-  const {
-    data = {},
-    gridSize = 12,
-    gridCols = [],
-    block_title,
-  } = props.data;
+  const { data = {}, gridSize = 12, gridCols = [], block_title } = props.data;
   const metadata = props.metadata || props.properties;
   const columnList = getColumns(data);
   return (
@@ -27,7 +22,7 @@ const ColumnsBlockView = (props) => {
               key={id}
               {...(gridSizes[gridCols[index]] || gridCols[index])}
               className="column-blocks-wrapper"
-              style={getStyle(column.settings || {})}
+              {...getStyle(column.settings || {})}
             >
               {/* <h4>{`Column ${index}`}</h4> */}
               <RenderBlocks {...props} metadata={metadata} content={column} />
diff --git a/src/Styles/index.js b/src/Styles/index.js
index e16f8ff..25b5b7c 100644
--- a/src/Styles/index.js
+++ b/src/Styles/index.js
@@ -8,6 +8,9 @@ export function makeStyleSchema({ available_colors }) {
 
 export function getStyle(props) {
   return {
-    backgroundColor: props.backgroundColor,
+    verticalAlign: props.grid_vertical_align,
+    style: {
+      backgroundColor: props.backgroundColor,
+    },
   };
 }
diff --git a/src/Styles/schema.js b/src/Styles/schema.js
index 4e44ee8..a1df2e9 100644
--- a/src/Styles/schema.js
+++ b/src/Styles/schema.js
@@ -4,7 +4,7 @@ export const StyleSchema = () => ({
     {
       id: 'default',
       title: 'Style',
-      fields: ['backgroundColor'],
+      fields: ['backgroundColor', 'grid_vertical_align'],
     },
   ],
   properties: {
@@ -13,6 +13,14 @@ export const StyleSchema = () => ({
       type: 'color',
       widget: 'simple_color_picker',
     },
+    grid_vertical_align: {
+      title: 'Vertical align',
+      choices: [
+        ['bottom', 'Bottom'],
+        ['middle', 'Middle'],
+        ['top', 'Top'],
+      ],
+    },
   },
   required: [],
 });