Skip to content
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

Jump to bottom

Admin bar: move the Reader admin bar item to the secondary group #38976

Merged
merged 12 commits into from
Aug 23, 2024
Merged

Admin bar: move the Reader admin bar item to the secondary group #38976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4be8a60
Move reader icon to the secondary admin bar group.
allilevine Aug 20, 2024
dcfc29f
changelog
allilevine Aug 20, 2024
ccab5e6
Add mobile styling.
allilevine Aug 20, 2024
6bb223e
Fix menu item order on Simple.
allilevine Aug 21, 2024
488b60d
Fix the gap between Reader and Help Center.
allilevine Aug 21, 2024
5bc75d1
Rebase.
allilevine Aug 21, 2024
96862a1
Remove versioning.
allilevine Aug 21, 2024
1afe724
Pixel perfect
fushar Aug 22, 2024
03711e2
Move padding to inner span.
allilevine Aug 22, 2024
911ef33
Merge remote-tracking branch 'origin/trunk' into update/admin-menu-re…
fushar Aug 23, 2024
58f828b
Pixel perfect
fushar Aug 23, 2024
73ea202
Add code comments around the menu priorities.
allilevine Aug 23, 2024
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/update-admin-menu-reader-placement
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Jetpack-mu-wpcom admin bar: move the Reader menu item to the secondary admin bar group.
4 changes: 3 additions & 1 deletion 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 @@ -100,7 +100,9 @@ function ( $wp_admin_bar ) {
),
)
);
}
},
// Add the help center icon to the admin bar after the reader icon.
12
allilevine marked this conversation as resolved.
Show resolved Hide resolved
);
}

Expand Down
17 changes: 11 additions & 6 deletions projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,18 +144,23 @@ function wpcom_replace_wp_logo_with_wpcom_all_sites_menu( $wp_admin_bar ) {
* @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar core object.
*/
function wpcom_add_reader_menu( $wp_admin_bar ) {
$wp_admin_bar->add_node(
$wp_admin_bar->add_menu(
array(
'id' => 'reader',
'title' => __( 'Reader', 'jetpack-mu-wpcom' ),
'href' => maybe_add_origin_site_id_to_url( 'https://wordpress.com/read' ),
'meta' => array(
'id' => 'reader',
'title' => '<span class="ab-icon" aria-hidden="true"></span><span class="screen-reader-text">' .
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm following the example of the W logo here.

/* translators: Hidden accessibility text. */
__( 'Reader', 'jetpack-mu-wpcom' ) .
'</span>',
'href' => maybe_add_origin_site_id_to_url( 'https://wordpress.com/read' ),
'meta' => array(
'class' => 'wp-admin-bar-reader',
),
'parent' => 'top-secondary',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the Reader to the secondary admin bar group.

)
);
}
add_action( 'admin_bar_menu', 'wpcom_add_reader_menu', 15 );
// Add the reader icon to the admin bar before the help center icon.
add_action( 'admin_bar_menu', 'wpcom_add_reader_menu', 11 );

/**
* Points the (Profile) -> Edit Profile menu to /me when appropriate.
Expand Down
102 changes: 53 additions & 49 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 @@ -76,55 +76,6 @@
}
}

/**
* Reader menu
*/
#wpadminbar .wp-admin-bar-reader {
a.ab-item {
display: flex;
align-items: center;
}

a.ab-item:before {
content: "";
width: 24px;
height: 20px;
margin-right: 8px;
background-color: currentColor;
mask-image: url('data:image/svg+xml,<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" fill="black"/></svg>');
mask-position: center;
mask-repeat: no-repeat;
}

@media (max-width: 782px) {
& {
display: flex;
}

& a.ab-item {
justify-content: center;
text-indent: 0;
font-size: 0;
width: 52px;
}

& a.ab-item:before {
width: 36px;
height: 36px;
margin: 0 8px;
mask-size: contain;
}
}
@media (max-width: 480px) {
& a.ab-item {
width: 46px;
}
& a.ab-item:before {
margin: 0 5px;
}
}
}

#wpadminbar #wp-admin-bar-site-name {
> .ab-item:before {
/**
Expand Down Expand Up @@ -174,9 +125,55 @@
}
}

/* Reader menu item */
#wp-admin-bar-reader {
.ab-item {
padding: 0px;
}

.ab-icon {
display: flex;
align-items: center;
padding: 0 10px;
margin: 0;
height: 100%;

&:before {
display: flex;
content: "";
width: 24px;
height: 20px;
margin: 0px;
background-color: currentColor;
mask-image: url('data:image/svg+xml,<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" fill="black"/></svg>');
mask-position: center;
mask-repeat: no-repeat;
}
}
}

@media (max-width: 782px) {
height: 45px;

#wp-admin-bar-reader {
display: block;
width: auto !important;
min-width: 52px;
padding: 0px;

.ab-icon {
justify-content: center;
padding: 0px 10px;

&:before {
width: 36px;
height: 36px;
margin: 0px;
mask-size: contain;
}
}
}

#wp-admin-bar-help-center {
display: block !important;
width: 49px !important;
Expand Down Expand Up @@ -211,6 +208,13 @@
}
}
@media (max-width: 480px) {
#wp-admin-bar-reader {
width: 46px;

.ab-icon {
max-width: 40px;
}
}
#wp-admin-bar-help-center {
width: 46px !important;
}
Expand Down