fix(my-account): new payment method style tweaks #4220

miguelpeixe · 2025-10-02T19:02:11Z

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:

Style improvements to the new payment method form:

Before	After

How to test the changes in this Pull Request:

Add a new payment method via My Account -> Payment information and confirm it works as expected

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?

…padding

thomasguillot · 2025-10-03T13:58:38Z

@miguelpeixe thank you for this PR. These are details that bothered me for quite some time now. I went even further with the only 1 payment method:

I wonder if we can do something similar when we're checking out

miguelpeixe · 2025-10-03T14:03:16Z

Awesome! I like that better too.

If you look at NPPD-485 you'll see that the "Change Payment Method" had this approach as well, but at some point got boxed, not sure at which point.

Let's use this PR to fix the inconsistencies

miguelpeixe · 2025-10-03T14:16:22Z

This is how it looks now, btw

dkoo

Styles look good!

I'm seeing a PHP warning on the Payment Information page:

PHP Warning:  Undefined array key "form_id" in /newspack-repos/newspack-plugin/includes/class-newspack-ui.php on line 219

Also, this might be for another PR, but is it possible to make both checkboxes at the bottom of the modal either checked by default, or even checked by default + visually hidden?

miguelpeixe · 2025-10-10T17:58:02Z

Thank you for the review!

I'm seeing a PHP warning on the Payment Information page:
PHP Warning: Undefined array key "form_id" in /newspack-repos/newspack-plugin/includes/class-newspack-ui.php on line 219

Good catch! This is in trunk too, from #4216. Fixed in 2edb7ce

Also, this might be for another PR, but is it possible to make both checkboxes at the bottom of the modal either checked by default, or even checked by default + visually hidden?

I agree that the first checkbox shouldn't exist, and checking it doesn't really change anything in this form. Fixed in f0f8016.

IMO, the second checkbox is relevant and shouldn't be checked by default.

dkoo · 2025-10-10T18:07:47Z

IMO, the second checkbox is relevant and shouldn't be checked by default.

I'm open to discussing this further, but it's how things work in v0 now. #2934 and #3643 made the checkbox checked by default and hid it visually (because publishers were receiving feedback from readers being confused by it and/or not checking it after adding a new payment method, resulting in failed renewals), so showing it now would be a change in behavior.

miguelpeixe · 2025-10-10T18:09:58Z

Ah! Thank you for the additional context. I didn't realize that. I'll fix that then

miguelpeixe · 2025-10-10T19:14:59Z

I also realized that what was done in #2934 no longer works. Maybe something from woocommerce/woocommerce-gateway-stripe#3461

Investigating

miguelpeixe · 2025-10-15T20:12:08Z

Took me a while... it turned out to be kses filtering out the checked attribute. Fixed in fe16aae

Should be good now!

github-actions · 2025-10-17T12:46:49Z

Hey @miguelpeixe, 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.22.0-alpha.1](v6.21.2...v6.22.0-alpha.1) (2025-10-17) ### Bug Fixes * **collections:** remove collection-related taxonomies from quick edit ([#4222](#4222)) ([e327230](e327230)) * **content-gate-countdown-block:** update block design ([fda287c](fda287c)) * ga4 events for gate interactions and tiered modal ([#4209](#4209)) ([162f34a](162f34a)) * keep prevent one and two col Collections block grid from being increased on smaller screens ([#4224](#4224)) ([482eef6](482eef6)) * **lite-site:** allow line breaks ([#4221](#4221)) ([ead3283](ead3283)) * **metering:** get current user metered views ([#4227](#4227)) ([ebc32b7](ebc32b7)) * **my-account:** new payment method style tweaks ([#4220](#4220)) ([88a638c](88a638c)) * **subscription-switch:** unhook direction text from checkout ([#4229](#4229)) ([69915ef](69915ef)) ### Features * **audience:** primary subscription product ([#4191](#4191)) ([1137770](1137770)) * **collections:** add archive link in settings page ([#4203](#4203)) ([8aad8ca](8aad8ca)) * **collections:** add css classes to meta elements ([#4208](#4208)) ([2a13af6](2a13af6)) * **collections:** implement design feedback for archive link ([#4219](#4219)) ([da35672](da35672)) * **InDesign:** inline image caption, horizontal rule, headings and blockquotes ([#4201](#4201)) ([c39b9f9](c39b9f9)) * **my-account:** add delete payment method modal confirmation ([#4216](#4216)) ([3220af2](3220af2)) * **my-account:** addresses ([#4206](#4206)) ([d57b1c9](d57b1c9)) * **newspack-icons:** add ai and ai-text to npm package ([#4235](#4235)) ([06789a9](06789a9)) * **newspack-icons:** add typescript support; add new icons ([#4088](#4088)) ([bb2cb82](bb2cb82)) * validate donation products ([#4163](#4163)) ([de24ff4](de24ff4)) * **woocommerce:** enable block emails ([#4218](#4218)) ([0643158](0643158))

matticbot · 2025-10-17T15:48:51Z

🎉 This PR is included in version 6.22.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.22.0](v6.21.4...v6.22.0) (2025-10-30) ### Bug Fixes * add feature flag to countdown block and email enhancements ([#4262](#4262)) ([b8691d8](b8691d8)) * **collections:** remove collection-related taxonomies from quick edit ([#4222](#4222)) ([e327230](e327230)) * **content-gate-countdown-block:** update block design ([fda287c](fda287c)) * ga4 events for gate interactions and tiered modal ([#4209](#4209)) ([162f34a](162f34a)) * keep prevent one and two col Collections block grid from being increased on smaller screens ([#4224](#4224)) ([482eef6](482eef6)) * **lite-site:** allow line breaks ([#4221](#4221)) ([ead3283](ead3283)) * **metering:** get current user metered views ([#4227](#4227)) ([ebc32b7](ebc32b7)) * **my-account:** new payment method style tweaks ([#4220](#4220)) ([88a638c](88a638c)) * **subscription-switch:** unhook direction text from checkout ([#4229](#4229)) ([69915ef](69915ef)) * **subscriptions-tiers:** standardize product input name ([#4261](#4261)) ([4194267](4194267)) * tweak configuration labels for the primary subscription product ([#4260](#4260)) ([ab5a5c7](ab5a5c7)) * **upgrade-subscription-link:** remove query arg onload ([#4263](#4263)) ([87fe3d4](87fe3d4)) ### Features * **audience:** primary subscription product ([#4191](#4191)) ([1137770](1137770)) * **collections:** add archive link in settings page ([#4203](#4203)) ([8aad8ca](8aad8ca)) * **collections:** add css classes to meta elements ([#4208](#4208)) ([2a13af6](2a13af6)) * **collections:** implement design feedback for archive link ([#4219](#4219)) ([da35672](da35672)) * **InDesign:** inline image caption, horizontal rule, headings and blockquotes ([#4201](#4201)) ([c39b9f9](c39b9f9)) * **my-account:** add delete payment method modal confirmation ([#4216](#4216)) ([3220af2](3220af2)) * **my-account:** addresses ([#4206](#4206)) ([d57b1c9](d57b1c9)) * **my-account:** edit donation amount ([#4200](#4200)) ([f84d121](f84d121)) * **newspack-icons:** add ai and ai-text to npm package ([#4235](#4235)) ([06789a9](06789a9)) * **newspack-icons:** add typescript support; add new icons ([#4088](#4088)) ([bb2cb82](bb2cb82)) * validate donation products ([#4163](#4163)) ([de24ff4](de24ff4)) * **woocommerce:** enable block emails ([#4218](#4218)) ([0643158](0643158))

matticbot · 2025-10-30T13:38:51Z

🎉 This PR is included in version 6.22.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

fix(my-account): new payment method style tweaks

a5d4245

miguelpeixe self-assigned this Oct 2, 2025

miguelpeixe requested a review from a team as a code owner October 2, 2025 19:02

miguelpeixe added the [Status] Needs Review The issue or pull request needs to be reviewed label Oct 2, 2025

miguelpeixe requested a review from thomasguillot October 2, 2025 19:05

miguelpeixe added the [Status] Needs Design Review label Oct 2, 2025

thomasguillot added 2 commits October 3, 2025 11:13

feat(newspack-ui): if only one accordion, remove background, border, …

a7cb7a4

…padding

fix: radio/checkbox gaps

632f959

thomasguillot force-pushed the fix/my-account-new-payment-method-style-tweaks branch from 219ac2e to 632f959 Compare October 3, 2025 13:25

fix: checkbox font size

55baaf7

miguelpeixe mentioned this pull request Oct 3, 2025

fix(modal-checkout): style improvements to single-gateway Automattic/newspack-blocks#2223

Merged

6 tasks

Merge branch 'trunk' into fix/my-account-new-payment-method-style-tweaks

049069b

thomasguillot added [Status] Design Approved and removed [Status] Needs Design Review labels Oct 6, 2025

thomasguillot removed their request for review October 6, 2025 16:19

dkoo requested changes Oct 10, 2025

View reviewed changes

github-actions bot added the [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator label Oct 10, 2025

miguelpeixe added 2 commits October 10, 2025 14:33

fix: add form_id

2edb7ce

fix: hide "Save payment method" checkbox when adding new

f0f8016

miguelpeixe requested a review from dkoo October 10, 2025 17:58

miguelpeixe added 3 commits October 15, 2025 17:09

fix: allow 'checked' input attr

fe16aae

fix: hook caller

7eb4cf8

fix: hide checked field

5414d5b

dkoo approved these changes Oct 16, 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 [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator labels Oct 16, 2025

miguelpeixe merged commit 88a638c into trunk Oct 17, 2025
9 checks passed

miguelpeixe deleted the fix/my-account-new-payment-method-style-tweaks branch October 17, 2025 12:46

github-actions bot added the needs-changelog label Oct 17, 2025

miguelpeixe removed the needs-changelog label Oct 17, 2025

matticbot added the released on @alpha label Oct 17, 2025

matticbot added the released label Oct 30, 2025

fix(my-account): new payment method style tweaks #4220

fix(my-account): new payment method style tweaks #4220

Uh oh!

Conversation

miguelpeixe commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

thomasguillot commented Oct 3, 2025

Uh oh!

miguelpeixe commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

miguelpeixe commented Oct 3, 2025

Uh oh!

dkoo left a comment

Choose a reason for hiding this comment

Uh oh!

miguelpeixe commented Oct 10, 2025

Uh oh!

dkoo commented Oct 10, 2025

Uh oh!

miguelpeixe commented Oct 10, 2025

Uh oh!

miguelpeixe commented Oct 10, 2025

Uh oh!

miguelpeixe commented Oct 15, 2025

Uh oh!

Uh oh!

github-actions bot commented Oct 17, 2025

Uh oh!

matticbot commented Oct 17, 2025

Uh oh!

matticbot commented Oct 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

miguelpeixe commented Oct 2, 2025 •

edited

Loading

miguelpeixe commented Oct 3, 2025 •

edited

Loading