Chrome: Adding a Toggle to switch between fixed/contextual block toolbar

[youknowriad]

This PR adds a Toggle in the ellipsis menu to switch back to the contextual block toolbar. This could serve as a A/B test.

Todo:

• Persist this preference

[codecov]

Codecov Report

Merging #3311 into master will decrease coverage by 0.19%.
The diff coverage is 1.29%.

@@            Coverage Diff            @@
##           master    #3311     +/-   ##
=========================================
- Coverage   31.29%   31.09%   -0.2%     
=========================================
  Files         232      236      +4     
  Lines        6510     6555     +45     
  Branches     1160     1164      +4     
=========================================
+ Hits         2037     2038      +1     
- Misses       3752     3792     +40     
- Partials      721      725      +4

Impacted Files	Coverage Δ
editor/store-defaults.js	100% <ø> (ø)	⬆️
editor/selectors.js	93.9% <0%> (-0.48%)	⬇️
editor/header/header-toolbar/index.js	0% <0%> (ø)	⬆️
editor/navigable-toolbar/index.js	0% <0%> (ø)
editor/header/mode-switcher/index.js	0% <0%> (ø)	⬆️
...or/modes/visual-editor/block-contextual-toolbar.js	0% <0%> (ø)
editor/actions.js	38.29% <0%> (-0.84%)	⬇️
editor/header/index.js	0% <0%> (ø)	⬆️
editor/header/fixed-toolbar-toggle/index.js	0% <0%> (ø)
editor/header/ellipsis-menu/index.js	0% <0%> (ø)
... and 7 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7dc18a0...8b94d0e. Read the comment docs.

[mtias]

The button block toolbar appears centered:

[mtias]

The wide sizes have some style issues:

[mtias]

It'd also be good to restore the position: sticky behaviour when you scroll.

[jasmussen]

Fast work. Was about to mention the sticky position thing.

The only remaining issue I have is that the ellipsis menu toggle feels a bit wrong. I understand that it uses a checkmark when "enabled", but in that case I'd rather we group them together, show both options, and show a checkmark only with one of them. Sort of in this vein:

A perhaps faster alternative could be to use the same behavior as the text mode switch. That is, you click it and it changes both the label and icon. So you could have:

[icon] Fix toolbar to block

click that

[icon] Fix toolbar to top

We'd need a new icon, but for now perhaps you could use https://developer.wordpress.org/resource/dashicons/#editor-kitchensink for both?

[youknowriad]

• Fixed the styling issues.
• I've used the behavior as the text/visual mode for the toggle. We can revisit this separately, providing a generic way to do a "multi-button" toggle like the mockup.
• Persisted the choice in local storage.

[mtias]

Is this good to go?

[youknowriad]

Waiting for the signal :)

[mtias]

[ahmadawais]

Don't you think having it in the settings would be more intuitive instead of the switcher at the top?

[mtias]

@ahmadawais in which settings. The Settings → Writing area?

[ahmadawais]

@mtias Yup. Adding it here some where in the settings would be a better idea.

[StaggerLeee]

Maybe you should seriously think about bringing back "Screen Options" button top-right ?
This is perfect place for things like this. Set it once in a year, or 5 years, and do not want to see this option anymore.

[StaggerLeee]

I would suggest you leave toolbar switch option in stable version. Why not ?
If it is not much code to maintain for you later in the future.

Very useful option for Users to set it according personal preferences.