WIP Donations block: Update donations block to use inner blocks

[rcrdortiz]

Fixes #17232, it also fixes other issues. I'll update this message when the PR is ready for review.

Changes proposed in this Pull Request:

• Ported the current Donations block from using RichText components to use InnerBlocks instead.

Jetpack product discussion

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

Testing instructions:

• Edit or create a post.
• Search for the Donations Editable Blocks (beta) component and add it.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello rcrdortiz! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D73663-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

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: March 1, 2022.
• Scheduled code freeze: February 22, 2022.

[Copons]

This is super interesting already @rcrdortiz!
I'm really looking forward to seeing this with the save functions! ✨

Please keep in mind that we don't need all the requested features at once.
The original Donations block has no customization options, so even just refactoring it into inner blocks should be enough for a first PR.
We can add (or fine-tune) all the design tools in follow-ups.

At a glance, I've got a few general comments about the tabs!

---

Is there a reason why they are three different child blocks rather than one generic tab block with different attributes and inner blocks?

They seem to be practically identical, aside from the initial heading label and the payment cadence; we should be able to address them both through attributes and inner blocks.

Something like this:

<!-- wp:jetpack/donations-view { "type": "annual" } /-->
    <!-- wp:heading {"level":3} -->
    <h3>Make a yearly donation</h3>
    <!-- /wp:heading -->
<!-- /wp:jetpack/donations-view /-->

---

The structure of the block becomes like this (which is reasonable):

Please make sure also to add appropriate icons to the tabs.
For lack of better ones, reuse the Donations' heart icon — Premium Content does the same for visitor/subscriber views.

And speaking of Premium Content, with this new format, the Donations block would have the same issue outlined here: #22426.

We can address it in a follow-up, though, so there's no need to sweat over it right now. 👍

---

Note that the original Donations block has this in its sidebar settings:

When working on inner blocks templates, keep in mind that:

• Monthly and annual views are optional and can be togglable (via sidebar settings, unless we have a better idea).
• The custom amount button is optional as well (this comes for free with inner blocks, just make sure it can be deleted and re-added).

---

Also, a bonus comment about folder structure nitpicking! 😄

Blocks typically have a flatter structure, so feel free to:

• Move all from common to the root.
• donations-context.js can be just context.js, which is consistent with both JP and Core Guten blocks.
• factory.js is a bit uncommon in a8c; better utils.js or spread into single-function files (although, if we manage to unify the three view blocks, we wouldn't need these functions anymore 🙂 ).
• Move the child blocks folders into the root as well, as it's fairly obvious what they are and IMHO there's no need for the additional specificity of the child-blocks folder.

[rcrdortiz]

@Copons Implemented all your suggestions. Thanks!
You will notice that the custom amount field toggle isn't working, I'm aware of it.