Add apply styles to all inputs button

[MAILPOET-2599]

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 = ({
             </div>
           </>
         ) : null}
+        <Button isPrimary onClick={() => applyStylesToAllTextInputs(localStyles)}>
+          {MailPoet.I18n.t('formSettingsApplyToAll')}
+        </Button>
       </PanelBody>
     </Panel>
   );

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,
+  };
+}

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

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'),