[RN Mobile][Global Styles] Adds new Prop for Global Styles Settings

packages/editor/src/components/provider/index.native.js

@@ -11,7 +11,7 @@ import RNReactNativeGutenbergBridge, {
 	subscribeSetTitle,
 	subscribeMediaAppend,
 	subscribeReplaceBlock,
-	subscribeUpdateTheme,
+	subscribeUpdateEditorSettings,
 	subscribeUpdateCapabilities,
 	subscribeShowNotice,
 } from '@wordpress/react-native-bridge';
@@ -126,15 +126,17 @@ class NativeEditorProvider extends Component {
 			}
 		);
 
-		this.subscriptionParentUpdateTheme = subscribeUpdateTheme(
-			( theme ) => {
+		this.subscriptionParentUpdateEditorSettings = subscribeUpdateEditorSettings(
+			( editorSettings ) => {
 				// Reset the colors and gradients in case one theme was set with custom items and then updated to a theme without custom elements.
-
-				theme.colors = validateThemeColors( theme.colors );
-
-				theme.gradients = validateThemeGradients( theme.gradients );
-
-				this.props.updateSettings( theme );
+				editorSettings.colors = validateThemeColors(
+					editorSettings.colors
+				);
+				editorSettings.gradients = validateThemeGradients(
+					editorSettings.gradients
+				);
+
+				this.props.updateSettings( editorSettings );
 			}
 		);
 
@@ -176,8 +178,8 @@ class NativeEditorProvider extends Component {
 			this.subscriptionParentMediaAppend.remove();
 		}
 
-		if ( this.subscriptionParentUpdateTheme ) {
-			this.subscriptionParentUpdateTheme.remove();
+		if ( this.subscriptionParentUpdateEditorSettings ) {
+			this.subscriptionParentUpdateEditorSettings.remove();
 		}
 
 		if ( this.subscriptionParentUpdateCapabilities ) {

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

@@ -44,7 +44,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String EVENT_NAME_NOTIFY_MODAL_CLOSED = "notifyModalClosed";
     private static final String EVENT_NAME_PREFERRED_COLOR_SCHEME = "preferredColorScheme";
     private static final String EVENT_NAME_MEDIA_REPLACE_BLOCK = "replaceBlock";
-    private static final String EVENT_NAME_UPDATE_THEME = "updateTheme";
+    private static final String EVENT_NAME_UPDATE_EDITOR_SETTINGS = "updateEditorSettings";
     private static final String EVENT_NAME_SHOW_NOTICE = "showNotice";
 
     private static final String MAP_KEY_UPDATE_HTML = "html";
@@ -153,7 +153,7 @@ public void updateTheme(@Nullable Bundle editorTheme) {
             writableMap.putArray(MAP_KEY_THEME_UPDATE_GRADIENTS, Arguments.fromList((ArrayList)gradients));
         }
 
-        emitToJS(EVENT_NAME_UPDATE_THEME, writableMap);
+        emitToJS(EVENT_NAME_UPDATE_EDITOR_SETTINGS, writableMap);
     }
 
     @ReactMethod

packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt

@@ -34,6 +34,10 @@ data class GutenbergProps @JvmOverloads constructor(
         editorTheme?.also { theme ->
             theme.getSerializable(PROP_COLORS)?.let { putSerializable(PROP_COLORS, it) }
             theme.getSerializable(PROP_GRADIENTS)?.let { putSerializable(PROP_GRADIENTS, it) }
+            theme.getSerializable(PROP_STYLES)
+                    ?.let { putSerializable(PROP_STYLES, it) }
+            theme.getSerializable(PROP_FEATURES)
+                    ?.let { putSerializable(PROP_FEATURES, it) }
         }
     }
 
@@ -65,6 +69,8 @@ data class GutenbergProps @JvmOverloads constructor(
         private const val PROP_TRANSLATIONS = "translations"
         private const val PROP_COLORS = "colors"
         private const val PROP_GRADIENTS = "gradients"
+        private const val PROP_STYLES = "rawStyles"
+        private const val PROP_FEATURES = "rawFeatures"
 
         const val PROP_CAPABILITIES = "capabilities"
         const val PROP_CAPABILITIES_CONTACT_INFO_BLOCK = "contactInfoBlock"

packages/react-native-bridge/index.js

@@ -125,8 +125,11 @@ export function subscribeAndroidModalClosed( callback ) {
 		: undefined;
 }
 
-export function subscribeUpdateTheme( callback ) {
-	return gutenbergBridgeEvents.addListener( 'updateTheme', callback );
+export function subscribeUpdateEditorSettings( callback ) {
+	return gutenbergBridgeEvents.addListener(
+		'updateEditorSettings',
+		callback
+	);
 }
 
 export function subscribePreferredColorScheme( callback ) {

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

@@ -79,13 +79,10 @@ public class Gutenberg: NSObject {
             initialProps["capabilities"] = capabilities.toJSPayload()
         }
 
-        let editorTheme = dataSource.gutenbergEditorTheme()
-        if let colors = editorTheme?.colors {
-            initialProps["colors"] = colors
-        }
-
-        if let gradients = editorTheme?.gradients {
-            initialProps["gradients"] = gradients
+        let editorSettings = dataSource.gutenbergEditorSettings()
+        let settingsUpdates = properties(from: editorSettings)
+        initialProps.merge(properties(from: editorSettings)) { (intialProp, settingsUpdates) -> Any in
+            settingsUpdates
         }
 
         return initialProps
@@ -184,19 +181,32 @@ public class Gutenberg: NSObject {
         bridgeModule.sendEventIfNeeded(.setFocusOnTitle, body: nil)
     }
 
-    public func updateTheme(_ editorTheme: GutenbergEditorTheme?) {
+    public func updateEditorSettings(_ editorSettings: GutenbergEditorSettings?) {
+        let settingsUpdates = properties(from: editorSettings)
+        sendEvent(.updateEditorSettings, body: settingsUpdates)
+    }
+
+    private func properties(from editorSettings: GutenbergEditorSettings?) -> [String : Any] {
+        var settingsUpdates = [String : Any]()
+        settingsUpdates["isFSETheme"] = editorSettings?.isFSETheme ?? false
 
-        var themeUpdates = [String : Any]()
+        if let rawStyles = editorSettings?.rawStyles {
+            settingsUpdates["rawStyles"] = rawStyles
+        }
+
+        if let rawFeatures = editorSettings?.rawFeatures {
+            settingsUpdates["rawFeatures"] = rawFeatures
+        }
 
-        if let colors = editorTheme?.colors {
-            themeUpdates["colors"] = colors
+        if let colors = editorSettings?.colors {
+            settingsUpdates["colors"] = colors
         }
 
-        if let gradients = editorTheme?.gradients {
-            themeUpdates["gradients"] = gradients
+        if let gradients = editorSettings?.gradients {
+            settingsUpdates["gradients"] = gradients
         }
 
-        sendEvent(.updateTheme, body:themeUpdates)
+        return settingsUpdates
     }
 
     public func showNotice(_ message: String) {

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

@@ -46,7 +46,7 @@ public protocol GutenbergBridgeDataSource: class {
     func gutenbergCapabilities() -> [Capabilities: Bool]
 
     /// Asks the data source for a list of theme colors.
-    func gutenbergEditorTheme() -> GutenbergEditorTheme?
+    func gutenbergEditorSettings() -> GutenbergEditorSettings?
 
     /// Asks the data source for a view to show while the Editor is loading.
      var loadingView: UIView? { get }
@@ -70,7 +70,10 @@ public extension GutenbergBridgeDataSource {
     }
 }
 
-public protocol GutenbergEditorTheme {
+public protocol GutenbergEditorSettings {
+    var isFSETheme: Bool { get }
+    var rawStyles: String? { get }
+    var rawFeatures: String? { get }
     var colors: [[String: String]]? { get }
     var gradients: [[String: String]]? { get }
 }

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

@@ -369,7 +369,7 @@ extension RNReactNativeGutenbergBridge {
         case mediaUpload
         case setFocusOnTitle
         case mediaAppend
-        case updateTheme
+        case updateEditorSettings
         case replaceBlock
         case updateCapabilities
         case showNotice

packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift

@@ -295,7 +295,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
         return ExampleAttachmentDelegate()
     }
 
-    func gutenbergEditorTheme() -> GutenbergEditorTheme? {
+    func gutenbergEditorSettings() -> GutenbergEditorSettings? {
         return nil
     }
 

test/native/setup.js

@@ -34,7 +34,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		subscribeFeaturedImageIdNativeUpdated: jest.fn(),
 		subscribeMediaAppend: jest.fn(),
 		subscribeAndroidModalClosed: jest.fn(),
-		subscribeUpdateTheme: jest.fn(),
+		subscribeUpdateEditorSettings: jest.fn(),
 		subscribePreferredColorScheme: () => 'light',
 		subscribeUpdateCapabilities: jest.fn(),
 		subscribeShowNotice: jest.fn(),