Fix/block toolbars with preview

[tellthemachines]

Description

Fix rendering of block toolbars with responsive preview by always fixing them to top on Tablet and Mobile previews.

How has this been tested?

Browser tested only.

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• 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.

[youknowriad]

Thanks for your help on this @tellthemachines we're almost there

Something is off in the style of the top toolbr for mobile/table previews

I believe that's most likely because some styling that are meant for contextual toolbars are bleeding to the top toolbar in these previews. The mix might be just moving some styles around.

[tellthemachines]

Something is off in the style of the top toolbr for mobile/table previews

Should be fixed now!

[youknowriad]

Thanks, it's better

I still see the black borders though, Maybe some wrong CSS. selector not targetting the contextual toolbar. specifically? cc @jasmussen

[jasmussen]

Interesting, the off-borders only happen when the "Top Toolbar" option is not toggled. When it is, they look correct:

In other words, the difference is a classname:

So, to the div that has the following classnames:

edit-post-layout is-mode-visual block-editor-editor-skeleton

... if you add this, it works:

edit-post-layout is-mode-visual block-editor-editor-skeleton has-fixed-toolbar

[youknowriad]

@tellthemachines While checking this PR, I was wondering something, why the "block-editor" package has to know about the "previewDeviceType" at all? Why it's not just an "edit-post" or "editor" thing?

(That's not something for this PR obviously)

Edit: follow-up here #20409

[youknowriad]

@jasmussen while this class would have fixed it, I don't think it was the right fix. Instead, I updated the block-toolbar styles so that the "contextual" style override the default lighter borders instead of the opposite to avoid using something from edit-post in block-editor

[jasmussen]

There used to be a separator:

Compare with this screenshot, there was a separator before the mover control.

And there's an issue when you don't have the top toolbar option enabled, where the smart mover thing does its autohide stuff.

[youknowriad]

Good catch, these should be fixed now.

[jasmussen]

💪