[Gutenberg] Unsupported block fallback by marecar3 · Pull Request #11919 · wordpress-mobile/WordPress-Android

marecar3 · 2020-05-14T15:49:00Z

Proof of concept Unsupported block fallback on native side.
This opens a web view with a new-post editor, and insert the required block via "User Content Javascript" (JS code inserted to the web view).

We extract the final block content in the same way.

To clean up the canvas from unwanted UI elements we inject CSS that hides those elements.

gutenberg-mobile side PR: wordpress-mobile/gutenberg-mobile#2063

PR submission checklist:

I have considered adding unit tests where possible.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

# Conflicts: # libs/gutenberg-mobile

peril-wordpress-mobile · 2020-05-14T15:49:05Z

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

Fix lint errors

guarani · 2020-05-18T18:43:35Z

@marecar3 the downloadable build task failed so I haven't been able to test this.

mchowning · 2020-05-18T18:47:59Z

Most likely pulling in the latest changes (with the no-jitpack updates) will get this passing CI.

# Conflicts: # libs/gutenberg-mobile

marecar3 · 2020-05-18T18:54:22Z

Most likely pulling in the latest changes (with the no-jitpack updates) will get this passing CI.

thanks @mchowning!
@guarani I have updated with the latest develop.

oguzkocer · 2020-05-18T19:00:30Z

Hi there! 14.9 is being frozen, so this PR is being bumped to 15.0. If these changes have to be shipped with 14.9, please target release/14.9 and cc me in the PR so I can cut a new beta release. Also if you can keep the release dates in mind and bump the PRs & issues you are working on before the code freeze date, we'd really appreciate it.

peril-wordpress-mobile · 2020-05-18T19:06:19Z

You can test the changes on this Pull Request by downloading the APK here.

guarani · 2020-05-18T19:24:46Z

I have updated with the latest develop.

Thanks @marecar3!

guarani · 2020-05-18T19:52:56Z

Hey @marecar3, I installed the apk and got this error upon opening the editor:

Unable to load script. Make sure you are either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.

I thought that if there was a problem with the React Native bundle, there was a UI test that would have caught that, so I'm not sure if it's an issue on my end or not.

marecar3 · 2020-05-19T11:17:21Z

Hey @marecar3, I installed the apk and got this error upon opening the editor:

Unable to load script. Make sure you are either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.

I thought that if there was a problem with the React Native bundle, there was a UI test that would have caught that, so I'm not sure if it's an issue on my end or not.

Yes you are right I am getting the same message. Maybe @hypest can help us?

guarani · 2020-05-29T18:50:32Z

@marecar3 I took the liberty of updating this to 15.1 since 15.0 is being cut soon.

cameronvoell

This is looking good so far, what a cool feature! I left a minor comment related to String constants.

I was able to use the Unsupported blocks feature first try to edit the core/social-links block from within the app and it worked great! jetpack/podcast-player worked well also.

For jetpack/markdown I saw some interesting behavior that prompted the following question:

For some content in the jetpack/markdown, the Unsupported fallback on iOS and Android shows "This block contains unexpected or invalid content" but that same block opens up fine in normal gutenberg Web, both on desktop and mobile browsers. Do we know what could account for the difference here?

This is the HTML view of the block that works on web but not in the unsupported fallback:

<!-- wp:jetpack/markdown {"source":"### This is Markdown\n*Test*"} -->
<div class="wp-block-jetpack-markdown"><h3>This is Markdown</h3>
<p><em>Test</em></p>
</div>
<!-- /wp:jetpack/markdown -->

This is what shows if I press Resolve:

cameronvoell · 2020-06-03T00:43:21Z

...r/WordPressEditor/src/main/java/org/wordpress/android/editor/WPGutenbergWebViewActivity.java

+    public static final String ARG_BLOCK_CONTENT = "block_content";
+
+    public static final String RESULT_SAVED_CONTENT = "saved_content";
+    public static final String RESULT_BLOCK_ID = "block_id";


This is a little confusing that ARG_BLOCK_ID and RESULT_BLOCK_ID have the same value. Probably should be different to ensure that we use the right one in the right place, or we should just reuse ARG_* strings and remove the RESULT_* strings. See comment below.

Agree. Fixed (we are now using only one type of param)

cameronvoell · 2020-06-03T00:43:33Z

...r/WordPressEditor/src/main/java/org/wordpress/android/editor/WPGutenbergWebViewActivity.java

+    protected void saveContent(String content) {
+        Intent savedContentIntent = new Intent();
+        String blockId = getIntent().getExtras().getString(ARG_BLOCK_ID);
+        savedContentIntent.putExtra(ARG_BLOCK_ID, blockId);


This is a little confusing, I think in GutenbergEditorFragment you extract this value using RESULT_BLOCK_ID (L473 of GutenbergEditorFragment) and the only reason it works is because it has the same value as ARG_BLOCK_ID.

Agree. Fixed (we are now using only one type of param)

etoledom · 2020-06-03T09:37:41Z

For some content in the jetpack/markdown, the Unsupported fallback on iOS and Android shows "This block contains unexpected or invalid content"

Great catch @cameronvoell !

What is happening is that the \n from {"source":"### This is Markdown\n*Test*"} is being transformed to an actual new line, breaking this property.

I'm not sure why is this happening, on iOS we are escaping it in the html string we pass to JS (like \\n) but on the JS side is received with *Test*} written on a new line.

Clearly it's happening on both platforms, so the solution might be on the Block insertion script (somehow). Will give it a try!

etoledom · 2020-06-03T21:32:36Z

For some content in the jetpack/markdown, the Unsupported fallback on iOS and Android shows "This block contains unexpected or invalid content"

So, I haven’t been able to find a good solution for this, but I can confirm that the problem is what I mentioned previously.

The only thing that worked was to replace instances of \n with \\\n on the block html on native side before sending it to JS.

Of course this looks quite ugly and it might break blocks with new lines on its content.

I’m open to suggestions.

cameronvoell

Thanks for the changes @marecar3, the changes in the PR look good. We may need some coordination with this PR which seems to be blocking us building with latest gutenberg-mobile develop branch #12041. But otherwise these changes are good to go.

marecar3 · 2020-06-08T14:17:35Z

Thanks for the changes @marecar3, the changes in the PR look good. We may need some coordination with this PR which seems to be blocking us building with latest gutenberg-mobile develop branch #12041. But otherwise these changes are good to go.

Thanks @cameronvoell 🙇

guarani · 2020-06-18T13:30:09Z

The only thing that worked was to replace instances of \n with \\n on the block html on native side before sending it to JS.

That's true—what wasn't immediately obvious to me is that the content in the JSON object's source had to match the content in the <p> tag, otherwise I'd still get the "This block contains unexpected or invalid content" error. So I had to add one backslash inside the JSON and two more inside the <p> tags.

For future reference here's an example of what worked for me:

<!-- wp:jetpack/markdown {\"source\":\"Hello\\\nWorld\"} -->\n<div class=\"wp-block-jetpack-markdown\"><p>Hello\\\nWorld</p>\n</div>\n<!-- /wp:jetpack/markdown -->

Like @etoledom said above, this isn't a good solution. I spent half a day yesterday digging into this but didn't make much progress. I understand that JSON requires new line characters, \n, to be escaped, resulting in \\n.
What I'm not sure about is whether the invalid content error we're seeing is only because of the newline, or if it also has something to do with the difference between what's in the JSON:

Hello\\nWorld

and what's in the <p> tags:

Hello\nWorld

It appears these have to be exactly the same string for the invalid content message to not appear.

marecar3 added 7 commits April 16, 2020 10:42

update gb mobile reference

d0518be

Merge branch 'develop' into gutenberg/unsupported-block-fallback

b22f714

# Conflicts: # libs/gutenberg-mobile

Add js/css/json files

f126306

Add GutenbergWebViewActivity

fecbaf1

Implement first working version of unsupported block editor

70b1e5a

Update gb-mobile reference

63c0979

Merge branch 'develop' into gutenberg/unsupported-block-fallback

7def2b5

marecar3 added the Gutenberg Editing and display of Gutenberg blocks. label May 14, 2020

marecar3 requested review from guarani and mchowning May 14, 2020 15:49

etoledom mentioned this pull request May 14, 2020

Unsupported block fallback wordpress-mobile/gutenberg-mobile#2063

Merged

marecar3 added this to the 14.9 milestone May 15, 2020

marecar3 added 4 commits May 15, 2020 16:28

Code refactor

7a014f0

Fix lint errors

Merge branch 'develop' into gutenberg/unsupported-block-fallback

ded951b

Update gb-mobile reference

c41e2df

fixed refression

ec55aa4

Merge branch 'develop' into gutenberg/unsupported-block-fallback

ffe3f7f

# Conflicts: # libs/gutenberg-mobile

oguzkocer modified the milestones: 14.9, 15.0 May 18, 2020

marecar3 added 2 commits May 19, 2020 12:14

Fix lint error

c8ae5ac

Merge branch 'develop' into gutenberg/unsupported-block-fallback

4e4aa92

marecar3 added 10 commits May 27, 2020 21:09

Merge branch 'develop' into gutenberg/unsupported-block-fallback

1b08d12

Remeove unused resources

b692cc2

Merge branch 'develop' into gutenberg/unsupported-block-fallback

1d198a3

Revert Project.xml file changes

0b7eb2e

Remove extra empty lines

fd15165

Update gb-mobile reference

eb4f19d

Update gb-mobile reference

e6f76a0

remove rn-get-random-values from deps

04497d3

Fix problem with loading wpcom private site

12f7c99

Fix lint error.

e963809

guarani modified the milestones: 15.0, 15.1 May 29, 2020

cameronvoell reviewed Jun 3, 2020

View reviewed changes

marecar3 added 2 commits June 3, 2020 10:50

Update gb-mobile reference

c2631aa

Merge branch 'develop' into gutenberg/unsupported-block-fallback

ba55e8e

marecar3 added 4 commits June 4, 2020 12:50

Merge branch 'develop' into gutenberg/unsupported-block-fallback

1d3af4c

Use same param name for block id and block name

e4e0160

Update gb-mobile reference

7dc517e

Merge branch 'develop' into gutenberg/unsupported-block-fallback

bf4e56a

cameronvoell approved these changes Jun 7, 2020

View reviewed changes

Merge branch 'develop' into gutenberg/unsupported-block-fallback

0fbc763

marecar3 merged commit 8cba1de into develop Jun 8, 2020

marecar3 deleted the gutenberg/unsupported-block-fallback branch June 8, 2020 14:22

guarani mentioned this pull request Jun 8, 2020

Project issue: Unsupported blocks fallback mechanism wordpress-mobile/gutenberg-mobile#2358

Open

26 tasks

etoledom mentioned this pull request Jun 29, 2020

[RNMobile] Unsupported Block Fallback: Fix multiline Markdown problems WordPress/gutenberg#23556

Merged

6 tasks

Conversation

marecar3 commented May 14, 2020

Uh oh!

peril-wordpress-mobile bot commented May 14, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

guarani commented May 18, 2020

Uh oh!

mchowning commented May 18, 2020

Uh oh!

marecar3 commented May 18, 2020

Uh oh!

oguzkocer commented May 18, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

peril-wordpress-mobile bot commented May 18, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

guarani commented May 18, 2020

Uh oh!

guarani commented May 18, 2020

Uh oh!

marecar3 commented May 19, 2020

Uh oh!

guarani commented May 29, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cameronvoell left a comment

Choose a reason for hiding this comment

Uh oh!

cameronvoell Jun 3, 2020

Choose a reason for hiding this comment

Uh oh!

marecar3 Jun 4, 2020

Choose a reason for hiding this comment

Uh oh!

cameronvoell Jun 3, 2020

Choose a reason for hiding this comment

Uh oh!

marecar3 Jun 4, 2020

Choose a reason for hiding this comment

Uh oh!

etoledom commented Jun 3, 2020

Uh oh!

etoledom commented Jun 3, 2020

Uh oh!

cameronvoell left a comment

Choose a reason for hiding this comment

Uh oh!

marecar3 commented Jun 8, 2020

Uh oh!

guarani commented Jun 18, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

peril-wordpress-mobile bot commented May 14, 2020 •

edited

Loading

oguzkocer commented May 18, 2020 •

edited

Loading

peril-wordpress-mobile bot commented May 18, 2020 •

edited

Loading

guarani commented May 29, 2020 •

edited

Loading