WordPress.org

Make WordPress Core

Opened 15 months ago

Last modified 5 months ago

#37790 new defect (bug)

Post editing sidebar does not always act sticky

Reported by: tomdxw Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.6
Component: Editor Keywords: has-patch needs-testing 4.9-early
Focuses: Cc:

Description

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).

Attachments (1)

sticky.diff (866 bytes) - added by tomdxw 15 months ago.

Download all attachments as: .zip

Change History (6)

@tomdxw
15 months ago

#1 @tomdxw
15 months ago

  • Keywords has-patch added

#2 @swissspidy
15 months ago

  • Keywords needs-testing added

Thanks for the patch!

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

That's not needed for patches anyway, as the JavaScript gets minified during the build process.

#3 @tomdxw
12 months ago

  • Keywords 4.8-early added

#4 @tomdxw
5 months ago

  • Keywords 4.8-early removed

#5 @tomdxw
5 months ago

  • Keywords 4.9-early added
Note: See TracTickets for help on using tickets.