[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 has-patch            |
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:
     has-screenshots needs-testing needs-backwards-compatibility needs-
     patch
     => has-screenshots needs-testing needs-backwards-compatibility has-
     patch


Comment:

 [attachment:"49288.9.diff"] does the following:

 - Restores the CSS rules removed in [48340] to ensure backwards
 compatibility, even it these rules aren't used in core since more than 8
 years.
 - Restores the `visible == 1` bit for now: this should then be reviewed in
 a new ticket, maybe #50699.
 - CSS: the fixed height of 250 pixels is now used only on the Dashboard
 and for `#post-body.columns-2 #side-sortables`, which is the sortable in
 the right column in the Classic Editor (no changes here).
 - CSS: _all_ the other elements with class `.meta-box-sortables` (so: not
 only the empty ones) have now a min-height of 1 pixel which is necessary
 to make jQuery UI Sortable work properly. This very small min-height also
 prevents the drop areas to take too much space.
 - CSS: this way, the CSS is also simplified: there's no need to target
 specific sortable areas and the CSS will target also sortable areas with
 custom names, see TablePress for example.
 - In short: in the so called `#post-body` layout, the sortables areas
 aren't visible by default: they get a dashed outline only while dragging.
 - JS: I added a call to the jQuery UI Sortable
 [https://api.jqueryui.com/sortable/#method-refreshPositions
 refreshPositions() method] when the drag action starts: this improves the
 behavior as the placeholders get visible as soon as the mouse pointer
 overlaps a "drop area". Basically, the min-height changes from 1 pixel to
 60 pixels and `refreshPositions()` makes jQuery Ui sortable take that into
 account.
 - Worth noting the `refreshPositions()` method is already used for the
 widgets, see [26366], the nav menus, see [14531], and the customizer
 widgets, see [30102].

 Hopefully, this should address the backwards compatibility concerns. I'd
 greatly appreciate some testing and review :)

 @TobiasBg mind testing with your plugin when you have a chance? I did test
 a bit already and didn't notice any issue.

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