diff --git a/projects/plugins/jetpack/_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v3-endpoint-blogging-prompts.php b/projects/plugins/jetpack/_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v3-endpoint-blogging-prompts.php index a84473edc7a0e..ce6483cecafcf 100644 --- a/projects/plugins/jetpack/_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v3-endpoint-blogging-prompts.php +++ b/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 .', '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', + ), ), ); } diff --git a/projects/plugins/jetpack/changelog/update-writing-prompt-block-site-locale b/projects/plugins/jetpack/changelog/update-writing-prompt-block-site-locale new file mode 100644 index 0000000000000..4a7808f688a7d --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-writing-prompt-block-site-locale @@ -0,0 +1,4 @@ +Significance: patch +Type: other +Comment: Change to unreleased beta block + diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/attributes.js b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/attributes.js index 23aa24a8666b8..8a1cdeb1ca438 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/attributes.js +++ b/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', diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js index 4bf65ff75e0f5..14d802797aa9f 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js @@ -1,16 +1,29 @@ 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 } ); @@ -18,24 +31,26 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib // 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 ) }{ ' ' } - @@ -76,20 +91,25 @@ 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 ) @@ -97,7 +117,14 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib 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 && ( -
- { icon } - { __( 'Daily writing prompt', 'jetpack' ) } -
- ) } + { showLabel &&
{ promptLabel }
} -
{ prompt }
+
{ promptText }
{ showResponses && promptId && (
@@ -156,11 +178,11 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib - { __( 'View all responses', 'jetpack' ) } + { answersLinkText }
) } @@ -172,7 +194,7 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib { noticeUI } { renderControls() } - { isLoading ? ( + { ! promptFetched ? (
diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/icon.svg b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/icon.svg new file mode 100644 index 0000000000000..5b7ad0f235352 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/icon.svg @@ -0,0 +1,6 @@ + + + diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js index 1716f5f2fa87d..e9e3abe4563c2 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js +++ b/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 (
- { showLabel && ( -
- { icon } - { __( 'Daily writing prompt', 'jetpack' ) } -
- ) } -
{ prompt }
+ { showLabel &&
{ promptLabel }
} +
{ promptText }
{ showResponses && promptId && (
{ gravatars.map( ( { url } ) => { @@ -33,11 +35,11 @@ function BloggingPromptSave( { attributes } ) { } ) } - { __( 'View all responses', 'jetpack' ) } + { answersLinkText }
) } diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss index 4502929b012a7..61208b7187931 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss +++ b/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; }