WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 4 months ago

#42201 assigned defect (bug)

Admin Sidebar Text length Issue

Reported by: jagirbaheshwp Owned by: johnbillion
Milestone: Future Release Priority: normal
Severity: normal Version: 4.8.2
Component: Administration Keywords: has-screenshots early
Focuses: ui, css Cc:

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 3 years ago.
42201.diff (354 bytes) - added by munyagu 3 years ago.
Padding added to the left side of the label.
42201_1.patch (290 bytes) - added by jagirbaheshwp 3 years ago.
Added Display flex
42201-2.diff (605 bytes) - added by pratikkry 17 months ago.
42201.3.diff (612 bytes) - added by Hareesh Pillai 13 months ago.
Patch refreshed
42201.1.png (110.6 KB) - added by Hareesh Pillai 12 months ago.
Screenshot of the page after applying the patch
42201 - Responsive Issue.png (71.2 KB) - added by mukesh27 12 months ago.
Responsive design issue
Schermafbeelding 2019-06-07 om 13.34.13.png (50.2 KB) - added by dushanthi 12 months ago.
42201.4.diff (936 bytes) - added by worldweb 11 months ago.
Added display:flex, word-wrap: break-word and height: auto for responsive
desktop.png (10.8 KB) - added by worldweb 11 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 10 months ago.
Works fine with 42201.5.diff
42201.5.diff (482 bytes) - added by audrasjb 10 months ago.
Patch refresh and correct diff file
menu counters display flex.png (26.6 KB) - added by afercia 8 months ago.
menu longer display flex.png (16.8 KB) - added by afercia 8 months ago.
42201.6.patch (631 bytes) - added by amolv 8 months ago.
Patch refresh and correct diff file
before, after - 42201.6.patch .png (324.6 KB) - added by amolv 8 months ago.
Admin Menus Before and After - 42201.6.patch
contact.png (33.7 KB) - added by iqbalbary 8 months ago.
Plugin Number Counter
42201.7.patch (800 bytes) - added by amolv 8 months ago.
Patch refresh and correct diff file.
menu items visual diff.gif (149.5 KB) - added by afercia 8 months ago.
WordPress trunk 5.3 vs. WordPress 5.2.3
42201.8.patch (1.4 KB) - added by amolv 8 months ago.
Patch refresh and correct diff file.
Screen Shot 2019-10-09 at 3.34.28 PM.png (115.2 KB) - added by amolv 8 months 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 8 months ago.
Patch refresh and correct diff file.
42201 menu collapsed.png (277.2 KB) - added by afercia 8 months ago.
Collapsed menu counters not styled
42201.10.patch (1.4 KB) - added by amolv 8 months ago.
Latest patch diff file, counter fix on menu collapsed
42201.updates-count.PNG (2.5 KB) - added by SergeyBiryukov 8 months ago.
notification-circle-after-42201.10-chrome.png (32.5 KB) - added by sabernhardt 8 months 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 8 months ago.
Notification counters in folded menu after patch 42201.10 (Chrome, Windows 10)
r46555-regression.png (42.3 KB) - added by johnjamesjacoby 7 months ago.
Bildschirmfoto 2019-10-17 um 16.07.32.png (17.4 KB) - added by zodiac1978 7 months ago.
UI glitch for every color schema besides the default
42201.11.patch (1019 bytes) - added by amolv 7 months ago.
Patch refresh to support admin menu counter/bubble in different color schemes

Download all attachments as: .zip

Change History (94)

#1 @SergeyBiryukov
3 years ago

  • Component changed from General to Administration

@munyagu
3 years ago

Padding added to the left side of the label.

#2 @munyagu
3 years ago

  • Keywords has-patch added

@jagirbaheshwp
3 years ago

Added Display flex

#3 @harshbarach
3 years ago

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

#4 @Hareesh Pillai
17 months ago

  • Keywords needs-patch added; has-patch removed

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

@pratikkry
17 months ago

#5 @pratikkry
17 months ago

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

#6 @naveenkharwar
16 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
16 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

#8 @naveenkharwar
16 months ago

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

#9 @pratikkry
16 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

@Hareesh Pillai
13 months ago

Patch refreshed

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


12 months ago

#11 @SergeyBiryukov
12 months ago

  • Milestone changed from Awaiting Review to 5.3

@Hareesh Pillai
12 months ago

Screenshot of the page after applying the patch

#12 @Hareesh Pillai
12 months ago

  • Keywords has-screenshots added

@mukesh27
12 months ago

Responsive design issue

#13 @mukesh27
12 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.


12 months ago

#15 @marybaum
12 months ago

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

#16 @chetan200891
12 months ago

For me adding below padding fixes issue.

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

#17 @marybaum
12 months ago

  • Milestone changed from 5.3 to 5.2.2

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


12 months ago

#19 @audrasjb
12 months ago

  • Milestone changed from 5.2.2 to 5.3

#20 @dushanthi
12 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
12 months ago

  • Keywords needs-testing removed

@worldweb
11 months ago

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

@worldweb
11 months ago

Tested in desktop and mobile. Working fine.

#22 @worldweb
11 months ago

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

#23 @worldweb
11 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

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


10 months ago

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


10 months ago

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


10 months ago

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


10 months ago

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


10 months ago

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


10 months ago

#30 @audrasjb
10 months ago

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

@audrasjb
10 months ago

Works fine with 42201.5.diff

#31 @audrasjb
10 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
10 months ago

Patch refresh and correct diff file

#32 @whyisjake
8 months 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 months 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 months 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
8 months ago

Patch refresh and correct diff file

@amolv
8 months ago

Admin Menus Before and After - 42201.6.patch

#35 @amolv
8 months ago

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

@iqbalbary
8 months ago

Plugin Number Counter

#36 follow-up: @iqbalbary
8 months 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 8 months ago by iqbalbary (previous) (diff)

#37 in reply to: ↑ 36 @amolv
8 months 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
8 months ago

Patch refresh and correct diff file.

#38 @amolv
8 months ago

  • Keywords has-patch added; needs-patch removed

#39 @davidbaumwald
8 months ago

  • Keywords commit added; needs-testing removed

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

#40 @whyisjake
8 months 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
8 months 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
8 months ago

WordPress trunk 5.3 vs. WordPress 5.2.3

@amolv
8 months ago

Patch refresh and correct diff file.

#42 @amolv
8 months ago

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

@amolv
8 months 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
8 months ago

Patch refresh and correct diff file.

#43 @afercia
8 months 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
8 months ago

Collapsed menu counters not styled

@amolv
8 months ago

Latest patch diff file, counter fix on menu collapsed

#44 @amolv
8 months ago

  • Keywords has-patch added; needs-patch removed

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

#45 @SergeyBiryukov
8 months 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
8 months ago

Notification circles after patch 42201.10 in Chrome (Windows 10)

#46 @sabernhardt
8 months ago

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

@sabernhardt
8 months 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.


8 months ago

#48 @johnbillion
8 months 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
8 months ago

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

#50 @johnbillion
8 months 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
7 months 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
7 months 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 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.

Version 1, edited 7 months ago by johnjamesjacoby (previous) (next) (diff)

@zodiac1978
7 months ago

UI glitch for every color schema besides the default

#53 @zodiac1978
7 months 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
7 months 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
7 months 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
7 months 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.


7 months ago

#57 @johnbillion
7 months 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
7 months ago

Reverting given agreement from three committers.

#59 @johnbillion
7 months 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
7 months ago

  • Keywords early added; revert removed
  • Milestone changed from 5.3 to 5.4

#61 @pratikkry
6 months ago

  • Focuses css added

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


4 months ago

#63 @davidbaumwald
4 months ago

  • Keywords needs-testing added
  • Owner changed from johnbillion to desrosj
  • Status changed from accepted to assigned

#64 @davidbaumwald
4 months ago

  • Keywords needs-testing removed
  • Milestone changed from 5.4 to Future Release
  • Owner changed from desrosj to johnbillion

Edited wrong ticket and falsely reassigned. Reassigning this to @johnbillion.

Since this ticket doesn't have any momentum, it's being moved to Future Release. If any committer feels this can be moved up or can be owned during a specific cycle, feel free to update the milestone accordingly.

Note: See TracTickets for help on using tickets.