add: Tips variation of the Donations block

projects/plugins/jetpack/changelog/add-donations-tips-variation

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Donations Block: Add a "Tips" variation with coffee-themed defaults for creatives — sticky pop-up mode, "Buy me a coffee" trigger, $3/$5/$8 amounts, and a "Buy coffee" donate button.

projects/plugins/jetpack/extensions/blocks/donations/block.json

@@ -190,6 +190,10 @@
 		},
 		"blockBorderRadius": {
 			"type": [ "string", "object" ]
+		},
+		"variationName": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"example": {}

projects/plugins/jetpack/extensions/blocks/donations/editor.js

@@ -1,8 +1,10 @@
+import { registerBlockVariation } from '@wordpress/blocks';
 import { registerJetpackBlockFromMetadata } from '../../shared/register-jetpack-block';
 import metadata from './block.json';
 import deprecatedV1 from './deprecated/v1';
 import edit from './edit';
 import save from './save';
+import tipsVariation from './tips-variation';
 
 import './editor.scss';
 
@@ -11,3 +13,5 @@ registerJetpackBlockFromMetadata( metadata, {
 	save,
 	deprecated: [ deprecatedV1 ],
 } );
+
+registerBlockVariation( 'jetpack/donations', tipsVariation );

projects/plugins/jetpack/extensions/blocks/donations/icons.js

@@ -53,4 +53,4 @@ export const TRIGGER_ICONS = [
 	{ key: 'coffee', label: __( 'Cup', 'jetpack' ), icon: coffee },
 ];
 
-export { gift };
+export { coffee, gift };

projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js

@@ -0,0 +1,59 @@
+import { __ } from '@wordpress/i18n';
+import { coffee } from './icons';
+
+export const TIPS_VARIATION_NAME = 'tips';
+
+export const tipsVariationAttributes = {
+	variationName: TIPS_VARIATION_NAME,
+	displayMode: 'modal',
+	triggerSticky: false,
+	triggerButtonText: 'Buy me a coffee',
+	triggerIcon: 'coffee',
+	contentAlignment: 'center',
+	buttonAlignment: 'full',
+	tabsAppearance: 'buttons',
+	showCustomAmount: false,
+	chooseAmountText: '',
+	annualDonation: {
+		show: false,
+		planId: null,
+		amounts: [ 3, 5, 8 ],
+	},
+	oneTimeDonation: {
+		show: true,
+		planId: null,
+		amounts: [ 3, 5, 8 ],
+		defaultAmountIndex: 0,
+		heading: '',
+		buttonText: 'Buy coffee',
+		extraText: 'Thanks for your generosity!',
+	},
+	monthlyDonation: {
+		show: true,
+		planId: null,
+		amounts: [ 3, 5, 8 ],
+		defaultAmountIndex: 0,
+		heading: '',
+		buttonText: 'Buy coffee',
+		extraText: 'Thanks for your generosity!',
+	},
+};
+
+const tipsVariation = {
+	name: TIPS_VARIATION_NAME,
+	title: __( 'Tips', 'jetpack' ),
+	description: __( 'Get financial support from friends and followers.', 'jetpack' ),
+	icon: coffee,
+	isDefault: false,
+	attributes: tipsVariationAttributes,
+	scope: [ 'inserter' ],
+	isActive: attrs => attrs.variationName === TIPS_VARIATION_NAME,
+	keywords: [
+		__( 'tips', 'jetpack' ),
+		__( 'coffee', 'jetpack' ),
+		__( 'support', 'jetpack' ),
+		__( 'buy me a coffee', 'jetpack' ),
+	],
+};
+
+export default tipsVariation;

projects/plugins/jetpack/extensions/blocks/payments-intro/block-picker.js

@@ -20,10 +20,11 @@ export default function PaymentsIntroBlockPicker( { variations, onSelect, label
 						role="presentation"
 					>
 						{
-							// Since `variations` is built from reading the variations block.json files directly,
-							// the block titles are not localized. We use getBlockType to get the localized title.
+							// `displayTitle` takes precedence for variation entries that have their own
+							// title (e.g. Tips). For standard block entries, fall back to the localized
+							// title from the block registry; raw block.json titles are not translated.
 							// See https://github.com/Automattic/jetpack/issues/37014
-							getBlockType?.( variation.name )?.title || variation.title
+							variation.displayTitle || getBlockType?.( variation.name )?.title || variation.title
 						}
 					</span>
 				</li>

projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js

@@ -48,7 +48,7 @@ export default function JetpackPaymentsIntroEdit( { name, clientId } ) {
 		const blockName = variation.name;
 
 		maybeMakeBlockVisible( blockName );
-		replaceBlock( clientId, createBlock( blockName ) );
+		replaceBlock( clientId, createBlock( blockName, variation.attributes ?? {} ) );
 		selectBlock( clientId );
 	};
 

projects/plugins/jetpack/extensions/blocks/payments-intro/variations.js

@@ -4,16 +4,17 @@
 
 import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
 import donationMetadata from '../donations/block.json';
+import tipsVariation from '../donations/tips-variation';
 import paymentButtonsMetadata from '../payment-buttons/block.json';
 import premiumContentMetadata from '../premium-content/block.json';
 
-const variations = [
+const standardBlocks = [
 	[ donationMetadata.name, donationMetadata ],
 	[ paymentButtonsMetadata.name, paymentButtonsMetadata ],
 	[ premiumContentMetadata.name, premiumContentMetadata ],
 ];
 
-const variationDefinitions = variations.map( ( [ blockName, settings ] ) => {
+const standardDefs = standardBlocks.map( ( [ blockName, settings ] ) => {
 	const icon = settings.icon.src ?? settings.icon;
 
 	return {
@@ -27,4 +28,12 @@ const variationDefinitions = variations.map( ( [ blockName, settings ] ) => {
 	};
 } );
 
-export default variationDefinitions;
+const tipsDef = {
+	name: 'jetpack/donations',
+	displayTitle: tipsVariation.title,
+	description: tipsVariation.description,
+	icon: tipsVariation.icon,
+	attributes: tipsVariation.attributes,
+};
+
+export default [ ...standardDefs, tipsDef ];