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

Merged
merged 7 commits into from
Jan 27, 2025
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7018a23
MU WPCOM: dashboard: add site links/preview
ellatrix Jan 15, 2025
c3c6a83
changelog
ellatrix Jan 16, 2025
6189deb
Add hosting overview button
ellatrix Jan 22, 2025
f0cd3e8
Conditionally add Edit Site link
ellatrix Jan 27, 2025
e821349
Fix mobile
ellatrix Jan 27, 2025
1a8c97a
Add aria-hidden
ellatrix Jan 27, 2025
dc8b2c3
Use inert
ellatrix Jan 27, 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
16 changes: 9 additions & 7 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 @@ -48,9 +49,10 @@ 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 ),
'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(),
)
);

Expand Down Expand Up @@ -80,7 +82,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
72 changes: 23 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,21 @@ 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, isBlockTheme } ) => {
const siteDomain = new URL( siteUrl ).hostname;
return (
<>
<div className="wpcom_site_preview_wrapper">
<div className="wpcom_site_preview">
<iframe
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's preventing interactions with the iframe, should we add "inert" or something

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It has pointer-events: none atm

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if that's enough a11y wise (you might have screen readers read the content of the iframes in different ways).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added aria-hidden

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't aria-hidden + pointer events none + tabIndex="-1" together equivalent to "inert" ?

I'm ok with the current code, just trying to understand.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you're right, let's add inert. I think the only practical difference is that inert does not allow manual focus on the element, which in the case we don't want to do.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed to inert 👍

loading="lazy"
title="Site Preview"
src={ `${ siteUrl }/?hide_banners=true&preview_overlay=true&preview=true` }
tabIndex="-1"
aria-hidden
></iframe>
</div>
</div>
<div className="wpcom_site_management_widget__header">
<div className="wpcom_site_management_widget__site-favicon">
{
Expand All @@ -41,34 +30,19 @@ 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">
<a href={ siteUrl }>{ siteDomain }</a>
</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={ `https://wordpress.com/overview/${ siteDomain }` }>
{ __( 'Hosting Overview', '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>
{ isBlockTheme ? (
<a className="button-secondary" href={ `site-editor.php` }>
{ __( 'Edit Site', 'jetpack-mu-wpcom' ) }
</a>
) : null }
</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: 12px 12px 0;
}

.wpcom_site_preview {
display: block;
max-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