From 38a46256b071dbf87d5ee9de39982649673eb1bb Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Tue, 4 Feb 2025 18:04:03 +0100 Subject: [PATCH] MU WPCOM: fix admin menu upsell layout shift (#41480) --- .../changelog/fix-admin-menu-notice-jank | 4 + .../wpcom-sidebar-notice.js | 74 +++---------------- .../wpcom-sidebar-notice.php | 55 ++++++++------ .../wpcom-sidebar-notice.scss | 36 ++------- 4 files changed, 54 insertions(+), 115 deletions(-) create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/fix-admin-menu-notice-jank diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-admin-menu-notice-jank b/projects/packages/jetpack-mu-wpcom/changelog/fix-admin-menu-notice-jank new file mode 100644 index 0000000000000..2f9c3fb2e3d77 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/fix-admin-menu-notice-jank @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fix admin menu jank 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 5252fdc77dffc..a5ca14392df24 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,4 +1,4 @@ -/* global wp, wpcomSidebarNoticeConfig */ +/* global wp, wpcomSidebarNoticeData */ import { wpcomTrackEvent } from '../../common/tracks'; import './wpcom-sidebar-notice.scss'; @@ -15,50 +15,15 @@ const wpcomSidebarNoticeRecordEvent = ( event, wpcomSidebarNoticeData ) => { ); }; -const wpcomShowSidebarNotice = wpcomSidebarNoticeData => { - const adminMenu = document.querySelector( '#adminmenu' ); - if ( ! adminMenu || ! wpcomSidebarNoticeData ) { +const wpcomShowSidebarNotice = () => { + const sidebarNotice = document.querySelector( '#toplevel_page_site-notices' ); + if ( ! sidebarNotice || ! wpcomSidebarNoticeData ) { return; } - // Render notice. - adminMenu.insertAdjacentHTML( - 'afterbegin', - ` -
  • - -
    -
    - -
    ${ wpcomSidebarNoticeData.text }
    - - ${ - wpcomSidebarNoticeData.dismissible - ? '' - : '' - } -
    -
    -     -
    • - ` - ); - // Record impression event in Tracks. - wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.display ); + wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.display, wpcomSidebarNoticeData ); - const sidebarNotice = adminMenu.firstElementChild; sidebarNotice.addEventListener( 'click', event => { if ( event.target.classList.contains( 'upsell_banner__dismiss' ) || @@ -74,32 +39,15 @@ const wpcomShowSidebarNotice = wpcomSidebarNoticeData => { sidebarNotice.remove(); // Record dismiss event in Tracks. - wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.dismiss ); + wpcomSidebarNoticeRecordEvent( + wpcomSidebarNoticeData.tracks?.dismiss, + wpcomSidebarNoticeData + ); } else { // Record click event in Tracks. - wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.click ); + wpcomSidebarNoticeRecordEvent( wpcomSidebarNoticeData.tracks?.click, wpcomSidebarNoticeData ); } } ); }; -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 { - // End silently - } -}; - -document.addEventListener( 'DOMContentLoaded', wpcomFetchSidebarNotice ); +document.addEventListener( 'DOMContentLoaded', wpcomShowSidebarNotice ); 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 ada1b6fc1383d..bdc74bfa1ce94 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 @@ -22,6 +22,11 @@ * Enqueue assets needed by the WordPress.com sidebar notice. */ function wpcom_enqueue_sidebar_notice_assets() { + $data = wpcom_get_sidebar_notice_data(); + if ( ! $data ) { + return; + } + $asset_file = include Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.asset.php'; wp_enqueue_script( @@ -42,11 +47,7 @@ function wpcom_enqueue_sidebar_notice_assets() { $asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-sidebar-notice/wpcom-sidebar-notice.css' ) ); - $data = array( - 'ajaxUrl' => admin_url( 'admin-ajax.php' ), - 'nonce' => wp_create_nonce( 'wpcom_fetch_sidebar_notice' ), - ); - $inline_script = 'const wpcomSidebarNoticeConfig = ' . wp_json_encode( $data ) . ';'; + $inline_script = 'const wpcomSidebarNoticeData = ' . wp_json_encode( $data ) . ';'; wp_add_inline_script( 'wpcom-sidebar-notice', $inline_script, 'before' ); } add_action( 'admin_enqueue_scripts', 'wpcom_enqueue_sidebar_notice_assets' ); @@ -93,15 +94,12 @@ function wpcom_get_sidebar_notice() { } /** - * Fetch sidebar notice data asynchronously via AJAX. + * Get sidebar notice data. */ -function wpcom_fetch_sidebar_notice_data() { - check_ajax_referer( 'wpcom_fetch_sidebar_notice', 'nonce' ); - +function wpcom_get_sidebar_notice_data() { $notice = wpcom_get_sidebar_notice(); if ( ! $notice ) { - status_header( 204 ); - wp_die(); + return; } $link = ! empty( $notice['link'] ) ? $notice['link'] : ''; @@ -125,14 +123,7 @@ function wpcom_fetch_sidebar_notice_data() { } } - $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'] ?? '', + return array( 'dismissNonce' => wp_create_nonce( 'wpcom_dismiss_sidebar_notice' ), 'tracks' => $notice['tracks'] ?? null, 'user' => array( @@ -140,10 +131,32 @@ function wpcom_fetch_sidebar_notice_data() { 'username' => $user_login, ), ); +} + +/** + * Add a menu page to the admin menu. + */ +function wpcom_add_sidebar_notice_menu_page() { + $notice = wpcom_get_sidebar_notice(); + if ( ! $notice ) { + return; + } + + $link = ! empty( $notice['link'] ) ? $notice['link'] : ''; + if ( str_starts_with( $link, '/' ) ) { + $link = 'https://wordpress.com' . $link; + } - wp_send_json_success( $data ); + echo '
  • '; + echo '
    '; + echo '
    ' . wp_kses( $notice['content'] ?? '', array() ) . '
    '; + echo '' . wp_kses( $notice['cta'] ?? '', array() ) . ''; + echo $notice['dismissible'] ? '' : ''; + echo '
    '; + echo '
    • '; + echo ''; } -add_action( 'wp_ajax_wpcom_fetch_sidebar_notice', 'wpcom_fetch_sidebar_notice_data' ); +add_action( 'adminmenu', 'wpcom_add_sidebar_notice_menu_page' ); /** * Handle AJAX requests to dismiss a sidebar notice. diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.scss index 884fa91b11d6d..62ccc5968d21f 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.scss @@ -38,15 +38,8 @@ /** * Sidebar notice */ -#adminmenu li.menu-top.toplevel_page_site-notices { - &:hover, - &:focus { - background-color: inherit; - } - +#adminmenu li.toplevel_page_site-notices { a { - cursor: default; - &:hover, &:focus { box-shadow: none; @@ -54,9 +47,7 @@ } } - .wp-menu-name { - padding: 0 8px 8px 8px; - } + padding: 0 8px 8px 8px; .upsell_banner { border-radius: 2px; @@ -66,34 +57,17 @@ gap: 6px; } - .upsell_banner__icon { - display: none; - - &:before { - content: '\f534'; - font-family: 'dashicons'; - background-color: #a7aaad; - color: white; - border-radius: 50%; - } - } - .upsell_banner__text { font-size: 12px; line-height: 16px; } .upsell_banner__action { - width: 100%; - font-size: 13px; - line-height: 20px; - cursor: pointer; - min-height: 32px; - margin-bottom: 0; - border: 0; + text-align: center; + line-height: 2; } - .upsell_banner__dismiss { + .upsell_banner__dismiss.button-link { background-color: transparent; color: inherit; min-height: 0;