From 1d8e2c6b417624cf8783e3fdfbcf84962b3b70f4 Mon Sep 17 00:00:00 2001 From: arthur Date: Fri, 4 Oct 2024 18:55:49 +0900 Subject: [PATCH 1/5] Site Management Widget: Migrate to react --- .../src/class-jetpack-mu-wpcom.php | 2 +- .../wpcom-dashboard-widgets.js | 21 ++ .../wpcom-dashboard-widgets.php | 94 +++++++ .../wpcom-site-management-widget/index.js | 78 ++++++ .../wpcom-site-management-widget/style.scss | 101 +++++++ .../class-wpcom-site-management-widget.php | 248 ------------------ .../jetpack-mu-wpcom/webpack.config.js | 2 + 7 files changed, 297 insertions(+), 249 deletions(-) create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss delete mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php 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..caf5b546b7c52 --- /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'], + ), + $wpcom_dashboard_widget['context'] ?? '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', From 1fc717c577495ff951b28b76b86818bd77205326 Mon Sep 17 00:00:00 2001 From: arthur Date: Fri, 4 Oct 2024 20:08:19 +0900 Subject: [PATCH 2/5] changelog --- .../jetpack-mu-wpcom/changelog/feat-dashboard-widget-react | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/feat-dashboard-widget-react 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 From a5ce7cd4c59ab6b9998eaf5874ea2809f7c17565 Mon Sep 17 00:00:00 2001 From: arthur Date: Fri, 11 Oct 2024 14:12:50 +0900 Subject: [PATCH 3/5] Fix phan --- .../wpcom-dashboard-widgets/wpcom-dashboard-widgets.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index caf5b546b7c52..c627f966f295a 100644 --- 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 @@ -33,7 +33,7 @@ function () {}, 'id' => $wpcom_dashboard_widget['id'], 'name' => $wpcom_dashboard_widget['name'], ), - $wpcom_dashboard_widget['context'] ?? 'normal', + 'normal', $wpcom_dashboard_widget['priority'] ); } From 350e6dcd8ff076b9f1f9e2b72d24e96da6125f60 Mon Sep 17 00:00:00 2001 From: arthur Date: Fri, 11 Oct 2024 15:03:36 +0900 Subject: [PATCH 4/5] Fix lint --- .../wpcom-site-management-widget/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js index 7a4a27717f4a1..e7a8363f85897 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js @@ -63,7 +63,7 @@ const WpcomSiteManagementWidget = ( { siteName, siteDomain, siteIconUrl } ) => {
    { devToolItems.map( item => ( -
  • +
  • { item.name }
    • ) ) } From f466ce531e3a6b9c3bbadc13365fa12018ef74fa Mon Sep 17 00:00:00 2001 From: arthur Date: Fri, 11 Oct 2024 15:57:58 +0900 Subject: [PATCH 5/5] Restore class-wpcom-site-management-widget.php --- .../class-wpcom-site-management-widget.php | 249 ++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php 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..9993a1de0b2e8 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php @@ -0,0 +1,249 @@ + + + +
    +
    +
    +
    +
    + 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();