Introduce the gutenberg mobile editor #8701
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -84,3 +84,6 @@ fastlane/screenshots_orig | |
| # Bundler | ||
| /.bundle | ||
| /vendor | ||
|
|
||
| # Gutenberg | ||
| WordPress/src/main/assets/index.android.bundle | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| [submodule "libs/gutenberg-mobile"] | ||
| path = libs/gutenberg-mobile | ||
| url = ../../wordpress-mobile/gutenberg-mobile.git |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| // import the `submoduleGitHash()` function | ||
| apply from: 'https://gist.githubusercontent.com/hypest/e06f6097065728b6db7b7c462f8fef1a/raw/38557f55d0a3be9605c82b1df9ced4c846fd3aea/submoduleGitHash.gradle' | ||
|
|
||
| // define the filename to use for the JS bundle. This will "bubble" up to the Java code via a BuildConfig constant | ||
| def gutenbergMobileJsBundleFilename = 'index.android.bundle' | ||
|
|
||
| task downloadJSBundle { | ||
| doLast { | ||
| def assetsFolderName = "${project.projectDir}/src/main/assets" | ||
| File assetsFolder = new File(assetsFolderName) | ||
| if (! assetsFolder.exists()){ | ||
| assetsFolder.mkdirs(); | ||
| } | ||
|
|
||
| def targetFile = new File("${assetsFolderName}/${gutenbergMobileJsBundleFilename}") | ||
| def hash = submoduleGitHash("${project.projectDir}/../", 'libs/gutenberg-mobile') | ||
| def url = new URL("https://s3-us-west-1.amazonaws.com/gutenberg-mobile-js-bundle/wordpress-mobile/gutenberg-mobile/${hash}/android/App.js") | ||
|
|
||
| println "Downloading JS bundle from ${url}" | ||
| url.withInputStream{ i -> targetFile.withOutputStream{ it << i }} | ||
| } | ||
| } | ||
|
|
||
| if (!rootProject.ext.buildGutenbergFromSource) { | ||
| // Download the JS bundle if we're not building from source. | ||
| // Usually happens when compiling this project as standalone or via jitpack | ||
| preBuild.dependsOn(downloadJSBundle) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -68,6 +68,7 @@ | |
| import org.wordpress.android.editor.EditorWebViewAbstract.ErrorListener; | ||
| import org.wordpress.android.editor.EditorWebViewCompatibility; | ||
| import org.wordpress.android.editor.EditorWebViewCompatibility.ReflectionException; | ||
| import org.wordpress.android.editor.GutenbergEditorFragment; | ||
| import org.wordpress.android.editor.ImageSettingsDialogFragment; | ||
| import org.wordpress.android.editor.LegacyEditorFragment; | ||
| import org.wordpress.android.editor.MediaToolbarAction; | ||
|
|
@@ -248,6 +249,7 @@ enum AddExistingdMediaSource { | |
|
|
||
| private Handler mHandler; | ||
| private int mDebounceCounter = 0; | ||
| private boolean mShowGutenbergEditor; | ||
| private boolean mShowAztecEditor; | ||
| private boolean mShowNewEditor; | ||
| private boolean mMediaInsertedOnCreation; | ||
|
|
@@ -319,6 +321,10 @@ enum AddExistingdMediaSource { | |
| // for keeping the media uri while asking for permissions | ||
| private ArrayList<Uri> mDroppedMediaUris; | ||
|
|
||
| private boolean isModernEditor() { | ||
| return mShowNewEditor || mShowAztecEditor || mShowGutenbergEditor; | ||
| } | ||
|
|
||
| private Runnable mFetchMediaRunnable = new Runnable() { | ||
| @Override | ||
| public void run() { | ||
|
|
@@ -353,6 +359,8 @@ protected void onCreate(Bundle savedInstanceState) { | |
| PreferenceManager.setDefaultValues(this, R.xml.account_settings, false); | ||
| // AppPrefs.setAztecEditorAvailable(true); | ||
| // AppPrefs.setAztecEditorEnabled(true); | ||
| mShowGutenbergEditor = false; // hardcode to disabled for now. | ||
|
There was a problem hiding this comment. It'd be great if we can introduce an Also, I realize that this is following the current pattern, but it'd be good to set these flags (or the enum) in the property declaration and preferably set it to final. If these values are not being changed, we shouldn't have to look into There was a problem hiding this comment. Makes sense, it has gotten out of hand now that there are 4 editors in place. There's already some good consensus to try to remove 2 of the for by the way. See #8611. I think I'll create a ticket to revise the flag situation to an enum and tackle it in a separate PR if that's OK. |
||
| // Manually set it to true (and the flags below to false) to force Gutenberg | ||
|
There was a problem hiding this comment. I couldn't fully understand what this comment means at the current state of the code, most likely because I don't have the context for it. If this is not actually in reference to the current code, I'd suggest either removing it or making it a If we go with the There was a problem hiding this comment. Sorry it wasn't clear, the comment is just an attempt to give instructions to someone that would like to try out Gutenberg today by manually enabling it in the code. There's already work in progress to surface a UI switch to enable/disable the block editor so, I think we could just leave it as is as it's a matter of days to land the proper code. WDYT? |
||
| mShowAztecEditor = AppPrefs.isAztecEditorEnabled(); | ||
| mShowNewEditor = AppPrefs.isVisualEditorEnabled(); | ||
|
|
||
|
|
@@ -996,7 +1004,7 @@ public void onPhotoPickerIconClicked(@NonNull PhotoPickerIcon icon) { | |
| public boolean onCreateOptionsMenu(Menu menu) { | ||
| super.onCreateOptionsMenu(menu); | ||
| MenuInflater inflater = getMenuInflater(); | ||
| if (isModernEditor()) { | ||
| inflater.inflate(R.menu.edit_post, menu); | ||
| } else { | ||
| inflater.inflate(R.menu.edit_post_legacy, menu); | ||
|
|
@@ -1150,7 +1158,8 @@ public boolean onOptionsItemSelected(final MenuItem item) { | |
| } else { | ||
| // Disable other action bar buttons while a media upload is in progress | ||
| // (unnecessary for Aztec since it supports progress reattachment) | ||
| if (!(mShowAztecEditor || mShowGutenbergEditor) | ||
|
There was a problem hiding this comment. If we go with an There was a problem hiding this comment. This kinda falls out of the intent of this PR so I won't answer with either yes or no. It sounds like a good thing to have in mind for when we refactor this part of the code 👍 |
||
| && (mEditorFragment.isUploadingMedia() || mEditorFragment.isActionInProgress())) { | ||
| ToastUtils.showToast(this, R.string.editor_toast_uploading_please_wait, Duration.SHORT); | ||
| return false; | ||
| } | ||
|
|
@@ -1380,7 +1389,7 @@ private synchronized void updatePostObject(boolean isAutosave) throws EditorFrag | |
| // Update post object from fragment fields | ||
| boolean postTitleOrContentChanged = false; | ||
| if (mEditorFragment != null) { | ||
| if (isModernEditor()) { | ||
| postTitleOrContentChanged = | ||
| updatePostContentNewEditor(isAutosave, (String) mEditorFragment.getTitle(), | ||
| (String) mEditorFragment.getContent(mPost.getContent())); | ||
|
|
@@ -1655,7 +1664,7 @@ protected Void doInBackground(Void... params) { | |
| savePostToDb(); | ||
| PostUtils.trackSavePostAnalytics(mPost, mSiteStore.getSiteByLocalId(mPost.getLocalSiteId())); | ||
|
|
||
| UploadService.setLegacyMode(!isModernEditor()); | ||
| if (mIsFirstTimePublish) { | ||
| UploadService.uploadPostAndTrackAnalytics(EditPostActivity.this, mPost); | ||
| } else { | ||
|
|
@@ -1694,7 +1703,7 @@ protected Boolean doInBackground(Void... params) { | |
| // Changes have been made - save the post and ask for the post list to refresh | ||
| // We consider this being "manual save", it will replace some Android "spans" by an html | ||
| // or a shortcode replacement (for instance for images and galleries) | ||
| if (isModernEditor()) { | ||
| // Update the post object directly, without re-fetching the fields from the EditorFragment | ||
| updatePostContentNewEditor(false, mPost.getTitle(), mPost.getContent()); | ||
| } | ||
|
|
@@ -1979,7 +1988,10 @@ public Fragment getItem(int position) { | |
| switch (position) { | ||
| case 0: | ||
| // TODO: Remove editor options after testing. | ||
| if (mShowGutenbergEditor) { | ||
| return GutenbergEditorFragment.newInstance("", "", | ||
| AppPrefs.isAztecEditorToolbarExpanded()); | ||
| } else if (mShowAztecEditor) { | ||
| return AztecEditorFragment.newInstance("", "", | ||
| AppPrefs.isAztecEditorToolbarExpanded()); | ||
| } else if (mShowNewEditor) { | ||
|
|
@@ -2150,7 +2162,7 @@ private void fillContentEditorFields() { | |
| if (mPost != null) { | ||
| if (!TextUtils.isEmpty(mPost.getContent()) && !mHasSetPostContent) { | ||
| mHasSetPostContent = true; | ||
| if (mPost.isLocalDraft() && !isModernEditor()) { | ||
| // TODO: Unnecessary for new editor, as all images are uploaded right away, even for local drafts | ||
| // Load local post content in the background, as it may take time to generate images | ||
| new LoadPostContentTask().executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, | ||
|
|
@@ -2580,7 +2592,7 @@ private boolean processMedia(Uri mediaUri) { | |
| Uri optimizedMedia = WPMediaUtils.getOptimizedMedia(activity, path, isVideo); | ||
| if (optimizedMedia != null) { | ||
| mediaUri = optimizedMedia; | ||
| } else if (isModernEditor()) { | ||
| // Fix for the rotation issue https://github.com/wordpress-mobile/WordPress-Android/issues/5737 | ||
| if (!mSite.isWPCom()) { | ||
| // If it's not wpcom we must rotate the picture locally | ||
|
|
@@ -2615,7 +2627,7 @@ private void postProcessMedia(final Uri mediaUri, final String path, final boole | |
| runOnUiThread(new Runnable() { | ||
| @Override | ||
| public void run() { | ||
| if (isModernEditor()) { | ||
| addMediaVisualEditor(mediaUri, path); | ||
| } else { | ||
| addMediaLegacyEditor(mediaUri, isVideo); | ||
|
|
@@ -3071,6 +3083,9 @@ public void onSettingsClicked() { | |
| public void onAddMediaClicked() { | ||
| if (isPhotoPickerShowing()) { | ||
| hidePhotoPicker(); | ||
| } else if (mShowGutenbergEditor) { | ||
| // show the WP media library only since that's the only mode integrated currently from Gutenberg-mobile | ||
| ActivityLauncher.viewMediaPickerForResult(this, mSite, MediaBrowserType.EDITOR_PICKER); | ||
| } else if (WPMediaUtils.currentUserCanUploadMedia(mSite)) { | ||
| showPhotoPicker(); | ||
| } else { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,6 +16,7 @@ buildscript { | |
| apply plugin: 'com.automattic.android.fetchstyle' | ||
|
|
||
| project.ext.preDexLibs = !project.hasProperty('disablePreDex') | ||
| project.ext.buildGutenbergFromSource = project.properties.getOrDefault('wp.BUILD_GUTENBERG_FROM_SOURCE', false) | ||
|
|
||
| allprojects { | ||
| apply plugin: 'checkstyle' | ||
|
|
@@ -24,6 +25,32 @@ allprojects { | |
| google() | ||
| jcenter() | ||
| maven { url "https://dl.bintray.com/wordpress-mobile/maven" } | ||
|
|
||
| if (rootProject.ext.buildGutenbergFromSource) { | ||
| maven { | ||
| // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm | ||
| url "$rootDir/libs/gutenberg-mobile/node_modules/react-native/android" | ||
| } | ||
| maven { | ||
| // Local Maven repo containing AARs with JSC library built for Android | ||
| url "$rootDir/libs/gutenberg-mobile/node_modules/jsc-android/dist" | ||
| } | ||
| } else { | ||
| maven { | ||
| // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm | ||
| url "https://unpkg.com/[email protected]/android" | ||
| } | ||
| maven { | ||
| // Local Maven repo containing AARs with JSC library built for Android | ||
| url "https://unpkg.com/[email protected]/dist/" | ||
| } | ||
| } | ||
| } | ||
|
|
||
| configurations.all { | ||
| resolutionStrategy { | ||
| force 'org.webkit:android-jsc:r224109' | ||
| } | ||
| } | ||
|
|
||
| task checkstyle(type: Checkstyle) { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We might be able to get rid of this if we use the
enumapproach for the editor selection. It might be worth adding some capabilities to the editors instead of having a general check likeisModernEditor, so it's both easier to understand why we are checking for a modern editor and easier to customize them if the need arises.