From c94d02157a85b808275a252e50953f0ac8c97db4 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 31 Oct 2025 15:45:00 +0100 Subject: [PATCH 1/6] Add icons to help menu panel --- .../class-help-center-menu-panel.php | 28 +++++++++++++++---- .../wpcom-admin-bar/wpcom-admin-bar.scss | 25 +++++++++++++++++ 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php b/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php index a9d5d86cb4f7f..0fe048326384f 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php @@ -16,6 +16,24 @@ */ class Help_Center_Menu_Panel { + /** + * Get the SVG icon markup for a given icon name. + * + * @param string $icon_name The name of the icon to retrieve. + * @return string The SVG markup. + */ + private static function get_icon( $icon_name ) { + $icons = array( + 'comment' => '', + 'backup' => '', + 'page' => '', + 'video' => '', + 'rss' => '', + ); + + return isset( $icons[ $icon_name ] ) ? $icons[ $icon_name ] : ''; + } + /** * Check if the help center menu panel should be displayed. * @@ -54,7 +72,7 @@ public static function add_menu_panel( $wp_admin_bar ) { array( 'parent' => 'help-center-menu-panel-chat', 'id' => 'help-center-chat-support', - 'title' => __( 'Chat support', 'jetpack-mu-wpcom' ), + 'title' => self::get_icon( 'comment' ) . '' . __( 'Chat support', 'jetpack-mu-wpcom' ) . '', ) ); @@ -63,7 +81,7 @@ public static function add_menu_panel( $wp_admin_bar ) { array( 'parent' => 'help-center-menu-panel-chat', 'id' => 'help-center-chat-history', - 'title' => __( 'Chat history', 'jetpack-mu-wpcom' ), + 'title' => self::get_icon( 'backup' ) . '' . __( 'Chat history', 'jetpack-mu-wpcom' ) . '', ) ); @@ -83,7 +101,7 @@ public static function add_menu_panel( $wp_admin_bar ) { array( 'parent' => 'help-center-menu-panel-links', 'id' => 'help-center-support-guides', - 'title' => __( 'Support guides', 'jetpack-mu-wpcom' ), + 'title' => self::get_icon( 'page' ) . '' . __( 'Support guides', 'jetpack-mu-wpcom' ) . '', ) ); @@ -92,7 +110,7 @@ public static function add_menu_panel( $wp_admin_bar ) { array( 'parent' => 'help-center-menu-panel-links', 'id' => 'help-center-courses', - 'title' => __( 'Courses', 'jetpack-mu-wpcom' ), + 'title' => self::get_icon( 'video' ) . '' . __( 'Courses', 'jetpack-mu-wpcom' ) . '', 'href' => 'https://wordpress.com/support/courses/', 'meta' => array( 'target' => '_blank', @@ -105,7 +123,7 @@ public static function add_menu_panel( $wp_admin_bar ) { array( 'parent' => 'help-center-menu-panel-links', 'id' => 'help-center-product-updates', - 'title' => __( 'Product updates', 'jetpack-mu-wpcom' ), + 'title' => self::get_icon( 'rss' ) . '' . __( 'Product updates', 'jetpack-mu-wpcom' ) . '', 'href' => 'https://wordpress.com/blog/category/product-features/', 'meta' => array( 'target' => '_blank', diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss index 801c47370dfc1..a790650fdff89 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss @@ -473,5 +473,30 @@ } } } + + #wp-admin-bar-help-center { + + li { + + .ab-item { + display: flex; + align-items: center; + gap: 12px; + + svg { + fill: currentColor; + padding: 0; + position: unset; + } + + &:hover { + + svg { + fill: #7b90ff; + } + } + } + } + } } } From 747dde498961685f71e2998bf17caeac74caafc7 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 31 Oct 2025 15:45:36 +0100 Subject: [PATCH 2/6] changelog --- .../DOTCOM-15077-wp-admin-add-icons-and-remove-hover | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/DOTCOM-15077-wp-admin-add-icons-and-remove-hover diff --git a/projects/packages/jetpack-mu-wpcom/changelog/DOTCOM-15077-wp-admin-add-icons-and-remove-hover b/projects/packages/jetpack-mu-wpcom/changelog/DOTCOM-15077-wp-admin-add-icons-and-remove-hover new file mode 100644 index 0000000000000..2a74cce7a3f2e --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/DOTCOM-15077-wp-admin-add-icons-and-remove-hover @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Add icons to the new Help Center menu panel From 263c18ced685e48481494080c9571d6d11dde6d8 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 31 Oct 2025 16:24:17 +0100 Subject: [PATCH 3/6] Open with a different css class --- .../features/wpcom-admin-bar/wpcom-admin-bar.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss index a790650fdff89..663d2bd30818a 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss @@ -476,6 +476,20 @@ #wp-admin-bar-help-center { + &.hover { + + .ab-sub-wrapper { + display: none; + } + } + + &.open-click { + + .ab-sub-wrapper { + display: block; + } + } + li { .ab-item { From 4112ada8be1b1c250925fa80c3eb5ca55cf46ada Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Mon, 3 Nov 2025 11:11:22 +0100 Subject: [PATCH 4/6] Fix icons on mobile --- .../src/features/wpcom-admin-bar/wpcom-admin-bar.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss index 663d2bd30818a..3caea410a608d 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss @@ -483,7 +483,7 @@ } } - &.open-click { + &.hover.open-click { .ab-sub-wrapper { display: block; @@ -495,12 +495,17 @@ .ab-item { display: flex; align-items: center; + justify-content: flex-start; gap: 12px; - svg { + svg.help-center-menu-icon { fill: currentColor; padding: 0; position: unset; + + @media (max-width: 782px) { + padding: 0 !important; + } } &:hover { From 98bf75e7f560bfcb3878d2918e6ec06016565287 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Mon, 3 Nov 2025 11:49:48 +0100 Subject: [PATCH 5/6] Remove css --- .../features/wpcom-admin-bar/wpcom-admin-bar.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss index 3caea410a608d..7e7ce1e13dd18 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss @@ -476,20 +476,6 @@ #wp-admin-bar-help-center { - &.hover { - - .ab-sub-wrapper { - display: none; - } - } - - &.hover.open-click { - - .ab-sub-wrapper { - display: block; - } - } - li { .ab-item { From 07b55edc93fbb3fd36e2947bfb8d9ac3de6fde70 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Mon, 3 Nov 2025 12:27:28 +0100 Subject: [PATCH 6/6] null coalescing operator --- .../src/features/help-center/class-help-center-menu-panel.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php b/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php index 0fe048326384f..66eb9a7a45465 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php @@ -31,7 +31,7 @@ private static function get_icon( $icon_name ) { 'rss' => '', ); - return isset( $icons[ $icon_name ] ) ? $icons[ $icon_name ] : ''; + return $icons[ $icon_name ] ?? ''; } /**