Blocks: move localizable strings out of the metadata attributes field (…

…#36724) * Blocks: move localizable strings out of the metadata attributes field * Fix Goodreads block tests * Update Subscriptions block test fixtures * Update Mailchimp block test fixtures
Automattic · Apr 4, 2024 · 15b62d0 · 15b62d0
1 parent 8a5430f
commit 15b62d0
Show file tree

Hide file tree

Showing 37 changed files with 179 additions and 202 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-blocks-non-localized-strings b/projects/plugins/jetpack/changelog/fix-blocks-non-localized-strings
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Blocks: move localizable strings out of the metadata attributes field
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/block.json b/projects/plugins/jetpack/extensions/blocks/ai-chat/block.json
@@ -20,12 +20,10 @@
 	},
 	"attributes": {
 		"askButtonLabel": {
-			"type": "string",
-			"default": "Ask"
+			"type": "string"
 		},
 		"placeholder": {
-			"type": "string",
-			"default": "Ask a question about this site"
+			"type": "string"
 		},
 		"showCopy": {
 			"type": "boolean",

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/constants.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/constants.js
@@ -0,0 +1,4 @@
+import { __ } from '@wordpress/i18n';
+
+export const DEFAULT_ASK_BUTTON_LABEL = __( 'Ask', 'jetpack' );
+export const DEFAULT_PLACEHOLDER = __( 'Ask a question about this site', 'jetpack' );
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/controls.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/controls.js
@@ -8,6 +8,7 @@ import {
 } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
+import { DEFAULT_PLACEHOLDER } from './constants';
 
 export function AiChatControls( {
 	setAttributes,
@@ -30,7 +31,7 @@ export function AiChatControls( {
 						className="jetpack-ai-chat__ask-button-text"
 					>
 						<TextControl
-							placeholder={ __( 'Ask a question about this site.', 'jetpack' ) }
+							placeholder={ DEFAULT_PLACEHOLDER }
 							onChange={ newPlaceholder => setAttributes( { placeholder: newPlaceholder } ) }
 							value={ placeholder }
 						/>

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/edit.js
@@ -14,9 +14,17 @@ import { useSelect } from '@wordpress/data';
 import './editor.scss';
 import ConnectPrompt from './components/nudge-connect';
 import EnableJetpackSearchPrompt from './components/nudge-enable-search';
+import { DEFAULT_ASK_BUTTON_LABEL, DEFAULT_PLACEHOLDER } from './constants';
 import { AiChatControls } from './controls';
 
 export default function Edit( { attributes, setAttributes, clientId } ) {
+	const {
+		askButtonLabel = DEFAULT_ASK_BUTTON_LABEL,
+		placeholder = DEFAULT_PLACEHOLDER,
+		showCopy,
+		showFeedback,
+		showSources,
+	} = attributes;
 	const blockProps = useBlockProps();
 	const isBlockSelected = useSelect(
 		select => {
@@ -31,26 +39,26 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 			<div className="jetpack-ai-chat-question-wrapper">
 				<TextControl
 					className="jetpack-ai-chat-question-input"
-					placeholder={ attributes.placeholder }
+					placeholder={ placeholder }
 					disabled={ true }
 				/>
 				<RichText
 					className="wp-block-button__link jetpack-ai-chat-question-button"
 					onChange={ value => setAttributes( { askButtonLabel: value } ) }
-					value={ attributes.askButtonLabel }
+					value={ askButtonLabel }
 					withoutInteractiveFormatting
 					allowedFormats={ [ 'core/bold', 'core/italic', 'core/strikethrough' ] }
 				/>
 			</div>
 			{ isBlockSelected && <GuidelineMessage /> }
 			<InspectorControls>
 				<AiChatControls
-					askButtonLabel={ attributes.askButtonLabel }
-					placeholder={ attributes.placeholder }
+					askButtonLabel={ askButtonLabel }
+					placeholder={ placeholder }
 					setAttributes={ setAttributes }
-					showCopy={ attributes.showCopy }
-					showFeedback={ attributes.showFeedback }
-					showSources={ attributes.showSources }
+					showCopy={ showCopy }
+					showFeedback={ showFeedback }
+					showSources={ showSources }
 				/>
 			</InspectorControls>
 		</div>

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/question-answer.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/question-answer.js
@@ -16,6 +16,7 @@ import { __ } from '@wordpress/i18n';
 import CopyButton from './components/copy-button';
 import DisplayError from './components/display-error';
 import Feedback from './components/feedback';
+import { DEFAULT_ASK_BUTTON_LABEL, DEFAULT_PLACEHOLDER } from './constants';
 import useSubmitQuestion from './use-submit-question';
 
 // TODO: Configurable strings.
@@ -75,10 +76,10 @@ function ShowLittleByLittle( { html, showAnimation, onAnimationDone } ) {
  * @returns {QuestionAnswer} component.
  */
 export default function QuestionAnswer( {
-	askButtonLabel,
+	askButtonLabel = DEFAULT_ASK_BUTTON_LABEL,
 	blogId,
 	blogType,
-	placeholder,
+	placeholder = DEFAULT_PLACEHOLDER,
 	settingShowCopy,
 	settingShowFeedback,
 	settingShowSources,

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/save.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/save.js
@@ -1,8 +1,9 @@
 import { useBlockProps } from '@wordpress/block-editor';
+import { DEFAULT_ASK_BUTTON_LABEL } from './constants';
 
 export default function ( { attributes } ) {
 	const blockProps = useBlockProps.save( {
-		'data-ask-button-label': attributes.askButtonLabel,
+		'data-ask-button-label': attributes.askButtonLabel || DEFAULT_ASK_BUTTON_LABEL,
 	} );
 	return <div { ...blockProps } />;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/view.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/view.js
@@ -1,13 +1,14 @@
 import domReady from '@wordpress/dom-ready';
 import { render } from '@wordpress/element';
+import { DEFAULT_ASK_BUTTON_LABEL, DEFAULT_PLACEHOLDER } from './constants';
 import QuestionAnswer from './question-answer';
 import './view.scss';
 
 const AiChat = ( {
-	askButtonLabel,
+	askButtonLabel = DEFAULT_ASK_BUTTON_LABEL,
 	blogId,
 	blogType,
-	placeholder,
+	placeholder = DEFAULT_PLACEHOLDER,
 	showCopy,
 	showFeedback,
 	showSources,

diff --git a/projects/plugins/jetpack/extensions/blocks/cookie-consent/block.json b/projects/plugins/jetpack/extensions/blocks/cookie-consent/block.json
@@ -31,8 +31,7 @@
 		"text": {
 			"type": "string",
 			"source": "html",
-			"selector": "p",
-			"default": "Privacy &amp; Cookies: This site uses cookies. By continuing to use this website, you agree to their use. To find out more, including how to control cookies, see here: <a href=\"https://automattic.com/cookies/\">Cookie Policy</a>."
+			"selector": "p"
 		},
 		"style": {
 			"type": "object",

diff --git a/projects/plugins/jetpack/extensions/blocks/cookie-consent/constants.js b/projects/plugins/jetpack/extensions/blocks/cookie-consent/constants.js
@@ -0,0 +1,6 @@
+import { __ } from '@wordpress/i18n';
+
+export const DEFAULT_TEXT = __(
+	'Privacy &amp; Cookies: This site uses cookies. By continuing to use this website, you agree to their use. To find out more, including how to control cookies, see here: <a href="https://automattic.com/cookies/">Cookie Policy</a>.',
+	'jetpack'
+);
diff --git a/projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js b/projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js
@@ -2,6 +2,7 @@ import { InspectorControls, useBlockProps, InnerBlocks, RichText } from '@wordpr
 import { PanelBody, TextControl, SelectControl } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import './editor.scss';
+import { DEFAULT_TEXT } from './constants';
 import { useSaveCookieConsentSettings } from './use-save-cookie-consent-settings';
 
 /**
@@ -14,7 +15,7 @@ import { useSaveCookieConsentSettings } from './use-save-cookie-consent-settings
  * @returns {object} Element to render.
  */
 function CookieConsentBlockEdit( { clientId, attributes, setAttributes } ) {
-	const { consentExpiryDays, align, text } = attributes;
+	const { consentExpiryDays, align, text = DEFAULT_TEXT } = attributes;
 
 	useSaveCookieConsentSettings( clientId );
 	/**

diff --git a/projects/plugins/jetpack/extensions/blocks/cookie-consent/save.js b/projects/plugins/jetpack/extensions/blocks/cookie-consent/save.js
@@ -5,6 +5,7 @@
  * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
 import { InnerBlocks, useBlockProps, RichText } from '@wordpress/block-editor';
+import { DEFAULT_TEXT } from './constants';
 
 /**
  * The save function defines the way in which the different attributes should
@@ -18,12 +19,13 @@ import { InnerBlocks, useBlockProps, RichText } from '@wordpress/block-editor';
  */
 export default function save( { attributes } ) {
 	const blockProps = useBlockProps.save();
+	const { text = DEFAULT_TEXT, consentExpiryDays } = attributes;
 
 	return (
 		<div { ...blockProps } style={ blockProps.style } role="dialog" aria-modal="true">
-			<RichText.Content tagName="p" value={ attributes.text } />
+			<RichText.Content tagName="p" value={ text } />
 			<InnerBlocks.Content />
-			<span>{ attributes.consentExpiryDays }</span>
+			<span>{ consentExpiryDays }</span>
 		</div>
 	);
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/block.json b/projects/plugins/jetpack/extensions/blocks/donations/block.json
@@ -78,12 +78,10 @@
 			"default": true
 		},
 		"chooseAmountText": {
-			"type": "string",
-			"default": "Choose an amount"
+			"type": "string"
 		},
 		"customAmountText": {
-			"type": "string",
-			"default": "Or enter a custom amount"
+			"type": "string"
 		},
 		"fallbackLinkUrl": {
 			"type": "string"

diff --git a/projects/plugins/jetpack/extensions/blocks/donations/constants.js b/projects/plugins/jetpack/extensions/blocks/donations/constants.js
@@ -0,0 +1,4 @@
+import { __ } from '@wordpress/i18n';
+
+export const DEFAULT_CHOOSE_AMOUNT_TEXT = __( 'Choose an amount', 'jetpack' );
+export const DEFAULT_CUSTOM_AMOUNT_TEXT = __( 'Or enter a custom amount', 'jetpack' );
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/donations.php b/projects/plugins/jetpack/extensions/blocks/donations/donations.php
@@ -80,6 +80,9 @@ function render_block( $attr, $content ) {
 		);
 	}
 
+	$choose_amount_text = isset( $attr['chooseAmountText'] ) && ! empty( $attr['chooseAmountText'] ) ? $attr['chooseAmountText'] : __( 'Choose an amount', 'jetpack' );
+	$custom_amount_text = isset( $attr['customAmountText'] ) && ! empty( $attr['customAmountText'] ) ? $attr['customAmountText'] : __( 'Or enter a custom amount', 'jetpack' );
+
 	$currency   = $attr['currency'];
 	$nav        = '';
 	$headings   = '';
@@ -140,7 +143,7 @@ function render_block( $attr, $content ) {
 	if ( $attr['showCustomAmount'] ) {
 		$custom_amount        .= sprintf(
 			'<p>%s</p>',
-			wp_kses_post( $attr['customAmountText'] )
+			wp_kses_post( $custom_amount_text )
 		);
 		$default_custom_amount = \Jetpack_Memberships::SUPPORTED_CURRENCIES[ $currency ] * 100;
 		$custom_amount        .= sprintf(
@@ -176,7 +179,7 @@ function render_block( $attr, $content ) {
 		esc_attr( Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attr ) ),
 		$nav,
 		$headings,
-		$attr['chooseAmountText'],
+		$choose_amount_text,
 		$amounts,
 		$custom_amount,
 		$extra_text,

diff --git a/projects/plugins/jetpack/extensions/blocks/donations/tab.js b/projects/plugins/jetpack/extensions/blocks/donations/tab.js
@@ -6,6 +6,7 @@ import {
 	minimumTransactionAmountForCurrency,
 } from '../../shared/currencies';
 import Amount from './amount';
+import { DEFAULT_CHOOSE_AMOUNT_TEXT, DEFAULT_CUSTOM_AMOUNT_TEXT } from './constants';
 
 const Tab = ( { activeTab, attributes, setAttributes } ) => {
 	const {
@@ -14,8 +15,8 @@ const Tab = ( { activeTab, attributes, setAttributes } ) => {
 		monthlyDonation,
 		annualDonation,
 		showCustomAmount,
-		chooseAmountText,
-		customAmountText,
+		chooseAmountText = DEFAULT_CHOOSE_AMOUNT_TEXT,
+		customAmountText = DEFAULT_CUSTOM_AMOUNT_TEXT,
 	} = attributes;
 
 	const donationAttributes = {

diff --git a/projects/plugins/jetpack/extensions/blocks/goodreads/block.json b/projects/plugins/jetpack/extensions/blocks/goodreads/block.json
@@ -22,8 +22,7 @@
 			"type": "string"
 		},
 		"customTitle": {
-			"type": "string",
-			"default": "My Bookshelf"
+			"type": "string"
 		},
 		"goodreadsId": {
 			"type": "number"

diff --git a/projects/plugins/jetpack/extensions/blocks/goodreads/controls.js b/projects/plugins/jetpack/extensions/blocks/goodreads/controls.js
@@ -7,7 +7,12 @@ import {
 	ToolbarGroup,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { GOODREADS_SHELF_OPTIONS, GOODREADS_ORDER_OPTIONS, GOODREADS_SORT_OPTIONS } from './utils';
+import {
+	GOODREADS_SHELF_OPTIONS,
+	GOODREADS_ORDER_OPTIONS,
+	GOODREADS_SORT_OPTIONS,
+	GOODREADS_DEFAULT_TITLE,
+} from './utils';
 
 const renderGoodreadsDisplaySettings = ( { attributes, setAttributes } ) => {
 	const { showCover, showAuthor, showTitle, showRating, showReview, showTags } = attributes;
@@ -68,7 +73,7 @@ export function GoodreadsInspectorControls( { attributes, setAttributes } ) {
 
 				<TextControl
 					label={ __( 'Title', 'jetpack' ) }
-					value={ customTitle || __( 'My Bookshelf', 'jetpack' ) }
+					value={ customTitle || GOODREADS_DEFAULT_TITLE }
 					onChange={ value => setAttributes( { customTitle: value } ) }
 				/>
 

diff --git a/projects/plugins/jetpack/extensions/blocks/goodreads/test/fixtures/jetpack__goodreads.json b/projects/plugins/jetpack/extensions/blocks/goodreads/test/fixtures/jetpack__goodreads.json
@@ -5,7 +5,6 @@
 		"isValid": true,
 		"attributes": {
 			"bookNumber": "5",
-			"customTitle": "My Bookshelf",
 			"goodreadsId": 1176283,
 			"id": "gr_custom_widget_4529663",
 			"link": "https://www.goodreads.com/review/custom_widget/1176283.My Bookshelf?num_books=5&order=a&shelf=read&show_author=1&show_cover=1&show_rating=1&show_review=0&show_tags=0&show_title=1&sort=date_added&widget_id=4529663",

diff --git a/projects/plugins/jetpack/extensions/blocks/goodreads/utils.js b/projects/plugins/jetpack/extensions/blocks/goodreads/utils.js
@@ -1,5 +1,7 @@
 import { __, _x } from '@wordpress/i18n';
 
+export const GOODREADS_DEFAULT_TITLE = __( 'My Bookshelf', 'jetpack' );
+
 export const GOODREADS_SHELF_OPTIONS = [
 	{
 		label: _x( 'Read', 'perfect participle - eg. I read a book yesterday.', 'jetpack' ),
@@ -52,7 +54,7 @@ export const GOODREADS_ORDER_OPTIONS = [
 export function createGoodreadsEmbedLink( { attributes } ) {
 	const {
 		bookNumber,
-		customTitle,
+		customTitle = GOODREADS_DEFAULT_TITLE,
 		goodreadsId,
 		orderOption,
 		shelfOption,

diff --git a/projects/plugins/jetpack/extensions/blocks/mailchimp/block.json b/projects/plugins/jetpack/extensions/blocks/mailchimp/block.json
@@ -21,20 +21,17 @@
 	},
 	"attributes": {
 		"emailPlaceholder": {
-			"type": "string",
-			"default": "Enter your email"
+			"type": "string"
 		},
 		"consentText": {
-			"type": "string",
-			"default": "By clicking submit, you agree to share your email address with the site owner and Mailchimp to receive marketing, updates, and other emails from the site owner. Use the unsubscribe link in those emails to opt out at any time."
+			"type": "string"
 		},
 		"interests": {
 			"type": "array",
 			"default": []
 		},
 		"processingLabel": {
-			"type": "string",
-			"default": "Processing…"
+			"type": "string"
 		},
 		"signupFieldTag": {
 			"type": "string"
@@ -43,12 +40,10 @@
 			"type": "string"
 		},
 		"successLabel": {
-			"type": "string",
-			"default": "Success! You're on the list."
+			"type": "string"
 		},
 		"errorLabel": {
-			"type": "string",
-			"default": "Whoops! There was an error and we couldn't process your subscription. Please reload the page and try again."
+			"type": "string"
 		},
 		"preview": {
 			"type": "boolean",

diff --git a/projects/plugins/jetpack/extensions/blocks/mailchimp/constants.js b/projects/plugins/jetpack/extensions/blocks/mailchimp/constants.js
@@ -1,3 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
 export const NOTIFICATION_PROCESSING = 'processing';
 export const NOTIFICATION_SUCCESS = 'success';
 export const NOTIFICATION_ERROR = 'error';
+
+export const DEFAULT_EMAIL_PLACEHOLDER = __( 'Enter your email', 'jetpack' );
+export const DEFAULT_CONSENT_TEXT = __(
+	'By clicking submit, you agree to share your email address with the site owner and Mailchimp to receive marketing, updates, and other emails from the site owner. Use the unsubscribe link in those emails to opt out at any time.',
+	'jetpack'
+);
+export const DEFAULT_PROCESSING_LABEL = __( 'Processing…', 'jetpack' );
+export const DEFAULT_SUCCESS_LABEL = __( "Success! You're on the list.", 'jetpack' );
+export const DEFAULT_ERROR_LABEL = __(
+	"Whoops! There was an error and we couldn't process your subscription. Please reload the page and try again.",
+	'jetpack'
+);