Skip to content

Help Center: Add icons to help menu panel #45728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 3, 2025
+57 −5
Merged

Help Center: Add icons to help menu panel #45728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c94d021
Add icons to help menu panel
escapemanuele Oct 31, 2025
747dde4
changelog
escapemanuele Oct 31, 2025
263c18c
Open with a different css class
escapemanuele Oct 31, 2025
4112ada
Fix icons on mobile
escapemanuele Nov 3, 2025
98bf75e
Remove css
escapemanuele Nov 3, 2025
07b55ed
null coalescing operator
escapemanuele Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...ects/packages/jetpack-mu-wpcom/changelog/DOTCOM-15077-wp-admin-add-icons-and-remove-hover
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Add icons to the new Help Center menu panel
28 changes: 23 additions & 5 deletions projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' => '<svg class="help-center-menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 4H6c-1.1 0-2 .9-2 2v12.9c0 .6.5 1.1 1.1 1.1.3 0 .5-.1.8-.3L8.5 17H18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 11c0 .3-.2.5-.5.5H7.9l-2.4 2.4V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v9z" /></svg>',
'backup' => '<svg class="help-center-menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.5 12h1.75l-2.5 3-2.5-3H4a8 8 0 113.134 6.35l.907-1.194A6.5 6.5 0 105.5 12zm9.53 1.97l-2.28-2.28V8.5a.75.75 0 00-1.5 0V12a.747.747 0 00.218.529l1.282-.84-1.28.842 2.5 2.5a.75.75 0 101.06-1.061z" /></svg>',
'page' => '<svg class="help-center-menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z" /><path d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z" /></svg>',
'video' => '<svg class="help-center-menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.7 3H5.3C4 3 3 4 3 5.3v13.4C3 20 4 21 5.3 21h13.4c1.3 0 2.3-1 2.3-2.3V5.3C21 4 20 3 18.7 3zm.8 15.7c0 .4-.4.8-.8.8H5.3c-.4 0-.8-.4-.8-.8V5.3c0-.4.4-.8.8-.8h13.4c.4 0 .8.4.8.8v13.4zM10 15l5-3-5-3v6z" /></svg>',
'rss' => '<svg class="help-center-menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 10.2h-.8v1.5H5c1.9 0 3.8.8 5.1 2.1 1.4 1.4 2.1 3.2 2.1 5.1v.8h1.5V19c0-2.3-.9-4.5-2.6-6.2-1.6-1.6-3.8-2.6-6.1-2.6zm10.4-1.6C12.6 5.8 8.9 4.2 5 4.2h-.8v1.5H5c3.5 0 6.9 1.4 9.4 3.9s3.9 5.8 3.9 9.4v.8h1.5V19c0-3.9-1.6-7.6-4.4-10.4zM4 20h3v-3H4v3z" /></svg>',
);

return $icons[ $icon_name ] ?? '';
}

/**
* Check if the help center menu panel should be displayed.
*
Expand Down Expand Up @@ -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' ) . '<span>' . __( 'Chat support', 'jetpack-mu-wpcom' ) . '</span>',
)
);

Expand All @@ -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' ) . '<span>' . __( 'Chat history', 'jetpack-mu-wpcom' ) . '</span>',
)
);

Expand All @@ -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' ) . '<span>' . __( 'Support guides', 'jetpack-mu-wpcom' ) . '</span>',
)
);

Expand All @@ -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' ) . '<span>' . __( 'Courses', 'jetpack-mu-wpcom' ) . '</span>',
'href' => 'https://wordpress.com/support/courses/',
'meta' => array(
'target' => '_blank',
Expand All @@ -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' ) . '<span>' . __( 'Product updates', 'jetpack-mu-wpcom' ) . '</span>',
'href' => 'https://wordpress.com/blog/category/product-features/',
'meta' => array(
'target' => '_blank',
Expand Down
30 changes: 30 additions & 0 deletions projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -473,5 +473,35 @@
}
}
}

#wp-admin-bar-help-center {

li {

.ab-item {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;

svg.help-center-menu-icon {
fill: currentColor;
padding: 0;
position: unset;

@media (max-width: 782px) {
padding: 0 !important;
}
}

&:hover {

svg {
fill: #7b90ff;
}
}
}
}
}
}
}