feat(corrections-modal): Improve Corrections Modal UX by Takshil-Kunadia · Pull Request #3835 · Automattic/newspack-plugin

Takshil-Kunadia · 2025-03-17T11:48:15Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Closes https://app.asana.com/1/26890605006346/project/1209292256643614/task/1209683493118756?focus=true.

Moved away from the Accordion to a simpler Card Layout.
Add Notices for visual confirmation of action success.

How to test the changes in this Pull Request:

Open a Post > Corrections & Clarification section in Sidebar > Manage Correction.
Click on Add New Correction > Add details > Click Add.
Observe Notice being shown above the correction being added.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

Screenshots:-

Screen.Recording.2025-03-17.at.5.17.00.PM.mov

Takshil-Kunadia · 2025-03-17T11:49:12Z

Waiting for #3829 to be merged.

…d card layout

thomasguillot · 2025-03-18T14:37:02Z

screen-recording-2025-03-13-at-3.19.42e280afpm.mov

Something we noticed is when adding an additional correction/clarification, the behaviour is a bit confusing — there’s no success message nor does the log automatically open to display the newest addition. You have to manually open the log to make sure it got added.

Ideally we need an isBusy on the “Add” button, and a Snackbar to let the user know it’s been successfully added to the Corrections log.

Takshil-Kunadia · 2025-03-18T15:12:03Z

Thanks! @thomasguillot I have implemented precisely these same change via this PR. Please refer to the Demo video in the PR description.

thomasguillot · 2025-03-19T08:26:29Z

@Takshil-Kunadia Can we use the Snackbar component instead of the Notice?

Takshil-Kunadia · 2025-03-19T10:10:12Z

@thomasguillot replaced notice with snackbar ✅ . The snackbar disappears after 10 seconds. Also added an add more button so user's don't have to scroll down manually to add new corrections.

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

thomasguillot · 2025-03-19T16:44:51Z

I meant a snackbar in the bottom left corner, just like when we save a post for example.

Takshil-Kunadia · 2025-03-19T17:25:30Z

@thomasguillot The default snackbar has a lower z-index than a modal component. It would appear below the modal overlay.

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

thomasguillot · 2025-03-19T18:36:32Z

The default snackbar has a lower z-index than a modal component. It would appear below the modal overlay.

Can't we increase the z-index for this specfic snackbar using css?

Takshil-Kunadia · 2025-03-20T06:14:14Z

Can't we increase the z-index for this specfic snackbar using css?

I couldn't find a way to add an identifier or className to the notice, alternatively I adjusted the modal's z-index instead to resolve the issue.

Screen.Recording.2025-03-20.at.11.40.48.AM.mov

…tice

thomasguillot · 2025-03-20T07:16:33Z

Thank you!

thomasguillot · 2025-03-20T11:09:19Z

@Takshil-Kunadia I pushed a few tweaks to the modal: e816945

✅ Design

Takshil-Kunadia · 2025-03-20T11:30:22Z

Nice touch! Really liked the delete notification 💡 . Thanks! @thomasguillot

leogermani · 2025-03-20T14:20:55Z

This is looking so much better! But I'm afraid there's still one thing we need to improve.

When we add a new correction, we see the snackbar and we might have the wrong impression that the correction is saved. If we the Save & Close button is not visible, the user can just close the modal and the correction won't ever be saved...

Ideas:

Make the save button be always saved
Alert if they try to close the modal with unsaved changes
Save changes also on post update...

I think the first option, along with removing the X button to close the moda, can be the easier?

Takshil-Kunadia · 2025-03-21T05:06:26Z

Nice catch! @leogermani

I have removed the close button, closing on escape or clicking outside, to enforce save button be clicked(or cancel) before the modal closes. Also added a separate changes have been saved notice after saving.

Screen.Recording.2025-03-21.at.10.35.52.AM.mov

leogermani · 2025-03-21T13:34:04Z

@Takshil-Kunadia I'm approving this PR but there are 2 things I think we can improve. We can do it in follow up PRs, no rush

Make the bottom section with the buttons fixed in the modal, so they are always visible
If you add a correction and click "Cancel", the modal closes without saving. If you open the modal again, the unsaved correction will still be there, which can be confusing

Both are low priority. I'm ok adding to the backlog and working on them later

github-actions · 2025-03-24T03:17:53Z

Hey @Takshil-Kunadia, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

# [6.2.0-alpha.4](v6.2.0-alpha.3...v6.2.0-alpha.4) (2025-03-26) ### Bug Fixes * add check if product before gating content ([#3850](#3850)) ([b9e385d](b9e385d)) ### Features * add canonical url to lite site single posts ([#3865](#3865)) ([471ad81](471ad81)) * add custom check for media visibility ([#3823](#3823)) ([c1d81dc](c1d81dc)) * **correction:** Add Priority setting & refactor Block ([#3844](#3844)) ([9232750](9232750)) * **corrections-modal:** fix modal action buttons & state handling ([#3852](#3852)) ([220d5d6](220d5d6)) * **corrections-modal:** Improve Corrections Modal UX ([#3835](#3835)) ([afc9844](afc9844)) * information architecture ([#3857](#3857)) ([6fb5951](6fb5951)) * update custom bylines data structure ([#3863](#3863)) ([9b66c1f](9b66c1f))

matticbot · 2025-03-26T19:50:03Z

🎉 This PR is included in version 6.2.0-alpha.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

* feat(my-account): disable WC password nag * feat(woo-member-commenting): optional module for member commenting (#3783) * feat(woo-member-commenting): optional module for member commenting * feat(woo-comments): use a constant array for settings * Remove punctuation Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com> --------- Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com> * fix: update paths to share button, social CSS in Perfmatters (#3810) * feat(media): enable setting a default image for 404 images (#3811) * fix(ga): check if post is not null before reading properties (#3817) * feat(rss-feed): add feed enhancements for republication tracker; Atom feed URL (#3801) * feat: add Lite sites feature (#3807) * feat: add Lite sites feature * feat: add lite site settings page * feat(lite-site): update style * fix: a few tweaks * fix: i18n * fix: option name * feat: add hook to allow styles customizations * fix: a few tweaks to the UI * feat: i18n for strings --------- Co-authored-by: Thomas Guillot <thomas@automattic.com> * Fix: Guest Contributors Role Init for CLI and PHPUnit (#3828) * fix: guest contributors role init for CLI (non-admin) * fix: guest contributors role init: move line * fix: guest contributors role init: phpcs cleanup * Revert "refactor(corrections): remove corrections feature flag (#3797)" (#3825) This reverts commit 7776957. * feat: enable email change for newspack users (#3824) * feat: enable email change for newspack users * fix: check ff for non-a12s * test: update JS tests (#3818) * deps: update testing-library * refator: prevent react warnings * test: fix test failing after testing-library update * feat(corrections-location): integrate Correction location logic (#3829) * refactor(corrections): remove customizer settings for corrections location * feat(corrections): add location metadata to corrections and update modal * feat(corrections): separate corrections by location and update markup generation * fix(tests): update correction tests * refactor(corrections): simplify location check * feat: update button label * fix: clear empty space * docs: update docs * refactor: remove unused corrections active meta key * feat: remove shortcode * refactor: remove obsolete corrections shortcode tests --------- Co-authored-by: Leo Germani <leogermani@automattic.com> * fix(modal-checkout): endpoint to refresh newsletter lists via REST (#3841) This PR fixes an issue where the newsletters modal was incorrectly showing all premium newsletters. We fix this by refreshing the newsletters lists post checkout. * test: fix corrections test * fix(reader-revenue): fatal when using woocommerce-paypal-payments@3.0.0 (#3848) * feat(memberships): status reevaluation (#3845) * feat(memberships): status reevaluation * chore: fix linting * chore(release): 6.2.0-alpha.1 [skip ci] # [6.2.0-alpha.1](v6.1.1...v6.2.0-alpha.1) (2025-03-20) ### Bug Fixes * **ga:** check if post is not null before reading properties ([#3817](#3817)) ([9dfa47a](9dfa47a)) * **modal-checkout:** endpoint to refresh newsletter lists via REST ([#3841](#3841)) ([79ea458](79ea458)) * **reader-revenue:** fatal when using woocommerce-paypal-payments@3.0.0 ([#3848](#3848)) ([1d73e17](1d73e17)) * update paths to share button, social CSS in Perfmatters ([#3810](#3810)) ([eb2ca7e](eb2ca7e)) ### Features * add Lite sites feature ([#3807](#3807)) ([cbd3e61](cbd3e61)) * **corrections-location:** integrate Correction location logic ([#3829](#3829)) ([6a7cd45](6a7cd45)) * enable email change for newspack users ([#3824](#3824)) ([1bfb458](1bfb458)) * **media:** enable setting a default image for 404 images ([#3811](#3811)) ([465928e](465928e)) * **memberships:** status reevaluation ([#3845](#3845)) ([ba4bea9](ba4bea9)) * **my-account:** disable WC password nag ([a22e756](a22e756)) * **rss-feed:** add feed enhancements for republication tracker; Atom feed URL ([#3801](#3801)) ([719983f](719983f)) * **woo-member-commenting:** optional module for member commenting ([#3783](#3783)) ([262f8bf](262f8bf)) ### Reverts * Revert "refactor(corrections): remove corrections feature flag (#3797)" (#3825) ([f5f6a5c](f5f6a5c)), closes [#3797](#3797) [#3825](#3825) * feat: add custom check for media visibility (#3823) * feat(corrections-modal): Improve Corrections Modal UX (#3835) * feat(corrections-modal): enhance corrections modal UX with notices and card layout * feat(corrections-modal): replace success notice with snackbar * refactor(corrections-modal): replaced contained notice with global notice * feat(corrections-modal): reorganise panels * feat(corrections-modal): enforce correction saving --------- Co-authored-by: Thomas Guillot <thomas@automattic.com> * feat(corrections-modal): fix modal action buttons & state handling (#3852) * feat(correction): Add Priority setting & refactor Block (#3844) * feat(corrections): update correction box to have location settings * feat(corrections-blocks): add variations for top and bottom correction box * feat(correction-box): change default location to 'all' in block attributes * feat(correction-box): upgrade variations and update icons * refactor(corrections): change location meta to priority and update related logic * refactor(correction-box): rename location setting to priority & update its logic & remove variations * refactor(corrections-modal): rename location to priority and update related logic * docs: update docs --------- Co-authored-by: Leo Germani <leogermani@automattic.com> * chore(release): 6.2.0-alpha.2 [skip ci] # [6.2.0-alpha.2](v6.2.0-alpha.1...v6.2.0-alpha.2) (2025-03-25) ### Bug Fixes * **reader-revenue:** fatal when using woocommerce-paypal-payments@3.0.0 ([#3848](#3848)) ([a3f6d6a](a3f6d6a)) * **woocommerce-email:** fix the subscription cancellation email ([fc1cc8c](fc1cc8c)) * fix: add check if product before gating content (#3850) * chore(release): 6.2.0-alpha.3 [skip ci] # [6.2.0-alpha.3](v6.2.0-alpha.2...v6.2.0-alpha.3) (2025-03-26) ### Bug Fixes * **esp-sync:** account for wp errors in email change sync ([#3860](#3860)) ([d5d576d](d5d576d)) * feat: update custom bylines data structure (#3863) * feat: information architecture (#3857) Co-authored-by: Jared Rethman <jaredrethman@gmail.com> Co-authored-by: Ron Chambers <116242607+ronchambers@users.noreply.github.com> Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com> Co-authored-by: Rasmy Nguyen <raz@automattic.com> Co-authored-by: Thomas Guillot <thomasguillot@users.noreply.github.com> Co-authored-by: Laurel <laurel.fulford@automattic.com> * feat: add canonical url to lite site single posts (#3865) * chore(release): 6.2.0-alpha.4 [skip ci] # [6.2.0-alpha.4](v6.2.0-alpha.3...v6.2.0-alpha.4) (2025-03-26) ### Bug Fixes * add check if product before gating content ([#3850](#3850)) ([b9e385d](b9e385d)) ### Features * add canonical url to lite site single posts ([#3865](#3865)) ([471ad81](471ad81)) * add custom check for media visibility ([#3823](#3823)) ([c1d81dc](c1d81dc)) * **correction:** Add Priority setting & refactor Block ([#3844](#3844)) ([9232750](9232750)) * **corrections-modal:** fix modal action buttons & state handling ([#3852](#3852)) ([220d5d6](220d5d6)) * **corrections-modal:** Improve Corrections Modal UX ([#3835](#3835)) ([afc9844](afc9844)) * information architecture ([#3857](#3857)) ([6fb5951](6fb5951)) * update custom bylines data structure ([#3863](#3863)) ([9b66c1f](9b66c1f)) * fix(ia): render all emails on reset (#3867) This fixes an issue where resetting an email template in Newspack > Settings > Emails would only render Woo templates on success. * chore(release): 6.2.0-alpha.5 [skip ci] # [6.2.0-alpha.5](v6.2.0-alpha.4...v6.2.0-alpha.5) (2025-03-27) ### Bug Fixes * **ia:** render all emails on reset ([#3867](#3867)) ([519890f](519890f)) * fix(image-404-handling): handle 404 from other sites * chore(release): 6.2.0-alpha.6 [skip ci] # [6.2.0-alpha.6](v6.2.0-alpha.5...v6.2.0-alpha.6) (2025-03-31) ### Bug Fixes * **image-404-handling:** handle 404 from other sites ([51998b8](51998b8)) * test: fix unit tests based on dates relative to "now" (#3875) * fix: handle missing Mailchimp API key in auth status (#3873) * fix: remove Mailchimp for WooCommerce from wizard (#3876) * chore(release): 6.2.0-alpha.7 [skip ci] # [6.2.0-alpha.7](v6.2.0-alpha.6...v6.2.0-alpha.7) (2025-03-31) ### Bug Fixes * handle missing Mailchimp API key in auth status ([#3873](#3873)) ([81a6e51](81a6e51)) * remove Mailchimp for WooCommerce from wizard ([#3876](#3876)) ([4353a98](4353a98)) * fix(notices): fix PHP notice (#3872) --------- Co-authored-by: matticbot <sysops+ghmatticbot@automattic.com> Co-authored-by: Adam Cassis <adam.cassis@automattic.com> Co-authored-by: Camilla Krag Jensen <naxoc@users.noreply.github.com> Co-authored-by: Laurel <laurel.fulford@automattic.com> Co-authored-by: Adam Cassis <adam@adamcassis.com> Co-authored-by: Eddie Carrasco <eddies.code.shop@gmail.com> Co-authored-by: Takshil Kunadia <71006004+Takshil-Kunadia@users.noreply.github.com> Co-authored-by: leogermani <leogermani@automattic.com> Co-authored-by: Thomas Guillot <thomas@automattic.com> Co-authored-by: Ron Chambers <116242607+ronchambers@users.noreply.github.com> Co-authored-by: Rasmy Nguyen <raz@automattic.com> Co-authored-by: matticbot <semantic-release-bot@martynus.net> Co-authored-by: Miguel Peixe <miguel.peixe@automattic.com> Co-authored-by: Jared Rethman <jaredrethman@gmail.com> Co-authored-by: Thomas Guillot <thomasguillot@users.noreply.github.com>

# [6.2.0](v6.1.3...v6.2.0) (2025-03-31) ### Bug Fixes * add check if product before gating content ([#3850](#3850)) ([b9e385d](b9e385d)) * **ga:** check if post is not null before reading properties ([#3817](#3817)) ([9dfa47a](9dfa47a)) * handle missing Mailchimp API key in auth status ([#3873](#3873)) ([81a6e51](81a6e51)) * **ia:** render all emails on reset ([#3867](#3867)) ([519890f](519890f)) * **image-404-handling:** handle 404 from other sites ([51998b8](51998b8)) * **modal-checkout:** endpoint to refresh newsletter lists via REST ([#3841](#3841)) ([79ea458](79ea458)) * **notices:** fix PHP notice ([#3872](#3872)) ([9cda1ca](9cda1ca)) * **reader-revenue:** fatal when using woocommerce-paypal-payments@3.0.0 ([#3848](#3848)) ([1d73e17](1d73e17)) * remove Mailchimp for WooCommerce from wizard ([#3876](#3876)) ([4353a98](4353a98)) * update paths to share button, social CSS in Perfmatters ([#3810](#3810)) ([eb2ca7e](eb2ca7e)) ### Features * add canonical url to lite site single posts ([#3865](#3865)) ([471ad81](471ad81)) * add custom check for media visibility ([#3823](#3823)) ([c1d81dc](c1d81dc)) * add Lite sites feature ([#3807](#3807)) ([cbd3e61](cbd3e61)) * **correction:** Add Priority setting & refactor Block ([#3844](#3844)) ([9232750](9232750)) * **corrections-location:** integrate Correction location logic ([#3829](#3829)) ([6a7cd45](6a7cd45)) * **corrections-modal:** fix modal action buttons & state handling ([#3852](#3852)) ([220d5d6](220d5d6)) * **corrections-modal:** Improve Corrections Modal UX ([#3835](#3835)) ([afc9844](afc9844)) * enable email change for newspack users ([#3824](#3824)) ([1bfb458](1bfb458)) * information architecture ([#3857](#3857)) ([6fb5951](6fb5951)) * **media:** enable setting a default image for 404 images ([#3811](#3811)) ([465928e](465928e)) * **memberships:** status reevaluation ([#3845](#3845)) ([ba4bea9](ba4bea9)) * **my-account:** disable WC password nag ([a22e756](a22e756)) * **rss-feed:** add feed enhancements for republication tracker; Atom feed URL ([#3801](#3801)) ([719983f](719983f)) * update custom bylines data structure ([#3863](#3863)) ([9b66c1f](9b66c1f)) * **woo-member-commenting:** optional module for member commenting ([#3783](#3783)) ([262f8bf](262f8bf)) ### Reverts * Revert "refactor(corrections): remove corrections feature flag (#3797)" (#3825) ([f5f6a5c](f5f6a5c)), closes [#3797](#3797) [#3825](#3825)

feat(corrections-modal): enhance corrections modal UX with notices an…

1beccc2

…d card layout

Takshil-Kunadia force-pushed the feature/refactor-corrections-modal-ux branch from 9839a45 to 1beccc2 Compare March 18, 2025 14:42

Takshil-Kunadia marked this pull request as ready for review March 18, 2025 15:10

Takshil-Kunadia requested a review from a team as a code owner March 18, 2025 15:10

leogermani requested a review from a team March 18, 2025 15:11

leogermani added the [Status] Needs Design Review label Mar 18, 2025

Takshil-Kunadia requested a review from thomasguillot March 18, 2025 15:12

feat(corrections-modal): replace success notice with snackbar

eed150e

refactor(corrections-modal): replaced contained notice with global no…

f0c966f

…tice

Takshil-Kunadia requested a review from leogermani March 20, 2025 08:33

feat(corrections-modal): reorganise panels

e816945

thomasguillot added [Status] Needs Review The issue or pull request needs to be reviewed and removed [Status] Needs Design Review labels Mar 20, 2025

thomasguillot removed request for a team and thomasguillot March 20, 2025 11:10

feat(corrections-modal): enforce correction saving

a26049f

leogermani approved these changes Mar 21, 2025

View reviewed changes

github-actions Bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Mar 21, 2025

Takshil-Kunadia merged commit afc9844 into trunk Mar 24, 2025

Takshil-Kunadia deleted the feature/refactor-corrections-modal-ux branch March 24, 2025 03:17

github-actions Bot added the needs-changelog label Mar 24, 2025

This was referenced Mar 24, 2025

feat(corrections): Modal UX Enchancements #3851

Closed

feat(corrections): Modal UX Enchancements #3852

Merged

leogermani removed the needs-changelog label Mar 25, 2025

matticbot added the released on @alpha label Mar 26, 2025

Conversation

Takshil-Kunadia commented Mar 17, 2025

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Screenshots:-

Uh oh!

Takshil-Kunadia commented Mar 17, 2025

Uh oh!

thomasguillot commented Mar 18, 2025

Uh oh!

Takshil-Kunadia commented Mar 18, 2025

Uh oh!

thomasguillot commented Mar 19, 2025

Uh oh!

Takshil-Kunadia commented Mar 19, 2025

Uh oh!

thomasguillot commented Mar 19, 2025

Uh oh!

Takshil-Kunadia commented Mar 19, 2025

Uh oh!

thomasguillot commented Mar 19, 2025

Uh oh!

Takshil-Kunadia commented Mar 20, 2025

Uh oh!

thomasguillot commented Mar 20, 2025

Uh oh!

thomasguillot commented Mar 20, 2025

Uh oh!

Takshil-Kunadia commented Mar 20, 2025

Uh oh!

leogermani commented Mar 20, 2025

Uh oh!

Takshil-Kunadia commented Mar 21, 2025

Uh oh!

leogermani commented Mar 21, 2025

Uh oh!

github-actions Bot commented Mar 24, 2025

Uh oh!

matticbot commented Mar 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants