From c8a23247d9feea4d418143c6672dc6d0086cc283 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 29 Jan 2025 21:47:54 +0100 Subject: [PATCH 1/3] wip --- .../add-dashboard-general-task-widget | 4 + .../wpcom-dashboard-widgets.js | 5 ++ .../wpcom-dashboard-widgets.php | 49 +++++++++- .../wpcom-general-tasks-widget/index.js | 89 +++++++++++++++++++ .../wpcom-general-tasks-widget/style.scss | 22 +++++ .../tasks/home-task-domain-upsell/index.js | 39 ++++++++ .../add-dashboard-general-task-widget | 4 + .../add-dashboard-general-task-widget | 4 + 8 files changed, 214 insertions(+), 2 deletions(-) create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/add-dashboard-general-task-widget create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/style.scss create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js create mode 100644 projects/plugins/mu-wpcom-plugin/changelog/add-dashboard-general-task-widget create mode 100644 projects/plugins/wpcomsh/changelog/add-dashboard-general-task-widget diff --git a/projects/packages/jetpack-mu-wpcom/changelog/add-dashboard-general-task-widget b/projects/packages/jetpack-mu-wpcom/changelog/add-dashboard-general-task-widget new file mode 100644 index 0000000000000..1ffcf22b360c4 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/add-dashboard-general-task-widget @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Dashboard: add general tasks widget diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js index f390d13b67f4d..f37a17ccff1f3 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js @@ -3,6 +3,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import CelebrateLaunchModal from './celebrate-launch/celebrate-launch-modal'; import WpcomDailyWritingPrompt from './wpcom-daily-writing-prompt'; +import WpcomGeneralTasksWidget from './wpcom-general-tasks-widget'; import WpcomLaunchpadWidget from './wpcom-launchpad-widget'; import WpcomSiteManagementWidget from './wpcom-site-management-widget'; const data = typeof window === 'object' ? window.JETPACK_MU_WPCOM_DASHBOARD_WIDGETS : {}; @@ -20,6 +21,10 @@ const widgets = [ id: 'wpcom_site_preview_widget_main', Widget: WpcomSiteManagementWidget, }, + { + id: 'wpcom_general_tasks_widget_main', + Widget: WpcomGeneralTasksWidget, + }, ]; widgets.forEach( ( { id, Widget } ) => { diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php index cba899c1a7a6f..8ecfd3129c27d 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php @@ -5,6 +5,8 @@ * @package automattic/jetpack-mu-plugins */ +use Automattic\Jetpack\Connection\Client; + /** * Load all wpcom dashboard widgets. */ @@ -13,7 +15,30 @@ function load_wpcom_dashboard_widgets() { return; } - enqueue_wpcom_dashboard_widgets(); + $layout_response = Client::wpcom_json_api_request_as_blog( + '/sites/' . get_current_blog_id() . '/home/layout', + 'v2', + array(), + null, + 'wpcom' + ); + + $tasks = null; + + if ( ! is_wp_error( $layout_response ) ) { + $layout = json_decode( $layout_response['body'], true ); + if ( isset( $layout['secondary'] ) && is_array( $layout['secondary'] ) ) { + // If there's an array within the secondary section, it's the task + // list. + foreach ( $layout['secondary'] as $item ) { + if ( is_array( $item ) ) { + $tasks = $item; + } + } + } + } + + enqueue_wpcom_dashboard_widgets( array( 'tasks' => $tasks ) ); $wpcom_dashboard_widgets = array( array( @@ -46,6 +71,15 @@ function load_wpcom_dashboard_widgets() { ); } + if ( ! empty( $tasks ) ) { + $wpcom_dashboard_widgets[] = array( + 'id' => 'wpcom_general_tasks_widget', + 'name' => __( 'Suggestions', 'jetpack-mu-wpcom' ), + 'context' => 'normal', + 'priority' => 'high', + ); + } + foreach ( $wpcom_dashboard_widgets as $wpcom_dashboard_widget ) { wp_add_dashboard_widget( $wpcom_dashboard_widget['id'], @@ -65,8 +99,10 @@ function load_wpcom_dashboard_widgets() { /** * Enqueue the assets of the wpcom dashboard widgets. + * + * @param array $args Settings to pass. */ -function enqueue_wpcom_dashboard_widgets() { +function enqueue_wpcom_dashboard_widgets( $args = array() ) { $handle = jetpack_mu_wpcom_enqueue_assets( 'wpcom-dashboard-widgets', array( 'js', 'css' ) ); $bundles = wp_list_filter( wpcom_get_site_purchases(), array( 'product_type' => 'bundle' ) ); @@ -82,6 +118,15 @@ function enqueue_wpcom_dashboard_widgets() { 'siteIntent' => get_option( 'site_intent' ), 'sitePlan' => $current_plan, 'hasCustomDomain' => wpcom_site_has_feature( 'custom-domain' ), + 'siteId' => get_current_blog_id(), + 'tasks' => $args['tasks'], + 'siteSuggestions' => Client::wpcom_json_api_request_as_blog( + '/sites/' . get_current_blog_id() . '/home/layout', + 'v2', + array(), + null, + 'wpcom' + ), ) ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js new file mode 100644 index 0000000000000..a71cb29254ab1 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js @@ -0,0 +1,89 @@ +import apiFetch from '@wordpress/api-fetch'; +import { useEffect, useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import TaskDomainUpsell from './tasks/home-task-domain-upsell'; + +import './style.scss'; + +const taskMap = { + 'home-task-domain-upsell': TaskDomainUpsell, +}; + +export default ( { siteId } ) => { + const [ response, setResponse ] = useState( [] ); + const [ index, setIndex ] = useState( 0 ); + + useEffect( () => { + const path = `/wpcom/v2/sites/${ siteId }/home/layout`; + apiFetch( { path } ).then( setResponse ); + }, [ siteId ] ); + + if ( ! Array.isArray( response?.secondary ) ) { + return null; + } + + // The secondary array countains strings that refer to cards, except for the + // tasks which is an array. + const tasks = response.secondary.find( item => Array.isArray( item ) ); + + if ( ! tasks ) { + return

{ __( 'No suggestions.', 'jetpack-mu-wpcom' ) }

; + } + + const task = tasks[ index ]; + const TaskComponent = taskMap[ task ]; + + return ( + <> +

+ + { ' ' } + +

+ { TaskComponent ? ( + + ) : ( +

To do: { task }

+ ) } + { /* { createPortal( + + + + , + document.querySelector( '#wpcom_general_tasks_widget .wpcom_general_tasks_widget_title' ) + ) } */ } + + ); +}; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/style.scss new file mode 100644 index 0000000000000..2f648fe9b18bb --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/style.scss @@ -0,0 +1,22 @@ +#wpcom_general_tasks_widget_main { + min-height: 180px; + + h2 { + padding: 0; + } +} + +.wpcom_general_tasks_widget_buttons .button.button-link { + min-height: auto; + line-height: 1.4; + background: none; + + &:disabled, + &:hover { + background: none !important; // Has !important for core style. + } +} + +// #wpcom_general_tasks_widget .wpcom_general_tasks_widget_title_text { +// display: none; +// } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js new file mode 100644 index 0000000000000..41dcd798389c7 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js @@ -0,0 +1,39 @@ +export default () => { + // To do: actually fetch it from the API. + const domain = new URL( window.location.href ).hostname.split( '.' )[ 0 ] + '.com'; + return ( + <> +

Own a domain. Build a site.

+

+ { domain } is a perfect site address. It’s available, easy to find, share, + and follow. Get it now and claim a corner of the web. +

+

+ { /* To do: convert to SVG. */ } + + { domain } + + { +

+
+ + Get this domain + + { ' ' } + + Find other domains + +
+ + ); +}; diff --git a/projects/plugins/mu-wpcom-plugin/changelog/add-dashboard-general-task-widget b/projects/plugins/mu-wpcom-plugin/changelog/add-dashboard-general-task-widget new file mode 100644 index 0000000000000..1ffcf22b360c4 --- /dev/null +++ b/projects/plugins/mu-wpcom-plugin/changelog/add-dashboard-general-task-widget @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Dashboard: add general tasks widget diff --git a/projects/plugins/wpcomsh/changelog/add-dashboard-general-task-widget b/projects/plugins/wpcomsh/changelog/add-dashboard-general-task-widget new file mode 100644 index 0000000000000..1ffcf22b360c4 --- /dev/null +++ b/projects/plugins/wpcomsh/changelog/add-dashboard-general-task-widget @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Dashboard: add general tasks widget From b0646aa8eb2133fdeb6a13457b29a7fec37dab49 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 7 Feb 2025 13:37:10 +0100 Subject: [PATCH 2/3] wip --- .../wpcom-dashboard-widgets.php | 8 +-- .../wpcom-general-tasks-widget/index.js | 57 +------------------ 2 files changed, 4 insertions(+), 61 deletions(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php index 8ecfd3129c27d..2232e00f4141e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php @@ -33,6 +33,7 @@ function load_wpcom_dashboard_widgets() { foreach ( $layout['secondary'] as $item ) { if ( is_array( $item ) ) { $tasks = $item; + break; } } } @@ -120,13 +121,6 @@ function enqueue_wpcom_dashboard_widgets( $args = array() ) { 'hasCustomDomain' => wpcom_site_has_feature( 'custom-domain' ), 'siteId' => get_current_blog_id(), 'tasks' => $args['tasks'], - 'siteSuggestions' => Client::wpcom_json_api_request_as_blog( - '/sites/' . get_current_blog_id() . '/home/layout', - 'v2', - array(), - null, - 'wpcom' - ), ) ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js index a71cb29254ab1..bc77e37fc4f3c 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js @@ -1,5 +1,4 @@ -import apiFetch from '@wordpress/api-fetch'; -import { useEffect, useState } from '@wordpress/element'; +import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import TaskDomainUpsell from './tasks/home-task-domain-upsell'; @@ -9,27 +8,8 @@ const taskMap = { 'home-task-domain-upsell': TaskDomainUpsell, }; -export default ( { siteId } ) => { - const [ response, setResponse ] = useState( [] ); +export default ( { tasks } ) => { const [ index, setIndex ] = useState( 0 ); - - useEffect( () => { - const path = `/wpcom/v2/sites/${ siteId }/home/layout`; - apiFetch( { path } ).then( setResponse ); - }, [ siteId ] ); - - if ( ! Array.isArray( response?.secondary ) ) { - return null; - } - - // The secondary array countains strings that refer to cards, except for the - // tasks which is an array. - const tasks = response.secondary.find( item => Array.isArray( item ) ); - - if ( ! tasks ) { - return

{ __( 'No suggestions.', 'jetpack-mu-wpcom' ) }

; - } - const task = tasks[ index ]; const TaskComponent = taskMap[ task ]; @@ -52,38 +32,7 @@ export default ( { siteId } ) => { { __( 'Next →', 'jetpack-mu-wpcom' ) }

- { TaskComponent ? ( - - ) : ( -

To do: { task }

- ) } - { /* { createPortal( - - - - , - document.querySelector( '#wpcom_general_tasks_widget .wpcom_general_tasks_widget_title' ) - ) } */ } + { TaskComponent ? :

[{ task }]

} ); }; From 4fad786e6aa88a0535017bbfb9c5dfcc469de99a Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 7 Feb 2025 19:07:26 +0100 Subject: [PATCH 3/3] fix urls, translate --- .../wpcom-dashboard-widgets.php | 3 +- .../wpcom-general-tasks-widget/index.js | 43 +++++++------ .../tasks/home-task-domain-upsell/index.js | 64 ++++++++++++++++--- .../packages/jetpack-mu-wpcom/src/utils.php | 27 ++++++++ 4 files changed, 105 insertions(+), 32 deletions(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php index 2232e00f4141e..be608cedaae07 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php @@ -16,7 +16,7 @@ function load_wpcom_dashboard_widgets() { } $layout_response = Client::wpcom_json_api_request_as_blog( - '/sites/' . get_current_blog_id() . '/home/layout', + '/sites/' . get_wpcom_blog_id() . '/home/layout', 'v2', array(), null, @@ -119,7 +119,6 @@ function enqueue_wpcom_dashboard_widgets( $args = array() ) { 'siteIntent' => get_option( 'site_intent' ), 'sitePlan' => $current_plan, 'hasCustomDomain' => wpcom_site_has_feature( 'custom-domain' ), - 'siteId' => get_current_blog_id(), 'tasks' => $args['tasks'], ) ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js index bc77e37fc4f3c..4c7345558ba2e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/index.js @@ -8,31 +8,34 @@ const taskMap = { 'home-task-domain-upsell': TaskDomainUpsell, }; -export default ( { tasks } ) => { +export default ( { tasks, ...props } ) => { + const availableTasks = tasks.filter( _task => taskMap[ _task ] ); const [ index, setIndex ] = useState( 0 ); - const task = tasks[ index ]; + const task = availableTasks[ index ]; const TaskComponent = taskMap[ task ]; return ( <> -

- - { ' ' } - -

- { TaskComponent ? :

[{ task }]

} + { availableTasks.length > 1 && ( +

+ + { ' ' } + +

+ ) } + ); }; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js index 41dcd798389c7..19d81a355e5e2 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-general-tasks-widget/tasks/home-task-domain-upsell/index.js @@ -1,12 +1,56 @@ -export default () => { - // To do: actually fetch it from the API. - const domain = new URL( window.location.href ).hostname.split( '.' )[ 0 ] + '.com'; +import apiFetch from '@wordpress/api-fetch'; +import { useState, useEffect, createInterpolateElement } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import { addQueryArgs } from '@wordpress/url'; + +export default ( { siteDomain, sitePlan } ) => { + const [ domains, setDomains ] = useState( [] ); + useEffect( () => { + const path = addQueryArgs( `/rest/v1.1/domains/suggestions`, { + query: siteDomain.split( '.' )[ 0 ], + quantity: 1, + vendor: 'domain-upsell', + only_wordpressdotcom: false, + include_dotblogsubdomain: false, + include_wordpressdotcom: false, + } ); + apiFetch( { path, global: true } ).then( setDomains ); + }, [ siteDomain ] ); + + if ( domains.length === 0 ) { + return null; + } + + const domain = domains[ 0 ].domain_name; + const cart = [ `domain_reg:${ domain }` ]; + + if ( ! sitePlan || sitePlan.product_slug.includes( 'monthly' ) ) { + cart.push( 'personal' ); + } + + const getLink = `http://wordpress.com/checkout/${ siteDomain }/${ cart.join( ',' ) }`; + const searchLink = addQueryArgs( `https://wordpress.com/domains/add/${ siteDomain }`, { + domainAndPlanPackage: true, + domain: true, + } ); + return ( <> -

Own a domain. Build a site.

+

{ __( 'Own a domain. Build a site.', 'jetpack-mu-wpcom' ) }

- { domain } is a perfect site address. It’s available, easy to find, share, - and follow. Get it now and claim a corner of the web. + { createInterpolateElement( + sprintf( + // translators: %s is the domain name. + __( + '%s is a perfect site address. It’s available, easy to find, share, and follow. Get it now and claim a corner of the web.', + 'jetpack-mu-wpcom' + ), + domain + ), + { + strong: , + } + ) }

{ /* To do: convert to SVG. */ } @@ -26,12 +70,12 @@ export default () => { />

diff --git a/projects/packages/jetpack-mu-wpcom/src/utils.php b/projects/packages/jetpack-mu-wpcom/src/utils.php index fa7a484796e9b..126d7b2597a9c 100644 --- a/projects/packages/jetpack-mu-wpcom/src/utils.php +++ b/projects/packages/jetpack-mu-wpcom/src/utils.php @@ -127,3 +127,30 @@ function jetpack_mu_wpcom_enqueue_assets( $asset_name, $asset_types = array() ) return $asset_handle; } + +/** + * Returns the WP.com blog ID for the current site. + * + * @return int|false The WP.com blog ID, or false if the site does not have a WP.com blog ID. + */ +function get_wpcom_blog_id() { + if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) { + return get_current_blog_id(); + } + + if ( defined( 'IS_ATOMIC' ) && IS_ATOMIC ) { + /* + * Atomic sites have the WP.com blog ID stored as a Jetpack option. This + * code deliberately doesn't use `Jetpack_Options::get_option` so it + * works even when Jetpack has not been loaded. + */ + $jetpack_options = get_option( 'jetpack_options' ); + if ( is_array( $jetpack_options ) && isset( $jetpack_options['id'] ) ) { + return (int) $jetpack_options['id']; + } + + return get_current_blog_id(); + } + + return false; +}