Writing Prompt block: use site language setting for translations

projects/plugins/jetpack/_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v3-endpoint-blogging-prompts.php

@@ -228,6 +228,10 @@ public function prepare_item_for_response( $prompt, $request ) {
 			$data['date'] = $this->prepare_date_response( $prompt->post_date_gmt );
 		}
 
+		if ( rest_is_field_included( 'label', $fields ) ) {
+			$data['label'] = __( 'Daily writing prompt', 'jetpack' );
+		}
+
 		if ( rest_is_field_included( 'text', $fields ) ) {
 			$text = \BloggingPrompts\prompt_without_blocks( $prompt->post_content );
 			// Allow translating a variable, since this text is imported from bloggingpromptstemplates.wordpress.com for translation.
@@ -251,6 +255,14 @@ public function prepare_item_for_response( $prompt, $request ) {
 			$data['answered_users_sample'] = $this->build_answering_users_sample( $prompt->ID );
 		}
 
+		if ( rest_is_field_included( 'answered_link', $fields ) ) {
+			$data['answered_link'] = esc_url( "https://wordpress.com/tag/dailyprompt-{$prompt->ID}" );
+		}
+
+		if ( rest_is_field_included( 'answered_link_text', $fields ) ) {
+			$data['answered_link_text'] = __( 'View all responses', 'jetpack' );
+		}
+
 		return $data;
 	}
 
@@ -330,6 +342,10 @@ public function get_item_schema() {
 					'description' => __( "The date the post was published, in the site's timezone.", 'jetpack' ),
 					'type'        => 'string',
 				),
+				'label'                 => array(
+					'description' => __( 'Label for the prompt.', 'jetpack' ),
+					'type'        => 'string',
+				),
 				'text'                  => array(
 					'description' => __( 'The text of the prompt. May include html tags like <em>.', 'jetpack' ),
 					'type'        => 'string',
@@ -360,6 +376,15 @@ public function get_item_schema() {
 						),
 					),
 				),
+				'answered_link'         => array(
+					'description' => __( 'Link to answers for the prompt.', 'jetpack' ),
+					'type'        => 'string',
+					'format'      => 'uri',
+				),
+				'answered_link_text'    => array(
+					'description' => __( 'Text for the link to answers for the prompt.', 'jetpack' ),
+					'type'        => 'string',
+				),
 			),
 		);
 	}

projects/plugins/jetpack/changelog/update-writing-prompt-block-site-locale

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+Comment: Change to unreleased beta block
+

projects/plugins/jetpack/extensions/blocks/blogging-prompt/attributes.js

@@ -1,4 +1,15 @@
 export default {
+	answersLink: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'href',
+		selector: '.jetpack-blogging-prompt__answers-link',
+	},
+	answersLinkText: {
+		type: 'string',
+		source: 'html',
+		selector: '.jetpack-blogging-prompt__answers-link',
+	},
 	gravatars: {
 		type: 'array',
 		source: 'query',
@@ -11,10 +22,19 @@ export default {
 			},
 		},
 	},
-	prompt: {
-		type: 'text',
+	promptLabel: {
+		type: 'string',
+		source: 'html',
+		selector: '.jetpack-blogging-prompt__label',
+	},
+	promptText: {
+		type: 'string',
 		source: 'html',
-		selector: '.jetpack-blogging-prompt__prompt',
+		selector: '.jetpack-blogging-prompt__text',
+	},
+	promptFetched: {
+		type: 'boolean',
+		default: false,
 	},
 	promptId: {
 		type: 'number',

projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js

@@ -1,41 +1,56 @@
 import apiFetch from '@wordpress/api-fetch';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { Button, PanelBody, Spinner, ToggleControl, withNotices } from '@wordpress/components';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
 import './editor.scss';
-import icon from './icon';
 import { usePromptTags } from './use-prompt-tags';
 
 function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttributes } ) {
-	const fetchedPromptRef = useRef( false );
-	const [ isLoading, setLoading ] = useState( true );
-	const { gravatars, prompt, promptId, showLabel, showResponses, tagsAdded } = attributes;
+	// Use the ref to keep track of starting to fetch the prompt, so we don't make duplicate requests.
+	const fetchingPromptRef = useRef( false );
+	const {
+		answersLink,
+		answersLinkText,
+		gravatars,
+		// Use the attribute the track when we've finished fetching the prompt.
+		promptFetched,
+		promptId,
+		promptLabel,
+		promptText,
+		showLabel,
+		showResponses,
+		tagsAdded,
+	} = attributes;
 	const blockProps = useBlockProps( { className: 'jetpack-blogging-prompt' } );
 
 	const setTagsAdded = state => setAttributes( { tagsAdded: state } );
 
 	// Add the prompt tags to the post, if they haven't already been added.
 	usePromptTags( promptId, tagsAdded, setTagsAdded );
 
+	const siteLanguage = useSelect( select => {
+		const { getEntityRecord, hasFinishedResolution } = select( 'core' );
+		const language = getEntityRecord( 'root', 'site' )?.language || 'en_US';
+		const hasFinishedResolving = hasFinishedResolution( 'getEntityRecord', [ 'root', 'site' ] );
+		return hasFinishedResolving ? language : null;
+	}, [] );
+
 	// Fetch the prompt by id, if present, otherwise the get the prompt for today.
 	useEffect( () => {
-		// Only fetch the prompt once.
-		if ( fetchedPromptRef.current ) {
+		// Only fetch the prompt one time when the block is inserted, after we know the site language.
+		if ( ! siteLanguage || fetchingPromptRef.current || promptFetched ) {
 			return;
 		}
 
 		const retryPrompt = () => {
-			setLoading( true );
-			fetchedPromptRef.current = false;
+			setAttributes( { promptFetched: false, promptId: null, tagsAdded: false } );
+			fetchingPromptRef.current = false;
 			noticeOperations.removeAllNotices();
 		};
 
-		const resetPrompt = () => {
-			setAttributes( { promptId: null } );
-			retryPrompt();
-		};
-
 		const errorMessage = message => (
 			<>
 				{ sprintf(
@@ -56,7 +71,7 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib
 					__( 'Prompt with id %d not found.', 'jetpack' ),
 					pId
 				) }{ ' ' }
-				<Button variant="link" onClick={ resetPrompt }>
+				<Button variant="link" onClick={ retryPrompt }>
 					{ __( 'Reset prompt', 'jetpack' ) }
 				</Button>
 			</>
@@ -76,28 +91,40 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib
 			path += `?after=--${ month }-${ day }&order=desc`;
 		}
 
-		fetchedPromptRef.current = true;
+		path = addQueryArgs( path, { _locale: siteLanguage } );
+
+		fetchingPromptRef.current = true;
 		apiFetch( { path } )
 			.then( prompts => {
 				const promptData = promptId ? prompts : prompts[ 0 ];
 
-				setLoading( false );
 				setAttributes( {
+					answersLink: promptData.answered_link,
+					answersLinkText: promptData.answered_link_text,
 					gravatars: promptData.answered_users_sample.map( ( { avatar } ) => ( { url: avatar } ) ),
-					prompt: promptData.text,
+					promptFetched: true,
+					promptLabel: promptData.label,
+					promptText: promptData.text,
 					promptId: promptData.id,
 				} );
 			} )
 			.catch( error => {
-				setLoading( false );
+				setAttributes( { promptFetched: true } );
 				const message =
 					error.code === 'rest_post_invalid_id' && promptId
 						? notFoundMessage( promptId )
 						: errorMessage( error.message );
 				noticeOperations.removeAllNotices();
 				noticeOperations.createErrorNotice( message );
 			} );
-	}, [ fetchedPromptRef, isLoading, noticeOperations, promptId, setAttributes, setLoading ] );
+	}, [
+		fetchingPromptRef,
+		noticeOperations,
+		promptFetched,
+		promptId,
+		setAttributes,
+		siteLanguage,
+	] );
 
 	const onShowLabelChange = newValue => {
 		setAttributes( { showLabel: newValue } );
@@ -128,14 +155,9 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib
 
 	const renderPrompt = () => (
 		<>
-			{ showLabel && (
-				<div className="jetpack-blogging-prompt__label">
-					{ icon }
-					{ __( 'Daily writing prompt', 'jetpack' ) }
-				</div>
-			) }
+			{ showLabel && <div className="jetpack-blogging-prompt__label">{ promptLabel }</div> }
 
-			<div className="jetpack-blogging-prompt__prompt">{ prompt }</div>
+			<div className="jetpack-blogging-prompt__text">{ promptText }</div>
 
 			{ showResponses && promptId && (
 				<div className="jetpack-blogging-prompt__answers">
@@ -156,11 +178,11 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib
 
 					<a
 						className="jetpack-blogging-prompt__answers-link"
-						href={ `https://wordpress.com/tag/dailyprompt-${ promptId }` }
+						href={ answersLink }
 						target="_blank"
 						rel="external noreferrer noopener"
 					>
-						{ __( 'View all responses', 'jetpack' ) }
+						{ answersLinkText }
 					</a>
 				</div>
 			) }
@@ -172,7 +194,7 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib
 			{ noticeUI }
 			{ renderControls() }
 
-			{ isLoading ? (
+			{ ! promptFetched ? (
 				<div className="jetpack-blogging-prompt__spinner">
 					<Spinner />
 				</div>

projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js

@@ -1,20 +1,22 @@
 import { useBlockProps } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import icon from './icon';
 
 function BloggingPromptSave( { attributes } ) {
-	const { gravatars, prompt, promptId, showLabel, showResponses } = attributes;
+	const {
+		answersLink,
+		answersLinkText,
+		gravatars,
+		promptId,
+		promptLabel,
+		promptText,
+		showLabel,
+		showResponses,
+	} = attributes;
 	const blockProps = useBlockProps.save( { className: 'jetpack-blogging-prompt' } );
 
 	return (
 		<div { ...blockProps }>
-			{ showLabel && (
-				<div className="jetpack-blogging-prompt__label">
-					{ icon }
-					{ __( 'Daily writing prompt', 'jetpack' ) }
-				</div>
-			) }
-			<div className="jetpack-blogging-prompt__prompt">{ prompt }</div>
+			{ showLabel && <div className="jetpack-blogging-prompt__label">{ promptLabel }</div> }
+			<div className="jetpack-blogging-prompt__text">{ promptText }</div>
 			{ showResponses && promptId && (
 				<div className="jetpack-blogging-prompt__answers">
 					{ gravatars.map( ( { url } ) => {
@@ -33,11 +35,11 @@ function BloggingPromptSave( { attributes } ) {
 					} ) }
 					<a
 						className="jetpack-blogging-prompt__answers-link"
-						href={ `https://wordpress.com/tag/dailyprompt-${ promptId }` }
+						href={ answersLink }
 						target="_blank"
 						rel="external noreferrer noopener"
 					>
-						{ __( 'View all responses', 'jetpack' ) }
+						{ answersLinkText }
 					</a>
 				</div>
 			) }

projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss

@@ -6,18 +6,15 @@
 	padding: 24px;
 
 	&__label {
+		background: no-repeat url('./icon.svg');
+		background-position: left;
+		background-size: 24px 24px;
 		font-size: 14px;
 		margin-bottom: $grid-unit-20;
-
-		svg {
-			height: $icon-size;
-			width: $icon-size;
-			margin-right: 6px;
-			vertical-align: bottom;
-		}
+		padding-left: 26px;
 	}
 
-	&__prompt {
+	&__text {
 		font-size: 24px;
 	}