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

Hamburger button overlapping block inserter button on post editor on wp-admin. #40426

Closed
yansern opened this issue Mar 25, 2020 · 8 comments
Closed
Assignees

Comments

@yansern
Copy link
Contributor

yansern commented Mar 25, 2020

See fix at: #40426 (comment)

Steps to reproduce

  1. Go to wp-admin/post-editor.php.
  2. Resize your browser to mobile/tablet view (< 782px and below).

What happens

The hamburger button appears on top of the block inserter button. It's no longer possible to click on the block inserter menu.

Screenshot / Video

Mobile Tablet
Screenshot 2020-05-11 at 17 41 23 Screenshot 2020-05-11 at 17 49 41
@simison
Copy link
Member

simison commented Mar 25, 2020

@jeherve was there some prior work / issue about this?

@jeherve
Copy link
Member

jeherve commented Mar 25, 2020

Yes:
Automattic/jetpack#12320

It was previously fixed in Automattic/jetpack#12337 for the Masterbar in wp-admin.

I'm not sure I understand what this issue is about though. Where does this happen? WordPress.com Simple, Atomic, Jetpack, wp-admin, Calypso?

@simison
Copy link
Member

simison commented Mar 25, 2020

On wp-admin for atomic and simple sites, on block editor when screen is smaller:

image

@jeherve
Copy link
Member

jeherve commented Mar 25, 2020

Interestingly my default experience is different (though not better) in Atomic, because of Calypsoify:

image

If I disable Calypsoify I get what you're seeing. This would seem like a regression from Automattic/jetpack#12337 in Jetpack. I reopened Automattic/jetpack#12320 to track this.

This issue may need to remain open for WordPress.com simple though. The masterbar there is different from the one in Jetpack.

@sirreal
Copy link
Member

sirreal commented May 14, 2020

Brought over some details and screenshots from @millerf in #42060.

@sirreal
Copy link
Member

sirreal commented May 14, 2020

Brought this up in some masterbar-related discussions: pbAPfg-3G-p2#comment-988

@yansern yansern changed the title Hamburger button overlapping + no way to exit editor in mobile & tablet view. Hamburger button overlapping block inserter button on post editor on wp-admin. Jun 12, 2020
@yansern
Copy link
Contributor Author

yansern commented Jun 12, 2020

TLDR Version: The fix is in this phab patch here: D44873-code

Keeping things simple

I updated the description of this issue to limit the scope of the fix that should be done here.

Previously the issue included:

  • Hamburger button overlapping block-inserter menu on post editor on WP-Admin.
    We'll focus on just fixing this one.

  • Hamburger button overlapping block-inserter menu on post editor on Calypso.
    This no longer seem to be an issue as the masterbar doesn't seem to appear on Calypso anymore.

  • Unable to exit editor once you're in post editor.
    Similar work is being done in Close button: extensibility in post editor WordPress/gutenberg#22323 where they want to reuse the W button for this purpose.

Also, it is also interesting to note that:

Quick fix for the hamburger button overlap

I've created a quick fix to reposition the hamburger button on the masterbar.

The fix is in this phab patch here: D44873-code.

I'm not sure if that's the right place to modify the CSS file. I can't quite tell if the CSS file is actually a built version that was sync'ed over from jetpack's repository? Even though I can't find the relevant files in jetpack's repository.

2020-06-12_12-50-05 (1)

@yansern yansern self-assigned this Jun 13, 2020
@razvanpapadopol
Copy link

Fixed in D44873-code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants