Add custom class for columns

eea · Oct 12, 2021 · 0e4783f · 0e4783f
1 parent 35aa796
commit 0e4783f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockView.jsx b/src/ColumnsBlock/ColumnsBlockView.jsx
@@ -3,6 +3,7 @@ import config from '@plone/volto/registry';
 import { Grid } from 'semantic-ui-react';
 import { RenderBlocks } from '@plone/volto/components';
 import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
+import cx from 'classnames';
 
 import { getColumns } from './utils';
 import { getStyle } from '@eeacms/volto-columns-block/Styles';
@@ -17,6 +18,7 @@ const ColumnsBlockView = (props) => {
     ?.replace(/[^a-zA-Z-\s]/gi, '')
     ?.trim()
     ?.replace(/\s+/gi, '-');
+
   return (
     <div className="columns-view" id={customId}>
       <Grid columns={gridSize} className="column-grid">
@@ -25,7 +27,10 @@ const ColumnsBlockView = (props) => {
             <Grid.Column
               key={id}
               {...(gridSizes[gridCols[index]] || gridCols[index])}
-              className="column-blocks-wrapper"
+              className={cx(
+                'column-blocks-wrapper',
+                column.settings?.column_class,
+              )}
               {...getStyle(column.settings || {})}
             >
               <RenderBlocks {...props} metadata={metadata} content={column} />

diff --git a/src/Styles/schema.js b/src/Styles/schema.js
@@ -4,7 +4,7 @@ export const StyleSchema = () => ({
     {
       id: 'default',
       title: 'Style',
-      fields: ['backgroundColor', 'grid_vertical_align'],
+      fields: ['backgroundColor', 'grid_vertical_align', 'column_class'],
     },
   ],
   properties: {
@@ -21,6 +21,10 @@ export const StyleSchema = () => ({
         ['top', 'Top'],
       ],
     },
+    column_class: {
+      title: 'Custom CSS Class',
+      description: 'A custom CSS class, aplicable to this column',
+    },
   },
   required: [],
 });