WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 5 weeks ago

#42201 accepted defect (bug)

Admin Sidebar Text length Issue

Reported by: jagirbaheshwp Owned by: johnbillion
Milestone: 5.4 Priority: normal
Severity: normal Version: 4.8.2
Component: Administration Keywords: has-screenshots early
Focuses: ui Cc:
PR Number:

Description

Hello Team,

As this is really awesome as working with the community of wordpress CMS.

While creating custom post type my post type text is too large and i see text are not properly aligned in sidebar and it's look not good.

For Ref. Screen Shot Attach

https://i.imgur.com/qX4OTCW.png

Attachments (30)

screenshot-103.8.216.142-2017-10-12-21-29-36.png (20.6 KB) - added by jagirbaheshwp 2 years ago.
42201.diff (354 bytes) - added by munyagu 2 years ago.
Padding added to the left side of the label.
42201_1.patch (290 bytes) - added by jagirbaheshwp 2 years ago.
Added Display flex
42201-2.diff (605 bytes) - added by pratikkry 11 months ago.
42201.3.diff (612 bytes) - added by Hareesh Pillai 6 months ago.
Patch refreshed
42201.1.png (110.6 KB) - added by Hareesh Pillai 6 months ago.
Screenshot of the page after applying the patch
42201 - Responsive Issue.png (71.2 KB) - added by mukesh27 6 months ago.
Responsive design issue
Schermafbeelding 2019-06-07 om 13.34.13.png (50.2 KB) - added by dushanthi 6 months ago.
42201.4.diff (936 bytes) - added by worldweb 4 months ago.
Added display:flex, word-wrap: break-word and height: auto for responsive
desktop.png (10.8 KB) - added by worldweb 4 months ago.
Tested in desktop and mobile. Working fine.
Capture d’écran 2019-08-16 à 14.50.33.png (21.3 KB) - added by audrasjb 3 months ago.
Works fine with 42201.5.diff
42201.5.diff (482 bytes) - added by audrasjb 3 months ago.
Patch refresh and correct diff file
menu counters display flex.png (26.6 KB) - added by afercia 8 weeks ago.
menu longer display flex.png (16.8 KB) - added by afercia 8 weeks ago.
42201.6.patch (631 bytes) - added by amolv 7 weeks ago.
Patch refresh and correct diff file
before, after - 42201.6.patch .png (324.6 KB) - added by amolv 7 weeks ago.
Admin Menus Before and After - 42201.6.patch
contact.png (33.7 KB) - added by iqbalbary 7 weeks ago.
Plugin Number Counter
42201.7.patch (800 bytes) - added by amolv 7 weeks ago.
Patch refresh and correct diff file.
menu items visual diff.gif (149.5 KB) - added by afercia 6 weeks ago.
WordPress trunk 5.3 vs. WordPress 5.2.3
42201.8.patch (1.4 KB) - added by amolv 6 weeks ago.
Patch refresh and correct diff file.
Screen Shot 2019-10-09 at 3.34.28 PM.png (115.2 KB) - added by amolv 6 weeks ago.
Latest patch fixes longer Menus and submenus text, rounded circle to counts till 9 number and it's 18px, spacing between menu text and count.
42201.9.patch (1.4 KB) - added by amolv 6 weeks ago.
Patch refresh and correct diff file.
42201 menu collapsed.png (277.2 KB) - added by afercia 6 weeks ago.
Collapsed menu counters not styled
42201.10.patch (1.4 KB) - added by amolv 6 weeks ago.
Latest patch diff file, counter fix on menu collapsed
42201.updates-count.PNG (2.5 KB) - added by SergeyBiryukov 6 weeks ago.
notification-circle-after-42201.10-chrome.png (32.5 KB) - added by sabernhardt 5 weeks ago.
Notification circles after patch 42201.10 in Chrome (Windows 10)
notification-circle-after-42201.10-folded-chrome.png (14.0 KB) - added by sabernhardt 5 weeks ago.
Notification counters in folded menu after patch 42201.10 (Chrome, Windows 10)
r46555-regression.png (42.3 KB) - added by johnjamesjacoby 5 weeks ago.
Bildschirmfoto 2019-10-17 um 16.07.32.png (17.4 KB) - added by zodiac1978 5 weeks ago.
UI glitch for every color schema besides the default
42201.11.patch (1019 bytes) - added by amolv 5 weeks ago.
Patch refresh to support admin menu counter/bubble in different color schemes

Download all attachments as: .zip

Change History (90)

#1 @SergeyBiryukov
2 years ago

  • Component changed from General to Administration

@munyagu
2 years ago

Padding added to the left side of the label.

#2 @munyagu
2 years ago

  • Keywords has-patch added

@jagirbaheshwp
2 years ago

Added Display flex

#3 @harshbarach
2 years ago

Aha @jagirbaheshwp , it's working like charm & glossy.

#4 @Hareesh Pillai
11 months ago

  • Keywords needs-patch added; has-patch removed

The submitted patch does not fix the bug in responsive width.

@pratikkry
11 months ago

#5 @pratikkry
11 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

#6 @naveenkharwar
10 months ago

  • Resolution set to worksforme
  • Status changed from new to closed

The submitted patch fixed the bug in responsive width too.
Tested in WordPress( 5.1-beta3-20190207.100728 ).

#7 @naveenkharwar
10 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

#8 @naveenkharwar
10 months ago

  • Resolution set to worksforme
  • Status changed from reopened to closed

#9 @pratikkry
10 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

@Hareesh Pillai
6 months ago

Patch refreshed

This ticket was mentioned in Slack in #core by hareesh-pillai. View the logs.


6 months ago

#11 @SergeyBiryukov
6 months ago

  • Milestone changed from Awaiting Review to 5.3

@Hareesh Pillai
6 months ago

Screenshot of the page after applying the patch

#12 @Hareesh Pillai
6 months ago

  • Keywords has-screenshots added

@mukesh27
6 months ago

Responsive design issue

#13 @mukesh27
6 months ago

  • Keywords needs-refresh added

Below css generate issue in responsive design but if we use height: auto then it will fixed issue in responsive design.

@media only screen and (max-width: 960px) {
	.auto-fold #adminmenu a.menu-top {
		height: 34px;
	}
}

This ticket was mentioned in Slack in #core by marybaum. View the logs.


6 months ago

#15 @marybaum
6 months ago

  • Owner set to marybaum
  • Status changed from reopened to assigned

#16 @chetan200891
6 months ago

For me adding below padding fixes issue.

#adminmenu div.wp-menu-name {
	padding: 8px 8px 8px 35px;
}

#17 @marybaum
6 months ago

  • Milestone changed from 5.3 to 5.2.2

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


6 months ago

#19 @audrasjb
6 months ago

  • Milestone changed from 5.2.2 to 5.3

#20 @dushanthi
6 months ago

Run the patch and created some long custom post types texts, seems so work fine. One thing I noticed is that really long "words" are too close to the edge of the sidebar. https://core.trac.wordpress.org/raw-attachment/ticket/42201/Schermafbeelding%202019-06-07%20om%2013.34.13.png

#21 @dushanthi
6 months ago

  • Keywords needs-testing removed

@worldweb
4 months ago

Added display:flex, word-wrap: break-word and height: auto for responsive

@worldweb
4 months ago

Tested in desktop and mobile. Working fine.

#22 @worldweb
4 months ago

  • Resolution set to worksforme
  • Status changed from assigned to closed

#23 @worldweb
4 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #core by worldweb. View the logs.


4 months ago

This ticket was mentioned in Slack in #core by worldweb. View the logs.


4 months ago

This ticket was mentioned in Slack in #core by worldweb. View the logs.


4 months ago

This ticket was mentioned in Slack in #forums by worldweb. View the logs.


4 months ago

This ticket was mentioned in Slack in #core-themes by worldweb. View the logs.


4 months ago

This ticket was mentioned in Slack in #core-editor by worldweb. View the logs.


4 months ago

#30 @audrasjb
3 months ago

  • Owner changed from marybaum to audrasjb
  • Status changed from reopened to assigned

@audrasjb
3 months ago

Works fine with 42201.5.diff

#31 @audrasjb
3 months ago

  • Keywords commit added; needs-refresh removed

Changing owner of the ticket.

I tested the proposed patch and it works fine (see screenshot).

However I refreshed the patch since the previous one doesn't apply to WordPress Dev sourcecode.
42201.5.diff fix the implementation and refreshes the proposed patch against trunk.

Also @worldweb, youdon't need to copy patches to RTL CSS files since they are automatically generated during build process ;-)

Adding commit keyword.

@audrasjb
3 months ago

Patch refresh and correct diff file

#32 @whyisjake
8 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 46332:

Administration: Ensure visual consistency with large titles in the sidebar.

Custom posts, and other menu titles that are long aren't wrapping correctly.

Props jagirbaheshwp, munyagu, harshbarach, hareesh-pillai, pratikkry, naveenkharwar, mukesh27, dushanthi, worldweb, audrasjb
Fixes #42201

#33 @afercia
8 weeks ago

  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Looks like this change introduced a small regression when the admin menu items display the "counters": the spacing is now clearly smaller and the counters are almost attached to the menu item text.

See in the screenshot below: left: before the change, right: after the change that added display: flex.

#34 @afercia
8 weeks ago

Also, with longer translations and counters with multiple digits, the new display: flexand word-break: break-word; properties make the counter break.

On the left: the previous CSS where, at least, the counter goes to a new line and doesn't break.
On the right: the new CSS.

@amolv
7 weeks ago

Patch refresh and correct diff file

@amolv
7 weeks ago

Admin Menus Before and After - 42201.6.patch

#35 @amolv
7 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

@iqbalbary
7 weeks ago

Plugin Number Counter

#36 follow-up: @iqbalbary
7 weeks ago

  • Keywords needs-patch added; has-patch removed

42201.6.patch fixes the plugin counter problem only, still need to add #adminmenu .awaiting-mod, #adminmenu .update-plugins for comment counter.

Also if we can add css to .wp-menu-name > span then it will cover other menu(theme & plugins) too which have counter option.

Last edited 7 weeks ago by iqbalbary (previous) (diff)

#37 in reply to: ↑ 36 @amolv
7 weeks ago

Replying to iqbalbary:

42201.6.patch fixes the plugin counter problem only, still need to add #adminmenu .awaiting-mod, #adminmenu .update-plugins for comment counter.

Also if we can add css to .wp-menu-name > span then it will cover other menu(theme & plugins) too which have counter option.

Thank you for testing, updating CSS.

@amolv
7 weeks ago

Patch refresh and correct diff file.

#38 @amolv
7 weeks ago

  • Keywords has-patch added; needs-patch removed

#39 @davidbaumwald
6 weeks ago

  • Keywords commit added; needs-testing removed

Tested the most recent patch, and it works as intended. Marking this for commit.

#40 @whyisjake
6 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 46453:

Administration: Ensure visual consistency with large titles in the sidebar.

Custom posts, and other menu titles that are long aren't wrapping correctly.

Props jagirbaheshwp, munyagu, harshbarach, hareesh-pillai, pratikkry, naveenkharwar, mukesh27, dushanthi, worldweb, audrasjb, afercia, amolv, iqbalbary, davidbaumwald.
Fixes #42201

#41 @afercia
6 weeks ago

  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Sorry to reopen but [46453] doesn't seem to fully address the unnecessary visual changes introduced with the previous commit.

1
On WordPress 5.2 when the counters have only 1 digit, they're a 18 by 18 pixels circle. This is not a coincidence: it's intentional and the CSS should make sure it's a perfect circle. Instead, now the counters aren't a perfect circle: they have a slightly oval shape and the number is not perfectly centered. Screenshot:

http://cldup.com/k2JO9FcvIt.png

2
The spacing between the text and the counters is still clearly different and doesn't help readability. Not to mention it's not great visually.

3
With longer menu items or longer translations the counter ends up in the middle of the page: this is undesirable. On WordPress 5.2 wasn't perfect as well but at least it went to a new line leaving just the text to overflow into the page.

Screenshot for 2 and 3:

http://cldup.com/zbBRKZgyBH.png

4
#adminmenu .wp-menu-name > span is now a flex item thus these properties applied on it:

display: inline-block;
vertical-align: top;

don't make much sense. Alignment should be controlled with the properties that pertain to flexbox.

See also the attached animated GIF that better highlights the visual changes.

@afercia
6 weeks ago

WordPress trunk 5.3 vs. WordPress 5.2.3

@amolv
6 weeks ago

Patch refresh and correct diff file.

#42 @amolv
6 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

@amolv
6 weeks ago

Latest patch fixes longer Menus and submenus text, rounded circle to counts till 9 number and it's 18px, spacing between menu text and count.

@amolv
6 weeks ago

Patch refresh and correct diff file.

#43 @afercia
6 weeks ago

  • Keywords needs-patch added; has-patch removed

One more thing to address that happens also on trunk before applying 42201.9.patch:

When the menu is collapsed, the counters are not styled properly. See screenshot below. Actually, there is another counter within .wp-submenu-head that is shown only when the menu is collapsed.

@afercia
6 weeks ago

Collapsed menu counters not styled

@amolv
6 weeks ago

Latest patch diff file, counter fix on menu collapsed

#44 @amolv
6 weeks ago

  • Keywords has-patch added; needs-patch removed

When menus is collapsed .wp-submenu-head fix added in recent patch.

#45 @SergeyBiryukov
6 weeks ago

The updates count under Dashboard is no longer styled properly after [46453], see 42201.updates-count.PNG.

42201.10.patch appears to resolve the issue.

@sabernhardt
5 weeks ago

Notification circles after patch 42201.10 in Chrome (Windows 10)

#46 @sabernhardt
5 weeks ago

The notification circle style is restored with 42201.10 in Chrome, Edge, Internet Explorer and Firefox (Windows 10).

@sabernhardt
5 weeks ago

Notification counters in folded menu after patch 42201.10 (Chrome, Windows 10)

This ticket was mentioned in Slack in #core by sabernhardt. View the logs.


5 weeks ago

#48 @johnbillion
5 weeks ago

  • Keywords commit added; needs-testing removed

Thanks for the testing @sabernhardt .

Safari 12, Chrome 77, and Firefox 69 all look good on macOS, as does latest Chrome on Android.

Those nested selectors aren't optimal but I can't immediately see a better way to do it, so +1 from me to get this in.

#49 @johnbillion
5 weeks ago

  • Owner changed from audrasjb to johnbillion
  • Status changed from reopened to accepted

#50 @johnbillion
5 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 46555:

Administration: Fix the appearance of update bubbles in submenus and when the admin menu is collapsed.

Props afercia, amolv, sabernhardt

Fixes #42201, #48294

#51 @johnjamesjacoby
5 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

r46555 broke the use of :after on #adminmenu .wp-submenu a.

Specifically, changing from display: block; to display: flex;.

I help build or maintain several plugins that add styling to a pseudo element after some specific anchors. This styling is applied specifically based on user feedback for plugins with large add-on ecosystems that add many sub-menus to a single top-level menu item.

/* Secondary Separators */
#adminmenu ul > li:not(:last-child) a[href^="admin.php?page=sugar-calendar"]::after,
#adminmenu ul > li:not(:last-child) a[href^="post-new.php?post_type=sc_event"]::after
{
	display: block;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	height: 14px;
	margin: 0 -13px;
	content: '';
}

With these anchors now displaying as flexible instead of blocks, the :after pseudo elements flex after them, even when display: block; is applied to them.

#52 @johnjamesjacoby
5 weeks ago

Some research from: https://www.w3.org/TR/css-flexbox-1/#flex-items

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item. However, if the entire sequence of child text runs contains only white space (i.e. characters that can be affected by the white-space property) it is instead not rendered (just as if its text nodes were display:none).

If I am reading this correctly, anything now "inside" that now-flexed anchor is forced to be a flex element.

Using display: block !important; even gets ignored in all browsers, confirming (to me) that child pseudo elements of a flexed element are forced to flex, meaning there is no alternative CSS to get this styling working again (a more strict hack could override the core anchor styling, but whack-a-mole priority juggling isn't a solution IMO.)

A flex item establishes an independent formatting context for its contents. However, flex items themselves are flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context.

Last edited 5 weeks ago by johnjamesjacoby (previous) (diff)

@zodiac1978
5 weeks ago

UI glitch for every color schema besides the default

#53 @zodiac1978
5 weeks ago

I get a wrong styling in every color scheme besides the default one (looking at 5.3-RC1-46560).

Reason from colors.min.css (in this example):

#adminmenu .awaiting-mod, #adminmenu .update-plugins {
    color: #fff;
    background: #e1a948;
}

#54 follow-up: @afercia
5 weeks ago

Personally, at this point of the release cycle (WordPress 5.3 is now in Release Candidate) I'd lean towards a complete revert of all the changes from this ticket.

This is not to blame anyone :) The intent was good but the WordPress admin menu is tricky, made of various "layers" of functionalities, HTML, and CSS that stratified across the years. It's a very good example of a place where changing even a very small detail can break many things.

Overall, this change doesn't seem ready for 5.3 and it can be explored better in the next release cycle.

#55 in reply to: ↑ 54 @SergeyBiryukov
5 weeks ago

Replying to afercia:

Personally, at this point of the release cycle (WordPress 5.3 is now in Release Candidate) I'd lean towards a complete revert of all the changes from this ticket.

I tend to agree. Given that we're still discovering regressions after two follow-up commits, seems like we should consider reverting [46332], [46453], and [46555] for now, and trying again in a future release to allow for more testing.

@amolv
5 weeks ago

Patch refresh to support admin menu counter/bubble in different color schemes

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


5 weeks ago

#57 @johnbillion
5 weeks ago

  • Keywords revert added; has-patch commit removed
  • Status changed from reopened to accepted

Agreed on the revert. Let's get this back into 5.4 as soon as we branch so it can be tested as-is and iterated upon.

#58 @johnbillion
5 weeks ago

Reverting given agreement from three committers.

#59 @johnbillion
5 weeks ago

In 46561:

Administration: Revert changes to the admin menu styles for long line lengths.

This reverts [46555], [46453], and [46332].

See #42201

#60 @johnbillion
5 weeks ago

  • Keywords early added; revert removed
  • Milestone changed from 5.3 to 5.4
Note: See TracTickets for help on using tickets.