Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove sticky-menu class preventing full admin page scroll #11308

Merged
merged 3 commits into from
Nov 15, 2018

Conversation

johngodley
Copy link
Contributor

If you have a long admin menu it's not possible to scroll down when Gutenberg first loads.

edit_post_ wordpress_latest wordpress_and_gutenberg fix_fullscreen-sticky-menu__8244_commits__and_gutenberg_index_js _gutenberg

This is caused because of #9567 adding is-fullscreen-mode to the page body class. This causes core WordPress to add sticky-menu to the page, which sets the admin menu to position: fixed.

Resizing the window causes Gutenberg to re-apply body class values, and sticky-menu is then lost.

More information can be found in this comment.

This PR modifies the FullscreenMode component to remove sticky-menu when it first starts to counteract adding is-fullscreen-mode in PHP.

Fixes #9996

How has this been tested?

  1. Create plugin described here to extend your admin menu
  2. Verify that on page load it's possible to scroll to the bottom of the admin menu

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.

@johngodley johngodley added the [Type] Bug An existing feature does not function as intended label Oct 31, 2018
@johngodley
Copy link
Contributor Author

johngodley commented Oct 31, 2018

Noting that not adding is-fullscreen-mode in PHP also works, but then there is a noticeable UI jump when a page is first loaded.

I'm also not exactly sure if this is the best place and I appreciate the component may not be specific to WordPress.

Gutenberg adds ‘is-fullscreen-mode’ to the page body class, causing WordPress to add ‘sticky-menu’. This prevents the page being vertically scrolled, cutting off long admin menus.

Remove ‘sticky-menu’ as part of the FullscreenMode setup
@johngodley johngodley force-pushed the fix/fullscreen-sticky-menu branch from 1e4a309 to 4baf632 Compare November 1, 2018 09:54
@johngodley johngodley requested a review from a team November 6, 2018 09:29
Copy link
Member

@tofumatt tofumatt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs to add the class back when fullscreen mode is left, and this probably warrants a test too.

packages/edit-post/src/components/fullscreen-mode/index.js Outdated Show resolved Hide resolved
@noisysocks
Copy link
Member

Hi @johnbillion! What's the status of this PR?

@tofumatt
Copy link
Member

I think you meant @johngodley 😉

@noisysocks
Copy link
Member

🤦‍♂️

@johngodley
Copy link
Contributor Author

What's the status of this PR?

I need to address the point raised above - will circle back.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 And thanks for the tests.

@johngodley
Copy link
Contributor Author

Do the changes look ok to you @tofumatt ?

Copy link
Member

@tofumatt tofumatt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me!

@youknowriad youknowriad added this to the 4.4 milestone Nov 15, 2018
@youknowriad youknowriad merged commit a356318 into master Nov 15, 2018
@youknowriad youknowriad deleted the fix/fullscreen-sticky-menu branch November 15, 2018 16:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Can't scroll WP menu when in editor
4 participants