fix(recaptcha): various optimizations

[chickenn00dle]

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/0/1207817176293825/1208950357031079/f

This PR makes some optimizations to our recaptcha implementation:

1. Only render recaptcha once a form is focused
2. Auto retry on recaptcha error/expire
3. Specify recaptcha container so we don't break form layouts

How to test the changes in this Pull Request:

1. Enable recaptcha v2
2. As reader open any page/post that contains a newsletters subscribe block but do not focus the form yet.
3. In browser dev tools, search for an element with a data-recaptcha-widget-id attribute. There should be none
4. Now click anywhere in the form
5. In dev tools again, search for an element with a data-recaptcha-widget-id attribute. The button in the focused form should have this.
6. Now smoke test all of the following, each time making sure the layout of the forms don't change as you focus:
   • Checkout Button or Donate block
   • Newsletters subscribe block
   • Registration block
   • RAS-ACC auth registration modal
7. Enable recaptcha v3
8. Repeat steps 2-6, this time searching for a hidden input with a name of g-recaptcha-response.
9. Now smoke test all of the following:
   • Checkout Button or Donate block
   • Newsletters subscribe block
   • Registration block
   • RAS-ACC auth registration modal
10. Disable recaptcha and smoke test the following
    • Checkout Button or Donate block
    • Newsletters subscribe block
    • Registration block
    • RAS-ACC auth registration modal

Testing recaptcha errors:
To test auto-retry on recaptcha error, you can force the error callback by replacing this line with callback: errorCallback:

newspack-plugin/src/other-scripts/recaptcha/index.js

Line 177 in ba6f10f

callback: successCallback,

1. Re-enable recaptcha v2
2. As reader, go through any relevant form
3. After recaptcha is triggered, instead of succeeding the error callback should be triggered, re-prompting the widget (in normal circumstances a render failure would not trigger the widget to appear)
4. This should happen 3 times before an error is rendered asking for a page reload.

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?

[dkoo]

@chickenn00dle all is working well, and the rendering of the widgets/hidden fields during field focus is seamless and causes no detectable form layout changes or delays in form submission. 🎉

The only thing I see is that when displaying the v2 widget on the modal checkout second screen, the modal is no longer scrolling up to bring it into the viewport. As a reader, if I don't know to expect a reCAPTCHA v2 widget, it's hard to tell what's happening as the form inside modal simply becomes greyed-out and non-interactive. Could we ensure that if the widget is displayed, we're scrolling the modal viewport so that it's visible?

[dkoo]

Also, I pushed 80cb850 because I saw an issue in my local environment while testing this in which the site key/secret fields in the admin dashboard were appearing empty even though I knew the data existed in my site DB.

[chickenn00dle]

The only thing I see is that when displaying the v2 widget on the modal checkout second screen, the modal is no longer scrolling up to bring it into the viewport. As a reader, if I don't know to expect a reCAPTCHA v2 widget, it's hard to tell what's happening as the form inside modal simply becomes greyed-out and non-interactive. Could we ensure that if the widget is displayed, we're scrolling the modal viewport so that it's visible?

That's odd. On my end it looks to be scrolling:

Screen.Recording.2024-12-16.at.16.52.21.mov

[dkoo]

fe03f44 restores a couple of lines from #3283 which trigger a re-render of v2 widgets when Woo checkout fires updated_checkout or checkout_error jQuery events. These events indicate that entire form elements (including our widgets and the submit buttons they're attached to) may have been replaced by new DOM elements, so re-rendering ensures that the reCAPTCHA check will continue to happen afterward.

[dkoo]

This is working now on my end, and because it's in response to some time-sensitive publisher requests, I'm going to go ahead and merge without a second PR reviewer. 🤞

[matticbot]

🎉 This PR is included in version 5.10.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀