Remove deprecated block-toolbar slot

[johngodley]

With Gutenberg 10.7.1 it's now reporting this warning:

wp.components.Popover.Slot name="block-toolbar" is deprecated

[johngodley]

Looking at this some more it seems that Gutenberg now uses a double-height toolbar:

The first line is in the toolbar, and the second line is in the content. I don't think it will be possible to use CSS to merge them together.

For the purposes of the editor here the extra line can look a bit heavy when used in a small editor situation:

However, it does solve some of the problems we have when toolbars get too long for a single row.

[johngodley]

Gutenberg seems to be moving in a direction where we will be forced to accept the double-height toolbar in order to retain certain features (for example, deletion of multiple blocks).

As mentioned in #44 (comment), the problem for the Isolated Editor is that some contexts might look clumsy with a toolbar that could take up more vertical space than the content itself. For example, P2 comments.

I wonder if a compromise is to go with the double-height and force an inline toolbar in situations that require a lighter toolbar. For mobile users, the forced inline toolbar would become a double-height toolbar in the same way it does now in core Gutenberg.

This would have the added benefit of fixing the problem of the single toolbar overflowing when too many buttons are added.

If we desired a single line toolbar in the future then it would need to be worked into Gutenberg itself.

@evilluendas do you think this would work for P2?

If it helps visualize the change then this is what the editor will look like when the toolbar is not showing anything:

And when showing:

This is in contrast to the current single height toolbar:

[evilluendas]

Hmm, interesting! I think in general we should stay as in sync with Gutenberg as possible, even in these situations, so we'll have to make it work 😄

The double toolbar only appears when the "Top toolbar" option is selected, right? Maybe we could force it to be disabled in smaller viewports so the toolbar is floating?

Screen.Recording.2021-09-16.at.16.59.28.mov

I suspect the idea is to align the lines with the sidebar so it looks fine even if the toolbar is empty, so I'm looking forward to making the Settings popover become a proper sidebar — that way it'll look less strange, I think.

I guess the ideal would be to have a "super simple mode" in Gutenberg that only displays the basic stuff, maybe just the block tools and hide the top bar, so it can be used in tiny places.