Widget Sidebars Title text overflow

[gk.loveweb]

Title text of widget section overflow

[bravokeyl]

Hi @gk.loveweb,

Can you give little more info on this?

[bravokeyl]

Oops! My bad, duplicate comment.

[afercia]

A bit more details and also a screenshot perhaps could help :)

[gk.loveweb]

Widget section title text overflowing out of div.

[afercia]

Thanks very much @gk.loveweb. So, while the single widgets title has some CSS (ellipses) to take into account very long titles, seems the sidebar titles need some love:

By the way, when changing the widgets order dragging them, a spinner appears after the sidebar title:

so this probably needs a different solution. Maybe just let the title go in a new line in the (rare) case the sidebar title is very long?

[gk.loveweb]

Hi @afercia I have modified core files in local system, made something like this.

We can move/show spinner to right side in place of arrow sign, until the completion of widget order ajax request.

for long titled widget sidebar, it will show in max two lines and for full title view i placed text in <h2 title=""> attribute. currently there is no tooltip on section title.

I have captured both screenshots during ordering widgets.

hope this will be useful. :)

[afercia]

Hi @gk.loveweb personally I like the idea of moving the spinner to the right so it would be displayed always in the same, exact, place regardless of the Sidebar title length. Nice idea :) It would temporarily hide the toggle arrow but I think that's not a big deal. Let's see also what others think about it.

As per the title attribute, in the last releases WordPress has removed a lot of title attributes and for good reasons. I don't think that's necessary to add a new one.

[sabrib]

Align spinner to right (above arrow) and limit title width

[ovann86]

Updated original patch to trunk root directory

[ovann86]

Changes look good to me, noting that it is single line - not two lines shown in images provided by @gk.loveweb

One potential UX issue with this approach is you briefly loose the 'expanded' context when the spinner replaces the 'expanded' icon. I don't think it's an issue though and quite like the spinner being in the same spot.

Updated patch to start from the root directory.

[gk.loveweb]

Thanks @ovann86 single line also looks good. :)

[sabrib]

@ovann86 Thanks for the review (and for recreating the patch :) )
I did not find a clean/css only solution to make it work in 2 lines.
For the UX issue, It seems that the spinner can only be displayed when the sidebar block is expanded but I got your point.

[DrewAPicture]

Assigning ownership to mark the good-first-bug as "claimed".

[pankajmohale]

Replying to gk.loveweb:

Title text of widget section overflow

Hi,

Try below code and let me know if it works or not.

<?php
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
  echo '<style>
    body .sidebar-name h2, body .sidebar-name h3 {
            white-space: normal;
        } 
  </style>';
}

[xkon]

Minor css changes to 37451

[xkon]

preview

[xkon]

37451.2.diff has some really minor CSS differences from the last patch as to not hiding the Expand arrow when the spinner gets visible.

I'm personally more comfortable with not suddenly losing something from my sight. Other than that nothing changed, I also included a gif preview so you can check it more easily. @afercia / @ovann86 any thoughts? :)

[Hitendra Chopda]

I have patch for display Widget title in multiple line if title is too long.
Please check attached patch widget.css

[Hitendra Chopda]

File with css changes

[poena]

37451-with-line-height.patch is only a combination of 37451.2.diff and widgets.css.patch but without the JavaScript.

If I read correctly, the JavaScript was intended to hide the toggle icon, and it targeted a CSS class that is not in use. With this patch, the toggle icon is always visible.

I increased the line height, because I felt that it improved readability.
I personally prefer displaying the text over two lines instead of using the ellipsis, but this is easily changed.

To test this with WordPress 5.8 or newer, you need to:
-Apply the patch to your test install of WordPress.
-Install the ​classic widgets plugin .

In your test theme, register a widget area with a long name, or update the name of an existing widget area.
As an example, in Twenty Twenty-One, change line 358 in functions.php:

'name' => esc_html__( 'Footer', 'twentytwentyone' ),

to

'name' => esc_html__( 'This is the looooongest Footer widget area name you have ever seen. Yes it is.', 'twentytwentyone' ),

-Save your changes, activate the theme.

-Go to the WordPress admin area and open the widget screen to see how the widget area name wraps.

[poena]

With the extra line height

[poena]

Without the extra line height

[hellofromTonya]

Test Report: Can reproduce issue. Applying 37451-with-line-height.patch resolves the issue

[hellofromTonya]

Test Report

Env:

• OS: macOS Big Sur
• Browser: Chrome, Firefox, Safari, and Edge
• WordPress: trunk (5.9-alpha)
• Plugins: Classic Widgets
• Theme: Twenty Twenty-one (TT1)

Steps

Follow steps provided here.

Results

• Able to reproduced the issue
• Applying 37451-with-line-height.patch​ resolves the issue ✅

Marking for commit.

[hellofromTonya]

Preparing the commit.

[hellofromTonya]

In 52177:

Widgets: Wraps long widget titles in classic Widgets screen.

Follow-up to [18577], [26426].

Props afercia, bravokeyl, drewapicture, gkloveweb, hitendra-chopda, hellofromTonya, ianhayes94, ovann86, pankajmohale, poena, sabrib, swissspidy, xkon.
Fixes #37451.

[hellofromTonya]

Thank you everyone for your contributions! The fix has been committed and will ship with 5.9 Beta 1 tomorrow.