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 || {})}
>
{
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 || {})}
>
{/* {`Column ${index}`}
*/}
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: [],
});