diff --git a/assets/js/src/form_editor/blocks/input_styles_settings.jsx b/assets/js/src/form_editor/blocks/input_styles_settings.jsx index 15cfbd1ca2..8d15f906d3 100644 --- a/assets/js/src/form_editor/blocks/input_styles_settings.jsx +++ b/assets/js/src/form_editor/blocks/input_styles_settings.jsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import MailPoet from 'mailpoet'; import { + Button, ColorIndicator, ColorPalette, Panel, @@ -8,7 +9,7 @@ import { RangeControl, ToggleControl, } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { partial } from 'underscore'; import PropTypes from 'prop-types'; @@ -28,6 +29,8 @@ const InputStylesSettings = ({ [] ); + const { applyStylesToAllTextInputs } = useDispatch('mailpoet-form-editor'); + const updateStyles = (property, value) => { const updated = { ...localStyles }; updated[property] = value; @@ -108,6 +111,9 @@ const InputStylesSettings = ({ ) : null} + ); diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx index 228be8c981..48d1061ad1 100644 --- a/assets/js/src/form_editor/store/actions.jsx +++ b/assets/js/src/form_editor/store/actions.jsx @@ -211,3 +211,10 @@ export function* blocksChangedInBlockEditor(blocks) { blocks, }; } + +export function* applyStylesToAllTextInputs(styles) { + yield { + type: 'APPLY_STYLES_TO_ALL_TEXT_INPUTS', + styles, + }; +} diff --git a/assets/js/src/form_editor/store/controls.jsx b/assets/js/src/form_editor/store/controls.jsx index f3992d4448..108c8cfdef 100644 --- a/assets/js/src/form_editor/store/controls.jsx +++ b/assets/js/src/form_editor/store/controls.jsx @@ -18,6 +18,15 @@ const formatApiErrorMessage = (response) => { return errorMessage; }; +// Recursively apply callback on every block in blocks tree +const mapBlocks = (blocks, callback) => blocks.map((block) => { + const result = callback(block); + if (block.innerBlocks) { + result.innerBlocks = mapBlocks(block.innerBlocks, callback); + } + return result; +}); + export default { SAVE_FORM() { if (select('mailpoet-form-editor').getIsFormSaving()) { @@ -132,6 +141,21 @@ export default { }); }, + APPLY_STYLES_TO_ALL_TEXT_INPUTS(actionData) { + const currentBlocks = select('mailpoet-form-editor').getFormBlocks(); + const updatedBlocks = mapBlocks(currentBlocks, (block) => { + const updatedBlock = { ...block }; + if ( + ['mailpoet-form/last-name-input', 'mailpoet-form/first-name-input', 'mailpoet-form/email-input'].includes(block.name) + || block.name.startsWith('mailpoet-form/custom-text') + ) { + updatedBlock.attributes.styles = actionData.styles; + } + return updatedBlock; + }); + dispatch('core/block-editor').resetBlocks(updatedBlocks); + }, + /** * We want to ensure that email input and submit are always present. * @param actionData {{type: string, blocks: Object[]}} blocks property contains editor blocks diff --git a/views/form/editor.html b/views/form/editor.html index a7b90cec8a..34ff7155c3 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -52,6 +52,7 @@ 'formSettingsBorderSize': _x('Border Size', 'A label for checkbox in form style settings'), 'formSettingsBorderRadius': _x('Border Radius', 'A label for checkbox in form style settings'), 'formSettingsBorderColor': _x('Border Color', 'A label for checkbox in form style settings'), + 'formSettingsApplyToAll': __('Apply styles to all inputs'), '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'),