[RNMobile] Hide help button from UBE (#37221)

As described in wordpress-mobile/gutenberg-mobile#4339, a help button is currently displaying in the bottom right-hand corner of the unsupported block editor (UBE) in both the Android and iOS apps. The button can be seen while logged into WordPress.com. When tapped on, the button isn't working as expected on iOS and prompts users to navigate away from the editor on Android, creating the potential for edits to be lost.

With this PR, the button is hidden from view in order to avoid confusion and potential loss of edits. A high-level overview of the code changes can be found in the `Types of changes` section below.

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

@@ -333,10 +333,18 @@ private void injectCssScript() {
                 String injectWPBarsCssScript = getFileContentFromAssets("gutenberg-web-single-block/wp-bar-override.css");
                 injectWPBarsCssScript = removeWhiteSpace(removeNewLines(injectWPBarsCssScript));
                 evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript));
+
+                String injectExternalCssScript = getOnGutenbergReadyExternalStyles();
+                injectExternalCssScript = removeWhiteSpace(removeNewLines(injectExternalCssScript));
+                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectExternalCssScript));
             }
         });
     }
 
+    protected String getOnGutenbergReadyExternalStyles() {
+        return new String();
+    }
+
     private void injectOnGutenbergReadyExternalSources() {
         List<String> list = getOnGutenbergReadyExternalSources();
         for (String file : list) {

packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift

@@ -60,14 +60,6 @@ public struct FallbackJavascriptInjection {
     }
 }
 
-public extension SourceFile {
-    func jsScript(with argument: String? = nil) throws -> WKUserScript {
-        let content = try getContent()
-        let formatted = String(format: content, argument ?? [])
-        return formatted.toJsScript()
-    }
-}
-
 internal extension String {
     func toJsScript() -> WKUserScript {
         WKUserScript(source: self, injectionTime: .atDocumentEnd, forMainFrameOnly: false)

packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift

@@ -58,6 +58,12 @@ open class GutenbergWebSingleBlockViewController: UIViewController {
         return []
     }
 
+    /// Requests a set of CSS styles to be added to the web view when the editor has started loading.
+    /// - Returns: Array of all the styles to be added
+    open func onGutenbergLoadStyles() -> [WKUserScript] {
+        return []
+    }
+
     /// Requests a set of JS Scripts to be added to the web view when Gutenberg has been initialized.
     /// - Returns: Array of all the scripts to be added
     open func onGutenbergReadyScripts() -> [WKUserScript] {
@@ -152,6 +158,7 @@ extension GutenbergWebSingleBlockViewController: WKNavigationDelegate {
         evaluateJavascript(jsInjection.injectWPBarsCssScript)
         evaluateJavascript(jsInjection.injectLocalStorageScript)
         onPageLoadScripts().forEach(evaluateJavascript)
+        onGutenbergLoadStyles().forEach(evaluateJavascript)
     }
 
     public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
@@ -160,6 +167,7 @@ extension GutenbergWebSingleBlockViewController: WKNavigationDelegate {
         evaluateJavascript(jsInjection.preventAutosavesScript)
         evaluateJavascript(jsInjection.injectEditorCssScript)
         evaluateJavascript(jsInjection.gutenbergObserverScript)
+        onGutenbergLoadStyles().forEach(evaluateJavascript)
     }
 }
 

packages/react-native-bridge/ios/SourceFile.swift

@@ -20,14 +20,29 @@ public struct SourceFile {
         self.bundle = bundle
     }
 
-    func getContent() throws -> String {
+    public func getContent() throws -> String {
         guard let path = bundle.path(forResource: name, ofType: type.rawValue) else {
             throw SourceFileError.sourceFileNotFound("\(name).\(type)")
         }
         return try String(contentsOfFile: path, encoding: .utf8)
     }
 }
 
+extension SourceFile {
+    public func jsScript(with argument: String? = nil) throws -> WKUserScript {
+        let content = try getContent()
+        let formatted = String(format: content, argument ?? [])
+
+        switch self.type {
+        case .css:
+            let injectCssScriptTemplate = "window.injectCss(`%@`)"
+            return String(format: injectCssScriptTemplate, formatted).toJsScript()
+        case .js, .json:
+            return formatted.toJsScript()
+        }
+    }
+}
+
 extension SourceFile {
     static let editorStyle = SourceFile(name: "editor-style-overrides", type: .css)
     static let wpBarsStyle = SourceFile(name: "wp-bar-override", type: .css)

packages/react-native-editor/CHANGELOG.md

@@ -11,7 +11,9 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+-   [*] Hide help button from Unsupported Block Editor. [#37221]
 -   [*] Add contrast checker to text-based blocks [#34902]
+
 ## 1.69.0
 -   [*] Give multi-line block names central alignment in inserter [#37185]
 -   [**] Fix empty line apperaing when splitting heading blocks on Android 12 [#37279]