[wp-trac] [WordPress Trac] #49288: Metabox holders missing their border and "Drag boxes here" text

[WordPress Trac]

#49288: Metabox holders missing their border and "Drag boxes here" text
-------------------------------------+-------------------------------------
 Reporter:  xkon                     |       Owner:  audrasjb
     Type:  defect (bug)             |      Status:  reviewing
 Priority:  normal                   |   Milestone:  5.4
Component:  Administration           |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  ui, accessibility,
  has-screenshots needs-design-      |  administration
  feedback                           |
-------------------------------------+-------------------------------------

Comment (by afercia):

 @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 :)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49288#comment:7>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform