Recurring Payments: Replace submit button

[aaronrobertshaw]

Fixes #15713

Changes proposed in this Pull Request:

• Replace the SubmitButton in the Recurring Payments block with new shared Button block.

Does this pull request change what data or activity we track or use?

No.

Prerequisites

• Sandboxed public-api.wordpress.com and subscribe.wordpress.com. See instructions for sandboxing for Recurring Payments in the Field Guide.
• Site connected to Stripe and a plan created.
• A post with a Recurring Payment block added prior to checking out this PR branch.

Testing instructions:

1. On the frontend, visit post containing previous version of Recurring Payments block.
2. Confirm the blocks display and function as they did when you set them up.
   Button should still be contained within div with .wp-block-button class.
3. Edit the post.
4. Confirm the Recurring Payment block still appears correctly and its settings are correct.
5. Update the Recurring Payment button using the new settings controls provided by button block.
6. Add new Recurring Payment block select a plan. Ensure the button text is updated with text including the price of the plan selected.
7. Save the post.
8. Re-visit the post on the frontend and confirm display and function of Recurring Payment block.

Before:

After:

Proposed changelog entry for your changes:

• Update Recurring Payments block to use new shared Button block

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello aaronrobertshaw! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D43891-code before merging this PR. Thank you!
This revision will be updated with each commit to this PR

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-15915

Scheduled Jetpack release: August 4, 2020.
Scheduled code freeze: July 28, 2020

Generated by 🚫 dangerJS against c6f45df

[aaronrobertshaw]

This block apparently allows for custom button HTML attributes from WPCOM VIP sites. I don't know how to test with VIP sites or even how their versions of this block might differ.

If anyone can point me in the right direction of what needs doing, that would be great.

[scruffian]

I've tested this and it works as advertised. I'll look at the code tomorrow 👍

[scruffian]

Code changes LGTM 👍

[aaronrobertshaw]

@glendaviesnz I've rebased this PR and resolved the conflict.

It could use another quick test to have someone else confirm the custom button text remains when switching plans for the block. I've updated the test instructions and tested the block myself and it's working for me.

[aaronrobertshaw]

Hi @fgiannar ,

Thanks for testing this one.

Not being easily able to select the parent block while the inner button block is aligned left or right is an issue. It is a side-effect of the switch to using inner blocks.

That said, we do have the block navigation button in the main editor toolbar as well as the parent selector when hovering the button block’s toolbar. There is also currently work in progress ( PR ) to improve the UX around the parent selector, making it more discoverable and obvious.

If you are happy with these options in the short term, I’d be inclined to proceed with this PR. What do you think?

[fgiannar]

Hi @aaronrobertshaw ,

Thanks for the rebase.
I think, as you mentioned, not being easily able to select the parent block while the inner button block is aligned left or right is a generic issue that needn't affect this PR.
I believe you can proceed.

[jeherve]

r211585-wpcom