From 0c8c9e9ee1fc9827f54f5a0885fb67a841cd60de Mon Sep 17 00:00:00 2001 From: Angela Blake Date: Wed, 6 May 2026 14:28:01 -0500 Subject: [PATCH 1/4] add: Tips variation of the Donations block Registers a 'jetpack/donations' block variation called Tips, pre-configured for creatives: sticky pop-up modal, coffee icon, "Buy me a coffee" trigger, centered content, full-width button, one-time + monthly only at $3/$5/$8. - block.json: add `variationName` attribute for reliable isActive detection - tips-variation.js: defines and exports the variation + its attributes - editor.js: registers the Tips variation after the block - icons.js: exports the coffee icon for reuse - payments-intro/variations.js: adds Tips as the last picker option - payments-intro/block-picker.js: supports `displayTitle` override so Tips shows its own name instead of the parent block's "Donations Form" title - payments-intro/edit.js: passes variation.attributes to createBlock so clicking Tips inserts a pre-configured block, not a vanilla Donations block Co-Authored-By: Claude Sonnet 4.6 --- .../extensions/blocks/donations/block.json | 4 ++ .../extensions/blocks/donations/editor.js | 4 ++ .../extensions/blocks/donations/icons.js | 2 +- .../blocks/donations/tips-variation.js | 54 +++++++++++++++++++ .../blocks/payments-intro/block-picker.js | 7 +-- .../extensions/blocks/payments-intro/edit.js | 2 +- .../blocks/payments-intro/variations.js | 15 ++++-- 7 files changed, 80 insertions(+), 8 deletions(-) create mode 100644 projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js diff --git a/projects/plugins/jetpack/extensions/blocks/donations/block.json b/projects/plugins/jetpack/extensions/blocks/donations/block.json index fafdc694a14..efd2a2af95d 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/block.json +++ b/projects/plugins/jetpack/extensions/blocks/donations/block.json @@ -190,6 +190,10 @@ }, "blockBorderRadius": { "type": [ "string", "object" ] + }, + "variationName": { + "type": "string", + "default": "" } }, "example": {} diff --git a/projects/plugins/jetpack/extensions/blocks/donations/editor.js b/projects/plugins/jetpack/extensions/blocks/donations/editor.js index 75f2f0dae5b..6e67daa292d 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/editor.js +++ b/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 ); diff --git a/projects/plugins/jetpack/extensions/blocks/donations/icons.js b/projects/plugins/jetpack/extensions/blocks/donations/icons.js index 24f248dbe4c..81a597582bd 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/icons.js +++ b/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 }; diff --git a/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js b/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js new file mode 100644 index 00000000000..57f61fd9654 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js @@ -0,0 +1,54 @@ +import { __ } from '@wordpress/i18n'; +import { coffee } from './icons'; + +export const TIPS_VARIATION_NAME = 'tips'; + +export const tipsVariationAttributes = { + variationName: TIPS_VARIATION_NAME, + displayMode: 'modal', + triggerSticky: true, + triggerButtonText: 'Buy me a coffee', + triggerIcon: 'coffee', + contentAlignment: 'center', + buttonAlignment: 'full', + tabsAppearance: 'buttons', + showCustomAmount: false, + annualDonation: { + show: false, + planId: null, + amounts: [ 3, 5, 8 ], + }, + oneTimeDonation: { + show: true, + planId: null, + amounts: [ 3, 5, 8 ], + defaultAmountIndex: 0, + buttonText: 'Buy coffee', + }, + monthlyDonation: { + show: true, + planId: null, + amounts: [ 3, 5, 8 ], + defaultAmountIndex: 0, + buttonText: 'Buy coffee', + }, +}; + +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; diff --git a/projects/plugins/jetpack/extensions/blocks/payments-intro/block-picker.js b/projects/plugins/jetpack/extensions/blocks/payments-intro/block-picker.js index 5994cf5be59..e03db9d630a 100644 --- a/projects/plugins/jetpack/extensions/blocks/payments-intro/block-picker.js +++ b/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 } diff --git a/projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js b/projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js index 86b3ef05d24..b239b43f1d8 100644 --- a/projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js +++ b/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 ); }; diff --git a/projects/plugins/jetpack/extensions/blocks/payments-intro/variations.js b/projects/plugins/jetpack/extensions/blocks/payments-intro/variations.js index f43b024e279..242786b4085 100644 --- a/projects/plugins/jetpack/extensions/blocks/payments-intro/variations.js +++ b/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 ]; From c690783652b84fd5e6f3c9b3f8cac993f1c10f07 Mon Sep 17 00:00:00 2001 From: Angela Blake Date: Wed, 6 May 2026 14:31:15 -0500 Subject: [PATCH 2/4] changelog: add entry for Tips variation of Donations block Co-Authored-By: Claude Sonnet 4.6 --- .../plugins/jetpack/changelog/add-donations-tips-variation | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/add-donations-tips-variation diff --git a/projects/plugins/jetpack/changelog/add-donations-tips-variation b/projects/plugins/jetpack/changelog/add-donations-tips-variation new file mode 100644 index 00000000000..765ff71aae9 --- /dev/null +++ b/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. From 4b06eed620b11088edac2ea3731bb2079496c656 Mon Sep 17 00:00:00 2001 From: Angela Blake Date: Wed, 6 May 2026 15:25:23 -0500 Subject: [PATCH 3/4] =?UTF-8?q?update:=20Tips=20variation=20default=20copy?= =?UTF-8?q?=20=E2=80=94=20blank=20headings,=20custom=20extraText?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- .../jetpack/extensions/blocks/donations/tips-variation.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js b/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js index 57f61fd9654..788ac8be40b 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js +++ b/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js @@ -13,6 +13,7 @@ export const tipsVariationAttributes = { buttonAlignment: 'full', tabsAppearance: 'buttons', showCustomAmount: false, + chooseAmountText: '', annualDonation: { show: false, planId: null, @@ -23,14 +24,18 @@ export const tipsVariationAttributes = { 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!', }, }; From a43dd36ec6897463224e64412c5b39e5008b9eb4 Mon Sep 17 00:00:00 2001 From: Angela Blake Date: Wed, 6 May 2026 15:48:24 -0500 Subject: [PATCH 4/4] update: disable sticky trigger by default in Tips variation Co-Authored-By: Claude Sonnet 4.6 --- .../jetpack/extensions/blocks/donations/tips-variation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js b/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js index 788ac8be40b..2f5a6711307 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js +++ b/projects/plugins/jetpack/extensions/blocks/donations/tips-variation.js @@ -6,7 +6,7 @@ export const TIPS_VARIATION_NAME = 'tips'; export const tipsVariationAttributes = { variationName: TIPS_VARIATION_NAME, displayMode: 'modal', - triggerSticky: true, + triggerSticky: false, triggerButtonText: 'Buy me a coffee', triggerIcon: 'coffee', contentAlignment: 'center',