Earn: Move donations block to Jetpack Beta Blocks

[gwwar]

As discussed in p1HpG7-9Kg-p2#comment-40839, we're moving development of the Donation block to Jetpack from the FSE plugin. This block will allow customers on Jetpack and WordPress.com to accept one-time or recurring monthly/annual donations.

Site	No Plan	No Stripe Connection	Edit View
Jetpack	N/A. Block cannot be inserted in JP sites under a free plan. This is by design because we're using the plan_check property during block registration which makes the block non-insertable unless the jetpack_block_editor_enable_upgrade_nudge filter is enabled (it's disabled by default on JP sites).
Simple
Atomic	N/A. All Atomic sites are under a paid plan. (except for downgraded sites)

This PR builds on top of work in:

• Donation block: Add block settings wp-calypso#43798
• Donation block: Make content editable wp-calypso#43834
• Earn: Add a Stripe connect prompt to the Donations block. wp-calypso#43166
• Donations: Fall back to default products if no products are already defined. wp-calypso#43665
• Add the basics for a new Donations block. wp-calypso#42911

What @gwwar and @mmtr changed from copied FSE files

• Block now has Jetpack namespace, eg jetpack/donations
• Text domain updated from full-site-editing to jetpack
• editor styles namespaced with generated block name wp-block-jetpack-donations
• do not fetch default payment products when user does not have a stripe connection or correct paid plan. (this would previously cause the API error to override the stripe/plan nudges).
• do not remove loader until default products are available, since block options were non-interactive. (Block attributes were unresponsive without this, but this is kind of slow so I might back this out.)
• This block has been added to the Jetpack Beta list, meaning that this won't be visible to folks unless define( 'JETPACK_BETA_BLOCKS', true ) is set on your WordPress instance
• Avoid new Gutenberg features eg import { __experimentalBlock as Block } from '@wordpress/block-editor';

What we're not including in this PR

We still need to pick final serialization options for the published block, but this can be done in a follow up PR. With Donations now in Jetpack it's not unreasonable to nest a child payments button, or instead opt to go with something a bit more custom but duplicate some of the iframe handling. Other pieces like the Edit view and backend glue pieces needed for the actual transactions are mostly done, but may need some follow up

Testing Instructions

Jetpack sites

• With a WordPress instance of your choice, install Jetpack Beta and install this branch. Or visit jurassic.ninja/create/?jetpack-beta&branch=add/donation-block-scaffolding
• Connect Jetpack to WordPress.com with a free plan
• Make sure Jetpack Blocks are visible by clicking on /wp-admin/options-general.php?page=companion_settings and selecting 'JETPACK_BETA_BLOCKS'

• Try inserting the donations block. The block shouldn't appear in the block inserter.
• Purchase a personal plan or higher. Note that if folks are using the sandbox store method (PCYsg-lW4-p2) to also set the JETPACK__SANDBOX_DOMAIN value.
• Refresh the editor and insert a Donations block. We should now see a nudge to connect stripe. The block should be fully editable, although behind the scenes we're using fake plans since there is no connection to Stripe (you can check this by switching to the code editor and noting plan IDs are set with a -1 value).
• Create a real stripe account, or use a dev account noted in "Sandbox method" PCYsg-lW4-p2
• Refresh the editor again. Make sure the interactive edit view for donation blocks allows us to modify the types of donations (one-time/monthly/yearly), and lets us edit the text fields. Switch to the code editor and confirm the plan IDs attributes have been updated to the real plans.

Simple sites

• Apply D46803-code and D46705-code.
• Try inserting the donations block. The block should appear in the block inserter with a paid flag. Once inserted, we should see a nudge to upgrade. The block should be fully editable, although behind the scenes we're using fake plans since there is no connection to Stripe (you can check this by switching to the code editor and noting plan IDs are set with a -1 value).
• Purchase a personal plan or higher.
• Refresh the editor. We should now see a nudge to connect stripe. The block should continue to be fully editable (and keep using the fake plans).
• Create a real stripe account, or use a dev account noted in "Sandbox method" PCYsg-lW4-p2
• Refresh the editor again. Make sure the interactive edit view for donation blocks allows us to modify the types of donations (one-time/monthly/yearly), and lets us edit the text fields. Switch to the code editor and confirm the plan IDs attributes have been updated to the real plans.

Atomic Sites

• Apply D46803-code and sandbox
• Setup a real atomic site by purchasing a Business plan on a WordPress.com account and transferring by installing a custom plugin or theme
• Install the Jetpack Beta plugin https://jetpack.com/download-jetpack-beta/
• Activate this branch add/donation-block-scaffolding
• Set add_filter( 'jetpack_blocks_variation', function() { return 'beta'; } ); to activate beta blocks. A quick way of doing this is modifying a simple plugin with the plugin editor, like hello dolly.
• In the block-editor, Try adding a donations block, we should see a stripe connection prompt
• Click on the connect stripe nudge, and create a real stripe account
• In the block-editor try adding a donations block, we should see an editable donations view, and real planIds set in the block attributes of code view.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello gwwar! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D46705-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[jetpackbot]

	Warnings
⚠️	"Testing instructions" are missing for this PR. Please add some
⚠️	"Proposed changelog entry" is missing for this PR. Please include any meaningful changes
⚠️	The Privacy section is missing for this PR. Please specify whether this PR includes any changes to data or privacy.

This is an automated check which relies on PULL_REQUEST_TEMPLATE. We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

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

Generated by 🚫 dangerJS against ee58ff9

[gwwar]

@Automattic/serenity feel free to hop onto this branch, just let folks know if y'all are planning to rebase.

[kwight]

Fired this up quickly to check regressions with the Payments block – just noting a few things for later sake, understanding it's plumbing that's the focus of this PR.

Applying the branch through Jetpack Beta on an existing JN site caused fatals, but doing a clean JN install with the link in the instructions worked fine:

The Donations block displays its "read more" link in line with the Upgrade button, rather than below it like the Payments button.

Trying to use the Payments block on the front end, I had the same experience as @gwwar : the button would resolve to the post URL with a hash (#) on the end, with no obvious errors at all.

[gwwar]

@mmtr I ended up needing to back out the membership registration refactors. Tracing the code we were getting to the correct register_jetpack_blocks calls, but the render_callback for the payment buttons did not trigger. Let's try this improvement out in smaller a follow up PR

[gwwar]

Alright @Automattic/serenity I think this one is good to test, since this is already rather large. I'll add a few follow up issues.

Edit: Added:
Automattic/wp-calypso#44366
Automattic/wp-calypso#44365

[mmtr]

@mmtr I ended up needing to back out the membership registration refactors. Tracing the code we were getting to the correct register_jetpack_blocks calls, but the render_callback for the payment buttons did not trigger. Let's try this improvement out in smaller a follow up PR

Thanks for reverting my changes! Main reason why I did refactor the registration of the Payments block is because I wasn't able to see the Donations block, but I think I was missing to activate the beta blocks because I can see it now (I wrongly assumed they are enabled by default on a dev environment).

[kwight]

I ran through this with both the Donations and Payments blocks, on both Simple and JP sites, didn't see anything unexpected 🎉

(I didn't expect to see the Donations block in the inserter at all without a plan, and didn't expect any front-end output for Donations yet either.)

[gwwar]

Thanks for the extensive review @jeherve !

I can't accept my own PR, but I did verify that improvements added by @mmtr work well and don't regress the payments button in #16545 (comment). 💖 Was there any other feedback we should address in this PR?

The team is planning to immediately follow up on the Button improvement and serialization options in the next PR.

[jeherve]

Rebased to fix unrelated test failures. This should now be good to merge. We can keep iterating on the block in future PRs.

[mmtr]

Thanks for the review @jeherve! Do you know why merging is still blocked by the "Required review" check even after your approval?