diff --git a/assets/js/src/form_editor/components/form_background.jsx b/assets/js/src/form_editor/components/form_background.jsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx index 2500548f38..00b4eefd5c 100644 --- a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx +++ b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx @@ -1,16 +1,44 @@ +import React, { useState } from 'react'; import { + ColorIndicator, + ColorPalette, Panel, PanelBody, } from '@wordpress/components'; -import React from 'react'; import MailPoet from 'mailpoet'; import PropTypes from 'prop-types'; +import { useSelect } from '@wordpress/data'; const BasicSettingsPanel = ({ onToggle, isOpened }) => { + const [selectedColor, setSelectedColor] = useState(undefined); + const settingsColors = useSelect( + (select) => { + const { getSettings } = select('core/block-editor'); + return getSettings().colors; + }, + [] + ); return ( - Styles +
+ + {MailPoet.I18n.t('formSettingsStylesBackgroundColor')} + { + selectedColor !== undefined + && ( + + ) + } + + +
); diff --git a/views/form/editor.html b/views/form/editor.html index 0dfb30dff8..f3b1edbdb5 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -35,6 +35,7 @@ 'form': __('Form'), 'formSettings': _x('Settings', 'A settings section heading'), 'formSettingsStyles': __('Styles'), + 'formSettingsStylesBackgroundColor': __('Background Color'), 'customFieldSettings': _x('Custom field settings', 'A settings section heading'), 'customFieldsFormSettings': _x('Form settings', 'A settings section heading'), 'formPlacement': _x('Form Placement', 'A settings section heading'),