Skip to content

[RNMobile] Move some Unsupported Block Editor injection code to gutenberg-mobile repo#24658

Merged
etoledom merged 29 commits intomasterfrom
rnmobile/move-some-ube-injection-code-to-gutenberg-mobile-repo
Sep 14, 2020
Merged

[RNMobile] Move some Unsupported Block Editor injection code to gutenberg-mobile repo#24658
etoledom merged 29 commits intomasterfrom
rnmobile/move-some-ube-injection-code-to-gutenberg-mobile-repo

Conversation

@etoledom
Copy link
Copy Markdown
Contributor

@etoledom etoledom commented Aug 19, 2020

gb-mobile PR: wordpress-mobile/gutenberg-mobile#2561
WPiOS side PR: wordpress-mobile/WordPress-iOS#14683
WPAndroid side PR: wordpress-mobile/WordPress-Android#12795

Description

This PR removes some references to window.wp.data.dispatch( 'automattic/nux' ); and "automattic/nux": and implements a mechanism to insert custom JS to be injected from the client.

To achieve this, some changes were needed on when the JS code is injected:

  • There's a new function gutenbergObserver which will check when gutenberg is ready for the post content to be inserted. It will send a gutenbergReady message to the native side.

    • This removes the need to check for requests to "/wp-admin/post-new.php" in order to insert the content, making the whole system more robust.
  • When the gutenbergReady call is received we:

    • Run the "external JS sources" (from WP Mobile Apps).
    • Run the autosave prevention script.
    • Run the insert block script.

How has this been tested?

To test (On both WPiOS and WPAndroid apps):

  • Create a new wpcom account with a new simple site.
  • On the newly created site, create a new gutenberg post.
  • On HTML mode, paste this snippet (or any other unsupported block HTML code): <!-- wp:file /-->
  • Go back to visual mode.
  • Open the unsupported block with the Unsupported Block Editor.
  • Check that Gutenberg editor loads without the NUX UI covering it.

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.

It was also needed to modify the JS injection code to make the external JS code strategy work.
@etoledom etoledom added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Aug 19, 2020
@etoledom etoledom self-assigned this Aug 19, 2020
@etoledom etoledom changed the title Rnmobile/move some ube injection code to gutenberg mobile repo [RNMobile] Move some Unsupported Block Editor injection code to gutenberg-mobile repo Aug 19, 2020
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Aug 19, 2020

Size Change: 0 B

Total Size: 1.2 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.41 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 8.53 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 128 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.68 kB 0 B
build/block-library/editor.css 8.68 kB 0 B
build/block-library/index.js 139 kB 0 B
build/block-library/style-rtl.css 7.6 kB 0 B
build/block-library/style.css 7.59 kB 0 B
build/block-library/theme-rtl.css 754 B 0 B
build/block-library/theme.css 754 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.8 kB 0 B
build/components/index.js 202 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.67 kB 0 B
build/core-data/index.js 12.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 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 568 B 0 B
build/dom/index.js 4.47 kB 0 B
build/edit-navigation/index.js 10.7 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 305 kB 0 B
build/edit-post/style-rtl.css 6.25 kB 0 B
build/edit-post/style.css 6.23 kB 0 B
build/edit-site/index.js 19.3 kB 0 B
build/edit-site/style-rtl.css 3.14 kB 0 B
build/edit-site/style.css 3.14 kB 0 B
build/edit-widgets/index.js 12.2 kB 0 B
build/edit-widgets/style-rtl.css 2.55 kB 0 B
build/edit-widgets/style.css 2.55 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.6 kB 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 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 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 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.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 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.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@marecar3
Copy link
Copy Markdown
Contributor

Hey 👋 @etoledom
The android part of the fix is ready for testing. Feel free to mark this PR ready for review if you think that we have everything that we wanted to have? thanks.

@etoledom etoledom requested review from ceyhun and mchowning September 7, 2020 14:32
@etoledom etoledom marked this pull request as ready for review September 7, 2020 14:33
@etoledom
Copy link
Copy Markdown
Contributor Author

etoledom commented Sep 7, 2020

@guarani could you please check the iOS side, and @mchowning the Android side please? 🙏
Thanks!

@etoledom etoledom requested a review from guarani September 7, 2020 15:24
Copy link
Copy Markdown
Contributor

@guarani guarani left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested the iOS side and it's working great. I tested from the main WP for iOS app and also from the Gutenberg iOS demo app.

I left some comments, but they're not blockers.

@@ -1 +1,3 @@
window.insertBlock( `%@` );
if ( window.insertBlock && window.contentIncerted !== true ) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if ( window.insertBlock && window.contentIncerted !== true ) {
if ( window.insertBlock && window.contentInserted !== true ) {

@etoledom
Copy link
Copy Markdown
Contributor Author

Thank you so much for your review @guarani !

Copy link
Copy Markdown
Contributor

@mchowning mchowning left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 👍 Nice work @etoledom and @marecar3 ! 🎉

I left a couple of minor comments, but they're just minor things trying to help clarify the intent in a couple of spots.

String insertBlock = getFileContentFromAssets("gutenberg-web-single-block/insert-block.js").replace("%@","%s");
String blockContent = getIntent().getExtras().getString(ARG_BLOCK_CONTENT);
insertBlock = String.format(insertBlock, blockContent);
evaluateJavaScript(removeNewLines(insertBlock.replace("\\n", "\\\\n")));
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a big deal and you didn't add this line in this PR, so feel free to leave it as-is, but there's a fair bit happening on this line, and it might be helpful to either add a comment or extract out a descriptively-named variable to make it clearer why we're adding the extra escaping and then removing new lines.

…utenberg-mobile-repo

# Conflicts:
#	packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
@etoledom etoledom merged commit 6e37919 into master Sep 14, 2020
@etoledom etoledom deleted the rnmobile/move-some-ube-injection-code-to-gutenberg-mobile-repo branch September 14, 2020 06:37
@github-actions github-actions Bot added this to the Gutenberg 9.0 milestone Sep 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants