add: Tips variation of the Donations block

[angelablake]

Proposed changes

Registers a block variation called Tips on top of jetpack/donations. It appears in the block inserter as its own entry and at the end of the Payments block picker. Selecting it inserts a Donations block pre-configured with defaults suited for creators who collect tips:

• Display mode: sticky pop-up modal
• Trigger: coffee cup icon, "Buy me a coffee" button text
• Content aligned center; donate button full-width
• Tabs appearance: Buttons
• One-time + monthly only (annual hidden); amounts $3 / $5 / $8, $3 default on both
• Custom amount hidden

How it works

File	What changed
donations/block.json	Added variationName attribute — written to block content so isActive can identify the variation unambiguously
donations/tips-variation.js	New file: exports the variation definition and its attribute defaults
donations/editor.js	Calls registerBlockVariation after the block registers
donations/icons.js	Exports coffee so the variation can use it as its icon
payments-intro/variations.js	Adds Tips as the last option in the Payments block picker
payments-intro/block-picker.js	Adds displayTitle precedence so Tips shows "Tips" not "Donations Form"
payments-intro/edit.js	Passes variation.attributes to createBlock so the picker inserts a pre-configured block

Related product discussion

Part of RSM project: "Little things matter: Improving the Donation block"
Linear: https://linear.app/a8c/project/rsm-donation-form-improvements-wip-061cec72952c/overview

Stacked on #48539 (pop-up display mode).

Does this PR change what data or activity we track or use?

No.

Testing instructions

Block inserter:

1. Open the editor and search for "Tips" in the block inserter.
2. A "Tips" entry should appear with a coffee cup icon.
3. Insert it — the block should appear as a sticky pop-up trigger button labelled "Buy me a coffee" with a coffee icon.
4. In the inspector: Display panel shows Pop-up mode + Sticky toggled on; Style panel should show Buttons appearance; amounts should be $3/$5/$8 with $3 selected by default on both one-time and monthly; annual tab and custom amount should be hidden.

Payments block picker:

1. Insert the Payments block from the block inserter.
2. The picker should show four options: Donations Form, Payment Buttons, Premium Content, Tips (in that order).
3. [screenshot] of the picker with Tips at the end
4. Click Tips — the block should insert pre-configured exactly as described above (not a vanilla Donations Form).

Existing Donations Form blocks:
5. Open an existing Donations Form block. Confirm it still works normally and does not show "Tips" in the toolbar.
6. Confirm the block inspector controls all still work.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the add/donations-tips-variation branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/donations-tips-variation

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[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.
  
• ✅ Add a "[Status]" label (In Progress, Needs 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 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

No summary data is available for parent commit 94cc7fd, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for 94cc7fd is available.

Full summary · PHP report · JS report