From 7018a23ace8c69742982e545ebb2c5ddc6002577 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 15 Jan 2025 23:32:03 +0100 Subject: [PATCH 1/7] MU WPCOM: dashboard: add site links/preview --- .../wpcom-dashboard-widgets.js | 2 +- .../wpcom-dashboard-widgets.php | 11 +-- .../wpcom-site-management-widget/index.js | 68 ++++++------------- .../wpcom-site-management-widget/style.scss | 67 ++++++++---------- 4 files changed, 54 insertions(+), 94 deletions(-) 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 1ffa9c2b60021..edff5261e836b 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 @@ -7,7 +7,7 @@ const data = typeof window === 'object' ? window.JETPACK_MU_WPCOM_DASHBOARD_WIDG const widgets = [ { - id: 'wpcom_site_management_widget_main', + id: 'wpcom_site_preview_widget_main', Widget: WpcomSiteManagementWidget, }, ]; 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 5312a26f24cde..58f6f8f76e6e7 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 @@ -17,8 +17,9 @@ function load_wpcom_dashboard_widgets() { $wpcom_dashboard_widgets = array( array( - 'id' => 'wpcom_site_management_widget', - 'name' => __( 'Site Management Panel', 'jetpack-mu-wpcom' ), + 'id' => 'wpcom_site_preview_widget', + 'name' => __( 'Site', 'jetpack-mu-wpcom' ), + 'context' => 'side', 'priority' => 'high', ), ); @@ -33,7 +34,7 @@ function () {}, 'id' => $wpcom_dashboard_widget['id'], 'name' => $wpcom_dashboard_widget['name'], ), - 'normal', + $wpcom_dashboard_widget['context'], $wpcom_dashboard_widget['priority'] ); } @@ -49,7 +50,7 @@ function enqueue_wpcom_dashboard_widgets() { $data = wp_json_encode( array( 'siteName' => wp_specialchars_decode( get_bloginfo( 'name' ), ENT_QUOTES ), - 'siteDomain' => wp_parse_url( home_url(), PHP_URL_HOST ), + 'siteUrl' => home_url(), 'siteIconUrl' => get_site_icon_url( 38 ), ) ); @@ -80,7 +81,7 @@ function render_wpcom_dashboard_widget( $post, $callback_args ) { ); ?> -
+
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js index e7a8363f85897..227cf50b1731a 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js @@ -2,32 +2,19 @@ import { __ } from '@wordpress/i18n'; import React from 'react'; import './style.scss'; -const WpcomSiteManagementWidget = ( { siteName, siteDomain, siteIconUrl } ) => { - const devToolItems = [ - { - name: __( 'Deployments', 'jetpack-mu-wpcom' ), - href: `/github-deployments/${ siteDomain }`, - }, - { - name: __( 'Monitoring', 'jetpack-mu-wpcom' ), - href: `/site-monitoring/${ siteDomain }`, - }, - { - name: __( 'Logs', 'jetpack-mu-wpcom' ), - href: `/site-logs/${ siteDomain }/php`, - }, - { - name: __( 'Staging Site', 'jetpack-mu-wpcom' ), - href: `/staging-site/${ siteDomain }`, - }, - { - name: __( 'Server Settings', 'jetpack-mu-wpcom' ), - href: `/hosting-config/${ siteDomain }`, - }, - ]; - +const WpcomSiteManagementWidget = ( { siteName, siteUrl, siteIconUrl } ) => { return ( <> +
+
+ +
+
{ @@ -41,34 +28,17 @@ const WpcomSiteManagementWidget = ( { siteName, siteDomain, siteIconUrl } ) => {
{ siteName }
-
{ siteDomain }
+
+ { new URL( siteUrl ).hostname } +
- - { __( 'Overview', 'jetpack-mu-wpcom' ) } + + { __( 'Visit Site', 'jetpack-mu-wpcom' ) } + + + { __( 'Edit Site', 'jetpack-mu-wpcom' ) } -
-
-
-

- { __( - 'Get a quick overview of your plans, storage, and domains, or easily access your development tools using the links provided below:', - 'jetpack-mu-wpcom' - ) } -

-
-
- { __( 'DEV TOOLS:', 'jetpack-mu-wpcom' ) } -
-
- -
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss index 2bd4bd4577d90..27e44d39f4892 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss @@ -1,4 +1,4 @@ -#wpcom_site_management_widget { +#wpcom_site_preview_widget { color: #1e1e1e; .postbox-title-action { @@ -6,7 +6,31 @@ } } -#wpcom_site_management_widget_main { +#wpcom_site_preview_widget_main { + .wpcom_site_preview_wrapper { + background: #f0f0f1; + margin-bottom: 12px; + padding-top: 12px; + } + + .wpcom_site_preview { + display: block; + width: 425px; + height: 200px; + pointer-events: none; + overflow: hidden; + margin: 0 auto; + + iframe { + max-width: 250%; + min-height: 375%; + transform: scale(.4); + transform-origin: top left; + translate: 0 -13px; + width: 250%; + } + } + .wpcom_site_management_widget__header { display: flex; align-items: center; @@ -60,42 +84,7 @@ .wpcom_site_management_widget__site-actions { flex-shrink: 0; - } - - .wpcom_site_management_widget__content p { - margin: 12px 0; - font-size: 13px; - font-weight: 400; - line-height: 18px; - } - - .wpcom_site_management_widget__dev-tools-title { - margin-bottom: 12px; - font-size: 11px; - font-weight: 600; - line-height: 16px; - text-transform: uppercase; - } - - .wpcom_site_management_widget__dev-tools-content { - ul { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; - margin-bottom: 0; - list-style: disc inside; - } - - li { - margin: 0 8px; - color: #0073aa; - font-size: 13px; - font-weight: 400; - line-height: 18px; - - &::marker { - margin-inline-end: 2px; - } - } + display: flex; + gap: 12px; } } From c3c6a83e05719d1e5f720bdcda804346502eeba3 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 16 Jan 2025 21:52:42 +0100 Subject: [PATCH 2/7] changelog --- projects/packages/jetpack-mu-wpcom/changelog/add-site-widget | 4 ++++ projects/plugins/mu-wpcom-plugin/changelog/add-site-widget | 4 ++++ projects/plugins/wpcomsh/changelog/add-site-widget | 4 ++++ 3 files changed, 12 insertions(+) create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/add-site-widget create mode 100644 projects/plugins/mu-wpcom-plugin/changelog/add-site-widget create mode 100644 projects/plugins/wpcomsh/changelog/add-site-widget diff --git a/projects/packages/jetpack-mu-wpcom/changelog/add-site-widget b/projects/packages/jetpack-mu-wpcom/changelog/add-site-widget new file mode 100644 index 0000000000000..db8bc5eafa54e --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/add-site-widget @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Dashboard: add site preview and links diff --git a/projects/plugins/mu-wpcom-plugin/changelog/add-site-widget b/projects/plugins/mu-wpcom-plugin/changelog/add-site-widget new file mode 100644 index 0000000000000..db8bc5eafa54e --- /dev/null +++ b/projects/plugins/mu-wpcom-plugin/changelog/add-site-widget @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Dashboard: add site preview and links diff --git a/projects/plugins/wpcomsh/changelog/add-site-widget b/projects/plugins/wpcomsh/changelog/add-site-widget new file mode 100644 index 0000000000000..db8bc5eafa54e --- /dev/null +++ b/projects/plugins/wpcomsh/changelog/add-site-widget @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Dashboard: add site preview and links From 6189debb5321a2e7c5636a0612fa0ea6288339a3 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 22 Jan 2025 14:35:14 +0100 Subject: [PATCH 3/7] Add hosting overview button --- .../wpcom-site-management-widget/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js index 227cf50b1731a..0b52ca402f648 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js @@ -3,6 +3,7 @@ import React from 'react'; import './style.scss'; const WpcomSiteManagementWidget = ( { siteName, siteUrl, siteIconUrl } ) => { + const siteDomain = new URL( siteUrl ).hostname; return ( <>
@@ -29,12 +30,12 @@ const WpcomSiteManagementWidget = ( { siteName, siteUrl, siteIconUrl } ) => {
{ siteName }
- { new URL( siteUrl ).hostname } + { siteDomain }
- - { __( 'Visit Site', 'jetpack-mu-wpcom' ) } + + { __( 'Hosting Overview', 'jetpack-mu-wpcom' ) } { __( 'Edit Site', 'jetpack-mu-wpcom' ) } From f0cd3e8724730a8e24d1ecac61eeb7db8649c54c Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 27 Jan 2025 13:43:20 +0100 Subject: [PATCH 4/7] Conditionally add Edit Site link --- .../wpcom-dashboard-widgets.php | 7 ++++--- .../wpcom-site-management-widget/index.js | 10 ++++++---- 2 files changed, 10 insertions(+), 7 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 58f6f8f76e6e7..22f7d2a982cb1 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 @@ -49,9 +49,10 @@ function enqueue_wpcom_dashboard_widgets() { $data = wp_json_encode( array( - 'siteName' => wp_specialchars_decode( get_bloginfo( 'name' ), ENT_QUOTES ), - 'siteUrl' => home_url(), - 'siteIconUrl' => get_site_icon_url( 38 ), + 'siteName' => wp_specialchars_decode( get_bloginfo( 'name' ), ENT_QUOTES ), + 'siteUrl' => home_url(), + 'siteIconUrl' => get_site_icon_url( 38 ), + 'isBlockTheme' => wp_is_block_theme(), ) ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js index 0b52ca402f648..177f26131cc0e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js @@ -2,7 +2,7 @@ import { __ } from '@wordpress/i18n'; import React from 'react'; import './style.scss'; -const WpcomSiteManagementWidget = ( { siteName, siteUrl, siteIconUrl } ) => { +const WpcomSiteManagementWidget = ( { siteName, siteUrl, siteIconUrl, isBlockTheme } ) => { const siteDomain = new URL( siteUrl ).hostname; return ( <> @@ -37,9 +37,11 @@ const WpcomSiteManagementWidget = ( { siteName, siteUrl, siteIconUrl } ) => { { __( 'Hosting Overview', 'jetpack-mu-wpcom' ) } - - { __( 'Edit Site', 'jetpack-mu-wpcom' ) } - + { isBlockTheme ? ( + + { __( 'Edit Site', 'jetpack-mu-wpcom' ) } + + ) : null }
From e82134982d2738812f29689731265051ff794a74 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 27 Jan 2025 13:48:35 +0100 Subject: [PATCH 5/7] Fix mobile --- .../wpcom-site-management-widget/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss index 27e44d39f4892..c3fc07e73f6c1 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss @@ -10,12 +10,12 @@ .wpcom_site_preview_wrapper { background: #f0f0f1; margin-bottom: 12px; - padding-top: 12px; + padding: 12px 12px 0; } .wpcom_site_preview { display: block; - width: 425px; + max-width: 425px; height: 200px; pointer-events: none; overflow: hidden; From 1a8c97a9e82ef12d1476316226663000be737a36 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 27 Jan 2025 13:50:28 +0100 Subject: [PATCH 6/7] Add aria-hidden --- .../wpcom-site-management-widget/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js index 177f26131cc0e..d1cbd0af3331c 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js @@ -13,6 +13,7 @@ const WpcomSiteManagementWidget = ( { siteName, siteUrl, siteIconUrl, isBlockThe title="Site Preview" src={ `${ siteUrl }/?hide_banners=true&preview_overlay=true&preview=true` } tabIndex="-1" + aria-hidden >
From dc8b2c3c32a261832c8e5dec378be8406baa24b2 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 27 Jan 2025 14:12:35 +0100 Subject: [PATCH 7/7] Use inert --- .../wpcom-site-management-widget/index.js | 3 +-- .../wpcom-site-management-widget/style.scss | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js index d1cbd0af3331c..afbf19d1f8a83 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js @@ -12,8 +12,7 @@ const WpcomSiteManagementWidget = ( { siteName, siteUrl, siteIconUrl, isBlockThe loading="lazy" title="Site Preview" src={ `${ siteUrl }/?hide_banners=true&preview_overlay=true&preview=true` } - tabIndex="-1" - aria-hidden + inert="true" > diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss index c3fc07e73f6c1..f7ac7b2e60d62 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss @@ -17,7 +17,6 @@ display: block; max-width: 425px; height: 200px; - pointer-events: none; overflow: hidden; margin: 0 auto;