Mobile editor redesign

[DanReyLop]

This is the PR with the whole mobile editor redesign combined.

Issue: #4266

PR 1: #4456
PR 2: #4686

I've fixed all the bugs that @alisterscott discovered in #4686 , except for "Keyboard cursor keeps showing when switching to the metadata tab" because I couldn't reproduce it in Android and I don't have an iPhone at hand.

Calypso Live branch → https://calypso.live/posts?branch=update/4266-mobile-editor-redesign-2

cc/ @mtias @alisterscott @folletto @aduth

[folletto]

Tested on Chrome, Safari, Firefox, Edge, IE11: 👍

I found two tiny visual issues:

1. The edit view misses the top 1px border.
2. The .editor__header would benefit from a padding-top: 8px. :)

On Edge I got flashes of white: the UI went white until scrolled. I couldn't replicate reliably tho, and on scroll it went back to normal.

[DanReyLop]

Fixed :)

[alisterscott]

I can't reproduce any of the previous bugs and couldn't find any more issues except for a warning in the console when running locally warning.js:44 Warning:valueprop oninputshould not be null. Consider using the empty string to clear the component orundefinedfor uncontrolled components.
So, 👍 LGTM

[folletto]

All good design wise: 👍

[aduth]

Always include extra spaces around elements and arguments:

https://github.com/Automattic/wp-calypso/blob/master/docs/coding-guidelines/javascript.md#arrays-and-function-calls

[aduth]

Looking good! Needs rebase.

[DanReyLop]

I've fixed all the comments.

The rebase with master was a MAYOR pain in the ***, mainly because of this PR: #5475

That PR assumes that the Publish button will always be in the EditorGroundControl. So it will look quite bad in mobile (the notice will point to the Choose date button instead, and the Publish button in the nav bar will be disabled for no apparent reason). I think we should fix it before merging, but I couldn't get Calypso to display that notice locally. Is there any way to get Calypso to require your account to be verified? I tried creating a new account and still didn't see the notice locally, and I could publish without verifying the e-mail.

[aduth]

cc @coreh might want to take a look or have some feedback re: reconciling with email verification notice

[DanReyLop]

I've rebased and solved the merge conflicts. This PR is only missing a "good to go". The only outstanding issue is: In mobile layouts, the email verification notice is not visible anywhere, so that behaviour in mobile is the same as it was before #5475. I think we can all agree that it can be solved in a separate issue/PR.

[folletto]

I agree to move that to a separate PR. :)

[hoverduck]

I ran the e2e tests across this PR again, and they worked perfectly, but I noticed a visual issue at desktop width:

When an accordion drawer is opened, the sidebar header gets squished

[alisterscott]

This PR is only missing a "good to go"

Good to go 🚢

I've raised @hoverduck's issue separately as #10168 as I don't believe this should hold this back

[alisterscott]

This does make #8437 a little more prominent but that's an existing bug and not introduced in this PR so this PR shouldn't be held up due to that IMO

[DanReyLop]

I created #10212 to fix the email verification notice on mobile screens.