Skip to content

Help Center: align/size the admin-bar Help icon consistently #50063

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

Draft
p-jackson wants to merge 1 commit into
base: trunk
Choose a base branch
from
+14 −2
Draft

Help Center: align/size the admin-bar Help icon consistently #50063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 projects/packages/jetpack-mu-wpcom/changelog/fix-mu-wpcom-help-center-icon-sizing
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

Help Center: align and size the admin-bar Help icon consistently across viewports
12 changes: 10 additions & 2 deletions projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,10 +201,10 @@ function ( $wp_admin_bar ) {
$wp_admin_bar->add_menu(
array(
'id' => 'help-center',
'title' => '<span title="' . __( 'Help Center', 'jetpack-mu-wpcom' ) . '"><svg id="help-center-icon" class="ab-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
'title' => '<span title="' . __( 'Help Center', 'jetpack-mu-wpcom' ) . '"><svg id="help-center-icon" class="ab-icon" width="24" height="24" viewBox="1.5 1.5 21 21" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-1 16v-2h2v2h-2zm2-3v-1.141A3.991 3.991 0 0016 10a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2z" />
</svg>
<svg id="help-center-icon-with-notification" class="ab-icon" width="24" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg id="help-center-icon-with-notification" class="ab-icon" width="24" height="24" viewBox="-1 -1 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM13 18H11V16H13V18ZM13 13.859V15H11V13C11 12.448 11.448 12 12 12C13.103 12 14 11.103 14 10C14 8.897 13.103 8 12 8C10.897 8 10 8.897 10 10H8C8 7.791 9.791 6 12 6C14.209 6 16 7.791 16 10C16 11.862 14.722 13.413 13 13.859Z" fill="currentColor"/>
<circle cx="20" cy="3.5" r="4.3" fill="#e65054" stroke="#1d2327" stroke-width="2"/>
</svg>
Expand Down Expand Up @@ -264,6 +264,14 @@ function ( $wp_admin_bar ) {
$version
);

// The admin-bar Help Center icons carry their desktop viewBox in markup so the glyph
// aligns/sizes consistently with the other icons. The desktop and mobile viewBoxes are
// concentric, so the mobile appearance is reproduced by scaling about the icon's centre.
wp_add_inline_style(
'help-center-' . $variant . '-style',
'@media (max-width:782px){#help-center-icon{transform:scale(0.875)}#help-center-icon-with-notification{transform:scale(0.8667)}}'
);

// In the block editor the Help Center is already present in the editor toolbar
// via SlotFill at viewports >= 600px. Hide the admin bar item at those widths
// to avoid showing it in two places; keep it visible on mobile where the admin
Expand Down
Loading