Block Toolbar: Do not hide the block toolbar on mobile

[youknowriad]

closes #5346

When introducing the viewport module, the block toolbar has been hidden in mobile. I don't know the exact reasons for this but I think we still want it in mobile. So I'm bringing it back here.

Testing instructions

• select a block in mobile
• The block toolbar should appear
• Try in both docker and undocker toolbar.

[jasmussen]

You are THE BEEEST! This fixes it for me. 👍👍👍👍

[aduth]

Related: #5206

[aduth]

So what was intended by ! isMobile( state ) in this condition (removed as part of #5206)?

gutenberg/edit-post/store/selectors.js

Lines 136 to 145 in 9162e4c

	/**
	* Returns whether the toolbar should be fixed or not.
	*
	* @param {Object} state Global application state.
	*
	* @return {boolean} True if toolbar is fixed.
	*/
	export function hasFixedToolbar( state ) {
	return ! isMobile( state ) && isFeatureActive( state, 'fixedToolbar' );
	}

[aduth]

So it appears after these changes, the fixed toolbar appears in mobile. But prior to #5206, even if the "Fixed toolbar" setting was somehow selected (it's hidden on smaller displays), it would still show the contextual toolbar.

[aduth]

With "Fix Toolbar to Top":

9162e4c (before #5206)	fix/mobile-toolbar

[aduth]

Also, the fixed toolbar section lingers when no block is selected:

[aduth]

I think the issue was a failure to preserve the original condition here.

Previously:

! isMobile( state ) && isFeatureActive( state, 'fixedToolbar' )

This should have translated to:

! isLargeViewport || ! hasFixedToolbar

https://en.wikipedia.org/wiki/De_Morgan%27s_laws

[youknowriad]

I tried this condition and it's showing two toolbars on small viewports at the same time.

[aduth]

I tried this condition and it's showing two toolbars on small viewports at the same time.

Only because of the other changes in HeaderToolbar on this branch.

Apply this diff to master, and it behaves as I'd expect:

diff --git a/edit-post/components/visual-editor/index.js b/edit-post/components/visual-editor/index.js
index 1d621863a..a439953e3 100644
--- a/edit-post/components/visual-editor/index.js
+++ b/edit-post/components/visual-editor/index.js
@@ -29,7 +29,7 @@ function VisualEditor( { hasFixedToolbar, isLargeViewport } ) {
 			<WritingFlow>
 				<PostTitle />
 				<BlockList
-					showContextualToolbar={ isLargeViewport && ! hasFixedToolbar }
+					showContextualToolbar={ ! isLargeViewport || ! hasFixedToolbar }
 					renderBlockMenu={ ( { children, onClose } ) => (
 						<Fragment>
 							<BlockInspectorButton onClick={ onClose } />

[youknowriad]

Gotcha, thanks

[youknowriad]

I need some clarification on the desired behavior here. For me, the current one in this PR is good but is this what we want? cc @jasmussen

[youknowriad]

Ok so I guess the idea is to avoid the fixed toolbar entirely on mobile. It should be good now.

[aduth]

👍