From abc965e143f815d47d0ddb42efa82b9a13359cdf Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Wed, 25 Aug 2021 13:05:59 +0200 Subject: [PATCH] Add support for colors in column block in form editor [MAILPOET-3654] --- .../form_editor/store/blocks_to_form_body.jsx | 17 ++++++- lib/Form/Block/Column.php | 9 ++++ .../store/blocks_to_form_body.spec.js | 44 +++++++++++++++++++ tests/unit/Form/Block/ColumnTest.php | 27 ++++++++++++ 4 files changed, 96 insertions(+), 1 deletion(-) diff --git a/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/assets/js/src/form_editor/store/blocks_to_form_body.jsx index 3ecd42ab34..d4a81c59e5 100644 --- a/assets/js/src/form_editor/store/blocks_to_form_body.jsx +++ b/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 { diff --git a/lib/Form/Block/Column.php b/lib/Form/Block/Column.php index db282e0a12..d0164ed511 100644 --- a/lib/Form/Block/Column.php +++ b/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 ''; } diff --git a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js index cc105cfb9f..4a274fded9 100644 --- a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js +++ b/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 = { diff --git a/tests/unit/Form/Block/ColumnTest.php b/tests/unit/Form/Block/ColumnTest.php index 35a0f243a2..8987e7f2fd 100644 --- a/tests/unit/Form/Block/ColumnTest.php +++ b/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);'); + } }