diff --git a/src/wp-includes/class-wp-admin-bar.php b/src/wp-includes/class-wp-admin-bar.php index 6fb5486bf4..c7813a37e5 100644 --- a/src/wp-includes/class-wp-admin-bar.php +++ b/src/wp-includes/class-wp-admin-bar.php @@ -501,14 +501,17 @@ class WP_Admin_Bar { return; } - $is_parent = ! empty( $node->children ); - $has_link = ! empty( $node->href ); + $is_parent = ! empty( $node->children ); + $has_link = ! empty( $node->href ); + $is_root_top_item = 'root-default' === $node->parent; + $is_top_secondary_item = 'top-secondary' === $node->parent; // Allow only numeric values, then casted to integers, and allow a tabindex value of `0` for a11y. $tabindex = ( isset( $node->meta['tabindex'] ) && is_numeric( $node->meta['tabindex'] ) ) ? (int) $node->meta['tabindex'] : ''; $aria_attributes = ( '' !== $tabindex ) ? ' tabindex="' . $tabindex . '"' : ''; $menuclass = ''; + $arrow = ''; if ( $is_parent ) { $menuclass = 'menupop '; @@ -519,6 +522,11 @@ class WP_Admin_Bar { $menuclass .= $node->meta['class']; } + // Print the arrow icon for the menu children with children. + if ( ! $is_root_top_item && ! $is_top_secondary_item && $is_parent ) { + $arrow = ''; + } + if ( $menuclass ) { $menuclass = ' class="' . esc_attr( trim( $menuclass ) ) . '"'; } @@ -542,7 +550,7 @@ class WP_Admin_Bar { } } - echo ">{$node->title}"; + echo ">{$arrow}{$node->title}"; if ( $has_link ) { echo ''; diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 2dc26d6733..ae35741489 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -231,7 +231,8 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon, #wpadminbar .ab-icon, -#wpadminbar .ab-item:before { +#wpadminbar .ab-item:before, +.wp-admin-bar-arrow { position: relative; float: left; font: normal 20px/1 dashicons; @@ -308,7 +309,7 @@ html:lang(he-il) .rtl #wpadminbar * { color: #00b9eb; } -#wpadminbar .menupop .menupop > .ab-item:before, +#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before, #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before { position: absolute; font: normal 17px/1 dashicons; @@ -322,9 +323,10 @@ html:lang(he-il) .rtl #wpadminbar * { padding-right: 2em; } -#wpadminbar .menupop .menupop > .ab-item:before { +#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before { top: 1px; - right: 4px; + right: 10px; + padding: 4px 0; content: "\f139"; color: inherit; } @@ -334,7 +336,7 @@ html:lang(he-il) .rtl #wpadminbar * { padding-right: 1em; } -#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before { +#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item .wp-admin-bar-arrow:before { top: 1px; left: 6px; content: "\f141";