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 000000000000..765ff71aae94 --- /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. diff --git a/projects/plugins/jetpack/extensions/blocks/donations/block.json b/projects/plugins/jetpack/extensions/blocks/donations/block.json index fafdc694a14a..efd2a2af95d3 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 75f2f0dae5b9..6e67daa292d9 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 24f248dbe4c0..81a597582bd9 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 000000000000..2f5a67113076 --- /dev/null +++ b/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; 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 5994cf5be599..e03db9d630a7 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 86b3ef05d244..b239b43f1d80 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 f43b024e279f..242786b4085e 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 ];