Add support for colors in column block in form editor

[MAILPOET-3654]

assets/js/src/form_editor/store/blocks_to_form_body.jsx

@@ -188,13 +188,28 @@ const blocksToFormBodyFactory = (
         case 'core/column':
           return {
             type: 'column',
+            body: mapBlocks(block.innerBlocks),
             params: {
               class_name: block.attributes.className || null,
               vertical_alignment: block.attributes.verticalAlignment || null,
               width: block.attributes.width || null,
               padding: block.attributes.style?.spacing?.padding || null,
+              text_color: mapColorSlugToValue(
+                colorDefinitions,
+                block.attributes.textColor,
+                block.attributes.style?.color?.text
+              ),
+              background_color: mapColorSlugToValue(
+                colorDefinitions,
+                block.attributes.backgroundColor,
+                block.attributes.style?.color?.background
+              ),
+              gradient: mapGradientSlugToValue(
+                gradientDefinitions,
+                block.attributes.gradient,
+                block.attributes.style?.color?.gradient
+              ),
             },
-            body: mapBlocks(block.innerBlocks),
           };
         case 'core/columns':
           return {

lib/Form/Block/Column.php

@@ -30,6 +30,15 @@ class Column {
         "padding:{$params['padding']['top']} {$params['padding']['right']} {$params['padding']['bottom']} {$params['padding']['left']}"
       );
     }
+    if (isset($params['text_color'])) {
+      $styles[] = "color:{$params['text_color']};";
+    }
+    if (!empty($params['background_color'])) {
+      $styles[] = "background-color:{$params['background_color']};";
+    }
+    if (isset($params['gradient'])) {
+      $styles[] = "background:{$params['gradient']};";
+    }
     if (!count($styles)) {
       return '';
     }

tests/javascript/form_editor/store/blocks_to_form_body.spec.js

@@ -627,6 +627,30 @@ describe('Blocks to Form Body', () => {
     expect(mapped2.params.background_color).to.be.equal('#bbbbbb');
   });
 
+  it('Should map colors for single column', () => {
+    const columns = { ...nestedColumns };
+    const column = columns.innerBlocks[0];
+    column.attributes = {
+      textColor: 'black',
+      backgroundColor: 'white',
+    };
+    const [mapped] = formBlocksToBody([columns]);
+    expect(mapped.body[0].params.text_color).to.be.equal('#000000');
+    expect(mapped.body[0].params.background_color).to.be.equal('#ffffff');
+
+    column.attributes = {
+      style: {
+        color: {
+          text: '#aaaaaa',
+          background: '#bbbbbb',
+        },
+      },
+    };
+    const [mapped2] = formBlocksToBody([columns]);
+    expect(mapped2.body[0].params.text_color).to.be.equal('#aaaaaa');
+    expect(mapped2.body[0].params.background_color).to.be.equal('#bbbbbb');
+  });
+
   it('Should map gradient for columns', () => {
     const columns = { ...nestedColumns };
     columns.attributes = {
@@ -646,6 +670,26 @@ describe('Blocks to Form Body', () => {
     expect(mapped2.params.gradient).to.be.equal('linear-gradient(95deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%)');
   });
 
+  it('Should map gradient for single column', () => {
+    const columns = { ...nestedColumns };
+    const column = columns.innerBlocks[0];
+    column.attributes = {
+      gradient: 'black-white',
+    };
+    const [mapped] = formBlocksToBody([columns]);
+    expect(mapped.body[0].params.gradient).to.be.equal('linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%)');
+
+    column.attributes = {
+      style: {
+        color: {
+          gradient: 'linear-gradient(95deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%)',
+        },
+      },
+    };
+    const [mapped2] = formBlocksToBody([columns]);
+    expect(mapped2.body[0].params.gradient).to.be.equal('linear-gradient(95deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%)');
+  });
+
   it('Should map class names', () => {
     const columns = { ...nestedColumns };
     columns.attributes = {

tests/unit/Form/Block/ColumnTest.php

@@ -87,4 +87,31 @@ class ColumnTest extends \MailPoetUnitTest {
     $class = $this->htmlParser->getAttribute($column, 'class');
     expect($class->textContent)->stringContainsString('my-class');
   }
+
+  public function testItShouldRenderCustomBackground() {
+    $block = $this->block;
+    $block['params']['background_color'] = '#ffffff';
+    $html = $this->columns->render($block, 'content');
+    $columns = $this->htmlParser->getElementByXpath($html, '//div[1]');
+    $style = $this->htmlParser->getAttribute($columns, 'style');
+    expect($style->textContent)->stringContainsString('background-color:#ffffff;');
+  }
+
+  public function testItShouldRenderCustomTextColor() {
+    $block = $this->block;
+    $block['params']['text_color'] = '#ffffee';
+    $html = $this->columns->render($block, 'content');
+    $columns = $this->htmlParser->getElementByXpath($html, '//div[1]');
+    $style = $this->htmlParser->getAttribute($columns, 'style');
+    expect($style->textContent)->stringContainsString('color:#ffffee;');
+  }
+
+  public function testItShouldGradientBackground() {
+    $block = $this->block;
+    $block['params']['gradient'] = 'linear-gradient(red, yellow)';
+    $html = $this->columns->render($block, 'content');
+    $columns = $this->htmlParser->getElementByXpath($html, '//div[1]');
+    $style = $this->htmlParser->getAttribute($columns, 'style');
+    expect($style->textContent)->stringContainsString('background:linear-gradient(red, yellow);');
+  }
 }