diff --git a/projects/packages/jetpack-mu-wpcom/changelog/feat-dashboard-widget-react b/projects/packages/jetpack-mu-wpcom/changelog/feat-dashboard-widget-react deleted file mode 100644 index e6f75ef6499f4..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/changelog/feat-dashboard-widget-react +++ /dev/null @@ -1,4 +0,0 @@ -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 f780b7f2cdc8e..c8fb386af3e91 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 deleted file mode 100644 index 1ffa9c2b60021..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index c627f966f295a..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php +++ /dev/null @@ -1,94 +0,0 @@ - '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 deleted file mode 100644 index 2bd4bd4577d90..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss +++ /dev/null @@ -1,101 +0,0 @@ -#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 new file mode 100644 index 0000000000000..5c976bec65662 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php @@ -0,0 +1,248 @@ + + + +
+
+
+
+
+ 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 bdc247cca9bd0..f606e8bc7da15 100644 --- a/projects/packages/jetpack-mu-wpcom/webpack.config.js +++ b/projects/packages/jetpack-mu-wpcom/webpack.config.js @@ -38,8 +38,6 @@ 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',