Skip to content

Commit

Permalink
MU WPCOM: fix admin menu upsell layout shift (#41480)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Feb 4, 2025
1 parent dd9b704 commit 38a4625
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 115 deletions.
4 changes: 4 additions & 0 deletions projects/packages/jetpack-mu-wpcom/changelog/fix-admin-menu-notice-jank
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

Fix admin menu jank
74 changes: 11 additions & 63 deletions projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* global wp, wpcomSidebarNoticeConfig */
/* global wp, wpcomSidebarNoticeData */
import { wpcomTrackEvent } from '../../common/tracks';

import './wpcom-sidebar-notice.scss';
Expand All @@ -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',
`
<li
id="toplevel_page_site-notices"
class="wp-not-current-submenu menu-top menu-icon-generic toplevel_page_site-notices"
data-id="${ wpcomSidebarNoticeData.id }"
data-feature-class="${ wpcomSidebarNoticeData.featureClass }"
>
<a href="${
wpcomSidebarNoticeData.url
}" class="wp-not-current-submenu menu-top menu-icon-generic toplevel_page_site-notices">
<div class="wp-menu-name">
<div class="upsell_banner">
<div class="upsell_banner__icon dashicons" aria-hidden="true"></div>
<div class="upsell_banner__text">${ wpcomSidebarNoticeData.text }</div>
<button type="button" class="upsell_banner__action button">${
wpcomSidebarNoticeData.action
}</button>
${
wpcomSidebarNoticeData.dismissible
? '<button type="button" class="upsell_banner__dismiss button button-link">' +
wpcomSidebarNoticeData.dismissLabel +
'</button>'
: ''
}
</div>
</div>
</a>
</li>
`
);

// 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' ) ||
Expand All @@ -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 );
55 changes: 34 additions & 21 deletions ...ects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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' );
Expand Down Expand Up @@ -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'] : '';
Expand All @@ -125,25 +123,40 @@ 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(
'ID' => $user_id,
'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 '<li id="toplevel_page_site-notices" class="toplevel_page_site-notices" data-id="' . esc_attr( $notice['id'] ) . '" data-feature-class="' . esc_attr( $notice['feature_class'] ) . '">';
echo '<div class="upsell_banner">';
echo '<div class="upsell_banner__text">' . wp_kses( $notice['content'] ?? '', array() ) . '</div>';
echo '<a href="' . esc_url( $link ) . '" class="upsell_banner__action button">' . wp_kses( $notice['cta'] ?? '', array() ) . '</a>';
echo $notice['dismissible'] ? '<button type="button" class="upsell_banner__dismiss button button-link">' . esc_html__( 'Dismiss', 'jetpack-mu-wpcom' ) . '</button>' : '';
echo '</div>';
echo '</li>';
echo '<script>(function(el){el.parentNode.prepend(el)})(document.getElementById( "toplevel_page_site-notices" ))</script>';
}
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.
Expand Down
36 changes: 5 additions & 31 deletions ...cts/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,25 +38,16 @@
/**
* 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;
background-color: inherit;
}
}

.wp-menu-name {
padding: 0 8px 8px 8px;
}
padding: 0 8px 8px 8px;

.upsell_banner {
border-radius: 2px;
Expand All @@ -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;
Expand Down

0 comments on commit 38a4625

Please sign in to comment.