diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index 264f337c5bf6b7..67c30bf4a29a71 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.38.0", + "version": "1.39.0", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java index f8e00e60211b06..f89df4562b42d9 100644 --- a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java +++ b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java @@ -4,28 +4,31 @@ import android.graphics.Bitmap; import android.os.Bundle; import android.os.Handler; +import android.util.Log; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; import android.webkit.CookieManager; import android.webkit.JavascriptInterface; +import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; +import android.widget.ProgressBar; import androidx.annotation.Nullable; import androidx.appcompat.app.ActionBar; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; -import org.wordpress.android.util.AppLog; -import org.wordpress.android.util.helpers.WPWebChromeClient; +import org.wordpress.android.util.AppLog;; import org.wordpress.mobile.FileUtils; import java.util.ArrayList; import java.util.List; import java.util.Locale; +import java.util.concurrent.atomic.AtomicBoolean; public class GutenbergWebViewActivity extends AppCompatActivity { @@ -42,6 +45,28 @@ public class GutenbergWebViewActivity extends AppCompatActivity { protected View mForegroundView; protected boolean mIsRedirected; + private ProgressBar mProgressBar; + private boolean mIsGutenbergReady; + private AtomicBoolean mIsWebPageLoaded = new AtomicBoolean(false); + private AtomicBoolean mIsBlockContentInserted = new AtomicBoolean(false); + private final Handler mWebPageLoadedHandler = new Handler(); + private final Runnable mWebPageLoadedRunnable = new Runnable() { + @Override public void run() { + if (!mIsWebPageLoaded.getAndSet(true)) { + mProgressBar.setVisibility(View.GONE); + // We want to insert block content + // only if gutenberg is ready + if (mIsGutenbergReady) { + final Handler handler = new Handler(); + handler.postDelayed(() -> { + // Insert block content + insertBlockScript(); + }, 200); + } + } + } + }; + @SuppressLint("SetJavaScriptEnabled") protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); @@ -51,6 +76,7 @@ protected void onCreate(@Nullable Bundle savedInstanceState) { mWebView = findViewById(R.id.gutenberg_web_view); mForegroundView = findViewById(R.id.foreground_view); + mProgressBar = findViewById(R.id.progress_bar); // Set settings WebSettings settings = mWebView.getSettings(); @@ -64,7 +90,23 @@ protected void onCreate(@Nullable Bundle savedInstanceState) { // Setup WebView client setupWebViewClient(); - mWebView.setWebChromeClient(new WPWebChromeClient(null, findViewById(R.id.progress_bar))); + + // Setup Web Chrome client + mWebView.setWebChromeClient(new WebChromeClient() { + @Override + public void onProgressChanged(WebView view, int progress) { + if (progress == 100) { + mWebPageLoadedHandler.removeCallbacks(mWebPageLoadedRunnable); + mWebPageLoadedHandler.postDelayed(mWebPageLoadedRunnable, 1500); + } else { + mIsWebPageLoaded.compareAndSet(true, false); + if (mProgressBar.getVisibility() == View.GONE) { + mProgressBar.setVisibility(View.VISIBLE); + } + mProgressBar.setProgress(progress); + } + } + }); loadUrl(); } @@ -167,9 +209,6 @@ public boolean shouldOverrideUrlLoading(WebView view, String url) { @Override public void onPageCommitVisible(WebView view, String url) { - String injectCssScript = getFileContentFromAssets("gutenberg-web-single-block/inject-css.js"); - evaluateJavaScript(injectCssScript); - long userId = getUserId(); if (userId != 0) { String injectLocalStorageScript = getFileContentFromAssets("gutenberg-web-single-block/local-storage-overrides.json"); @@ -205,14 +244,6 @@ public void onPageFinished(WebView view, String url) { String contentFunctions = getFileContentFromAssets("gutenberg-web-single-block/content-functions.js"); evaluateJavaScript(contentFunctions); - String editorStyle = getFileContentFromAssets("gutenberg-web-single-block/editor-style-overrides.css"); - editorStyle = removeWhiteSpace(removeNewLines(editorStyle)); - evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, editorStyle)); - - String injectWPBarsCssScript = getFileContentFromAssets("gutenberg-web-single-block/wp-bar-override.css"); - injectWPBarsCssScript = removeWhiteSpace(removeNewLines(injectWPBarsCssScript)); - evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript)); - String injectGutenbergObserver = getFileContentFromAssets("gutenberg-web-single-block/gutenberg-observer.js"); evaluateJavaScript(injectGutenbergObserver); } @@ -226,19 +257,40 @@ private void evaluateJavaScript(String script) { private void onGutenbergReady() { preventAutoSavesScript(); + // Inject css when Gutenberg is ready + injectCssScript(); final Handler handler = new Handler(); handler.postDelayed(() -> { + mIsGutenbergReady = true; // We want to make sure that page is loaded // with all elements before executing external JS injectOnGutenbergReadyExternalSources(); - // Inject block content - insertBlockScript(); + // If page is loaded try to insert block content + if (mIsWebPageLoaded.get()) { + // Insert block content + insertBlockScript(); + } // We need some extra time to hide all unwanted html elements // like NUX (new user experience) modal is. mForegroundView.postDelayed(() -> mForegroundView.setVisibility(View.INVISIBLE), 1500); }, 2000); } + private void injectCssScript() { + String injectCssScript = getFileContentFromAssets("gutenberg-web-single-block/inject-css.js"); + mWebView.evaluateJavascript(injectCssScript, message -> { + if (message != null) { + String editorStyle = getFileContentFromAssets("gutenberg-web-single-block/editor-style-overrides.css"); + editorStyle = removeWhiteSpace(removeNewLines(editorStyle)); + evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, editorStyle)); + + String injectWPBarsCssScript = getFileContentFromAssets("gutenberg-web-single-block/wp-bar-override.css"); + injectWPBarsCssScript = removeWhiteSpace(removeNewLines(injectWPBarsCssScript)); + evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript)); + } + }); + } + private void injectOnGutenbergReadyExternalSources() { List list = getOnGutenbergReadyExternalSources(); for (String file : list) { @@ -267,10 +319,12 @@ private void preventAutoSavesScript() { } private void insertBlockScript() { - 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"))); + if (!mIsBlockContentInserted.getAndSet(true)) { + 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"))); + } } @Override @@ -307,6 +361,12 @@ public void finish() { super.finish(); } + @Override + protected void onDestroy() { + mWebPageLoadedHandler.removeCallbacks(mWebPageLoadedRunnable); + super.onDestroy(); + } + public class WPWebKit { @JavascriptInterface public void postMessage(String content) { diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index 631c0a869b1285..340640cae0f266 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.38.0", + "version": "1.39.0", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 787ff1e0fbe765..31b6c9261c2370 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -13,7 +13,10 @@ For each user feature we should also add a importance categorization label to i ## 1.39.0 -* [***] Full-width and wide alignment support for Video, Latest-posts, Gallery, Media & text, and Pullquote block [https://github.com/WordPress/gutenberg/pull/25184/] +* [***] Full-width and wide alignment support for Video, Latest-posts, Gallery, Media & text, and Pullquote block +* [***] Fix unsupported block bottom sheet is triggered when device is rotated +* [***] Unsupported Block Editor: Fixed issue when cannot view or interact with the classic block on Jetpack site + ## 1.38.0 diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 1327b9a765014f..b03e4bec611549 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -21,7 +21,7 @@ PODS: - DoubleConversion - glog - glog (0.3.5) - - Gutenberg (1.38.0): + - Gutenberg (1.39.0): - React (= 0.61.5) - React-CoreModules (= 0.61.5) - React-RCTImage (= 0.61.5) @@ -253,7 +253,7 @@ PODS: - React - RNSVG (9.13.6-gb): - React - - RNTAztecView (1.38.0): + - RNTAztecView (1.39.0): - React-Core - WordPress-Aztec-iOS (~> 1.19.3) - WordPress-Aztec-iOS (1.19.3) @@ -402,7 +402,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75 Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51 glog: 1f3da668190260b06b429bb211bfbee5cd790c28 - Gutenberg: 16995dc909ddd0ca483ac12178b207afb4be8dab + Gutenberg: 0e8bbcdfaf70218ef497f1508c49866e56a4f25d RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1 RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320 React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78 @@ -416,9 +416,9 @@ SPEC CHECKSUMS: react-native-get-random-values: 8940331a943a46c165d3ed05802c09c392f8dd46 react-native-keyboard-aware-scroll-view: ffa9152671fec9a571197ed2d02e0fcb90206e60 react-native-safe-area: e8230b0017d76c00de6b01e2412dcf86b127c6a3 - react-native-safe-area-context: 4c3249e4840225c61fcd215b136af0a737bccb79 + react-native-safe-area-context: 344b969c45af3d8464d36e8dea264942992ef033 react-native-slider: ecb7f25c14f2348d1c1f629a6f2be7611d22a066 - react-native-video: 961749da457e73bf0b5565edfbaffc25abfb8974 + react-native-video: d01ed7ff1e38fa7dcc6c15c94cf505e661b7bfd0 React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76 React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360 React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72 @@ -430,12 +430,12 @@ SPEC CHECKSUMS: React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd ReactNativeDarkMode: f61376360c5d983907e5c316e8e1c853a8c2f348 - RNCMaskedView: 744eb642f5d96bd670ea93f59e7a1346ea50976a + RNCMaskedView: 884452b2a5d593e4c55058b3fedf39c2a34d0743 RNGestureHandler: dde546180bf24af0b5f737c8ad04b6f3fa51609a RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43 RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da RNSVG: 68a534a5db06dcbdaebfd5079349191598caef7b - RNTAztecView: 2da38646865bbec1df987a1bbcad55e0cabf08fd + RNTAztecView: e13f4f962634980c42dae7d1fc18b17e2fdd9a9f WordPress-Aztec-iOS: b7ac8b30f746992e85d9668453ac87c2cdcecf4f Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index f4ed2c5b6231f9..277931873b6460 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.38.3", + "version": "1.39.0", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later",