Mobile Release v1.38.1

packages/block-library/src/cover/edit.native.js

@@ -455,19 +455,26 @@ const Cover = ( {
 					onFocus={ onFocus }
 				>
 					<View style={ styles.colorPaletteWrapper }>
-						<ColorPalette
-							customColorIndicatorStyles={
-								styles.paletteColorIndicator
-							}
-							customIndicatorWrapperStyles={
-								styles.paletteCustomIndicatorWrapper
-							}
-							setColor={ setColor }
-							onCustomPress={ openColorPicker }
-							defaultSettings={ coverDefaultPalette }
-							shouldShowCustomLabel={ false }
-							shouldShowCustomVerticalSeparator={ false }
-						/>
+						<BottomSheetConsumer>
+							{ ( { shouldEnableBottomSheetScroll } ) => (
+								<ColorPalette
+									customColorIndicatorStyles={
+										styles.paletteColorIndicator
+									}
+									customIndicatorWrapperStyles={
+										styles.paletteCustomIndicatorWrapper
+									}
+									setColor={ setColor }
+									onCustomPress={ openColorPicker }
+									defaultSettings={ coverDefaultPalette }
+									shouldShowCustomLabel={ false }
+									shouldShowCustomVerticalSeparator={ false }
+									shouldEnableBottomSheetScroll={
+										shouldEnableBottomSheetScroll
+									}
+								/>
+							) }
+						</BottomSheetConsumer>
 					</View>
 				</MediaPlaceholder>
 			</View>

packages/block-library/src/missing/edit.native.js

@@ -30,6 +30,7 @@ export class UnsupportedBlockEdit extends Component {
 		super( props );
 		this.state = { showHelp: false };
 		this.toggleSheet = this.toggleSheet.bind( this );
+		this.closeSheet = this.closeSheet.bind( this );
 		this.requestFallback = this.requestFallback.bind( this );
 	}
 
@@ -39,6 +40,12 @@ export class UnsupportedBlockEdit extends Component {
 		} );
 	}
 
+	closeSheet() {
+		this.setState( {
+			showHelp: false,
+		} );
+	}
+
 	componentWillUnmount() {
 		if ( this.timeout ) {
 			clearTimeout( this.timeout );
@@ -114,7 +121,7 @@ export class UnsupportedBlockEdit extends Component {
 			<BottomSheet
 				isVisible={ this.state.showHelp }
 				hideHeader
-				onClose={ this.toggleSheet }
+				onClose={ this.closeSheet }
 				onModalHide={ () => {
 					if ( this.state.sendFallbackMessage ) {
 						// On iOS, onModalHide is called when the controller is still part of the hierarchy.

packages/format-library/src/link/modal.native.js

@@ -22,6 +22,7 @@ const ModalLinkUI = ( { isVisible, ...restProps } ) => {
 				isChildrenScrollable
 				isVisible={ isVisible }
 				hideHeader
+				onClose={ restProps.onClose }
 			>
 				<BottomSheet.NavigationContainer animate main>
 					<BottomSheet.NavigationScreen name={ screens.settings }>

packages/react-native-aztec/android/build.gradle

@@ -11,7 +11,7 @@ buildscript {
         jSoupVersion = '1.10.3'
         wordpressUtilsVersion = '1.22'
         espressoVersion = '3.0.1'
-        aztecVersion = 'b8fa76f10346f6e8b979697154d3680f96cb79ff'
+        aztecVersion = 'v1.3.45'
     }
 
     repositories {

packages/react-native-aztec/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-aztec",
-  "version": "1.37.1",
+  "version": "1.38.1",
   "description": "Aztec view for react-native.",
   "private": true,
   "author": "The WordPress Contributors",

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,18 +257,40 @@ private void evaluateJavaScript(String script) {
 
     private void onGutenbergReady() {
         preventAutoSavesScript();
-        insertBlockScript();
+        // 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();
+            // 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<String> list = getOnGutenbergReadyExternalSources();
         for (String file : list) {
@@ -266,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
@@ -306,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) {

packages/react-native-bridge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-bridge",
-  "version": "1.37.1",
+  "version": "1.38.1",
   "description": "Native bridge library used to integrate the block editor into a native App.",
   "private": true,
   "author": "The WordPress Contributors",

packages/react-native-editor/CHANGELOG.md

@@ -11,6 +11,11 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+## 1.38.1
+
+* [***] 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
 
 [***] Add support for selecting user's post when configuring the link

packages/react-native-editor/ios/Podfile.lock

@@ -21,7 +21,7 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - Gutenberg (1.37.1):
+  - Gutenberg (1.38.1):
     - 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.37.1):
+  - RNTAztecView (1.38.1):
     - 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: af33e34fe17d58eff688914531e28b21e79fc8a3
+  Gutenberg: cd59990946ff2a1ccf5e3c200ed29dad03674650
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
@@ -435,7 +435,7 @@ SPEC CHECKSUMS:
   RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43
   RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
   RNSVG: 68a534a5db06dcbdaebfd5079349191598caef7b
-  RNTAztecView: 38857b9da561bc604665ae22b5e8745ba0197e7c
+  RNTAztecView: 396adafbdeba07cd1badc39bffa0cf87d277bfb6
   WordPress-Aztec-iOS: b7ac8b30f746992e85d9668453ac87c2cdcecf4f
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 

packages/react-native-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-editor",
-  "version": "1.37.1",
+  "version": "1.38.1",
   "description": "Mobile WordPress gutenberg editor.",
   "author": "The WordPress Contributors",
   "license": "GPL-2.0-or-later",