MU WPCOM: dashboard: add site links/preview

Automattic · Jan 15, 2025 · abbc757 · abbc757
1 parent 575e4d7
commit abbc757
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 94 deletions.
diff --git a/...packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js b/...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/...ackages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php b/...ackages/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 ) {
 	);
 
 	?>
-	<div style="min-height: 200px;">
+	<div>
 		<div class="hide-if-js">
 			<?php echo esc_html( $warning ); ?>
 		</div>

diff --git a/...tpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js b/...tpack-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 (
 		<>
+			<div className="wpcom_site_preview_wrapper">
+				<div className="wpcom_site_preview">
+					<iframe
+						loading="lazy"
+						title="Site Preview"
+						src={ `${ siteUrl }/?hide_banners=true&preview_overlay=true&preview=true` }
+						tabIndex="-1"
+					></iframe>
+				</div>
+			</div>
 			<div className="wpcom_site_management_widget__header">
 				<div className="wpcom_site_management_widget__site-favicon">
 					{
@@ -41,34 +28,17 @@ const WpcomSiteManagementWidget = ( { siteName, siteDomain, siteIconUrl } ) => {
 				</div>
 				<div className="wpcom_site_management_widget__site-info">
 					<div className="wpcom_site_management_widget__site-name">{ siteName }</div>
-					<div className="wpcom_site_management_widget__site-url">{ siteDomain }</div>
+					<div className="wpcom_site_management_widget__site-url">
+						{ new URL( siteUrl ).hostname }
+					</div>
 				</div>
 				<div className="wpcom_site_management_widget__site-actions">
-					<a className="button-primary" href={ `https://wordpress.com/overview/${ siteDomain }` }>
-						{ __( 'Overview', 'jetpack-mu-wpcom' ) }
+					<a className="button-secondary" href={ siteUrl }>
+						{ __( 'Visit Site', 'jetpack-mu-wpcom' ) }
+					</a>
+					<a className="button-secondary" href={ `site-editor.php` }>
+						{ __( 'Edit Site', 'jetpack-mu-wpcom' ) }
 					</a>
-				</div>
-			</div>
-			<div className="wpcom_site_management_widget__content">
-				<p>
-					{ __(
-						'Get a quick overview of your plans, storage, and domains, or easily access your development tools using the links provided below:',
-						'jetpack-mu-wpcom'
-					) }
-				</p>
-				<div className="wpcom_site_management_widget__dev-tools">
-					<div className="wpcom_site_management_widget__dev-tools-title">
-						{ __( 'DEV TOOLS:', 'jetpack-mu-wpcom' ) }
-					</div>
-					<div className="wpcom_site_management_widget__dev-tools-content">
-						<ul>
-							{ devToolItems.map( item => (
-								<li key={ item.name }>
-									<a href={ `https://wordpress.com${ item.href }` }>{ item.name }</a>
-								</li>
-							) ) }
-						</ul>
-					</div>
 				</div>
 			</div>
 		</>

diff --git a/...ack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss b/...ack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss
@@ -1,12 +1,36 @@
-#wpcom_site_management_widget {
+#wpcom_site_preview_widget {
 	color: #1e1e1e;
 
 	.postbox-title-action {
 		display: none;
 	}
 }
 
-#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;
 	}
 }