Mobile Release v1.39.0

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

@@ -35,7 +35,6 @@ function ButtonsEdit( {
 	const { align } = attributes;
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ maxWidth, setMaxWidth ] = useState( 0 );
-	const shouldRenderFooterAppender = isSelected || isInnerButtonSelected;
 	const { marginLeft: spacing } = styles.spacing;
 
 	useEffect( () => {
@@ -62,6 +61,8 @@ function ButtonsEdit( {
 		isEmbedButton: true,
 	};
 
+	const shouldRenderFooterAppender = isSelected || isInnerButtonSelected;
+
 	return (
 		<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
 			{ resizeObserver }

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

@@ -26,7 +26,6 @@ import { __ } from '@wordpress/i18n';
  */
 import styles from './editor.scss';
 import ColumnsPreview from './column-preview';
-import { getColumnWidths } from '../columns/utils';
 
 function ColumnEdit( {
 	attributes,
@@ -54,13 +53,11 @@ function ColumnEdit( {
 	}, [] );
 
 	const onWidthChange = ( width ) => {
-		setAttributes( {
-			width,
-		} );
+		setAttributes( { width: `${ width }%` } );
 	};
 
-	const columnWidths = Object.values(
-		getColumnWidths( columns, columnCount )
+	const columnWidths = columns.map(
+		( column ) => parseFloat( column.attributes.width ) || 100 / columnCount
 	);
 
 	if ( ! isSelected && ! hasChildren ) {

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

@@ -30,7 +30,6 @@ import { columns } from '@wordpress/icons';
  */
 import variations from './variations';
 import styles from './editor.scss';
-import { getColumnWidths } from './utils';
 import ColumnsPreview from '../column/column-preview';
 
 /**
@@ -150,8 +149,9 @@ function ColumnsEditContainer( {
 	};
 
 	const getColumnsSliders = () => {
-		const columnWidths = Object.values(
-			getColumnWidths( innerColumns, columnCount )
+		const columnWidths = innerColumns.map(
+			( innerColumn ) =>
+				parseFloat( innerColumn.attributes.width ) || 100 / columnCount
 		);
 
 		return innerColumns.map( ( column, index ) => {
@@ -263,7 +263,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 			const { updateBlockAttributes } = dispatch( 'core/block-editor' );
 
 			updateBlockAttributes( columnId, {
-				width: value,
+				width: `${ value }%`,
 			} );
 		},
 		updateBlockSettings( settings ) {

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",

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<String> 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) {

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",

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
 

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
 

packages/react-native-editor/package.json

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