diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-async-wpcom-sidebar-notice b/projects/packages/jetpack-mu-wpcom/changelog/fix-async-wpcom-sidebar-notice new file mode 100644 index 0000000000000..4b61f4337ea15 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/fix-async-wpcom-sidebar-notice @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Load WPCOM sidebar notice async diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js index 1dcf5081741fa..e036d3316c12e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js @@ -1,23 +1,23 @@ -/* global wp, wpcomSidebarNotice */ +/* global wp, wpcomSidebarNoticeConfig */ import { wpcomTrackEvent } from '../../common/tracks'; import './wpcom-sidebar-notice.scss'; -const wpcomSidebarNoticeRecordEvent = event => { +const wpcomSidebarNoticeRecordEvent = ( event, wpcomSidebarNoticeData ) => { if ( ! event ) { return; } wpcomTrackEvent( event.name, event.props, - wpcomSidebarNotice.user.ID, - wpcomSidebarNotice.user.username + wpcomSidebarNoticeData.user.ID, + wpcomSidebarNoticeData.user.username ); }; -const wpcomShowSidebarNotice = () => { +const wpcomShowSidebarNotice = wpcomSidebarNoticeData => { const adminMenu = document.querySelector( '#adminmenu' ); - if ( ! adminMenu || typeof wpcomSidebarNotice === 'undefined' ) { + if ( ! adminMenu || ! wpcomSidebarNoticeData ) { return; } @@ -28,21 +28,23 @@ const wpcomShowSidebarNotice = () => {
  • -
    ${ wpcomSidebarNotice.text }
    - +
    ${ wpcomSidebarNoticeData.text }
    + ${ - wpcomSidebarNotice.dismissible + wpcomSidebarNoticeData.dismissible ? '' : '' } @@ -54,7 +56,7 @@ const wpcomShowSidebarNotice = () => { ); // Record impression event in Tracks. - wpcomSidebarNoticeRecordEvent( wpcomSidebarNotice.tracks?.display ); + wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.display ); const sidebarNotice = adminMenu.firstElementChild; sidebarNotice.addEventListener( 'click', event => { @@ -67,17 +69,37 @@ const wpcomShowSidebarNotice = () => { wp.ajax.post( 'wpcom_dismiss_sidebar_notice', { id: sidebarNotice.dataset.id, feature_class: sidebarNotice.dataset.featureClass, - _ajax_nonce: wpcomSidebarNotice.dismissNonce, + _ajax_nonce: wpcomSidebarNoticeData.dismissNonce, } ); sidebarNotice.remove(); // Record dismiss event in Tracks. - wpcomSidebarNoticeRecordEvent( wpcomSidebarNotice.tracks?.dismiss ); + wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.dismiss ); } else { // Record click event in Tracks. - wpcomSidebarNoticeRecordEvent( wpcomSidebarNotice.tracks?.click ); + wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.click ); } } ); }; -document.addEventListener( 'DOMContentLoaded', wpcomShowSidebarNotice ); +const wpcomFetchSidebarNotice = async () => { + try { + const response = await fetch( + `${ wpcomSidebarNoticeConfig.ajaxUrl }?action=wpcom_fetch_sidebar_notice&nonce=${ wpcomSidebarNoticeConfig.nonce }` + ); + + if ( ! response.status === 200 ) { + return; + } + + const res = await response.json(); + + if ( res.success && res.data ) { + wpcomShowSidebarNotice( res.data ); + } + } catch ( error ) { + // End silently + } +}; + +document.addEventListener( 'DOMContentLoaded', wpcomFetchSidebarNotice ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php index 697f683b759e4..eba697b191991 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php @@ -18,11 +18,13 @@ * Enqueue assets needed by the WordPress.com sidebar notice. */ function wpcom_enqueue_sidebar_notice_assets() { + $asset_file = include Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.asset.php'; + wp_enqueue_script( 'wpcom-sidebar-notice', plugins_url( 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.js', Jetpack_Mu_Wpcom::BASE_FILE ), - array(), - Jetpack_Mu_Wpcom::PACKAGE_VERSION, + $asset_file['dependencies'] ?? array(), + $asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.js' ), array( 'strategy' => 'defer', 'in_footer' => true, @@ -33,53 +35,17 @@ function wpcom_enqueue_sidebar_notice_assets() { 'wpcom-sidebar-notice', plugins_url( 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.css', Jetpack_Mu_Wpcom::BASE_FILE ), array(), - Jetpack_Mu_Wpcom::PACKAGE_VERSION + $asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.css' ) ); - $notice = wpcom_get_sidebar_notice(); - if ( $notice ) { - $link = $notice['link']; - if ( str_starts_with( $link, '/' ) ) { - $link = 'https://wordpress.com' . $link; - } - - $user_id = null; - $user_login = null; - - if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) { - global $current_user; - $user_id = $current_user->ID; - $user_login = $current_user->user_login; - } else { - $connection_manager = new Connection_Manager(); - $wpcom_user_data = $connection_manager->get_connected_user_data(); - if ( $wpcom_user_data ) { - $user_id = $wpcom_user_data['ID']; - $user_login = $wpcom_user_data['login']; - } - } - - $data = array( - 'url' => esc_url( $link ), - 'text' => wp_kses( $notice['content'], array() ), - 'action' => wp_kses( $notice['cta'], array() ), - 'dismissible' => $notice['dismissible'], - 'dismissLabel' => esc_html__( 'Dismiss', 'jetpack-mu-wpcom' ), - 'id' => $notice['id'], - 'featureClass' => $notice['feature_class'], - 'dismissNonce' => wp_create_nonce( 'wpcom_dismiss_sidebar_notice' ), - 'tracks' => $notice['tracks'], - 'user' => array( - 'ID' => $user_id, - 'username' => $user_login, - ), - ); - - wp_add_inline_script( - 'wpcom-sidebar-notice', - 'window.wpcomSidebarNotice = ' . wp_json_encode( $data ) . ';' - ); - } + wp_localize_script( + 'wpcom-sidebar-notice', + 'wpcomSidebarNoticeConfig', + array( + 'ajaxUrl' => admin_url( 'admin-ajax.php' ), + 'nonce' => wp_create_nonce( 'wpcom_fetch_sidebar_notice' ), + ) + ); } add_action( 'admin_enqueue_scripts', 'wpcom_enqueue_sidebar_notice_assets' ); @@ -124,6 +90,59 @@ function wpcom_get_sidebar_notice() { ); } +/** + * Fetch sidebar notice data asynchronously via AJAX. + */ +function wpcom_fetch_sidebar_notice_data() { + check_ajax_referer( 'wpcom_fetch_sidebar_notice', 'nonce' ); + + $notice = wpcom_get_sidebar_notice(); + if ( ! $notice ) { + status_header( 204 ); + wp_die(); + } + + $link = ! empty( $notice['link'] ) ? $notice['link'] : ''; + if ( str_starts_with( $link, '/' ) ) { + $link = 'https://wordpress.com' . $link; + } + + $user_id = null; + $user_login = null; + + if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) { + global $current_user; + $user_id = $current_user->ID; + $user_login = $current_user->user_login; + } else { + $connection_manager = new Connection_Manager(); + $wpcom_user_data = $connection_manager->get_connected_user_data(); + if ( $wpcom_user_data ) { + $user_id = $wpcom_user_data['ID']; + $user_login = $wpcom_user_data['login']; + } + } + + $data = array( + 'url' => esc_url( $link ), + 'text' => wp_kses( $notice['content'] ?? '', array() ), + 'action' => wp_kses( $notice['cta'] ?? '', array() ), + 'dismissible' => $notice['dismissible'] ?? false, + 'dismissLabel' => esc_html__( 'Dismiss', 'jetpack-mu-wpcom' ), + 'id' => $notice['id'] ?? '', + 'featureClass' => $notice['feature_class'] ?? '', + 'dismissNonce' => wp_create_nonce( 'wpcom_dismiss_sidebar_notice' ), + 'tracks' => $notice['tracks'] ?? null, + 'user' => array( + 'ID' => $user_id, + 'username' => $user_login, + ), + ); + + wp_send_json_success( $data ); +} +add_action( 'wp_ajax_wpcom_fetch_sidebar_notice', 'wpcom_fetch_sidebar_notice_data' ); + /** * Handle AJAX requests to dismiss a sidebar notice. */