Automattic / newspack-blocks

Gutenberg blocks for the Newspack project.
207 stars 43 forks source link

fix(modal-checkout): apply margin to after form rows added via after billing fields hook #1951

Closed chickenn00dle closed 2 weeks ago

chickenn00dle commented 2 weeks ago

All Submissions:

Changes proposed in this Pull Request:

Goes with the following Plugin PR: https://github.com/Automattic/newspack-plugin/pull/3546

This PR fixes an issue where checkboxes (or anything else) added via the woocommerce_after_checkout_billing_form did not have the correct margin.

We fix this by applying our expected margin to any .form-row added to this part of checkout. Note we only target .form-row as this is the expected format of anything added here. Anything added using a nonstandard class will need additional custom CSS to integrate correctly.

Screenshot 2024-11-13 at 10 26 10

NOTE: The fix for the off-centered text and checkbox input live in the plugin PR: https://github.com/Automattic/newspack-plugin/pull/3546

How to test the changes in this Pull Request:

  1. As admin add Mailchimp for WooCommerce to your test site and get it connected
  2. Ensure the Mailchimp for WooCommerce newsletters checkbox is added at checkout via Mailchimp > Store > Checkout page settings Screenshot 2024-11-13 at 10 42 29
  3. As a reader open modal checkout via any checkout button or donate block
  4. On the billing fields screen scroll to the bottom and ensure the added form row has top margin but no bottom margin as pictured above.

Other information:

chickenn00dle commented 2 weeks ago

Assigning you @laurelfulford since this is style related and you are probably best to review!