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

Navigation screen: On mobile viewports, reveal the block inspector when clicking the menu name button #31220

Merged

Conversation

getsource
Copy link
Member

Description

Opens Block Inspector when menu name is clicked.

Worked on this with @Mamaduka. Thanks!

Closes: #30326

How has this been tested?

Tested in wp-env and responsive/mobile viewport within dev tools in Firefox.
From #30326:

  • Open the nav editor and switch to a mobile viewport
  • Ensure the block inspector is hidden
  • Select the nav block
  • Click the menu name button

Also, ran npm run test, and it passed as expected.

Screenshots

Types of changes

Bug fix.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@getsource getsource added [Feature] Navigation Screen [Type] Bug An existing feature does not function as intended labels Apr 27, 2021
@draganescu draganescu added the Needs Design Feedback Needs general design feedback. label May 6, 2021
@getsource getsource force-pushed the fix/show-navigator-block-inspector/30326 branch from 349a31c to 2ed1104 Compare May 12, 2021 11:18
@getsource
Copy link
Member Author

Just rebased this.
@draganescu Here are before and after videos to help with any design feedback necessary.

Essentially, it doesn't do anything on tap/click in mobile viewports before this change, and afterwards, it opens the block inspector and moves focus so the name can be modified, to match the behavior when the block inspector is already visible.

Before:

Screen.Recording.2021-05-12.at.20.24.49.mp4

After:

Screen.Recording.2021-05-12.at.20.23.27.mp4

Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

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

Screen.Capture.on.2021-05-13.at.11-53-14.mov

Thank you for this PR. It works really well and solves the issue well.

One thing that we might want to create a follow up Issue for is that (on "mobile") once you have edited the Menu name it is not clear where to persist that change. This is because you have to close the inspector to be able to see the Save button.

I wonder whether we should also show the Save button at the top of the inspector on smaller viewports where the inspector takes over the entire screen?

@Mamaduka Mamaduka merged commit 7955398 into WordPress:trunk May 14, 2021
@github-actions github-actions bot added this to the Gutenberg 10.7 milestone May 14, 2021
@getsource getsource deleted the fix/show-navigator-block-inspector/30326 branch May 14, 2021 04:41
@getsource
Copy link
Member Author

Thanks much @getdave @Mamaduka !

I agree improving the flow would be good. Do you think it'd be better to include that sort of a change with #31241 (H/T to @Mamaduka for pointing this one out), or track it in a new/separate issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation screen: On mobile viewports, reveal the block inspector when clicking the menu name button
4 participants