Site Management Widget: Migrate to react #39642
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: patch | ||
| Type: changed | ||
|
|
||
| Site Management Panel: Migrate to react |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 } /> ); | ||
| } | ||
| } ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <?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'] ?? 'normal', | ||
|
Check failure on line 36 in projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php
|
||
| $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 | ||
| ); | ||
|
|
||
| ?> | ||
| <div style="min-height: 200px;"> | ||
| <div class="hide-if-js"> | ||
| <?php echo esc_html( $warning ); ?> | ||
| </div> | ||
| <div | ||
| id="<?php echo esc_attr( $widget_id ); ?>" | ||
| class="<?php echo esc_attr( $widget_class ); ?> hide-if-no-js" | ||
| style="height: 100%"> | ||
| </div> | ||
| </div> | ||
| <?php | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wondered if it could potentially lead to layout shifts as more widgets are added. But I believe it is not something we need to care about for now.