[wp-trac] [WordPress Trac] #37790: Post editing sidebar does not always act sticky

[WordPress Trac]

#37790: Post editing sidebar does not always act sticky
--------------------------+-----------------------------
 Reporter:  tomdxw        |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  4.6
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 = Situation 1 (works fine) =

 1. Go to the new post page (`/wp-admin/post-new.php`).
 2. Paste enough lorem ipsum into the visual editor that the page is able
 to scroll.
 3. Scroll down.

 Expected and actual behaviour:

 `#side-sortables` gets `position: fixed` and sticks to the viewport as you
 scroll down the page

 = Situation 2 (does not work) =

 1. Add metaboxes to the post type (enough so that the page will scroll -
 ACF is an easy way to do this, or you could just install a bunch of
 plugins, or manually create the metaboxes).
 2. Go to the new post page.
 3. Scroll down.

 (Make sure your viewport is taller than the editor).

 Expected behaviour:

 Just like the other situation, `#side-sortables` should get `position:
 fixed` and stick to the viewport as you scroll down the page.

 Actual behaviour:

 Nothing happens to `#side-sortables` and the sidebar does not follow the
 viewport as the user scrolls.

 ----

 This happens because in `wp-admin/js/editor-expand.js` it compares the
 height of the ''editor'' against the height of the viewport.

 {{{
 // Sidebar pinning
 if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && //
 sidebar position is changed with @media from CSS, make sure it is on the
 side
     $document.height() > ( $sideSortables.height() + postBodyTop + 120 )
 && // the sidebar is not the tallest element
     heights.windowHeight < editorHeight ) { // the editor is taller than
 the viewport
 }}}

 It should compare the height of the whole page instead. i.e.:

 {{{
 heights.windowHeight < $('#poststuff').outerHeight() ) { // the page
 content is taller than the viewport
 }}}

 Attached a diff (make sure to do `define('SCRIPT_DEBUG', true);`when using
 this diff as I didn't recompile the JS).

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37790>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform