Skip to content

Gutenberg mobile editor: Misaligned Header items #50758

Open

Description

The Header in the Gutenberg Editor on Mobile Web doesn't contain sufficient screen estate to align the items nicely.

Screenshot 2021-03-04 at 14 17 34

Steps to reproduce

  1. Switch to a mobile viewport (I used Moto G4). Here's a guide on how to do it w/ Chrome Dev Tools.
  2. Go to https://wordpress.com/home/<somesiteid>.wordpress.com
  3. From the main menu, select Appearance > Themes
  4. Activate a different theme and proceed to edit the homepage
  5. The items in the header aren't aligned.

Here's a video where the behavior is being reproduced https://www.loom.com/share/6f6eecb26818454891daaaf3753ca3b6.

You can also go straight to https://wordpress.com/page/<somesiteid>.wordpress.com/home to reproduce the behavior.

Notes

Related to #48337 and #47386. See #47386 (comment)

Hint: to prevent the DOM manipulation that adds the Launch button and modifies the Save button, we can do an early return, on smaller screens: https://github.com/Automattic/wp-calypso/blob/trunk/apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-button/index.ts#L24

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

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions