diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js index a23f20ef777a5..c2a234fed0925 100644 --- a/extensions/shared/register-jetpack-block.js +++ b/extensions/shared/register-jetpack-block.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import { __, _x } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import { registerBlockType } from '@wordpress/blocks'; @@ -12,15 +13,62 @@ import getJetpackExtensionAvailability from './get-jetpack-extension-availabilit import withHasWarningIsInteractiveClassNames from './with-has-warning-is-interactive-class-names'; import wrapPaidBlock from './wrap-paid-block'; +const availableBlockTags = { + paid: _x( 'paid', 'Short label appearing near a block requiring a paid plan', 'jetpack' ), + beta: __( 'beta', 'jetpack' ), +}; + const betaExtensions = extensionList.beta || []; -function requiresPlan( unavailableReason, details ) { +/** + * Checks whether the block requires a paid plan or not. + * + * @param {string} unavailableReason The reason why block is unavailable + * @param {Object} details The block details + * @returns {string|boolean} Either false if the block doesn't require a paid plan, or the actual plan name it requires. + */ +function requiresPaidPlan( unavailableReason, details ) { if ( unavailableReason === 'missing_plan' ) { return details.required_plan; } return false; } +/** + * Builds an array of tags associated with this block, such as ["paid", "beta"]. + * + * @param {string} name The block's name. + * @param {string|boolean} requiredPlan Does this block require a paid plan? + * @returns {array} Array of tags associated with this block + */ +function buildBlockTags( name, requiredPlan ) { + const blockTags = []; + + if ( requiredPlan ) { + blockTags.push( availableBlockTags.paid ); + } + if ( betaExtensions.includes( name ) ) { + blockTags.push( availableBlockTags.beta ); + } + + return blockTags; +} + +/** + * Takes a block title string and optionally appends comma separated block tags in parentheses. + * + * @param {string} blockTitle The block's title + * @param {array} blockTags The tags you want appended in parentheses (tags, show, here) + * @returns {string} Block title + */ +function buildBlockTitle( blockTitle, blockTags = [] ) { + if ( blockTags.length ) { + blockTitle = `${ blockTitle } (${ blockTags.join( ', ' ) })`; + } + + return blockTitle; +} + /** * Registers a gutenberg block if the availability requirements are met. * @@ -32,7 +80,7 @@ function requiresPlan( unavailableReason, details ) { export default function registerJetpackBlock( name, settings, childBlocks = [] ) { const { available, details, unavailableReason } = getJetpackExtensionAvailability( name ); - const requiredPlan = requiresPlan( unavailableReason, details ); + const requiredPlan = requiresPaidPlan( unavailableReason, details ); if ( ! available && ! requiredPlan ) { if ( 'production' !== process.env.NODE_ENV ) { @@ -46,7 +94,7 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] ) const result = registerBlockType( `jetpack/${ name }`, { ...settings, - title: betaExtensions.includes( name ) ? `${ settings.title } (beta)` : settings.title, + title: buildBlockTitle( settings.title, buildBlockTags( name, requiredPlan ) ), edit: requiredPlan ? wrapPaidBlock( { requiredPlan } )( settings.edit ) : settings.edit, example: requiredPlan ? undefined : settings.example, } );