[Mobile] Native Bridge: Fix insert blocks not handling raw string properly in unsupported block editor

[renatoagds]

What?

Fixing insertBlocks at the react-native-bridge call not dealing with strings that contain complex chars (like unicode).

Why?

Attributes could contain HTML code, which is serialized with special chars.

Example:

<!-- wp:videopress/video {"title":"174023215_5408417369200486_4341486698209593172_n-mp4","description":"","id":29,"guid":"YzEZpv1G","src":"https://videopress.com/v/YzEZpv1G","cacheHtml":"\u003ciframe title=\u0022VideoPress Video Player\u0022 aria-label='VideoPress Video Player' width='600' height='750' src='https://videopress.com/embed/YzEZpv1G?cover=1\u0026amp;preloadContent=metadata\u0026amp;useAverageColor=1\u0026amp;hd=1' frameborder='0' allowfullscreen data-resize-to-parent=\u0022true\u0022 allow='clipboard-write'\u003e\u003c/iframe\u003e\u003cscript src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1658470809'\u003e\u003c/script\u003e","videoRatio":125,"privacySetting":2,"allowDownload":false,"rating":"G","isPrivate":false,"className":"\\\u0022wp-block-videopress-video"} -->
  <figure class="wp-block-videopress-video wp-block-jetpack-videopress jetpack-videopress-player \&quot;wp-block-videopress-video">
    <div class="jetpack-videopress-player__wrapper">
https://videopress.com/v/YzEZpv1G?resizeToParent=true&amp;cover=true&amp;preloadContent=metadata&amp;useAverageColor=true
    </div>
  </figure>
<!-- /wp:videopress/video -->

In the current way, it parses the \u and other chars, which breaks the block.

How?

Inserting String.raw on insertBlocks call.

Testing Instructions

1. Run WordPress Mobile (iOs or Android) with gutenberg-mobile running locally.
2. Open a post that contains an unsupported block that has complex attributes (new VideoPress block for example).
3. Click on ? and try to edit it on the web editor.
4. It should work.

Screenshots or screencast

Before	After
CleanShot.2023-01-26.at.18.49.38.mp4	CleanShot.2023-01-26.at.18.40.55.mp4

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @renatoagds! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[fluiddot]

Thank @renatoagds for fixing this issue 🙇 !

I tested this change in physical devices and the simulator/emulator and I'm still experiencing the issue:

• iPhone 11 (iOS 15.4.1) ❌
• Samsung Galaxy S20 FE 5G (Android 13) ❌
• iPhone 14 - Simulator ✅ (Not sure why only in the iOS simulator works 🤔 )
• Pixel 3 API 28 emulator ❌

I'll keep investigating in case I can provide further information that helps us to address it. In the meantime, @renatoagds did you test this on a physical device? Thanks!

[fluiddot]

Following my previous comment, I noticed that I'm experiencing a different error. In my case, it's not an invalid markup format but the block missing.

Error extracted from Before video capture:

The error I'm experiencing:

@renatoagds what type of site you used for test the changes?

[renatoagds]

@fluiddot I tested in an Atomic site with VideoPress plugin installed. If you're trying on a simple site, you must be proxied since this block is still under the beta flag. Are you trying on simple?

[renatoagds]

@fluiddot I sent an invitation for you to test blog I'm using (atomicv6).

[fluiddot]

Ah, ok, thanks @renatoagds 🙇. I was testing the block now on different sites and noticed the difference. I'll re-test the PR as soon as possible 👍 .

[fluiddot]

Now using the Atomic site you provided @renatoagds I managed to confirm the fix works as expected, thanks! The PR LGTM 🎊 !

Tested on Samsung Galaxy S20 FE 5G and iPhone 11 (iOS 15.4.1).