Editor Toolbar display issues in 6.3

[ndiego]

Description

A number of Editor toolbar issues were reported in #52648 (comment), but I wanted to have a separate issue specifically for these bugs.

Yes, I still have the toolbar issue with WP 6.3 Beta 4 + Gutenberg Nightly.
In my tests the Tablet and Mobile previews of the Post Editor behave like this:

• when the option "Top toolbar" is not selected, the toolbar is completely hidden behind the "Editor top bar"
• when "Top toolbar" is selected and "Fullscreen mode" is not, the toolbar is visible, but weiredly overlaying the "Editor top bar", in fact overlaping the preview controls.
• when both "Top toolbar" and "Fullscreen mode" are selected, the toolbar is usable, but still strangely integrated into the "Editor top bar".
• when "Distraction free" is actived, you can see the overlapping of the the elements while transitioning by hovering.
• when you scale the browser to less than 782px (mobile/tablet size), the toolbar is back to its original position below the "Editor to bar" and usable again.
• Seems to be related to Stabilize the Title Bar #50378

I was also able to identify an additional issue related to the size of the "Top toolbar", notice the "Saved" message is partially hidden.

This becomes worse when plugins like Yoast are enabled. The width appears to be hardcoded and does not consider additional plugins.

Step-by-step reproduction instructions

1. Using WordPress 6.3 Beta 4+ and/or Gutenberg 16.2, navigate to the Editor and enable "Top toolbar".
2. Select a Paragraph block and see that the Top toolbar partially covers the save message
3. Enable a plugin like Yoast that renders an icon (plugin) in the Toolbar.
4. Observe that the entire save message is now covered with selecting a Paragraph block

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.3 Beta 4
• Gutenberg trunk

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

[bph]

I thought the << carrot icon is supposed to help with the problem. Maybe it's not adequately communicated?

[ndiego]

I thought the << carrot icon is supposed to help with the problem. Maybe it's not adequately communicated?

Yeah I think that was the intent, but the implementation still feels like something is broken. Perhaps this is more of a design bug, than a technical one? cc @richtabor @jameskoster

[pg-greyd]

And there is the issue that there is no toolbar visible when "Top toolbar" is not selected, not even carrots.
@ndiego Can you confirm this?

[ndiego]

And there is the issue that there is no toolbar visible when "Top toolbar" is not selected, not even carrots.

Hmm I am not able to replicate this. Just the default Editor toolbar is visibility what "Top toolbar" is not selected (which is expected). Then when clicking on a block the block toolbar hovers above the block.

@pg-greyd can you provide steps to replicate what you are seeing?

[pg-greyd]

Sure :)

Desktop - "Top toolbar" not selected
Toolbar hovers above the block

Desktop - "Top toolbar" selected:
Toolbar is shown (with overlaping bug)

Tablet - "Top toolbar" selected:
Toolbar is shown (with overlaping bug)

Tablet - "Top toolbar" not selected:
Toolbar is not visible at all ❌

[ndiego]

Tablet - "Top toolbar" not selected:
Toolbar is not visible at all ❌

Ahh I see. Thanks for the additional info. I missed this in reading the original report. I can confirm this issue. It also happens on the Mobile view.

[pg-greyd]

Also note, that the screenshots are made with the "Fullscreen mode" option off. This results in an even larger overlaping area, in my case half covering the "Publish/Update" button (see two middle screenshots). When other plugins are active, this can go as far that all three (Preview, View Page and Publish/Update) are hidden behind the Toolbar.

[jameskoster]

These are the issues I can replicate:

1. Post editor: disabling full-screen and enabling top toolbar results in the top right actions (save etc) being obscured by the top toolbar when you select a block.
2. Post editor: with top toolbar disabled, no block toolbars are visible at all when you engage the tablet or mobile previews. They seem to be absolutely positioned at the top of the viewport, which can be confirmed by enabling distraction free mode.

The first issue seems like a relatively straight-forward styling problem. I'll open a PR soon.

The second is a bit more involved. It seems that when you engage the tablet or mobile preview, block toolbars get positioned as if the top toolbar preference was active. But there is either logic or styles missing which means it doesn't work correctly and the toolbars are effectively hidden. I don't know why this behavior occurs. Perhaps it's because there isn't enough space in the mobile preview to display full toolbars? I'm hoping @draganescu might know, and be able to offer some suggestions.

[draganescu]

Most of these are implementation problems rising from the fact that the current top toolbar updates work by absolutely positioning the block toolbar on top of the editor chrome header part. This leads to a lot of tweaks being applied (particularly around breakpoints) so that items are not overlapped. But, as it's the case with breakpoints, there are in-between states that still fail. Adding more to the problems is the difficulty to properly absolutely position things when the editor is not full screen due to the many possible states of the admin sidebar.

This is how things are now in RC1:

top-toolbar-rc1.mp4

1. I think there is a possible fix for the overlap of buttons on the right side similar to @jameskoster fix in Fix: Block toolbar obscuring document tools when Top Toolbar is enabled #52722 but should only be applied to the post editor.
2. The problem where previewig tablet/mobile in the post editor disables the block toolbar unless it's fixed is new to me - I'll investigate what that may be. The preview in the site editor leaves the block toolbar in place.
3. If thre are plugins that add things to the header there will be overlapping situations - this can only be fixed by changing the implementation completely, which requires some previous steps.

[draganescu]

I narrowed dowm the problem with tablet/mobile preview to a bug which toggles a setting on erroneously:

preview-bug.mp4

[pg-greyd]

Very good! 👍
The relic line of code is from before Gutenberg 16. The old behaviour was: in Tablet and Mobile preview the toolbar was always positioned on the top of the editor (but below the top editor bar), regardless of the setting "Top toolbar".
The most notable change for users is that now we have floating toolbars in the Tablet and Mobile previews.

[ndiego]

Given that #52722 will be included in 6.3, I think we can punt this issue to 6.4.

[marcarmengou]

Yesterday I opened this ticket in core trac (https://core.trac.wordpress.org/ticket/59035), and as suggested I leave this here in case it can be useful for you.

[draganescu]

#53526 is a new exploration that aims to solve problems by patching the bad implementation with even more tweaks.

[tellthemachines]

@draganescu I see the PR you linked to is labelled as an enhancement, whereas this issue is a high priority bug. For the minor release, only bug fixes should be considered so it would be good to patch any buggy behaviour here for 6.3.1, and consider enhancements for 6.4. Do you reckon that's doable?

[draganescu]

I don't know! :) #53526 is a bugfix as well. I should do a label switcharoo.

[jordesign]

I'm seeing behaviour now in 6.3 where the publish/preview actions are no longer visible on smaller screensizes when the Top Toolbar is enabled.

top_toolbar_hidden.mov

[tellthemachines]

@jordesign that's expected when the top toolbar is expanded and the screen width is less than 960px. On clicking the caret to hide the top toolbar, the publish actions should display again.

[draganescu]

I think #53526 can close this? cc @ndiego

[annezazu]

I agree that we can close this! Closing out but happy to have someone chime in and say otherwise.