Skip to content

[Settings] Better Navigation/UX Improvements #169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
vikrampm1 merged 18 commits into from
Aug 7, 2025
Merged

[Settings] Better Navigation/UX Improvements #169

vikrampm1 merged 18 commits into from
Aug 7, 2025

Conversation

@iamdharmesh
Copy link
Collaborator

@iamdharmesh iamdharmesh commented Jul 1, 2025 •
edited
Loading

Description of the Change

This PR improves the UI/UX of the plugin settings for better navigation and adds a form previewer on the settings page to provide an idea of how the form will appear on the frontend. The updated settings page is shown in the screenshot below.

screencapture-mailchimp-local-wp-admin-admin-php-2025-07-01-14_54_21

Closes #168
Closes #134

How to test the Change

  1. Go to the Mailchimp settings page.
  2. Compare the settings page with the Figma design and verify that everything looks good.
  3. Update form settings and fields, and ensure they are reflected properly in the form previewer.
  4. Make changes to the settings options and verify that the "Save Changes" button appears to save the settings.
  5. Save the user sync settings, start user sync, and ensure it works as expected.
  6. Test the settings page overall and confirm that everything functions as expected.

Changelog Entry

Added - Improved navigation and UX enhancements on the plugin settings page.

Credits

Props @dkotter, @jeffpaul, Romain Deville, @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.

@github-actions github-actions bot added this to the Future Release milestone Jul 1, 2025
@iamdharmesh iamdharmesh marked this pull request as ready for review July 1, 2025 12:24
@github-actions github-actions bot added the needs:code-review This requires code review. label Jul 1, 2025
@iamdharmesh iamdharmesh requested a review from dkotter July 1, 2025 12:24
@jeffpaul jeffpaul modified the milestones: Future Release, 2.0.0 Jul 1, 2025
@iamdharmesh iamdharmesh mentioned this pull request Jul 1, 2025
Closed
1 task
dkotter
dkotter requested changes Jul 1, 2025
View reviewed changes
@iamdharmesh iamdharmesh requested a review from dkotter July 2, 2025 05:53
dkotter
dkotter previously approved these changes Jul 2, 2025
View reviewed changes
@dkotter dkotter requested a review from qasumitbagthariya July 2, 2025 16:41
@qasumitbagthariya
Copy link
Collaborator

qasumitbagthariya commented Jul 6, 2025

QA Update ⚠️

@iamdharmesh

UI Issues

  1. Audience field
    The phone number input box is not properly aligned.

    • Browser: Chrome
    • Screenshot:
image

  1. Non-Responsive List Options
    The list options are not displaying responsively on smaller viewports.

    • Screenshot:
      List Not Responsive
image image

@iamdharmesh
Copy link
Collaborator Author

iamdharmesh commented Jul 9, 2025

Thanks for testing this @qasumitbagthariya. Could you please check now. Thanks!

@qasumitbagthariya
Copy link
Collaborator

qasumitbagthariya commented Jul 12, 2025

QA update: - Approved ✅

I have verified this PR in the settings-ui-updates branch, which has been fixed and is functioning as intended.

I tested the following on this branch:

  • Compared the settings page UI with the Figma design — everything appears consistent and accurate.
  • Successfully updated form settings and fields; changes were reflected correctly in the form previewer.
  • Verified that the “Save Changes” button appears upon modifying settings and functions as expected.
  • Tested the user sync settings, initiated a sync, and confirmed that it works properly without any issues.
  • Overall, the settings page is functioning as expected, and no issues were observed during testing.
image image image image

Testing Environment

  • WordPress: 6.8
  • 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: settings-ui-updates

Steps to Test- As mentioned in the PR description.
Test Results - It is working as expected.
Functional Demo / Screencast -
Special Notes - Ready for code review (Woo)
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
Copy link
Collaborator Author

iamdharmesh commented Aug 6, 2025

@dkotter @jeffpaul User sync errors moved under user sync settings section now.

image

@jeffpaul
Copy link
Collaborator

jeffpaul commented Aug 6, 2025

Awesome, nice work!

@qasumitbagthariya
Copy link
Collaborator

qasumitbagthariya commented Aug 6, 2025

Regression / Smoke Test Report ✅

Status- Working expected with Plugin Archive/Zip file same as fix specific branch.

Testing Environment

  • WordPress: 6.8.2
  • Theme: Twenty Twenty-Five 1.2
  • PHP: 8.0.30
  • Web Server: Nginx 1.20.2
  • Browser: Chrome
  • OS: macOS 15.2
  • Branch: smoke-testing

Next Step- Ready to Merge 🚀

@vikrampm1 vikrampm1 merged commit e14f7b3 into develop Aug 7, 2025
15 of 16 checks passed
@vikrampm1 vikrampm1 mentioned this pull request Aug 7, 2025
Closed
30 tasks
@dkotter dkotter deleted the settings-ui-updates branch August 7, 2025 15:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dkotter dkotter dkotter approved these changes

@qasumitbagthariya qasumitbagthariya qasumitbagthariya approved these changes

Assignees

@iamdharmesh iamdharmesh

Labels

needs:code-review This requires code review.

Projects

None yet

Milestone

2.0.0

Development

Successfully merging this pull request may close these issues.

[Settings] Better Navigation/UX Improvements Add an "Update Settings" button below the group settings.

6 participants

@iamdharmesh @qasumitbagthariya @jeffpaul @dkotter @vikrampm1