Undo/redo buttons not visible on smaller screen sizes

[annezazu]

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 https://github.com/WordPress/gutenberg/issues/40450 https://github.com/WordPress/gutenberg/issues/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

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

[nomad-skateboarding-dev]

Thank you sincerely @annezazu 🙏

[aaronrobertshaw]

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]

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 https://github.com/WordPress/gutenberg/pull/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]

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:

Here's a screenshot of the site editor:

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]

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]

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]

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. 🙂)

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]

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

• They include space for the document title on mobile (#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

Here are the mockups:

Post editor	Site Editor

Let me know your thoughts.

[cometgrrl]

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

[superdav42]

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

[annezazu]

Not that I can see! Please do help :)