From 85574a3002c3909c68b61fea40ddcb9c490b26e1 Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Thu, 3 Nov 2022 20:37:48 +0200
Subject: [PATCH] change(column): wip adding styling schema as a block enhancer

---
 src/ColumnsBlock/icons/image-narrow.svg |  5 +++
 src/ColumnsBlock/schema.js              | 55 +++++++++++++++++++++++++
 src/index.js                            |  3 ++
 3 files changed, 63 insertions(+)
 create mode 100644 src/ColumnsBlock/icons/image-narrow.svg

diff --git a/src/ColumnsBlock/icons/image-narrow.svg b/src/ColumnsBlock/icons/image-narrow.svg
new file mode 100644
index 0000000..627d74f
--- /dev/null
+++ b/src/ColumnsBlock/icons/image-narrow.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13L11.9333 11V25L10 23H26L24.0667 25V11L26 13H10ZM26 11V18V21.5V23.5V25H10V11H26Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 31H29V29H7V31Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 7H29V5H7V7Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/ColumnsBlock/schema.js b/src/ColumnsBlock/schema.js
index 8168bc9..d8816e9 100644
--- a/src/ColumnsBlock/schema.js
+++ b/src/ColumnsBlock/schema.js
@@ -1,4 +1,19 @@
 import { defineMessages } from 'react-intl';
+import { cloneDeep } from 'lodash';
+
+import config from '@plone/volto/registry';
+
+import imageFitSVG from '@eeacms/volto-columns-block/ColumnsBlock/icons/image-narrow.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import { COLUMNSBLOCK } from '../constants';
+
+const ALIGN_INFO_MAP = {
+  narrow_width: [imageFitSVG, 'Narrow width'],
+  container_width: [imageFitSVG, 'Container width'],
+  wide_width: [imageWideSVG, 'Wide width'],
+  full: [imageFullSVG, 'Full width'],
+};
 
 const messages = defineMessages({
   labelColumn: {
@@ -80,3 +95,43 @@ export const ColumnsBlockSchema = (intl) => ({
   },
   required: [],
 });
+
+export const addStylingFieldsetSchemaEnhancer = ({ schema }) => {
+  const applied = schema.fieldsets[0].fields.includes('styling');
+  const enableStyling = config.blocks.blocksConfig[COLUMNSBLOCK].enableStyling;
+
+  if (!applied && enableStyling) {
+    const resSchema = cloneDeep(schema);
+
+    resSchema.fieldsets.push({
+      id: 'styling',
+      fields: ['styles'],
+      title: 'Styling',
+    });
+    resSchema.properties.styles = {
+      widget: 'object',
+      title: 'Styling',
+      schema: {
+        fieldsets: [
+          {
+            id: 'default',
+            title: 'Default',
+            fields: ['size'],
+          },
+        ],
+        properties: {
+          size: {
+            widget: 'style_align',
+            title: 'Section size',
+            actions: Object.keys(ALIGN_INFO_MAP),
+            actionsInfoMap: ALIGN_INFO_MAP,
+          },
+        },
+        required: [],
+      },
+    };
+    return resSchema;
+  }
+
+  return schema;
+};
diff --git a/src/index.js b/src/index.js
index 8741e21..b86917d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,6 +17,7 @@ import { COLUMNSBLOCK } from './constants';
 import { cloneColumnsBlockData } from './utils';
 
 import { getBlocks } from '@plone/volto/helpers';
+import { addStylingFieldsetSchemaEnhancer } from './ColumnsBlock/schema';
 
 const extendedSchema = (config) => {
   const choices = Object.keys(config.blocks.blocksConfig)
@@ -58,6 +59,8 @@ export default function install(config) {
     mostUsed: false,
     blockHasOwnFocusManagement: true,
     schema: extendedSchema(config),
+    enableStyling: true,
+    schemaEnhancer: addStylingFieldsetSchemaEnhancer,
     sidebarTab: 1,
     security: {
       addPermission: [],