Skip to content

Commit

Permalink
Site Management Widget: Migrate to react
Browse files Browse the repository at this point in the history
  • Loading branch information
@arthur791004
arthur791004 committed Oct 7, 2024
1 parent 6b41b2a commit bffe1f5
Show file tree
Hide file tree
Showing 7 changed files with 293 additions and 249 deletions.
2 changes: 1 addition & 1 deletion projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,12 +143,12 @@ public static function load_wpcom_user_features() {
require_once __DIR__ . '/features/wpcom-admin-interface/wpcom-admin-interface.php';
require_once __DIR__ . '/features/wpcom-admin-menu/wpcom-admin-menu.php';
require_once __DIR__ . '/features/wpcom-command-palette/wpcom-command-palette.php';
require_once __DIR__ . '/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php';
require_once __DIR__ . '/features/wpcom-locale/sync-locale-from-calypso-to-atomic.php';
require_once __DIR__ . '/features/wpcom-plugins/wpcom-plugins.php';
require_once __DIR__ . '/features/wpcom-profile-settings/profile-settings-link-to-wpcom.php';
require_once __DIR__ . '/features/wpcom-profile-settings/profile-settings-notices.php';
require_once __DIR__ . '/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php';
require_once __DIR__ . '/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php';
require_once __DIR__ . '/features/wpcom-themes/wpcom-themes.php';

// Only load the Calypsoify and Masterbar features on WoA sites.
Expand Down
21 changes: 21 additions & 0 deletions ...packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import '../../common/public-path';
import React from 'react';
import ReactDOM from 'react-dom/client';
import WpcomSiteManagementWidget from './wpcom-site-management-widget';

const data = typeof window === 'object' ? window.JETPACK_MU_WPCOM_DASHBOARD_WIDGETS : {};

const widgets = [
{
id: 'wpcom_site_management_widget_main',
Widget: WpcomSiteManagementWidget,
},
];

widgets.forEach( ( { id, Widget } ) => {
const container = document.getElementById( id );
if ( container ) {
const root = ReactDOM.createRoot( container );
root.render( <Widget { ...data } /> );
}
} );
90 changes: 90 additions & 0 deletions ...ackages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<?php
/**
* Load the widgets of Dashboard for WordPress.com sites.
*
* @package automattic/jetpack-mu-plugins
*/

/**
* Load all wpcom dashboard widgets.
*/
function load_wpcom_dashboard_widgets() {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}

enqueue_wpcom_dashboard_widgets();

$wpcom_dashboard_widgets = array(
array(
'id' => 'wpcom_site_management_widget',
'name' => __( 'Site Management Panel', 'jetpack-mu-wpcom' ),
'priority' => 'high',
),
);

foreach ( $wpcom_dashboard_widgets as $wpcom_dashboard_widget ) {
wp_add_dashboard_widget(
$wpcom_dashboard_widget['id'],
$wpcom_dashboard_widget['name'],
'render_wpcom_dashboard_widget',
function () {},
array(
'id' => $wpcom_dashboard_widget['id'],
'name' => $wpcom_dashboard_widget['name'],
),
$wpcom_dashboard_widget['context'],
$wpcom_dashboard_widget['priority']
);
}
}
add_action( 'wp_dashboard_setup', 'load_wpcom_dashboard_widgets' );

/**
* Enqueue the assets of the wpcom dashboard widgets.
*/
function enqueue_wpcom_dashboard_widgets() {
$handle = jetpack_mu_wpcom_enqueue_assets( 'wpcom-dashboard-widgets', array( 'js', 'css' ) );

$data = wp_json_encode(
array(
'siteName' => get_bloginfo( 'name' ),
'siteDomain' => wp_parse_url( home_url(), PHP_URL_HOST ),
'siteIconUrl' => get_site_icon_url( 38 ),
)
);

wp_add_inline_script(
$handle,
"var JETPACK_MU_WPCOM_DASHBOARD_WIDGETS = $data;",
'before'
);
}

/**
* Render the container of the wpcom dashboard widget.
*
* @param WP_Post $post The post object.
* @param array $callback_args The callback args of the render function.
*/
function render_wpcom_dashboard_widget( $post, $callback_args ) {
$args = $callback_args['args'];
$widget_id = $args['id'] . '_main';
$widget_class = $args['class'] ?? $args['id'];
$widget_name = $args['name'];

$warning = sprintf(
/* translators: The name of the widget. */
__( 'Your %s widget requires JavaScript to function properly.', 'jetpack-mu-wpcom' ),
$widget_name
);

$html = <<<HTML
<div style="min-height: 200px;">
<div class="hide-if-js">$warning</div>
<div id="$widget_id" class="$widget_class hide-if-no-js" style="height: 100%"></div>
</div>
HTML;

echo esc_html( $html );
}
78 changes: 78 additions & 0 deletions ...tpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
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 }`,
},
];

return (
<>
<div className="wpcom_site_management_widget__header">
<div className="wpcom_site_management_widget__site-favicon">
{
/* webclip.png is the default on WoA sites. Anything other than that means we have a custom site icon. */
siteIconUrl && siteIconUrl !== 'https://s0.wp.com/i/webclip.png' ? (
<img src={ siteIconUrl } alt="favicon" />
) : (
<span>{ siteName[ 0 ] }</span>
)
}
</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>
<div className="wpcom_site_management_widget__site-actions">
<a className="button-primary" href={ `https://wordpress.com/overview/${ siteDomain }` }>
{ __( '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>
<a href={ `https://wordpress.com${ item.href }` }>{ item.name }</a>
</li>
) ) }
</ul>
</div>
</div>
</div>
</>
);
};

export default WpcomSiteManagementWidget;
101 changes: 101 additions & 0 deletions ...ack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
#wpcom_site_management_widget {
color: #1e1e1e;

.postbox-title-action {
display: none;
}
}

#wpcom_site_management_widget_main {
.wpcom_site_management_widget__header {
display: flex;
align-items: center;
gap: 12px;
}

.wpcom_site_management_widget__site-favicon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
overflow: hidden;
font-size: 24px;
color: #0073aa;
background-color: #f5f7f7;
border: 1px solid #eeeeee;
border-radius: 4px;
cursor: default;
}

.wpcom_site_management_widget__site-favicon img {
width: 100%;
height: auto;
}

.wpcom_site_management_widget__site-info {
flex-grow: 1;
overflow: hidden;
}

.wpcom_site_management_widget__site-name {
font-size: 14px;
font-weight: 500;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.wpcom_site_management_widget__site-url {
color: #3a434a;
font-size: 12px;
font-weight: 400;
line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.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;
}
}
}
}
Loading

0 comments on commit bffe1f5

Please sign in to comment.