WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#34987 closed defect (bug) (fixed)

"Configure" link for dashboard widgets no longer displayed.

Reported by: catchmyfame Owned by: swissspidy
Milestone: 4.4.1 Priority: normal
Severity: normal Version: 4.4
Component: Administration Keywords: has-patch has-screenshots commit fixed-major
Focuses: ui Cc:

Description

The "configure" links for dashboard widgets are now hidden by CSS. The HTML, which is generated automatically by wp_add_dashboard_widget when the $control_callback argument is provided is:

<span class="postbox-title-action"><a href="/wp-admin/index.php?edit=widget#" class="edit-box open-box">Configure</a></span>

The CSS being applied from:

wp-admin/load-styles.php?c=0&dir=ltr&load=dashicons,admin-bar,wp-admin,buttons,wp-auth-check&ver=4.4

Creates the rule online 7518:

.edit-box {
     display: none; 
}

Which hides the anchor element as it has

class="edit-box open-box"

Another issue is that even when the rule is removed, the "configure" link is no longer right justified.

Attachments (10)

34987.patch (789 bytes) - added by swissspidy 5 years ago.
34987.2.patch (1.1 KB) - added by afercia 5 years ago.
34987.3.patch (990 bytes) - added by swissspidy 5 years ago.
34987.4.patch (960 bytes) - added by swissspidy 5 years ago.
4.3-hover.png (14.3 KB) - added by swissspidy 5 years ago.
Configure link in WordPress 4.3
4.4-hover.png (24.5 KB) - added by swissspidy 5 years ago.
Configure link with patch applied
34987.5.patch (990 bytes) - added by swissspidy 5 years ago.
34987.6.patch (980 bytes) - added by swissspidy 5 years ago.
34987.7.patch (980 bytes) - added by swissspidy 5 years ago.
Update against trunk
34987.4-4-branch.diff (1.7 KB) - added by dd32 5 years ago.

Download all attachments as: .zip

Change History (32)

#1 @swissspidy
5 years ago

  • Component changed from Widgets to Administration
  • Focuses administration removed
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.4.1

The problem is not the display: none, but the incorrect line afterwards: h3:hover .edit-box.

It's now a h2 (introduced in #33557), that's why it doesn't work anymore. We should change that to .hndle (or .handle, see #32017)

@swissspidy
5 years ago

#2 @swissspidy
5 years ago

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

#3 @catchmyfame
5 years ago

After I submitted this ticket I remembered that the configure link wasn't always visible and became visible on hover of the title. Thanks @swissspidy for updating that.

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


5 years ago

@afercia
5 years ago

#5 @afercia
5 years ago

Refreshed patch to make the Configure link appear also when tabbing with the keyboard.
Side note: actually, there are 2 "Configure" link, we should probably completely hide the first one. Some testing would be nice :)

@swissspidy
5 years ago

@swissspidy
5 years ago

#6 @swissspidy
5 years ago

After the discussion on Slack, 34987.4.patch is an updated patch that also removes the unneeded right: 33px; rule. Successfully tested on Firefox, Chrome, Safari, Opera, Internet Explorer with both JS enabled and disabled. Tested with RTL and LTR.

What the patch does:

  • Shows the Configure link again on :hover
  • Improves accessibility by also showing the link on :focus (using opacity instead of display: none)
  • Hides the second Configure link that is inside the toggle button
  • Fixes vertical alignment by not using absolute positioning but floats instead

@swissspidy
5 years ago

Configure link in WordPress 4.3

@swissspidy
5 years ago

Configure link with patch applied

#7 @swissspidy
5 years ago

  • Keywords has-screenshots added

This ticket was mentioned in Slack in #design by swissspidy. View the logs.


5 years ago

#9 @afercia
5 years ago

Tested on a few more Dashboard widgets, on hover and focus. Looks good to me.
About the doubled "Configure" link we should probably open a separate ticket to avoid to output redundant markup.

https://cldup.com/dmY3izs-Ne.png

#10 follow-up: @tywayne
5 years ago

The vertically alignment of the Configure link doesn't look quite right to me - seems to sit lower than the other elements. Adjusting the line height on the #dashboard-widgets .hndle .postbox-title-action selector should fix it. Maybe at line-height: 1.2?

https://cldup.com/u5_BZgGuNd-2000x2000.png

@swissspidy
5 years ago

#11 in reply to: ↑ 10 @swissspidy
5 years ago

  • Keywords commit added; needs-testing removed

Replying to tywayne:

The vertically alignment of the Configure link doesn't look quite right to me - seems to sit lower than the other elements. Adjusting the line height on the #dashboard-widgets .hndle .postbox-title-action selector should fix it. Maybe at line-height: 1.2?

https://cldup.com/u5_BZgGuNd-2000x2000.png

You're right, after looking at it again I realized that the alignment is not ideal.

In 34987.5.patch I decided to not change absolute positioning to floats. So basically this patch just re-introduces the Configure link.

#12 @afercia
5 years ago

For reference, this is how the (mis)alignment looked like in WordPress 4.2. Also, the float wasn't a bad idea since a very long Widget title might have some issues if the link is positioned absolutely (see the screenshot second part):

https://cldup.com/81IYitlZXE.png

#13 @swissspidy
5 years ago

@afercia Good point!

I guess under that circumstances 34987.4.patch makes more sense with a line-height of 1.2, as suggested by @tywayne.

Here's how a long title looks like when using floats:

https://cldup.com/YPufwTsCS2.png

Short title, using adjusted line-height:

https://cldup.com/Eq776gjqpS.png

@swissspidy
5 years ago

#14 @swissspidy
5 years ago

  • Keywords commit removed

Pending final review on 34987.6.patch

#15 @afercia
5 years ago

  • Keywords commit added

Looks good to me. The only thing to be aware of is that opacity won't work in IE 8 (still supported in the admin) and the link would need proprietary filters and to have hasLayout. The link is always visible in IE 8 and I'm perfectly fine with that.

@swissspidy
5 years ago

Update against trunk

#16 @swissspidy
5 years ago

In 35896:

Admin: After [35128], make the 'Configure' link work again for dashboard widgets.

See #34987.

#17 @swissspidy
5 years ago

  • Keywords fixed-major added

#18 @swissspidy
5 years ago

  • Owner set to swissspidy
  • Status changed from new to assigned

#19 @SergeyBiryukov
5 years ago

#35162 was marked as a duplicate.

#20 @SergeyBiryukov
5 years ago

#35202 was marked as a duplicate.

#21 @dd32
5 years ago

34987.4-4-branch.diff is an attempt at inlining the required CSS here to work around #35229 - assuming that no other changes in 4.4.1 result in wp-admin.min.css changes.

#22 @dd32
5 years ago

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

In 36153:

Admin: After [35128], make the 'Configure' link work again for dashboard widgets.

This merges the CSS changes from [35896] into an inline function in formatting.php to avoid a wp-admin.min.css rebuild.

Fixes #34987.

Note: See TracTickets for help on using tickets.