[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:  reopened
 Priority:  highest omg bbq          |   Milestone:  5.5
Component:  Administration           |     Version:
 Severity:  blocker                  |  Resolution:
 Keywords:  has-screenshots needs-   |     Focuses:  ui, accessibility,
  testing needs-backwards-           |  administration
  compatibility needs-patch          |
-------------------------------------+-------------------------------------

Comment (by afercia):

 @azaozz when you have a chance, I'd greatly appreciate your help to go
 through some thoughts here and see if I missed anything. Trying to
 summarize: I'm not sure the CSS part is the main backwards compatibility
 concern, not directly at least. The JS part comes first:

 The JS part:
 - Previously, the `empty-container` class set via JS was used only on the
 Dashboard and in the `#post-body` layout only for the `side-sortables`,
 only in the 2 columns layout.
 - It is now used for all the sortables in the `#post-body` layout: this is
 necessary to make the whole thing work.
 - The reason is: there's the need to set a min-height on all the `empty-
 container` elements otherwise jQuery sortable won't work correctly.
 - Note: setting the min-height by default will produce some big empty
 spaces in the page. The best option in my opinion is to set the min-height
 only on the `empty-container` elements.
 - The lack of a min-height is the reason why it was not possible any
 longer to move a postbox into the `advanced-sortables` area when empty:
 this was a bug, see comment:7

 What happens now:
 - The default style for the `empty-container` elements uses a fixed height
 of 250 pixels plus a dashed outline.
 - This CSS is now applied to _all_ the sortables also in the `#post-body`
 layout.
 - The new CSS does its best to compensate but it can't catch unusual
 usages or sortable areas with custom names.

 Possible fix:
 - Restore the `visible == 1` bit for now: this should be reviewed later
 because it doesn't make much sense now. Actually, on the Dashboard the
 minimum number of visible widgets is now 2: there's now the "WordPress
 Events and News" widget, which is visible to all users.
 - Turns out the `visible == 1` bit should have been audited with the
 introduction of the new dashboard widget, but it was somehow missed.
 - Regardless, this `visible == 1` has an impact also on the `#post-body`
 layout so I think the best option for now is to just restore it.
 - I don't think the other JS part related to the `side` variable needs to
 be restored, as now _all_ the sortables areas get the `empty-container`
 class.
 - Instead, we should review the default style for the `empty-container`
 elements: fixed height of 250 pixels and dashed outline.
 - It should be kept for the Dashboard.
 - It should be changed for the `#post-body` layout.
 - In the previous patch I tried to keep this styling only to cover an edge
 case illustrated in the screenshot below: when removing all the postboxes
 from `side-sortables`, a dashed "square" is supposed to be visible.

 [[Image(http://cldup.com/7Z5EZZoVfi.png)]]

 - I'd say this is a very edge case.
 - I'd propose to just make the sortables areas in the `#post-body` layout
 not visible by default and reveal them only while dragging regardless
 whether it's the 1 or 2 columns layout.

 Seems to me the best way to address backwards compatibility. If there's
 consensus, I can turn this into a patch.

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