diff --git a/assets/js/src/form_editor/blocks/submit/styles_settings.tsx b/assets/js/src/form_editor/blocks/submit/styles_settings.tsx new file mode 100644 index 0000000000..239a6264eb --- /dev/null +++ b/assets/js/src/form_editor/blocks/submit/styles_settings.tsx @@ -0,0 +1,62 @@ +import React, { useRef } from 'react'; +import MailPoet from 'mailpoet'; +import { + Panel, + PanelBody, + ToggleControl, +} from '@wordpress/components'; +import { partial } from 'lodash'; + +type Styles = { + fullWidth: boolean, + inheritFromTheme: boolean, + bold?: boolean, +} + +type Props = { + styles: Styles, + onChange: (styles: Styles) => any, +} + +const StylesSettings = ({ + styles, + onChange, +}: Props) => { + const localStylesRef = useRef(styles); + const localStyles = localStylesRef.current; + const updateStyles = (property, value) => { + const updated = { ...localStylesRef.current }; + updated[property] = value; + onChange(updated); + localStylesRef.current = updated; + }; + return ( + + +
+ + + {!localStyles.inheritFromTheme ? ( + + ) : null} +
+
+
+ ); +}; + +export default StylesSettings;