Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile][Monorepo] Make the native app customizable by a parent app #21332

Conversation

Tug
Copy link
Contributor

@Tug Tug commented Apr 1, 2020

Description

This PR does multiple changes which allows external native apps to reuse and customize the native block editor.
The main repo which customizes WordPress apps for Android and iOS is still gutenberg-mobile.
Here is the related PR for this integration: wordpress-mobile/gutenberg-mobile#2172

List of changes:

  • Create a render method in react platform to mimick the web API. Update the code in edit-post to use this new method
  • Run 2 hooks in the render method to customize root component props and run pre render initialization code
  • Fix packages/react-native-bridge/android/build.gradle to make WPAndroid build (switch from yarn to npm, update paths...)
  • Commit hermes android library into packages/react-native-bridge/android/vendor/hermes-engine so we can build WPAndroid using jitpack and a jsbundle without running npm install
  • Fix e2e tests in gutenberg-mobile

How has this been tested?

See Gutenberg mobile PR

Types of changes

React native 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.

@Tug Tug added Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Type] Experimental Experimental feature or API. labels Apr 1, 2020
@Tug Tug requested review from cameronvoell and ceyhun April 1, 2020 18:20
@Tug Tug self-assigned this Apr 1, 2020
@Tug Tug changed the base branch from master to feat/import-gutenberg-mobile-no-squash April 1, 2020 18:20
@Tug Tug force-pushed the rnmobile/experiment-monorepo-new-setup branch from 1e09ea8 to ef169ed Compare April 1, 2020 18:22
@github-actions
Copy link

github-actions bot commented Apr 1, 2020

Size Change: 0 B

Total Size: 828 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.08 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.59 kB 0 B
build/block-directory/style-rtl.css 764 B 0 B
build/block-directory/style.css 764 B 0 B
build/block-editor/index.js 104 kB 0 B
build/block-editor/style-rtl.css 10.6 kB 0 B
build/block-editor/style.css 10.6 kB 0 B
build/block-library/editor-rtl.css 7.15 kB 0 B
build/block-library/editor.css 7.15 kB 0 B
build/block-library/index.js 115 kB 0 B
build/block-library/style-rtl.css 7.38 kB 0 B
build/block-library/style.css 7.38 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 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 48.1 kB 0 B
build/components/index.js 181 kB 0 B
build/components/style-rtl.css 17 kB 0 B
build/components/style.css 16.9 kB 0 B
build/compose/index.js 6.66 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.42 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 5.59 kB 0 B
build/edit-navigation/style-rtl.css 618 B 0 B
build/edit-navigation/style.css 617 B 0 B
build/edit-post/index.js 28 kB 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/index.js 12.1 kB 0 B
build/edit-site/style-rtl.css 5.22 kB 0 B
build/edit-site/style.css 5.22 kB 0 B
build/edit-widgets/index.js 8.37 kB 0 B
build/edit-widgets/style-rtl.css 4.69 kB 0 B
build/edit-widgets/style.css 4.69 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.3 kB 0 B
build/editor/style-rtl.css 5.07 kB 0 B
build/editor/style.css 5.08 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/index.js 7.63 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 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.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 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 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 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 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@Tug Tug force-pushed the rnmobile/experiment-monorepo-new-setup branch from 4c2b6b2 to 2541642 Compare April 24, 2020 18:23
@Tug Tug added this to the Future milestone May 15, 2020
@Tug Tug force-pushed the rnmobile/experiment-monorepo-new-setup branch from 57e7ad6 to 2cfee15 Compare May 15, 2020 16:02
@Tug Tug changed the title [RNMobile][Monorepo] Experiment a new way to setup the native app that is customizable [RNMobile][Monorepo] Make the native app customizable by a parent app May 20, 2020
@Tug Tug requested review from mapk and youknowriad as code owners May 27, 2020 15:22
@ceyhun ceyhun requested a review from gziolo June 15, 2020 17:41
import { cloneElement } from './react';

const render = ( element, id ) =>
AppRegistry.registerComponent( id, () => ( propsFromParent ) => {
Copy link
Member

@gziolo gziolo Jun 17, 2020

Choose a reason for hiding this comment

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

Out of curiosity, why not to execute all this logic inside initializeEditor in the @wordpress/edit-post package?

Overriding React methods and adding WP hooks might have some performance implications but I guess it’s called only once.

Copy link
Member

Choose a reason for hiding this comment

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

I think it's to be able to customize the editor from an outside package. In this case a repo that's importing Gutenberg as a submodule. Correct me if I'm wrong @Tug?

Copy link
Contributor Author

@Tug Tug Jun 17, 2020

Choose a reason for hiding this comment

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

No we could totally have this logic in @wordpress/edit-post (or in @wordpress/react-native-editor as it was the case in the monorepo branch before this PR).

The idea here is simply to get closer to having @wordpress/edit-post work as cross-platform package. If you look at edit-post/src/index.native.js
you'll see that the init code is much closer to the web one now.

Overriding React methods and adding WP hooks might have some performance implications but I guess it’s called only once.

We're not overriding anything though, the render function wasn't defined for native prior to this. And yes it's only rendered once on load.

Copy link
Member

Choose a reason for hiding this comment

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

It probably doesn't matter as much then now, but I guess initializeEditor would be the best place to run all those side effects.

@gziolo
Copy link
Member

gziolo commented Jun 17, 2020

@ceyhun and @Tug – I don't see any blocker from the web side of things. It's great to see progress on integration 👍

Copy link
Member

@cameronvoell cameronvoell left a comment

Choose a reason for hiding this comment

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

Ready to merge, using the usual “Create a merge commit” option for preserving history on our feat/import-gutenberg-mobile-no-squash branch

@hypest
Copy link
Contributor

hypest commented Jun 17, 2020

Will now merge with "Use merge commit" strategy and revert back to "squash/rebase strategy" right after.

@hypest hypest merged commit c40c908 into feat/import-gutenberg-mobile-no-squash Jun 17, 2020
@hypest hypest deleted the rnmobile/experiment-monorepo-new-setup branch June 17, 2020 17:15
@Tug Tug mentioned this pull request Jun 23, 2020
6 tasks
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) [Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants