Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MU WPCOM: dashboard: add site links/preview #41106

Draft
wants to merge 2 commits into
base: trunk
Choose a base branch
from
Draft

MU WPCOM: dashboard: add site links/preview #41106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8455ea
MU WPCOM: dashboard: add site links/preview
ellatrix Jan 15, 2025
bf206eb
changelog
ellatrix Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/jetpack-mu-wpcom/changelog/add-site-widget
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Dashboard: add site preview and links
2 changes: 1 addition & 1 deletion ...packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
];
Expand Down
11 changes: 6 additions & 5 deletions ...ackages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
),
);
Expand All @@ -33,7 +34,7 @@ function () {},
'id' => $wpcom_dashboard_widget['id'],
'name' => $wpcom_dashboard_widget['name'],
),
'normal',
$wpcom_dashboard_widget['context'],
$wpcom_dashboard_widget['priority']
);
}
Expand All @@ -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 ),
)
);
Expand Down Expand Up @@ -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>
Expand Down
68 changes: 19 additions & 49 deletions ...tpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
{
Expand All @@ -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>
</>
Expand Down
67 changes: 28 additions & 39 deletions ...ack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
}
}
4 changes: 4 additions & 0 deletions projects/plugins/mu-wpcom-plugin/changelog/add-site-widget
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Dashboard: add site preview and links
4 changes: 4 additions & 0 deletions projects/plugins/wpcomsh/changelog/add-site-widget
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Dashboard: add site preview and links
Loading