WordPress.org

Make WordPress Core

Opened 5 weeks ago

Last modified 8 days ago

#49288 reviewing defect (bug)

Metabox holders missing their border and "Drag boxes here" text

Reported by: xkon Owned by: audrasjb
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch needs-testing has-screenshots
Focuses: ui, accessibility, administration Cc:

Description

Splitting this up from #39074. While editing Posts/Pages the advanced-sortables was missing a visible border and it was of 0px height so kind of hard to even drag a postbox there even if you knew it existed.

This was unfortunately extended into all metabox holders within the Edit so even if the sidebar was emptied there was no indication then that a draggable placeholder exists there.

I've managed to track down changes regarding this back to ticket #26399 & changeset 36295.

After some investigation, I also realized that the Drag boxes here text was also hidden from the Dashboard and all other areas for me. This was due to the @media rules pointing to specific ranges of a max 1800px.

Attachments (7)

49288.diff (2.3 KB) - added by xkon 5 weeks ago.
edit_before.jpg (120.3 KB) - added by xkon 5 weeks ago.
edit_after.jpg (129.5 KB) - added by xkon 5 weeks ago.
dashboard_before_over_1800wide.jpg (100.1 KB) - added by xkon 5 weeks ago.
dashboard_after_over_1800wide.jpg (102.4 KB) - added by xkon 5 weeks ago.
49288.2.diff (3.0 KB) - added by xkon 4 weeks ago.
49288.2_preview.gif (3.1 MB) - added by xkon 4 weeks ago.

Change History (20)

@xkon
5 weeks ago

#1 @xkon
5 weeks ago

  • Keywords has-patch needs-testing added

49288.diff adjusts the CSS rules and alters the postbox.js to be able to read all metabox holders to add the empty class.

Instead of the default 250px height (as seen on Dashboard) the Edit empty holders will have a 50px height to avoid a big blank space at the bottom of the page (i.e. for advanced-sortables). It also enables the Drag boxes here message for resolutions above 1800px.

@xkon
5 weeks ago

@xkon
5 weeks ago

#2 @xkon
5 weeks ago

  • Keywords has-screenshots added

This ticket was mentioned in Slack in #accessibility by xkon. View the logs.


5 weeks ago

#4 @xkon
5 weeks ago

  • Summary changed from Adjust the CSS/JS of the empty metabox holders to Metabox holders missing their border and "Drag boxes here" text

This ticket was mentioned in Slack in #accessibility by xkon. View the logs.


5 weeks ago

#6 @audrasjb
5 weeks ago

  • Keywords needs-design-feedback added
  • Milestone changed from Awaiting Review to 5.4
  • Owner set to audrasjb
  • Status changed from new to reviewing

#7 @afercia
4 weeks ago

@xkon thanks for the patch!

Re: "Drag boxes here": since we're here, it would be nice to make the text have a sufficient color contrast. The current grey #ccc has a very low contrast of 1.42:1 see https://jdlsn.com/color/?type=hex&color=cccccc&color2=f1f1f1. We could use #606a73 which is already used in the Dashboard for some elements.

Re: the "advanced" area: Seems to me the "regression" is a bit more... ancient 🙂. WordPress 3.0 used to have these styles to set a min-height on the sortable areas:

.inner-sidebar #side-sortables {
	width: 280px;
	min-height: 300px;
}

#post-body #normal-sortables {
	min-height: 50px;
}

#post-body #advanced-sortables {
	min-height: 20px;
}

So in WordPress 3.0 it was actually possible to move a meta box to the "advanced" area. The UI wasn't that great: there was no visible indication of the advanced area but it worked.

The "normal" and "side" min-heights are still used today. Instead, the "advanced" min-height was removed in [18975] see the related ticket #18314. This change seems completely unrelated to the original ticket purpose and probably not intended. Since then, it is not possible to move meta boxes to the "advanced" area. /Cc @azaozz may know more.

Worth also considering jQuery UI Sortable has a start event. By using it, it would be possible to add a CSS class to the body e.g. is-dragging-metaboxes and style anything in the page. This could help to highlight the available areas in some way. Then, remove the CSS class on the stop event which is the already used in postbox.js.

I do realize the legacy Edit Post page has a low priority now that there's Gutenberg but this is a small, long-standing, regression that can be quickly fixed. The dashboard issue instead needs to be fixed anyways :)

@xkon
4 weeks ago

@xkon
4 weeks ago

#8 @xkon
4 weeks ago

Thanks for going even further back and pinpointing a commit @afercia!

I was aware of the start() stop() but I didn't have an idea on how to use them. The color correction to #606a73 gave me the idea though that instead of having them hidden/visible on drag we could also make them even more visible and a11y friendly since the border is still at #b4b9be which isn't a good difference with the background also.

The changes in the 49288.2.diff are re-introducing the older min-height:20px on advanced-sortables as well as adjusting the Drag boxes here to permanently use #606a73.

Also adds/removes the is-dragging-metaboxes class on drag/drop which also adjusts the border color to #606a73 as well. This way we tackle both a visual hint and also making it compatible to standards.

Side note: I did also play around with fully hiding the sortables while empty and show them on drag but this was resulting either on "flickering" of the screen if the height was also changed ( i.e. with a display:none or height: 20px) or you just ended up having a huge gap at the end of the page that didn't look nice :-). That's why I ended up just bumping the border color to have the best of both.

Preview 49288.2_preview.gif

#9 @karmatosed
4 weeks ago

  • Keywords needs-design-feedback removed

From a design perspective, this doesn't seem to change the interface much, unless I am mistaken. As result removing the keyword as looks like it is an improvement fix.

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


2 weeks ago

#11 @afercia
2 weeks ago

This ticket was discussed during today's accessibility bug-scrub: the proposed patch appears to just need a final review.

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


8 days ago

#13 @afercia
8 days ago

  • Milestone changed from 5.4 to 5.5

This ticket was discussed during today's accessibility bug-scrub: With 5.4 Beta 3 approaching, agreed to move this ticket to the next release cycle.

Note: See TracTickets for help on using tickets.