Skip to content

Commit 23b51ef

Browse files
fusharfushar
committed
Admin bar: Always show site title on mobile and move shortcut menus under it
1 parent 9f32f0d commit 23b51ef

4 files changed

Lines changed: 189 additions & 22 deletions

File tree

‎src/wp-includes/admin-bar.php‎

Lines changed: 106 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -989,10 +989,11 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
989989
$script .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
990990
$wp_admin_bar->add_node(
991991
array(
992-
'id' => 'command-palette',
993-
'title' => $title,
994-
'href' => '#',
995-
'meta' => array(
992+
'parent' => 'top-secondary',
993+
'id' => 'command-palette',
994+
'title' => $title,
995+
'href' => '#',
996+
'meta' => array(
996997
'class' => 'hide-if-no-js',
997998
'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;',
998999
'html' => wp_get_inline_script_tag( $script ),
@@ -1121,6 +1122,15 @@ function wp_admin_bar_comments_menu( $wp_admin_bar ) {
11211122
'id' => 'comments',
11221123
'title' => $icon . $title,
11231124
'href' => admin_url( 'edit-comments.php' ),
1125+
'meta' => array(
1126+
'menu_title' => $awaiting_mod > 0
1127+
? sprintf(
1128+
/* translators: %s: Number of comments awaiting moderation. */
1129+
__( 'Comments %s' ),
1130+
number_format_i18n( $awaiting_mod )
1131+
)
1132+
: __( 'Comments' ),
1133+
),
11241134
)
11251135
);
11261136
}
@@ -1236,6 +1246,13 @@ function wp_admin_bar_updates_menu( $wp_admin_bar ) {
12361246
'id' => 'updates',
12371247
'title' => $icon . $title,
12381248
'href' => network_admin_url( 'update-core.php' ),
1249+
'meta' => array(
1250+
'menu_title' => sprintf(
1251+
/* translators: %s: Number of updates available. */
1252+
__( 'Updates %s' ),
1253+
number_format_i18n( $update_data['counts']['total'] )
1254+
),
1255+
),
12391256
)
12401257
);
12411258
}
@@ -1300,6 +1317,91 @@ function wp_admin_bar_recovery_mode_menu( $wp_admin_bar ) {
13001317
);
13011318
}
13021319

1320+
/**
1321+
* Duplicate site and content-related shortcut menus (such as Updates and New)
1322+
* under the `site-name` menu and show them on mobile viewport, where
1323+
* the original shortcut menus are hidden to make room for the site title.
1324+
*
1325+
* @since 7.1.0
1326+
*
1327+
* @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance.
1328+
*/
1329+
function wp_admin_bar_duplicate_shortcut_menus( $wp_admin_bar ) {
1330+
if ( ! $wp_admin_bar->get_node( 'site-name' ) ) {
1331+
return;
1332+
}
1333+
1334+
$shortcut_node_ids = array(
1335+
'site-editor',
1336+
'customize',
1337+
'updates',
1338+
'comments',
1339+
'new-content',
1340+
'edit',
1341+
);
1342+
1343+
$nodes = $wp_admin_bar->get_nodes();
1344+
1345+
$shortcut_nodes = array();
1346+
foreach ( $shortcut_node_ids as $node_id ) {
1347+
if ( isset( $nodes[ $node_id ] ) ) {
1348+
$shortcut_nodes[] = $nodes[ $node_id ];
1349+
}
1350+
}
1351+
1352+
if ( empty( $shortcut_nodes ) ) {
1353+
return;
1354+
}
1355+
1356+
$children_by_parent = array();
1357+
foreach ( $nodes as $node ) {
1358+
if ( ! empty( $node->parent ) ) {
1359+
$children_by_parent[ $node->parent ][] = $node;
1360+
}
1361+
}
1362+
1363+
$wp_admin_bar->add_group(
1364+
array(
1365+
'parent' => 'site-name',
1366+
'id' => 'site-shortcuts',
1367+
'meta' => array(
1368+
'class' => 'ab-sub-secondary',
1369+
),
1370+
)
1371+
);
1372+
1373+
foreach ( $shortcut_nodes as $node ) {
1374+
// Swap potentially icon-only markup for a plain text label
1375+
if ( ! empty( $node->meta['menu_title'] ) ) {
1376+
$node->title = $node->meta['menu_title'];
1377+
}
1378+
_wp_admin_bar_clone_subtree( $wp_admin_bar, $node, 'site-shortcuts', $children_by_parent );
1379+
}
1380+
}
1381+
1382+
/**
1383+
* Recursively clones a node and its descendants under a new parent.
1384+
*
1385+
* @since 7.1.0
1386+
* @access private
1387+
*
1388+
* @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance.
1389+
* @param object $node The original node to clone.
1390+
* @param string $new_parent The ID of the new parent node.
1391+
* @param array $children_by_parent Map of parent id => array of child node objects.
1392+
*/
1393+
function _wp_admin_bar_clone_subtree( $wp_admin_bar, $node, $new_parent, $children_by_parent ) {
1394+
$new_id = 'site-shortcut-' . $node->id;
1395+
$clone = clone $node;
1396+
$clone->id = $new_id;
1397+
$clone->parent = $new_parent;
1398+
$wp_admin_bar->add_node( $clone );
1399+
1400+
foreach ( $children_by_parent[ $node->id ] ?? array() as $child ) {
1401+
_wp_admin_bar_clone_subtree( $wp_admin_bar, $child, $new_id, $children_by_parent );
1402+
}
1403+
}
1404+
13031405
/**
13041406
* Adds secondary menus.
13051407
*

‎src/wp-includes/class-wp-admin-bar.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -673,6 +673,9 @@ public function add_menus() {
673673
}
674674
add_action( 'admin_bar_menu', 'wp_admin_bar_edit_menu', 80 );
675675

676+
// Duplicate site and content-related shortcut menus under site menu for mobile viewport.
677+
add_action( 'admin_bar_menu', 'wp_admin_bar_duplicate_shortcut_menus', 90 );
678+
676679
add_action( 'admin_bar_menu', 'wp_admin_bar_add_secondary_groups', 200 );
677680

678681
/**

‎src/wp-includes/css/admin-bar.css‎

Lines changed: 61 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -581,6 +581,11 @@ html:lang(he-il) .rtl #wpadminbar * {
581581
content: "\f102" / '';
582582
}
583583

584+
/* Hide the duplicated shortcut menus on desktop viewport */
585+
#wpadminbar #wp-admin-bar-site-shortcuts {
586+
display: none;
587+
}
588+
584589

585590

586591
/**
@@ -840,7 +845,8 @@ html:lang(he-il) .rtl #wpadminbar * {
840845
padding-right: 30px;
841846
}
842847

843-
#wpadminbar .menupop .menupop > .ab-item:before {
848+
#wpadminbar .menupop .menupop > .ab-item:before,
849+
#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
844850
top: 10px;
845851
right: 6px;
846852
}
@@ -877,9 +883,8 @@ html:lang(he-il) .rtl #wpadminbar * {
877883
padding: 0;
878884
}
879885

880-
/* My Sites and "Site Title" menu */
886+
/* My Sites menu */
881887
#wpadminbar #wp-admin-bar-my-sites > .ab-item,
882-
#wpadminbar #wp-admin-bar-site-name > .ab-item,
883888
#wpadminbar #wp-admin-bar-site-editor > .ab-item,
884889
#wpadminbar #wp-admin-bar-customize > .ab-item,
885890
#wpadminbar #wp-admin-bar-edit > .ab-item,
@@ -1018,18 +1023,64 @@ html:lang(he-il) .rtl #wpadminbar * {
10181023
#wpadminbar li#wp-admin-bar-menu-toggle,
10191024
#wpadminbar li#wp-admin-bar-wp-logo,
10201025
#wpadminbar li#wp-admin-bar-my-sites,
1021-
#wpadminbar li#wp-admin-bar-updates,
10221026
#wpadminbar li#wp-admin-bar-site-name,
1023-
#wpadminbar li#wp-admin-bar-site-editor,
1024-
#wpadminbar li#wp-admin-bar-customize,
1025-
#wpadminbar li#wp-admin-bar-new-content,
1026-
#wpadminbar li#wp-admin-bar-edit,
1027-
#wpadminbar li#wp-admin-bar-comments,
10281027
#wpadminbar li#wp-admin-bar-my-account,
10291028
#wpadminbar li#wp-admin-bar-command-palette {
10301029
display: block;
10311030
}
10321031

1032+
#wpadminbar li#wp-admin-bar-site-name > .ab-item {
1033+
position: relative;
1034+
padding: 0 12px 0 52px;
1035+
}
1036+
1037+
#wpadminbar li#wp-admin-bar-site-name > .ab-item:before {
1038+
position: absolute;
1039+
left: 0;
1040+
top: 7px;
1041+
}
1042+
1043+
/* Show the duplicated shortcut menus on mobile viewport */
1044+
#wpadminbar #wp-admin-bar-site-shortcuts {
1045+
display: block;
1046+
}
1047+
1048+
/* Let the root left nodes extend past the viewport instead of wrapping */
1049+
#wpadminbar .ab-top-menu {
1050+
min-width: max-content;
1051+
}
1052+
1053+
#wpadminbar {
1054+
overflow-x: clip;
1055+
}
1056+
1057+
/* Pin the secondary nodes to the right edge instead of letting it float,
1058+
* covering the root left nodes when they are too long */
1059+
#wpadminbar #wp-admin-bar-top-secondary {
1060+
float: none;
1061+
position: absolute;
1062+
right: 0;
1063+
}
1064+
1065+
/* Add a fade-out hint to the left edge of the right-pinned secondary group */
1066+
#wpadminbar .quicklinks,
1067+
#wpadminbar .quicklinks #wp-admin-bar-top-secondary {
1068+
background-color: inherit;
1069+
}
1070+
1071+
#wpadminbar #wp-admin-bar-top-secondary::before {
1072+
content: '';
1073+
position: absolute;
1074+
right: 100%;
1075+
top: 0;
1076+
bottom: 0;
1077+
width: 24px;
1078+
background-color: inherit;
1079+
-webkit-mask-image: linear-gradient(to left, black, transparent);
1080+
mask-image: linear-gradient(to left, black, transparent);
1081+
pointer-events: none;
1082+
}
1083+
10331084
/* Allow dropdown list items to appear normally */
10341085
#wpadminbar li:hover ul li,
10351086
#wpadminbar li.hover ul li,
@@ -1119,8 +1170,7 @@ html:lang(he-il) .rtl #wpadminbar * {
11191170
display: list-item;
11201171
}
11211172

1122-
#wpadminbar li#wp-admin-bar-wp-logo,
1123-
#wpadminbar li#wp-admin-bar-updates {
1173+
#wpadminbar li#wp-admin-bar-wp-logo {
11241174
display: none;
11251175
}
11261176

@@ -1131,10 +1181,3 @@ html:lang(he-il) .rtl #wpadminbar * {
11311181
box-shadow: none;
11321182
}
11331183
}
1134-
1135-
/* Very narrow screens */
1136-
@media screen and (max-width: 400px) {
1137-
#wpadminbar li#wp-admin-bar-comments {
1138-
display: none;
1139-
}
1140-
}

‎tests/phpunit/tests/adminbar.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -810,6 +810,25 @@ public function data_my_sites_network_menu_items() {
810810
);
811811
}
812812

813+
/**
814+
* @covers ::wp_admin_bar_duplicate_shortcut_menus
815+
*/
816+
public function test_site_name_menu_contains_duplicated_shortcut_menus() {
817+
wp_set_current_user( self::$admin_id );
818+
819+
$wp_admin_bar = $this->get_standard_admin_bar();
820+
821+
$shortcuts = $wp_admin_bar->get_node( 'site-shortcuts' );
822+
$this->assertNotNull( $shortcuts );
823+
$this->assertSame( 'site-name', $shortcuts->parent );
824+
825+
foreach ( array( 'comments', 'new-content' ) as $node_id ) {
826+
$clone = $wp_admin_bar->get_node( 'site-shortcut-' . $node_id );
827+
$this->assertNotNull( $clone );
828+
$this->assertSame( 'site-shortcuts', $clone->parent );
829+
}
830+
}
831+
813832
/**
814833
* This test ensures that WP_Admin_Bar::$proto is not defined (including magic methods).
815834
*

0 commit comments

Comments
 (0)