Block reordering controls missing when using the top toolbar

[johnbillion]

Describe the bug

When the top toolbar is in use, the controls for reordering blocks are missing. There doesn't appear to be another way to reorder blocks without these controls.

To reproduce Steps to reproduce the behavior:

1. From the More tools & options menu, enable the Top toolbar
2. Place your cursor within a block
3. Observe that the controls on the left hand side for reordering blocks are missing

Expected behavior The reordering controls should be available regardless of the chosen toolbar position.

Screenshots

With the regular toolbar in use:

With the top toolbar in use:

Desktop (please complete the following information):

• OS: macOS
• Browser: Tested in Brave, Chrome, and Firefox

[timhibberd]

I have same error on Windows / Firefox / Twenty-Twenty Theme ? WP5.4

[johnbillion]

In addition, this prevents users from dragging blocks into child columns or groups.

[afercia]

Looking at previous WordPress versions, looks like this comes from a series of changes.

With the "Top toolbar" option enabled:

WordPress 5.3:

• the reordering controls were still displayed on the left of the block
• the "grab area" was still available (the small area between the buttons)

WordPress 5.4:

• the reordering buttons are moved to the top toolbar
• the "grab area" is gone: I couldn't find a way to drag and drop a block

WordPress 5.5 Beta 2:

• the reordering buttons are in the top toolbar
• they're now stacked vertically thus the clickable area is way smaller compared to 5.4
• there's no way to drag and drop a block
• also: the blue outline around the block appears only when hovering or focusing the "change block type" button or the reordering buttons... in all the other cases there's nothing to highlight the block being edited, which makes things even more unclear (see #23892 )

[folletto]

Just to be clear, is this a report that the top toolbar doesn't provide the buttons? If so, they should be appearing at the top, yes.

However, I tested in the current released 8.5.1 and it's showing correctly:

Is it a regression on the GitHub main branch?

—

For context: the Top Toolbar option is designed to provide a clean view on text. It's meant to be an approach primarily for text-heavy articles and for writers that prefer the text to be more prominent (i.e. more of a classic editor style). That's why the block is not emphasized and the toolbar is moved away.

[johnbillion]

This was reported against WordPress 5.3. As Andrea mentions it looks like the behaviour has changed in the interim.

[folletto]

Ok, so I think we can close this then? Just to be sure :)

[afercia]

Can't be closed. There's no way to drag and drop blocks to reorder them when "Top toolbar" is on.

[folletto]

As said above, Top Toolbar is meant to be a clean view on text for people that prefer working directly with text.

The functionality to rearrange blocks is still available via arrows, and the dragging functionality is still available by disabling this option. There's no need for an identical behaviour, as this is not the intent behind this option.

[afercia]

I disagree. It's just a removed functionality. Users do expect to be able to drag boxes and the confusion for users is pretty evident if even very experienced core committers don't understand why dragging it's not there.

[johnbillion]

I'm inclined to disagree too. I don't see a correlation between the toolbar position and the availability of the drag and drop reordering controls.

I really like using the top toolbar because I find it stays out of the way when I'm heavily editing content, and part of that heavy editing process is reordering blocks. Dragging and dropping to reorder blocks is really useful and I miss it with the top toolbar in use.

[folletto]

Yeah, the naming isn't great, I agree. I wasn't too keen to call it "Top Toolbar" exactly because it was designed to do more than that (Focus Mode). In practice it's a "writer mode". But it was the most important change, and the other changes kinda followed that change, so I guess it was ok as a naming?

To be clear, in general I'm not against the idea. I totally get your use case. As long as we can find a solution that doesn't hurt the goal why that feature was built in the first place — which is to have a clean writing flow without clutter for users that work better in that way — we can include it back.

I frankly just don't have many ideas that would allow drag without re-adding clutter. Do you have idea?

[paaljoachim]

The problem. When the Top Toolbar is activated in WP 5.4 and in WP 5.5 it is not possible to drag a block in and out of a container kind (Group, Columns etc) of Block.

Old solution. Not current any longer. As Andrea mentioned above https://github.com/WordPress/gutenberg/issues/21407#issuecomment-658797129 in 5.3 we had this:

The above older earlier version solution makes it possible to have the Top Toolbar activated and drag/move any block up or down the page. One can also drag the block out or into a container kind of Block.

Existing. Example of having two Paragraph Blocks inside a Group Block.

Brainstorming....

Moving the two Paragraph Blocks out of the Group Block.

Example 1. Drag icon beside the selected Block.

Advantage: Drag is associated with the block. Moving the cursor over the icon it turns into a hand. User can drag the block out of the Group Block.

Disadvantage: The drag icon is not a part of the layout.

--

Example 2.

I click Paragraph group block 2 and click the Top Toolbar down arrow to move it out of the Group Block. That means clicking the up and down arrows will move a block independent if it is inside a container or not.

Before: Group Block -- Paragraph group block 1 -- Paragraph group block 2

Today clicking block 2 it can not be moved further down the page as it is "stuck" inside the parent Group Block. Suggested change to where it is possible to move a block into and out of a container kind of block. By not greying out the block 2 down arrow, but keeping the down arrow active so the user can move the block out of the Group Block. Like so:

Group Block -- Paragraph group block 1 -- Paragraph group block 2 ---> Clicks the down arrow to move it out of the Group Block.

Result: Group Block -- Paragraph group block 1 Paragraph group block 2. ----> Block is moved outside of the Group Block.

[paaljoachim]

Actually I think the best solution presented would be to use the Select Mode to drag & drop the selected block. https://github.com/WordPress/gutenberg/issues/24092

[folletto]

That's a strong option, I agree.

I also think that your option 2 is quite good — unless it conflicts with something I'm not aware of at least — as it would work everywhere, not just for the focused "Top Toolbar" mode. Feels beneficial overall.

[tomwalkr]

Just to chime in here – slightly repeating from closed dupe #20840 – this behaviour is very confusing for exactly the audience you're going for, ie writers who don't want to be distracted by the software. 'Top Toolbar' sounds like a desirable option, only for them to find (possibly an hour or so later, once they've forgotten about having changed that setting) that they can no longer drag the blocks, particularly into/out of other blocks – currently impossible.

I (web designer) ended up on this issue because I was asked why their page was "broken" when the drag handles disappeared. This is an extremely surprising behaviour to stem from something that sounds like it simply moves the toolbar to the top of the editor, and indeed they did not remember that was the reason why it had happened.

[folletto]

I think you are also highlighting another point that I didn't notice in the earlier conversations: "Top Toolbar" as a name might be creating more confusion than not. It was originally split out from a single "Focus mode", trying to be more descriptive but... Maybe we should also consider renaming it for clarity?

[tomwalkr]

Yes, I know I've slightly come from nowhere here (because it was from a search trying to figure out a user's problem for them!) but I think there are two possible solutions to the problem as I understand it:

1. Top Toolbar should not hide drag handles (it should just, you know, put the toolbar at the top)
2. Top Toolbar should be called something else that makes it more obvious it will hide UI elements.

[folletto]

I think that adding the drag handles should be our last resort, as it would break the focus experience of the mode. We can start by exploring the options outlined above by Paal — also because I feel they should be beneficial to Gutenberg regardless. And that could go hand-in-hand with a new label for the feature.

And if that doesn't work... and we're out of ideas... we can review the handles too. ;)

[tomwalkr]

Of Paal's two options, the first (shows a minimal handle) would be preferable from where I'm sitting.

Whichever way you slice it – maybe this is less obvious if you've been part of the development of these features – "I want a focus/distraction-free mode" feels quite unrelated to "I want my toolbar to be at the top". The more things Top Toolbar mode changes relative to any other mode, the more unexpected it is.

[folletto]

Yes, hence I agree it also needs a name change — a new label for the feature — or something along the lines. "Top Toolbar" was originally a Focus mode, that's the problem it was designed to solve. :)

[talldan]

Drag and drop is now possible in select mode, so that's one of the options implemented. List view also has drag and drop in 11.1, so that's a second way to reorder things without turning off 'Top toolbar'.

I'm going to close this. If we still feel the options are lacking it's fine to open a new issue or reopen this, but it probably needs more design exploration before a developer can pick it up.