Improve inserter style

[jasmussen]

Description

Aims to fix #1497.

GIF:

This moves the tabs to the top, it changes the style of the inserter a bit, and improves the focus styles per #3039.

Note: I can't tab into the Tabs — pun not intended. Not sure why this is, would appreciate advice.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows has proper inline documentation.

[codecov]

Codecov Report

Merging #3080 into master will decrease coverage by 0.91%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master   #3080      +/-   ##
=========================================
- Coverage   32.32%   31.4%   -0.92%     
=========================================
  Files         216     216              
  Lines        6134    6358     +224     
  Branches     1079    1149      +70     
=========================================
+ Hits         1983    1997      +14     
- Misses       3502    3643     +141     
- Partials      649     718      +69

Impacted Files	Coverage Δ
editor/inserter/menu.js	49.19% <100%> (ø)	⬆️
blocks/editable/index.js	8.63% <0%> (-1.87%)	⬇️
editor/modes/visual-editor/inserter.js	91.66% <0%> (-1.67%)	⬇️
components/clipboard-button/index.js	0% <0%> (ø)	⬆️
editor/block-toolbar/index.js	0% <0%> (ø)	⬆️
editor/modes/visual-editor/sibling-inserter.js	0% <0%> (ø)	⬆️
blocks/block-controls/index.js	0% <0%> (ø)	⬆️
editor/sidebar/block-inspector/index.js	0% <0%> (ø)	⬆️
editor/provider/index.js	0% <0%> (ø)	⬆️
editor/post-title/index.js	0% <0%> (ø)	⬆️

---

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 d8db04b...3a5643d. Read the comment docs.

[afercia]

@jasmussen nice. Since the tabs disappear when searching, navigation from the search field to the results doesn't have any "barrier" and this seems a good thing to me.
If this goes in, please do feel free to close #1588

No need I review it, I'd just like to see the Inserter in a stable state so we can address accessibility 🙂 I've played a bit with NavigableMenu and I think with a few adjustments it could be easily reused for the Inserter and allow to remove a lot of code in InserterMenu. There's #1823 for this. Please go ahead!

[mtias]

Is this needed for all popovers or should apply only to the inserter?

[jasmussen]

Great point. I moved the width stuff around to better spots. Had to also give a width to the publish dropdown now as it inherited teh width from here.

[jasmussen]

Given then thumbs up on this PR, and the most recent width CSS fix, I think this branch is good to merge!

However since today — since right now — is release day for 1.5, I'm not going to just merge haphazardly. @pento if you'd like this PR in, it's got my stamp of approval as working, but up to you whether you want to include in this release. Feel free to merge if yes, otherwise I'll do it next week and have it in 1.6.

[pento]

Let's put it in 1.6, just in case any regressions crop up.

[jasmussen]

👍👍

[jasmussen]

1.5 is released, which means this one can go in!