[RNMobile] Update Loading and Failed Screens for Unsupported Block Editor

packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java

@@ -14,7 +14,10 @@
 import android.webkit.WebSettings;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
+import android.widget.ImageView;
+import android.widget.LinearLayout;
 import android.widget.ProgressBar;
+import android.widget.TextView;
 
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.ActionBar;
@@ -41,7 +44,10 @@ public class GutenbergWebViewActivity extends AppCompatActivity {
     private static final String JAVA_SCRIPT_INTERFACE_NAME = "wpwebkit";
 
     protected WebView mWebView;
-    protected View mForegroundView;
+    protected LinearLayout mForegroundView;
+    protected ImageView mForegroundViewImage;
+    protected TextView mForegroundViewTitle;
+    protected TextView mForegroundViewSubtitle;
     protected boolean mIsRedirected;
 
     private ProgressBar mProgressBar;
@@ -61,11 +67,24 @@ public class GutenbergWebViewActivity extends AppCompatActivity {
                         // Insert block content
                         insertBlockScript();
                     }, 200);
+                } else {
+                    final Handler handler = new Handler();
+                    handler.postDelayed(() -> {
+                        if (!mIsGutenbergReady) {
+                            showTroubleshootingInstructions();
+                        }
+                    }, 10000);
                 }
             }
         }
     };
 
+    private void showTroubleshootingInstructions() {
+        mForegroundViewTitle.setText(R.string.block_editor_failed_title);
+        mForegroundViewSubtitle.setText(R.string.block_editor_failed_subtitle);
+        mForegroundViewImage.setVisibility(ImageView.VISIBLE);
+    }
+
     @SuppressLint("SetJavaScriptEnabled")
     protected void onCreate(@Nullable Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
@@ -75,6 +94,9 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {
 
         mWebView = findViewById(R.id.gutenberg_web_view);
         mForegroundView = findViewById(R.id.foreground_view);
+        mForegroundViewImage = findViewById(R.id.foreground_view_image);
+        mForegroundViewTitle = findViewById(R.id.foreground_view_title);
+        mForegroundViewSubtitle = findViewById(R.id.foreground_view_subtitle);
         mProgressBar = findViewById(R.id.progress_bar);
 
         // Set settings
@@ -271,7 +293,7 @@ private void onGutenbergReady() {
             }
             // 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);
+            mForegroundView.postDelayed(() -> mForegroundView.setVisibility(LinearLayout.INVISIBLE), 1500);
         }, 2000);
     }
 

packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ube_failed.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="102dp"
+    android:width="152dp"
+    android:viewportHeight="102"
+    android:viewportWidth="152">
+
+  <path
+      android:fillColor="@color/neutral_20"
+      android:pathData="M134,87.3c1.5-0.5,5.3-2,8.1-4.4c2.4-1.9,4.3-4.3,5.6-7s2-5.7,2.2-8.7s-0.1-6.1-0.8-9c-0.9-2.7-1.2-4.4-4.1-8 c-4.7-5.3-8.7-6.9-15.5-8.5c-3-0.5-6.1-0.5-8.9,0.1c-0.6,0.2-1.7-0.3-1.4-1.5l0,0c1.1-3.5,1.4-7.3,0.8-11 c-0.3-4.4-4.4-17.1-21.3-24.7c-7.1-2.9-14.9-3.3-22.5-2.2C72.5,3,68.8,4,65.4,5.7c-1.7,0.9-3.3,1.9-4.8,3.1s-2.8,2.6-4,4.2 c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1-0.1-0.1-0.2-0.1-0.3c2.1-3.4,5.1-6.1,8.6-8.1c3.5-1.9,7.3-3.2,11.3-3.9C78,0.4,81.1,0,84.9,0 C92,0.1,95.8,1.3,99.6,2.7c18.2,7.2,22.2,22.1,22.9,26.2c0.6,3.3,0.3,7-0.4,10.3l0,0c2.6-0.4,5.3-0.2,7.9,0.2 c7.7,1,14.5,6.3,16.8,9.4c2.3,2.6,3.8,6.5,4.4,8.7c0.8,3.2,1.1,6.5,0.8,9.7s-1.1,6.5-2.7,9.4c-1.5,2.9-3.8,5.4-6.4,7.3 c-2.6,1.9-5.7,3.1-8.8,3.8c-0.1,0-0.3-0.1-0.3-0.2C133.8,87.4,133.8,87.3,134,87.3">
+  </path>
+
+  <path
+      android:fillColor="@color/neutral_20"
+      android:pathData="M26.703,0.758C36.249,8.626 45.302,17.018 54.386,25.377L81.642,50.45L108.724,75.706C117.753,84.124 126.814,92.508 135.379,101.416L135.057,101.758C125.51,93.89 116.458,85.497 107.372,77.138L80.116,52.065L53.035,26.809C44.006,18.391 34.946,10.007 26.379,1.1L26.703,0.758Z">
+  </path>
+
+  <path
+      android:fillColor="@color/neutral_20"
+      android:pathData="M104.2,90.8c-7.5,0.7-14.9,0.8-22.4,0.8l-22.4,0.1c-3.7,0-7.5,0-11.2,0c-3.8,0-7.6-0.2-11.3-0.7c-7.5-1-15-3-21.6-7.1 c-3.3-2-6.3-4.5-8.7-7.6c-2.4-3-4.2-6.5-5.3-10.3c-0.5-1.9-0.9-3.8-1.1-5.7C0,58.3,0,56.2,0.1,54.7c0.1-3.9,1.2-7.7,2.9-11.2 c1.7-3.5,3.9-6.6,6.6-9.4c2.6-2.8,5.7-5.1,9.1-6.9c3.4-1.7,7.1-2.9,11-3.1c1.9-0.1,3.8,0,5.7,0.3c1.9,0.3,3.7,0.9,5.4,1.7 c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.1l0,0c-1.7-0.6-3.5-1-5.4-1.3c-1.8-0.2-3.7-0.2-5.5,0c-3.6,0.4-7.1,1.6-10.3,3.4 C13,32.2,7.8,37.8,4.7,44.3c-1.5,3.3-2.5,6.8-2.6,10.4C2,57.3,2,58.5,2.2,60.2c0.2,1.8,0.5,3.6,1,5.3c1,3.5,2.7,6.7,5,9.5 c2.2,2.8,5.1,5.2,8.2,7.1c6.2,3.8,13.5,5.8,20.7,6.7c3.7,0.4,7.3,0.6,11,0.6c3.7,0,7.5,0,11.2,0l22.4,0.1c7.5,0,14.9,0.1,22.4,0.8 c0.1,0,0.2,0.1,0.2,0.3C104.4,90.6,104.3,90.7,104.2,90.8">
+  </path>
+
+</vector>

packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml

@@ -32,11 +32,44 @@
         android:layout_height="match_parent"
         android:visibility="visible"/>
 
-    <View
+    <LinearLayout
         android:id="@+id/foreground_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/white"/>
+        android:background="@color/white"
+        android:gravity="center"
+        android:paddingStart="@dimen/foreground_view_padding_large"
+        android:paddingEnd="@dimen/foreground_view_padding_large"
+        android:orientation="vertical">
+
+        <ImageView
+            android:id="@+id/foreground_view_image"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="@dimen/foreground_view_padding_medium"
+            android:layout_marginTop="@dimen/foreground_view_padding_medium"
+            android:src="@drawable/ube_failed"
+            android:contentDescription="@null" 
+            android:visibility="gone" />
+
+        <TextView
+            android:id="@+id/foreground_view_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:layout_marginBottom="@dimen/foreground_view_padding_small"
+            android:text="@string/block_editor_loading_title"
+            android:textSize="@dimen/foreground_view_text_size_large" />
+
+        <TextView
+            android:id="@+id/foreground_view_subtitle"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:layout_marginBottom="@dimen/foreground_view_padding_medium"
+            android:text="@string/block_editor_loading_subtitle"
+            android:textSize="@dimen/foreground_view_text_size_medium" />
+    </LinearLayout>
 
     <ProgressBar
         android:id="@+id/progress_bar"

packages/react-native-bridge/android/react-native-bridge/src/main/res/values/colors.xml

@@ -3,4 +3,6 @@
 
     <color name="status_bar_color">#006088</color>
 
+    <color name="neutral_20">#a7aaad</color>
+
 </resources>

packages/react-native-bridge/android/react-native-bridge/src/main/res/values/dimens.xml

@@ -7,4 +7,11 @@
     <dimen name="toolbar_content_offset">72dp</dimen>
     <dimen name="toolbar_content_offset_end">0dp</dimen>
 
+    <dimen name="foreground_view_padding_large">30dp</dimen>
+    <dimen name="foreground_view_padding_medium">16dp</dimen>
+    <dimen name="foreground_view_padding_small">8dp</dimen>
+
+    <dimen name="foreground_view_text_size_large">20sp</dimen>
+    <dimen name="foreground_view_text_size_medium">16sp</dimen>
+
 </resources>

packages/react-native-bridge/android/react-native-bridge/src/main/res/values/strings.xml

@@ -3,4 +3,10 @@
 
     <string name="menu_save">Save</string>
 
+    <string name="block_editor_loading_title">Loading the block editor...</string>
+    <string name="block_editor_loading_subtitle">Please ensure the block editor is enabled on your site. If it is not enabled, it will not load.</string>
+
+    <string name="block_editor_failed_title">Unable to load the block editor right now.</string>
+    <string name="block_editor_failed_subtitle">Please ensure the block editor is enabled on your site and try again.</string>
+
 </resources>

packages/react-native-editor/CHANGELOG.md

@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+-   [*] Update loading and failed screens for web version of the editor [#32395]
 ## 1.55.2
 -   [**] Fix incorrect block insertion point after blurring the post title field. [#32831]