Skip to content

Conversation

@iamdharmesh
Copy link
Collaborator

@iamdharmesh iamdharmesh commented Feb 6, 2025

Description of the Change

The PR updates the Mailchimp form block to include settings for selecting an audience list, reordering fields, toggling field and group visibility, adjusting padding and margin, typography settings, and modifying colors. The following major changes were made as part of these block updates:

Block Updates:

  • Updated the header and subheader markup to H2 and H3, and made them editable within the block.
  • Added list selection to the block settings and added toggle options for group visibility in the block sidebar.
  • Added form field reordering and field visibility controls. Made the form field labels editable.
  • Added toggles for "Double Opt-In," "Update Existing Subscribers," and "Include Unsubscribe Link" under the form settings in the block sidebar.
  • Made the "Subscribe" button text and unsubscribe link text editable.
  • Added various settings such as color, typography, dimensions, and border under the styles tab in the block sidebar.

Settings Page Updates:

  • Removed the "CSS Cheat Sheet" section.
  • Removed the "Use JavaScript Support?" option.
  • Removed the "Use JavaScript Datepicker?" option.
  • Removed the "Custom Styling" settings (these settings will continue to work for users who have enabled them).
  • Removed the "Remove Mailchimp CSS" settings (these settings will continue to work for users who have enabled them).

Screenshot 2025-03-19 at 3 18 46 PM

Screen.Recording.2025-03-19.at.12.56.07.PM.mov

Note

  • The PR adds a separate class for block form submission handling, which introduces some code duplication. However, this duplication is necessary to keep the legacy code working as it is and legacy code will be removed/merged in future code enhancements.
  • Some E2E tests have been added as TODOs to be implemented in the future once the existing open E2E test PR is merged. Additionally, mocking the Mailchimp API for E2E testing might improve the process.

Closes #82

How to test the Change

  1. Insert the "Mailchimp List Subscribe Form" block in the editor and verify that it automatically selects the list configured in general settings, with merge fields visibility pre-selected based on the current settings.
  2. Update the header and subheader, then confirm that the changes appear correctly on the front end.
  3. Reorder the form fields, save the block, and check that the front end displays the fields in the configured order.
  4. Update the form fields' visibility and ensure the changes are accurately reflected on the front end.
  5. Add or remove merge fields in the Mailchimp settings, then go to wp-admin Mailchimp settings, click "Update List" to fetch the latest form fields, edit the block, and verify that the form fields update accordingly.
  6. Toggle the visibility of the groups from the block sidebar and verify that the changes are visible both in the editor and on the front end.
  7. Experiment with various style options from the Styles tab to ensure they function as expected.
  8. Change the list from the block sidebar and verify that the subscribe form updates with the merge fields corresponding to the selected list.
  9. Test the subscribe process using different scenarios to confirm that the form works properly, provides the expected validation or error messages, and subscribes users to the correct list.
  10. Update the toggles for "Double Opt-In," "Update Existing Subscribers," and "Include Unsubscribe Link" in the form settings, and verify that they operate correctly.

Backward Compatibility:

  1. Ensure that the existing shortcode and widget continue to function without issues.
  2. Edit an existing block and verify that it updates correctly with the form fields and settings.
  3. Enable the "Custom Styling" settings on the trunk branch, switch to PR this branch, and confirm that they continue to work until explicitly disabled.
  4. Enable the "Remove Mailchimp CSS" settings on the trunk branch, switch to this PR branch, and confirm that they continue to work until disabled.
  5. Perform overall smoke testing to ensure that the plugin works as expected.

Changelog Entry

Changed - Updated the Mailchimp list subscribe form block to include settings for selecting an audience list, reordering fields, toggling field and group visibility, and various other settings.
Removed - The "CSS Cheat Sheet" section from the Mailchimp settings page.
Removed - The "Use JavaScript Support?" option from the Mailchimp settings page.
Removed - The "Use JavaScript Datepicker?" option from the Mailchimp settings page.
Removed - The "Custom Styling" settings from the Mailchimp settings page.
Removed - The "Remove Mailchimp CSS" settings from the Mailchimp settings page.

Credits

Props @jeffpaul @dkotter @iamdharmesh

Checklist:

  • I agree to follow this project's Code of Conduct.
  • I have updated the documentation accordingly.
  • I have added tests to cover my change.
  • All new and existing tests pass.

@iamdharmesh iamdharmesh self-assigned this Feb 6, 2025
@github-actions github-actions bot added this to the 1.7.0 milestone Feb 6, 2025
@iamdharmesh iamdharmesh marked this pull request as ready for review March 19, 2025 15:40
@github-actions github-actions bot added the needs:code-review This requires code review. label Mar 19, 2025
Copy link
Collaborator

@dkotter dkotter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work here, this looks really nice!

In addition to the few minor comments I've added, seems like we could use some extra spacing between fields in the admin. Things look fine on the front-end but when rendered in the admin, some fields have no spacing between each other:

Admin rendering of fields

</div>
)}
<Disabled>
<InterestGroups
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like any groups that are shown can't be moved, is that correct? Would be nice to be able to move those around like other fields if possible

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, groups are not added as inner blocks, so they are not movable. I placed them in the sidebar to differentiate them from form fields, and I’m not sure how frequently users use them.

However, we can make them movable by converting them into inner blocks. Once converted, they will function like form fields, and their visibility can be managed directly from the editor.

I think it would be good to make them work like form fields. Should I convert them into inner blocks?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think user expectation is that they'll be able to move these around like other fields so if we can accomplish that, I think that's the way to go. That said, I don't think it's critical and we could tackle that in a follow-up PR if we want, that way we can continue to move this along

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will raise the follow-up PR next week. Thanks

@qasumitbagthariya
Copy link
Collaborator

qasumitbagthariya commented Mar 25, 2025

QA Update ✅


I have verified this PR in the enhancement/341 branch which has been fixed and is functioning as intended.

I tested the following on this branch:

  1. Insert the "Mailchimp List Subscribe Form" block in the editor and verify that it automatically selects the list configured in general settings, with merge fields visibility pre-selected based on the current settings. ✅
  2. Update the header and subheader, then confirm that the changes appear correctly on the front end. ✅
  3. Reorder the form fields, save the block, and check that the front end displays the fields in the configured order. ✅
  4. Update the form fields' visibility and ensure the changes are accurately reflected on the front end. ✅
  5. Add or remove merge fields in the Mailchimp settings, then go to wp-admin Mailchimp settings, click "Update List" to fetch the latest form fields, edit the block, and verify that the form fields update accordingly. ✅
  6. Toggle the visibility of the groups from the block sidebar and verify that the changes are visible both in the editor and on the front end. ✅
  7. Experiment with various style options from the Styles tab to ensure they function as expected. ✅
  8. Change the list from the block sidebar and verify that the subscribe form updates with the merge fields corresponding to the selected list. ✅
  9. Test the subscribe process using different scenarios to confirm that the form works properly, provides the expected validation or error messages, and subscribes users to the correct list. ✅
  10. Update the toggles for "Double Opt-In," "Update Existing Subscribers," and "Include Unsubscribe Link" in the form settings, and verify that they operate correctly. ✅
  11. Ensure that the existing shortcode and widget continue to function without issues.
Screen.Recording.2025-03-25.at.6.44.50.PM.mov
Screen.Recording.2025-03-25.at.6.59.20.PM.mov

Testing Environment

  • WordPress: 6.7.2
  • Theme: Storefront 4.6.1
  • Theme: Twenty Twenty-Four 1.3
  • PHP: 8.0.30
  • Web Server: Nginx 1.20.2
  • Browser: Chrome
  • OS: macOS 15.2
  • Branch: enhancement/82

Steps to Test- As mentioned in the PR description.
Test Results - It is working as expected.
Functional Demo / Screencast -
Special Notes - Ready for UAT
Testing Document status:
Cases related to this Issue/PR are added to the Critical Flow Wiki pages:

  • Yes - pending
  • Not Required/Applicable for this PR

iamdharmesh and others added 2 commits March 31, 2025 17:03
[Block Updates] Move Audience Groups to the InnerBlocks to allow reordering.
@qasumitbagthariya
Copy link
Collaborator

Regression / Smoke Test Report ✅

Tested with the smoke-testing branch, it works as expected, similar to the fix-specific branch.

Testing Environment

  • WordPress: 6.7.2
  • Theme: Storefront 4.6.0
  • Theme: Twenty Twenty-Four 1.3
  • PHP: 8.2.23
  • Web Server: Nginx 1.20.2
  • Browser: Chrome
  • OS: macOS 15.2
  • Branch: smoke-testing

Next Step- Ready to Merge 🚀

@vikrampm1 vikrampm1 merged commit 54cdcd4 into develop Apr 7, 2025
12 checks passed
@vikrampm1 vikrampm1 mentioned this pull request Apr 7, 2025
29 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs:code-review This requires code review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Block settings updates

5 participants