From 66a57fa3aac0f23a86412b0b73561fbc9d40f6ee Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Mon, 25 Nov 2024 16:12:04 +0100 Subject: [PATCH] Page descriptions copy * default copy: with link to external content-analysis * both features disabled but still indexables: with link to internal site features * no indexables: default copy but with info alert --- .../js/src/dashboard/components/dashboard.js | 6 +++-- .../js/src/dashboard/components/page-title.js | 22 +++++++++++++++---- packages/js/src/dashboard/index.js | 5 +++++ packages/js/src/general/initialize.js | 6 +++++ 4 files changed, 33 insertions(+), 6 deletions(-) diff --git a/packages/js/src/dashboard/components/dashboard.js b/packages/js/src/dashboard/components/dashboard.js index 387556946a3..62f58e02edc 100644 --- a/packages/js/src/dashboard/components/dashboard.js +++ b/packages/js/src/dashboard/components/dashboard.js @@ -5,6 +5,7 @@ import { PageTitle } from "./page-title"; * @type {import("../index").ContentType} ContentType * @type {import("../index").Features} Features * @type {import("../index").Endpoints} Endpoints + * @type {import("../index").Links} Links */ /** @@ -13,12 +14,13 @@ import { PageTitle } from "./page-title"; * @param {Features} features Whether features are enabled. * @param {Endpoints} endpoints The endpoints. * @param {Object} headers The headers for the score requests. + * @param {Links} links The links. * @returns {JSX.Element} The element. */ -export const Dashboard = ( { contentTypes, userName, features, endpoints, headers } ) => { +export const Dashboard = ( { contentTypes, userName, features, endpoints, headers, links } ) => { return ( <> - +
{ features.indexables && features.seoAnalysis && ( diff --git a/packages/js/src/dashboard/components/page-title.js b/packages/js/src/dashboard/components/page-title.js index c8d518cd7ce..f2d085b735f 100644 --- a/packages/js/src/dashboard/components/page-title.js +++ b/packages/js/src/dashboard/components/page-title.js @@ -1,17 +1,20 @@ import { createInterpolateElement } from "@wordpress/element"; import { __, sprintf } from "@wordpress/i18n"; import { Alert, Link, Paper, Title } from "@yoast/ui-library"; +import { OutboundLink } from "../../shared-admin/components"; /** * @type {import("../index").Features} Features + * @type {import("../index").Links} Links */ /** * @param {string} userName The user name. * @param {Features} features Whether features are enabled. + * @param {Links} links The links. * @returns {JSX.Element} The element. */ -export const PageTitle = ( { userName, features } ) => ( +export const PageTitle = ( { userName, features, links } ) => ( @@ -25,7 +28,7 @@ export const PageTitle = ( { userName, features } ) => ( ? createInterpolateElement( sprintf( /* translators: %1$s and %2$s expand to an opening and closing anchor tag. */ - __( "It seems that the SEO analysis and the Readability analysis are currently disabled in your %1$sSite features%2$s. Once you enable these features, you'll be able to see the insights you need right here!", "wordpress-seo" ), + __( "It looks like the ‘SEO analysis’ and the ‘Readability analysis’ are currently turned off in your %1$sSite features%2$s. Enable these features to start seeing all the insights you need right here!", "wordpress-seo" ), "<link>", "</link>" ), @@ -34,12 +37,23 @@ export const PageTitle = ( { userName, features } ) => ( link: <Link href="admin.php?page=wpseo_page_settings#/site-features"> </Link>, } ) - : __( "Welcome to our SEO dashboard!", "wordpress-seo" ) + : createInterpolateElement( + sprintf( + /* translators: %1$s and %2$s expand to an opening and closing anchor tag. */ + __( "Welcome to your dashboard! Check your content's SEO performance, readability, and overall strengths and opportunities. %1$sLearn more on how to improve your content with our content analysis tool%2$s.", "wordpress-seo" ), + "<link>", + "</link>" + ), + { + // Added dummy space as content to prevent children prop warnings in the console. + link: <OutboundLink href={ links.contentAnalysis }> </OutboundLink>, + } + ) } </p> { ! features.indexables && ( <Alert type="info"> - { __( "The overview of your SEO scores and Readability scores is not available because you're on a non-production environment.", "wordpress-seo" ) } + { __( "Oops! You can’t see the overview of your SEO scores and readability scores right now because you’re in a non-production environment.", "wordpress-seo" ) } </Alert> ) } </Paper.Content> diff --git a/packages/js/src/dashboard/index.js b/packages/js/src/dashboard/index.js index 4cff5bdbb74..5b23f115a4b 100644 --- a/packages/js/src/dashboard/index.js +++ b/packages/js/src/dashboard/index.js @@ -49,3 +49,8 @@ export { Dashboard } from "./components/dashboard"; * @property {string} seoScores The endpoint for SEO scores. * @property {string} readabilityScores The endpoint for readability scores. */ + +/** + * @typedef {Object} Links The links. + * @property {string} contentAnalysis The content analysis information link. + */ diff --git a/packages/js/src/general/initialize.js b/packages/js/src/general/initialize.js index e464531591f..c8f93a57511 100644 --- a/packages/js/src/general/initialize.js +++ b/packages/js/src/general/initialize.js @@ -62,6 +62,11 @@ domReady( () => { "X-Wp-Nonce": get( window, "wpseoScriptData.dashboard.nonce", "" ), }; + /** @type {{contentAnalysis: string}} */ + const links = { + contentAnalysis: select( STORE_NAME ).selectLink( "https://yoa.st/content-analysis-tool" ), + }; + const router = createHashRouter( createRoutesFromElements( <Route path="/" element={ <App /> } errorElement={ <RouteErrorFallback className="yst-m-8" /> }> @@ -75,6 +80,7 @@ domReady( () => { features={ features } endpoints={ endpoints } headers={ headers } + links={ links } /> <ConnectedPremiumUpsellList /> </SidebarLayout>