Make media-text respect stacking setting on native

[koke]

Description

After #14364, the Media & Text block is stacked by default on mobile. The native implementation was wrongly assuming that mobile == native and stacking even on larger screens. Besides, it would still set the width for each column to 50%, so it would look wrong.

gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#1400

How has this been tested?

Tested on WordPress for iOS and web.

• Media should appear above text at full width on small screens.
• Media should appear next to text (as usual) in larger screens.

Screenshots

Native:

Web:

Types of changes

Beyond the fix specific to Media & Text, this completes the native implementation of @wordpress/viewport.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[koke]

Testing on WPiOS:

1. Insert a media-text block
2. Tap 'Add image or video'
3. Choose any of the options (device or media library)
4. Cancel the picker without selecting an image
5. Get a red screen:

undefined is not an object (evaluating 'media.id')

<unknown>
    index.native.js:88:39
invokeCallbackAndReturnFlushedQueue
    [native code]:0

[mkevins]

I tested this on a Pixel 3a with Android 10 (portrait and landscape), as well as in a local web install (normal mode, and emulating mobile, portrait + landscape via Chrome Devtools), and everything works as described. 🎉

Screenshots:

	Portrait	Landscape
Image on left
Image on right

The issue described here: #17682 (comment) seems to have been resolved here: ace01c9

Very nice work @koke , and thanks @geriux for adding the null-check. 👍

[mkevins]

It's very nice seeing the dimension event listener working well on mobile in this PR! 😃

Nice work @koke 🎉