diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java index ccc3682a2c661e..2b3302b75e2575 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java +++ b/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 list = getOnGutenbergReadyExternalSources(); for (String file : list) { diff --git a/packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift b/packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift index 177eaf80eb1abd..13ae9dd1f05735 100644 --- a/packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift +++ b/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) diff --git a/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift b/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift index c077b3aaf1204b..9159b847d52cbd 100644 --- a/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift +++ b/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) } } diff --git a/packages/react-native-bridge/ios/SourceFile.swift b/packages/react-native-bridge/ios/SourceFile.swift index ee0e0b54fe4a67..2f75e22278c0f1 100644 --- a/packages/react-native-bridge/ios/SourceFile.swift +++ b/packages/react-native-bridge/ios/SourceFile.swift @@ -20,7 +20,7 @@ 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)") } @@ -28,6 +28,21 @@ public struct SourceFile { } } +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) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index bd1c20821200e2..4ee7e30cdebcd4 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/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]