diff --git a/projects/packages/jetpack-mu-wpcom/changelog/feat-dashboard-widget-react b/projects/packages/jetpack-mu-wpcom/changelog/feat-dashboard-widget-react new file mode 100644 index 0000000000000..e6f75ef6499f4 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/feat-dashboard-widget-react @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Site Management Panel: Migrate to react diff --git a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php index c8fb386af3e91..f780b7f2cdc8e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php +++ b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php @@ -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. 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 new file mode 100644 index 0000000000000..1ffa9c2b60021 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js @@ -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( ); + } +} ); 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 new file mode 100644 index 0000000000000..c627f966f295a --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php @@ -0,0 +1,94 @@ + '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'], + ), + 'normal', + $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 + ); + + ?> +
+
+ +
+
+
+
+ { + 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 ( + <> +
+
+ { + /* 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' ? ( + favicon + ) : ( + { siteName[ 0 ] } + ) + } +
+
+
{ siteName }
+
{ siteDomain }
+
+
+ + { __( 'Overview', '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' ) } +
+
+ +
+
+
+ + ); +}; + +export default WpcomSiteManagementWidget; 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 new file mode 100644 index 0000000000000..2bd4bd4577d90 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss @@ -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; + } + } + } +} diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php deleted file mode 100644 index 5c976bec65662..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php +++ /dev/null @@ -1,248 +0,0 @@ - - - -
-
-
-
-
- render_wpcom_site_management_widget_fav_icon(); ?> -
-
-
-
-
-
- "> - - -
-
-
-

-
-
-
-
    - __( 'Deployments', 'jetpack-mu-wpcom' ), - 'href' => "/github-deployments/$domain", - ), - array( - 'name' => __( 'Monitoring', 'jetpack-mu-wpcom' ), - 'href' => "/site-monitoring/$domain", - ), - array( - 'name' => __( 'Logs', 'jetpack-mu-wpcom' ), - 'href' => "/site-logs/$domain/php", - ), - array( - 'name' => __( 'Staging Site', 'jetpack-mu-wpcom' ), - 'href' => "/staging-site/$domain", - ), - array( - 'name' => __( 'Server Settings', 'jetpack-mu-wpcom' ), - 'href' => "/hosting-config/$domain", - ), - ); - foreach ( $dev_tools_items as $item ) { - printf( '
  • %2$s
    • ', esc_url( $item['href'] ), esc_html( $item['name'] ) ); - } - ?> -
-
-
-
-
- ', esc_url( $site_icon_url ) ); - } else { - printf( '%1$s', esc_html( mb_substr( get_bloginfo( 'name' ), 0, 1 ) ) ); - } - } -} - -WPCOM_Site_Management_Widget::get_instance(); diff --git a/projects/packages/jetpack-mu-wpcom/webpack.config.js b/projects/packages/jetpack-mu-wpcom/webpack.config.js index f606e8bc7da15..bdc247cca9bd0 100644 --- a/projects/packages/jetpack-mu-wpcom/webpack.config.js +++ b/projects/packages/jetpack-mu-wpcom/webpack.config.js @@ -38,6 +38,8 @@ module.exports = [ 'wpcom-blocks-timeline-view': './src/features/wpcom-blocks/timeline/view.js', 'wpcom-block-description-links': './src/features/wpcom-block-description-links/index.tsx', 'wpcom-block-editor-nux': './src/features/wpcom-block-editor-nux/index.js', + 'wpcom-dashboard-widgets': + './src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js', 'wpcom-global-styles-editor': './src/features/wpcom-global-styles/index.js', 'wpcom-global-styles-frontend': './src/features/wpcom-global-styles/wpcom-global-styles-view.js',