[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:  closed
 Priority:  normal                   |   Milestone:  5.5
Component:  Administration           |     Version:
 Severity:  normal                   |  Resolution:  fixed
 Keywords:  has-patch has-           |     Focuses:  ui, accessibility,
  screenshots commit                 |  administration
-------------------------------------+-------------------------------------

Comment (by afercia):

 Hi @TobiasBg yep I see the problem on your plugin "About" page.

 I'm afraid you will have to add some lines of CSS then :) Please consider
 that the core CSS is meant to be used for the pages with `post-body`, that
 is: edit post, edit CPTs, comments, etc. It is not meant to be reused on
 other pages, nor this layout is part of any official "API" that is
 guaranteed to work forever. In other words, while plugins authors can
 absolutely reuse this HTML and CSS, they do it at their own risk as both
 HTML and CSS may change at any time.

 Let me briefly explain how this new bit of CSS works and I'm confident it
 can work for your usec case.

 The core CSS uses this to make the sortable areas ''not'' visible:


 {{{
 /* Resets height and outline inherited from common.css. */
 #post-body.columns-1 #side-sortables.empty-container,
 #post-body #normal-sortables.empty-container,
 #post-body #additional-sortables.empty-container {
         /* Sortables need some initial height to work correctly. */
         height: 1px;
         outline: none;
 }
 }}}

 - it sets a 1px min-height that is necessary to make jQuery sortable work
 - it resets the outline so the dotted line around the sortables areas
 isn't visible

 I think using the same CSS on your plugin `#additional-sortables` area
 should solve the first step of the issue.

 Then, when the meta boxes are being dragged, the core CSS makes the
 sortables area visible so that ''users can actually see'' which "drop
 areas" are available. This part was buggh in the previous WordPress
 versions and it's one of the issues this change aims to solve.

 To reveal these areas while dragging, core uses the following CSS:


 {{{
 /* Only highlight drop zones when dragging and only in the 2 columns
 layout. */
 .is-dragging-metaboxes #post-body.columns-2 #side-sortables,
 .is-dragging-metaboxes #post-body #normal-sortables,
 .is-dragging-metaboxes #post-body #additional-sortables {
         outline: 3px dashed #606a73;
         /* Prevent margin on the child from collapsing with margin on the
 parent. */
         display: flow-root;
         /*
          * This min-height is meant to limit jumpiness while dragging.
 It's equivalent
          * to the minimum height of the sortable-placeholder which is
 given by the height
          * of a collapsed post box (36px + 1px top and bottom borders) +
 the placeholder
          * bottom margin (20px) + 2 additional pixels to compensate
 browsers rounding.
          */
         min-height: 60px;
         margin-bottom: 20px;
 }
 }}}

 Using the same CSS for your plugin `#additional-sortables` area should
 solve the second part of the issue. I quickly tested it on TablePress and
 seems to work nicely.

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