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

Undo/redo buttons not visible on smaller screen sizes #49774

Open
annezazu opened this issue Apr 12, 2023 · 11 comments
Open

Undo/redo buttons not visible on smaller screen sizes #49774

annezazu opened this issue Apr 12, 2023 · 11 comments
Labels
[Feature] History History, undo, redo, revisions, autosave. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") General Interface Parts of the UI which don't fall neatly under other labels. Mobile Web Viewport sizes for mobile and tablet devices [Type] Enhancement A suggestion for improvement.

Comments

@annezazu
Copy link
Contributor

Description

The redo/undo buttons aren't visible in the top toolbar when on smaller screen sizes with 6.2 and GB 15.5.1. Passing this along from @nomad-skateboarding-dev and wanting to intentional call this out as related to work being explored around top toolbar improvements #40450 #47723 cc @aaronrobertshaw

Step-by-step reproduction instructions

  1. Open the Site editor
  2. Edit a template
  3. Make your screen size smaller and notice the undo/redo buttons aren't visible.

Screenshots, screen recording, code snippet

Screen Shot 2023-04-12 at 11 24 59 AM

To watch someone go through this experience, start here and you'll see that he has to switch to a different horizontal view in order to even get to the undo/redo buttons.

Environment info

  • WP 6.2
  • GB 15.5.1
  • TT3

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@annezazu annezazu added [Type] Enhancement A suggestion for improvement. General Interface Parts of the UI which don't fall neatly under other labels. Mobile Web Viewport sizes for mobile and tablet devices [Feature] History History, undo, redo, revisions, autosave. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Apr 12, 2023
@nomad-skateboarding-dev

Thank you sincerely @annezazu 🙏

@aaronrobertshaw
Copy link
Contributor

I've added this issue to the tasks in the Top Toolbar tracking issue.

The work there has been more focused on when the Top Toolbar preference is selected for block toolbars. Given the undo/redo buttons are in the document settings toolbar regardless of the preference setting, this issue might need addressing sooner, on its own merits.

@aaronrobertshaw
Copy link
Contributor

Looking further into this one and it appears as though the undo/redo buttons were deliberately removed from small viewports as far back as November 2020 in #26021.

@jasmussen could you provide some design guidance here? Should we be reintroducing these buttons and do you have a design by any chance that might illustrate how we keep the top toolbar balanced if we do?

@jasmussen
Copy link
Contributor

I would tend to agree that we should show the undo redo buttons on mobile. They are extra useful there, especially on a physical device you won't have keyboard access to ⌘Z. The PR to remove them was mainly to make the site editor at all usable on mobile, where it used to not be.

For reference, here's a screenshot of the post editor:

Screenshot 2023-04-20 at 09 34 15

Here's a screenshot of the site editor:

Screenshot 2023-04-20 at 09 31 47

Spacing is awkward too. @SaxonF and @jameskoster I know you've thought a lot about mobile, in case you have some sketches lying around, here's a ping for you. Otherwise I'm happy to take a stab at a mockup next week.

@jameskoster
Copy link
Contributor

My instinct is that our course of action here will be influenced by the direction we take with the document title in the Site Editor, and perhaps more importantly the Command Center.

It might be a good time to take a broader look at the top bar, given we don't yet know for sure how the command center will be invoked, and which contextual commands might be surfaced. There's potential for us to exercise a good deal of re-organisation, particularly on mobile.

@jasmussen
Copy link
Contributor

Perhaps inspired by the new top toolbar, we could have a permanent (if compacted, spacewise) two rows of toolbars at the top:

  1. WP logo, command bar, inspector/ellipsis
  2. Inserter, undo, redo, save, preview, publish

When a block is selected, replace the 2nd toolbar with: Deselect/Up arrow + block toolbar.

@nomad-skateboarding-dev
Copy link

nomad-skateboarding-dev commented Apr 20, 2023

Thank you kindly @aaronrobertshaw for doing the research and finding support on this ticket.

Spacing is awkward too.

It feels that way to me, as well. 🙂 @jasmussen

Otherwise I'm happy to take a stab at a mockup next week.

Thank you!

two rows of toolbars at the top

From what I'm picturing in my mind, this would be an easier use of navigation when in the Editor. 👍

I would only be concerned about other parts of the UI going the same direction, with additional toolbars as features get added.

I'm attaching a screenshot of what that looks like to me currently as a mobile user in a related space. Depending on how you count, there's anywhere from 4 to 6+ menu bars someone sees as a new user. (I use P2's as both project management, and onboarding into how blocks and WordPress websites work, with those I create sites for or help do so. Going over this initial screen once they're logged in takes a bit of time. 🙂)

Screenshot_20230420-143411.png

It might be a good time to take a broader look at the top bar, given we don't yet know for sure how the command center will be invoked, and which contextual commands might be surfaced. There's potential for us to exercise a good deal of re-organisation, particularly on mobile.

Thank you for your input and the thoughts @jameskoster ! If there's any user testing or feedback that I could provide which is helpful, please reach out! I'd be happy to support on any low knowledge/repetitive tasks as well. Anything that's helpful. 🙂

@jasmussen
Copy link
Contributor

jasmussen commented May 16, 2023

A bit later than I intended, but here are mockups that do a few things:

  • They include space for the document title on mobile (Stabilize the Title Bar #50378)
  • They consider the new behavior of the top toolbar toggle
  • They make consistent the admin-bar and W presence between post and site editors.

For reference, here's "before":

Post editor Site Editor
post editor today site editor today

Here are the mockups:

Post editor Site Editor
Top toolbar, desktop and mobile, post editor Top toolbar, desktop and mobile, site editor

Let me know your thoughts.

@cometgrrl
Copy link

  • 1 on this. It was really frustrating trying to use the site editor on my phone without these!

@superdav42
Copy link

Has anyone started on this? I'm willing to help.

@annezazu
Copy link
Contributor Author

Not that I can see! Please do help :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] History History, undo, redo, revisions, autosave. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") General Interface Parts of the UI which don't fall neatly under other labels. Mobile Web Viewport sizes for mobile and tablet devices [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

7 participants