[RNMobile] Prepare mobile columns for different units

[lukewalczak]

Description

After merging web feature related to introducing UnitControl in Columns block, we observed the crash when saving the post with columns block. That PR is a workaround to avoid the crash:

• mobile columns don't have any visual effect when changing their width, they are stacked in portrait mode or max 3 columns can be placed in a row in landscape mode (>480px)
• on mobile there is a possibility to change column width, but currently only in percentages

Adjust mobile columns for upcoming web feature.

How has this been tested?

• Open mobile app eg wp-ios
• Open draft post
• Switch to HTML mode
• Paste the code

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:image {"id":2392,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://callstackhappiryuhome.files.wordpress.com/2020/10/pexels-photo-4595375.jpg?w=1024" alt="" class="wp-image-2392"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"500em"} -->
<div class="wp-block-column" style="flex-basis:500em"><!-- wp:paragraph -->
<p>Lorem ipsum</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

• Update / Save the post
• Switch to Visual Mode
• Expect to see two stacked column, first with picture, second with paragraph
• Switch again to HTML mode
• Replace % in first columns in favour of rem (in width and flex-basis as well)
• Update post
• Expect to see two exactly the same stacked column, first with picture, second with paragraph
• Open post preview
• Expect content is displayed properly
• Close preview
• Open column settings and change width using slider
• Save post
• Expect app mustn't crash

Screenshots

Types of changes

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.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: 0 B

Total Size: 1.19 MB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.54 kB	0 B
build/api-fetch/index.js	3.35 kB	0 B
build/autop/index.js	2.72 kB	0 B
build/blob/index.js	668 B	0 B
build/block-directory/index.js	8.6 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	130 kB	0 B
build/block-editor/style-rtl.css	10.9 kB	0 B
build/block-editor/style.css	10.9 kB	0 B
build/block-library/editor-rtl.css	8.65 kB	0 B
build/block-library/editor.css	8.65 kB	0 B
build/block-library/index.js	143 kB	0 B
build/block-library/style-rtl.css	7.71 kB	0 B
build/block-library/style.css	7.71 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	741 B	0 B
build/block-serialization-default-parser/index.js	1.78 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.6 kB	0 B
build/components/index.js	169 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	9.63 kB	0 B
build/core-data/index.js	12.1 kB	0 B
build/data-controls/index.js	684 B	0 B
build/data/index.js	8.63 kB	0 B
build/date/index.js	31.9 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	569 B	0 B
build/dom/index.js	4.43 kB	0 B
build/edit-navigation/index.js	10.6 kB	0 B
build/edit-navigation/style-rtl.css	868 B	0 B
build/edit-navigation/style.css	871 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.3 kB	0 B
build/edit-post/style.css	6.29 kB	0 B
build/edit-site/index.js	21.3 kB	0 B
build/edit-site/style-rtl.css	3.86 kB	0 B
build/edit-site/style.css	3.86 kB	0 B
build/edit-widgets/index.js	21.3 kB	0 B
build/edit-widgets/style-rtl.css	2.97 kB	0 B
build/edit-widgets/style.css	2.97 kB	0 B
build/editor/editor-styles-rtl.css	480 B	0 B
build/editor/editor-styles.css	482 B	0 B
build/editor/index.js	42.5 kB	0 B
build/editor/style-rtl.css	3.85 kB	0 B
build/editor/style.css	3.84 kB	0 B
build/element/index.js	4.45 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.49 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	1.74 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.54 kB	0 B
build/is-shallow-equal/index.js	709 B	0 B
build/keyboard-shortcuts/index.js	2.39 kB	0 B
build/keycodes/index.js	1.85 kB	0 B
build/list-reusable-blocks/index.js	3.02 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.12 kB	0 B
build/notices/index.js	1.69 kB	0 B
build/nux/index.js	3.27 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.44 kB	0 B
build/primitives/index.js	1.34 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/reusable-blocks/index.js	3.04 kB	0 B
build/rich-text/index.js	13 kB	0 B
build/server-side-render/index.js	2.6 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.24 kB	0 B
build/url/index.js	4.07 kB	0 B
build/viewport/index.js	1.75 kB	0 B
build/warning/index.js	1.13 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[ceyhun]

I just tested with WPiOS on the release branch with iOS 13, iPhone 11 simulator and LGTM!

But I'm not familiar with the code, so I would appreciate if someone else could look into the code.

[Tug]

Code looks good and works as advertised 👍 .

Btw: I didn't know switching from visual to html was broken on the demo app! Opening a ticket.