From d7b514d526779dd8b4da9b86c865c6050ca9a201 Mon Sep 17 00:00:00 2001 From: Pavel Dohnal Date: Tue, 28 Apr 2020 15:35:46 +0200 Subject: [PATCH] Add color to divider [MAILPOET-2835] --- assets/js/src/form_editor/blocks/divider/edit.tsx | 7 +++++++ views/form/editor.html | 5 +++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/assets/js/src/form_editor/blocks/divider/edit.tsx b/assets/js/src/form_editor/blocks/divider/edit.tsx index 93bd34e0ec..70e14ed50f 100644 --- a/assets/js/src/form_editor/blocks/divider/edit.tsx +++ b/assets/js/src/form_editor/blocks/divider/edit.tsx @@ -2,6 +2,7 @@ import React from 'react'; import classnames from 'classnames'; import MailPoet from 'mailpoet'; import { InspectorControls } from '@wordpress/block-editor'; +import ColorSettings from 'form_editor/components/color_settings'; import { Panel, PanelBody, @@ -50,6 +51,11 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => { allowReset onChange={(dividerWidth) => (setAttributes({ dividerWidth }))} /> + (setAttributes({ color }))} + /> ); @@ -57,6 +63,7 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => { if (attributes.type === Types.Divider) { dividerStyles.borderTopStyle = attributes.style; dividerStyles.borderTopWidth = attributes.dividerHeight; + dividerStyles.borderTopColor = attributes.color; dividerStyles.height = attributes.dividerHeight; dividerStyles.width = `${attributes.dividerWidth}%`; } diff --git a/views/form/editor.html b/views/form/editor.html index a665493e1d..2289ea1e3e 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -165,8 +165,9 @@ 'blockDividerStyleSolid': _x('Solid', 'Setting in the divider block'), 'blockDividerStyleDashed': _x('Dashed', 'Setting in the divider block'), 'blockDividerStyleDotted': _x('Dotted', 'Setting in the divider block'), - 'blockDividerDividerHeight': _x(' Divider Height', 'Settings in the divider block'), - 'blockDividerDividerWidth': _x(' Divider Width', 'Settings in the divider block'), + 'blockDividerDividerHeight': _x('Divider Height', 'Settings in the divider block'), + 'blockDividerDividerWidth': _x('Divider Width', 'Settings in the divider block'), + 'blockDividerColor': _x('Color', 'Settings in the divider block'), 'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'), 'formPreviewMobile': _x('Mobile', 'Mobile browser preview mode'), 'formPreviewOthersDisclaimer': __('Psssst. We try our best to show you what the widget might look like, but better check the final result on your website.'),