Mobile Web: Ensure that sidebar is closed on the first visit

[gziolo]

Description

Related to #17712.

Fixes #17341.
Fixes #17708.

Describe the bug

I was going to test gutenberg on a new install (via npm run env install) with the iOS simulator, and noticed this is what you see the first time you open gutenberg:

First, instead of showing the editor, the settings sidebar is initially visible, completely covering the editor.

I still need to add a proper fix, for the time being, I updated the test to catch this bug.

Steps to reproduce

1. Clear the local storage
2. Set a mobile viewport in your browser when using Desktop or use any mobile device with a smaller screen.
3. Open Add New Post page.

With the fix applied Sidebar shouldn't cover the screen, it should be closed by default.

How has this been tested?

I updated e2e tests to ensure they catch this issue in the future in 4c68cb2.
They should all pas with:
npm run test-e2e

[gziolo]

The updated e2e test fails as expected without the production code updated. See https://travis-ci.com/WordPress/gutenberg/jobs/244637978#L1025:

 ● Sidebar › should have the sidebar closed by default on mobile
    expect(received).toBeNull()
    Received: {"_client": {"_callbacks": [Map], "_connection": [Connection], "_events": [Object], "_eventsCount": 28, "_maxListeners": undefined, "_sessionId": "CF5F75128702B39AE7F47D868B9C4E7C", "_targetType": "page"}, "_context": {"_client": [CDPSession], "_contextId": 9, "_world": [DOMWorld]}, "_disposed": false, "_frameManager": {"_client": [CDPSession], "_contextIdToContext": [Map], "_events": [Object], "_eventsCount": 3, "_frames": [Map], "_isolatedWorlds": [Set], "_mainFrame": [Frame], "_maxListeners": undefined, "_networkManager": [NetworkManager], "_page": [Page], "_timeoutSettings": [TimeoutSettings]}, "_page": {"_accessibility": [Accessibility], "_client": [CDPSession], "_closed": false, "_coverage": [Coverage], "_emulationManager": [EmulationManager], "_events": [Object], "_eventsCount": 5, "_fileChooserInterceptionIsDisabled": false, "_fileChooserInterceptors": [Set], "_frameManager": [FrameManager], "_javascriptEnabled": true, "_keyboard": [Keyboard], "_maxListeners": undefined, "_mouse": [Mouse], "_pageBindings": [Map], "_screenshotTaskQueue": [TaskQueue], "_target": [Target], "_timeoutSettings": [TimeoutSettings], "_touchscreen": [Touchscreen], "_tracing": [Tracing], "_viewport": [Object], "_workers": [Map]}, "_remoteObject": {"className": "HTMLDivElement", "description": "div.edit-post-sidebar", "objectId": "{\"injectedScriptId\":9,\"id\":3}", "subtype": "node", "type": "object"}}
      51 | 		await createNewPost();
      52 | 		const sidebar = await page.$( SIDEBAR_SELECTOR );
    > 53 | 		expect( sidebar ).toBeNull();
         | 		                  ^
      54 | 	} );
      55 | 
      56 | 	it( 'should close the sidebar when resizing from desktop to mobile', async () => {
      at Object.toBeNull (specs/sidebar.test.js:53:21)

[gziolo]

e78d12d should resolve the issue. @nerrad - I figured out this is also related to the changes applied in #17712 so I would appreciate your review.

We should ensure sidebar plugins do not get auto-closed when opened on smaller screens. I tested it myself and it works fine. We also have e2e tests that cover that.

[youknowriad]

This fixes the issue for me.

[nerrad]

Ack! Sorry for not catching this in my review of #17712 😓