From b2f471ccc4f6d9f130901abba6bc1c84065c8d65 Mon Sep 17 00:00:00 2001 From: Jeremy Herve Date: Wed, 19 Feb 2020 22:38:40 +0100 Subject: [PATCH 1/7] Blocks: add paid label next to block title when it requires a plan --- extensions/shared/register-jetpack-block.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js index a23f20ef777a5..5dda257f01e52 100644 --- a/extensions/shared/register-jetpack-block.js +++ b/extensions/shared/register-jetpack-block.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import { __, sprintf } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import { registerBlockType } from '@wordpress/blocks'; @@ -44,9 +45,17 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] ) return false; } + let blockTitle = settings.title; + if ( requiredPlan ) { + blockTitle = sprintf( __( '%s (paid)', 'jetpack' ), blockTitle ); + } + if ( betaExtensions.includes( name ) ) { + blockTitle = `${ blockTitle } (beta)`; + } + const result = registerBlockType( `jetpack/${ name }`, { ...settings, - title: betaExtensions.includes( name ) ? `${ settings.title } (beta)` : settings.title, + title: blockTitle, edit: requiredPlan ? wrapPaidBlock( { requiredPlan } )( settings.edit ) : settings.edit, example: requiredPlan ? undefined : settings.example, } ); From 1135ebee852f1366f9ed541157b375d3df529a9e Mon Sep 17 00:00:00 2001 From: Bart Date: Thu, 20 Feb 2020 15:55:07 +0100 Subject: [PATCH 2/7] Rename the plan checker func & add comments --- extensions/shared/register-jetpack-block.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js index 5dda257f01e52..0c929c0e1263b 100644 --- a/extensions/shared/register-jetpack-block.js +++ b/extensions/shared/register-jetpack-block.js @@ -15,7 +15,14 @@ import wrapPaidBlock from './wrap-paid-block'; 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; } @@ -33,7 +40,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 ) { From 3126d2d8559afe3b4080267ab4d0bc770a3fca45 Mon Sep 17 00:00:00 2001 From: Bart Date: Thu, 20 Feb 2020 17:47:00 +0100 Subject: [PATCH 3/7] Join block tags and make 'beta' translatable --- extensions/shared/register-jetpack-block.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js index 0c929c0e1263b..6df14c0aa6fe6 100644 --- a/extensions/shared/register-jetpack-block.js +++ b/extensions/shared/register-jetpack-block.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import { registerBlockType } from '@wordpress/blocks'; @@ -13,6 +13,11 @@ 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: __( 'paid', 'jetpack' ), + beta: __( 'beta', 'jetpack' ), +}; + const betaExtensions = extensionList.beta || []; /** @@ -53,11 +58,17 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] ) } let blockTitle = settings.title; + const blockTags = []; + if ( requiredPlan ) { - blockTitle = sprintf( __( '%s (paid)', 'jetpack' ), blockTitle ); + blockTags.push( availableBlockTags.plan ); } if ( betaExtensions.includes( name ) ) { - blockTitle = `${ blockTitle } (beta)`; + blockTags.push( availableBlockTags.beta ); + } + + if ( blockTags.length ) { + blockTitle = blockTitle + ` (${ blockTags.join( ', ' ) })`; } const result = registerBlockType( `jetpack/${ name }`, { From 6ef33cd2d85968388c0800900a2adddc659a87af Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 3 Mar 2020 13:57:53 -0600 Subject: [PATCH 4/7] Using _x to translate 'paid' string to provide context for the translation --- extensions/shared/register-jetpack-block.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js index 6df14c0aa6fe6..44dc25d854e15 100644 --- a/extensions/shared/register-jetpack-block.js +++ b/extensions/shared/register-jetpack-block.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import { registerBlockType } from '@wordpress/blocks'; @@ -14,7 +14,7 @@ import withHasWarningIsInteractiveClassNames from './with-has-warning-is-interac import wrapPaidBlock from './wrap-paid-block'; const availableBlockTags = { - paid: __( 'paid', 'jetpack' ), + paid: _x( 'paid', 'Short label appearing near a block requiring a paid plan', 'jetpack' ), beta: __( 'beta', 'jetpack' ), }; From 22694164ee20439ef1abb7a854b5386e1364833a Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 3 Mar 2020 14:04:57 -0600 Subject: [PATCH 5/7] Use template literal for building block tags to make the code more readable. --- extensions/shared/register-jetpack-block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js index 44dc25d854e15..f5a5e9c8c35c7 100644 --- a/extensions/shared/register-jetpack-block.js +++ b/extensions/shared/register-jetpack-block.js @@ -68,7 +68,7 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] ) } if ( blockTags.length ) { - blockTitle = blockTitle + ` (${ blockTags.join( ', ' ) })`; + blockTitle = `${ blockTitle } (${ blockTags.join( ', ' ) })`; } const result = registerBlockType( `jetpack/${ name }`, { From 0a325fbef2eb29d254f72cbe3fab6fe86c85146f Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 3 Mar 2020 14:22:29 -0600 Subject: [PATCH 6/7] Changed the object property from availableBlockTags.plan to availableBlockTags.paid The availableBlockTags object has the property paid, and not plan. The check to add the (paid) label was looking for the availableBlockTags.plan property, which was undefined. I updated this to look for availableBlockTags.paid. --- extensions/shared/register-jetpack-block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js index f5a5e9c8c35c7..1a7647debe024 100644 --- a/extensions/shared/register-jetpack-block.js +++ b/extensions/shared/register-jetpack-block.js @@ -61,7 +61,7 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] ) const blockTags = []; if ( requiredPlan ) { - blockTags.push( availableBlockTags.plan ); + blockTags.push( availableBlockTags.paid ); } if ( betaExtensions.includes( name ) ) { blockTags.push( availableBlockTags.beta ); From 25129a6679a36b5f715f9fd7eeb86994d164e1cc Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 4 Mar 2020 09:15:53 -0600 Subject: [PATCH 7/7] Refactors block title and block tags implementation to be into more isolated build functions. - Adds buildBlockTags( name, requiredPlan) - Adds buildBlockTitle( blockTitle, blockTags ) - Builds the title in registerJetpackBlock with buildBlockTitle( settings.title, buildBlockTags( name, requiredPlan ) ) --- extensions/shared/register-jetpack-block.js | 51 +++++++++++++++------ 1 file changed, 36 insertions(+), 15 deletions(-) diff --git a/extensions/shared/register-jetpack-block.js b/extensions/shared/register-jetpack-block.js index 1a7647debe024..c2a234fed0925 100644 --- a/extensions/shared/register-jetpack-block.js +++ b/extensions/shared/register-jetpack-block.js @@ -34,6 +34,41 @@ function requiresPaidPlan( unavailableReason, details ) { 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. * @@ -57,23 +92,9 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] ) return false; } - let blockTitle = settings.title; - const blockTags = []; - - if ( requiredPlan ) { - blockTags.push( availableBlockTags.paid ); - } - if ( betaExtensions.includes( name ) ) { - blockTags.push( availableBlockTags.beta ); - } - - if ( blockTags.length ) { - blockTitle = `${ blockTitle } (${ blockTags.join( ', ' ) })`; - } - const result = registerBlockType( `jetpack/${ name }`, { ...settings, - title: blockTitle, + title: buildBlockTitle( settings.title, buildBlockTags( name, requiredPlan ) ), edit: requiredPlan ? wrapPaidBlock( { requiredPlan } )( settings.edit ) : settings.edit, example: requiredPlan ? undefined : settings.example, } );