wordpress-mobile · marecar3 · Mar 19, 2020 · Dec 21, 2019 · Dec 21, 2019 · Dec 21, 2019
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -1,3 +1,6 @@
+Future release (replace with the version)
+------
+* [Android] Dark Mode
 1.24.0
 ------
 * New block: Latest Posts

diff --git a/android/app/src/main/java/com/gutenberg/MainApplication.java b/android/app/src/main/java/com/gutenberg/MainApplication.java
@@ -1,6 +1,7 @@
 package com.gutenberg;
 
 import android.app.Application;
+import android.content.res.Configuration;
 import android.os.Bundle;
 import android.util.Log;
 
@@ -126,7 +127,8 @@ public void editorDidEmitLog(String message, LogLevel logLevel) {
 
             @Override
             public void performRequest(String path, Consumer<String> onSuccess, Consumer<Bundle> onError) {}
-        });
+
+        }, isDarkMode());
 
         return new ReactNativeHost(this) {
             @Override
@@ -153,6 +155,13 @@ protected String getJSMainModuleName() {
         };
     }
 
+    private boolean isDarkMode() {
+        Configuration configuration = getResources().getConfiguration();
+        int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
+
+        return currentNightMode == Configuration.UI_MODE_NIGHT_YES;
+    }
+
     @Override
     public ReactNativeHost getReactNativeHost() {
         if (mReactNativeHost == null) {

diff --git a/gutenberg b/gutenberg
diff --git a/...-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/...-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java
@@ -356,6 +356,14 @@ public void setTextAlign(ReactAztecText view, @Nullable String textAlign) {
         }
     }
 
+    @ReactProp(name = "linkTextColor", customType = "Color")
+    public void setLinkTextColor(ReactAztecText view, @Nullable Integer color) {
+        view.setLinkFormatter(new LinkFormatter(view,
+                new LinkFormatter.LinkStyle(
+                        color, true)
+        ));
+    }
+
     /* End of the code taken from ReactTextInputManager */
 
     @ReactProp(name = "color", customType = "Color")

diff --git a/...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
@@ -1,6 +1,5 @@
 package org.wordpress.mobile.ReactNativeGutenbergBridge;
 
-import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;

diff --git a/...a/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/...a/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -23,7 +23,9 @@
 import org.wordpress.mobile.WPAndroidGlue.MediaOption;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModule {
     private final ReactApplicationContext mReactContext;
@@ -35,6 +37,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String EVENT_NAME_FOCUS_TITLE = "setFocusOnTitle";
     private static final String EVENT_NAME_MEDIA_UPLOAD = "mediaUpload";
     private static final String EVENT_NAME_MEDIA_APPEND = "mediaAppend";
+    private static final String EVENT_NAME_PREFERRED_COLOR_SCHEME = "preferredColorScheme";
 
     private static final String MAP_KEY_UPDATE_HTML = "html";
     private static final String MAP_KEY_UPDATE_TITLE = "title";
@@ -45,6 +48,8 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_PROGRESS = "progress";
     private static final String MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_SERVER_ID = "mediaServerId";
 
+    private static final String MAP_KEY_IS_PREFERRED_COLOR_SCHEME_DARK = "isPreferredColorSchemeDark";
+
     private static final int MEDIA_UPLOAD_STATE_UPLOADING = 1;
     private static final int MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
     private static final int MEDIA_UPLOAD_STATE_FAILED = 3;
@@ -57,10 +62,12 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MEDIA_SOURCE_DEVICE_CAMERA = "DEVICE_CAMERA";
     private static final String MEDIA_SOURCE_MEDIA_EDITOR = "MEDIA_EDITOR";
 
+    private boolean mIsDarkMode;
 
     public RNReactNativeGutenbergBridgeModule(ReactApplicationContext reactContext,
-            GutenbergBridgeJS2Parent gutenbergBridgeJS2Parent) {
+            GutenbergBridgeJS2Parent gutenbergBridgeJS2Parent, boolean isDarkMode) {
         super(reactContext);
+        mIsDarkMode = isDarkMode;
         mReactContext = reactContext;
         mGutenbergBridgeJS2Parent = gutenbergBridgeJS2Parent;
     }
@@ -70,6 +77,14 @@ public String getName() {
         return "RNReactNativeGutenbergBridge";
     }
 
+
+    @Override
+    public Map<String, Object> getConstants() {
+        final HashMap<String, Object> constants = new HashMap<>();
+        constants.put("isInitialColorSchemeDark", mIsDarkMode);
+        return constants;
+    }
+
     private void emitToJS(String eventName, @Nullable WritableMap data) {
         mReactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, data);
     }
@@ -103,6 +118,12 @@ public void appendNewMediaBlock(int mediaId, String mediaUri, String mediaType)
         emitToJS(EVENT_NAME_MEDIA_APPEND, writableMap);
     }
 
+    public void setPreferredColorScheme(boolean isDarkMode) {
+        WritableMap writableMap = new WritableNativeMap();
+        writableMap.putBoolean(MAP_KEY_IS_PREFERRED_COLOR_SCHEME_DARK, isDarkMode);
+        emitToJS(EVENT_NAME_PREFERRED_COLOR_SCHEME, writableMap);
+    }
+
     @ReactMethod
     public void provideToNative_Html(String html, String title, boolean changed) {
         mGutenbergBridgeJS2Parent.responseHtml(title, html, changed);

diff --git a/.../org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgePackage.java b/.../org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgePackage.java
@@ -10,21 +10,26 @@
 import java.util.List;
 
 public class RNReactNativeGutenbergBridgePackage implements ReactPackage {
-    private GutenbergBridgeJS2Parent mGutenbergBridgeJS2Parent;
+    private final GutenbergBridgeJS2Parent mGutenbergBridgeJS2Parent;
+    private final boolean mIsDarkMode;
+
     private RNReactNativeGutenbergBridgeModule mRNReactNativeGutenbergBridgeModule;
 
     public RNReactNativeGutenbergBridgeModule getRNReactNativeGutenbergBridgeModule() {
         return mRNReactNativeGutenbergBridgeModule;
     }
 
-    public RNReactNativeGutenbergBridgePackage(GutenbergBridgeJS2Parent gutenbergBridgeJS2Parent) {
+    public RNReactNativeGutenbergBridgePackage(GutenbergBridgeJS2Parent gutenbergBridgeJS2Parent,
+                                               boolean isDarkMode) {
         mGutenbergBridgeJS2Parent = gutenbergBridgeJS2Parent;
+        mIsDarkMode = isDarkMode;
     }
 
     @Override
     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
         mRNReactNativeGutenbergBridgeModule = new RNReactNativeGutenbergBridgeModule(reactContext,
-                mGutenbergBridgeJS2Parent);
+                mGutenbergBridgeJS2Parent,
+                mIsDarkMode);
         return Arrays.<NativeModule>asList(mRNReactNativeGutenbergBridgeModule);
     }
 

diff --git a/...rg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/...rg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
@@ -100,6 +100,7 @@ public class WPAndroidGlueCode {
 
     private static OkHttpHeaderInterceptor sAddCookiesInterceptor = new OkHttpHeaderInterceptor();
     private static OkHttpClient sOkHttpClient = new OkHttpClient.Builder().addInterceptor(sAddCookiesInterceptor).build();
+    private boolean mIsDarkMode;
 
     public void onCreate(Context context) {
         SoLoader.init(context, /* native exopackage */ false);
@@ -329,7 +330,7 @@ public void requestMediaEditor(MediaUploadCallback mediaUploadCallback, String m
             public void logUserEvent(GutenbergUserEvent event, ReadableMap eventProperties) {
                 mOnLogGutenbergUserEventListener.onGutenbergUserEvent(event, eventProperties.toHashMap());
             }
-        });
+        }, mIsDarkMode);
 
         return Arrays.asList(
                 new MainReactPackage(getMainPackageConfig(getImagePipelineConfig(sOkHttpClient))),
@@ -353,15 +354,18 @@ private ImagePipelineConfig getImagePipelineConfig(OkHttpClient client) {
     @Deprecated
     public void onCreateView(Context initContext, boolean htmlModeEnabled,
                              Application application, boolean isDebug, boolean buildGutenbergFromSource,
-                             boolean isNewPost, String localeString, Bundle translations) {
+                             boolean isNewPost, String localeString, Bundle translations, int colorBackground, boolean isDarkMode) {
         onCreateView(initContext, htmlModeEnabled, application, isDebug, buildGutenbergFromSource, "post", isNewPost
-        , localeString, translations);
+        , localeString, translations, colorBackground, isDarkMode);
     }
 
     public void onCreateView(Context initContext, boolean htmlModeEnabled,
                              Application application, boolean isDebug, boolean buildGutenbergFromSource,
-                             String postType, boolean isNewPost, String localeString, Bundle translations) {
+                             String postType, boolean isNewPost, String localeString, Bundle translations,
+                             int colorBackground, boolean isDarkMode) {
+        mIsDarkMode = isDarkMode;
         mReactRootView = new ReactRootView(new MutableContextWrapper(initContext));
+        mReactRootView.setBackgroundColor(colorBackground);
 
         ReactInstanceManagerBuilder builder =
                 ReactInstanceManager.builder()
@@ -375,11 +379,8 @@ public void onCreateView(Context initContext, boolean htmlModeEnabled,
             builder.setBundleAssetName("index.android.bundle");
         }
         mReactInstanceManager = builder.build();
-        mReactInstanceManager.addReactInstanceEventListener(new ReactInstanceManager.ReactInstanceEventListener() {
-            @Override
-            public void onReactContextInitialized(ReactContext context) {
-                mReactContext = context;
-            }
+        mReactInstanceManager.addReactInstanceEventListener(context -> {
+            mReactContext = context;
         });
         Bundle initialProps = mReactRootView.getAppProperties();
         if (initialProps == null) {
@@ -405,7 +406,9 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
                                   RequestExecutor fetchExecutor,
                                   OnImageFullscreenPreviewListener onImageFullscreenPreviewListener,
                                   OnMediaEditorListener onMediaEditorListener,
-                                  OnLogGutenbergUserEventListener onLogGutenbergUserEventListener) {
+                                  OnLogGutenbergUserEventListener onLogGutenbergUserEventListener,
+                                  boolean isDarkMode) {
+
         MutableContextWrapper contextWrapper = (MutableContextWrapper) mReactRootView.getContext();
         contextWrapper.setBaseContext(viewGroup.getContext());
 
@@ -427,6 +430,10 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
         viewGroup.addView(mReactRootView, 0,
                 new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
 
+        if (mReactContext != null) {
+            setPreferredColorScheme(isDarkMode);
+        }
+
         refocus();
     }
 
@@ -499,6 +506,14 @@ public void appendNewMediaBlock(int mediaId, String mediaUri, String mediaType)
                                             .appendNewMediaBlock(mediaId, mediaUri, mediaType);
     }
 
+    public void setPreferredColorScheme(boolean isDarkMode) {
+        if (mIsDarkMode != isDarkMode) {
+            mIsDarkMode = isDarkMode;
+            mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule()
+                                                .setPreferredColorScheme(isDarkMode);
+        }
+    }
+
     public void setTitle(String title) {
         mTitleInitialized = true;
         mTitle = title;

diff --git a/react-native-gutenberg-bridge/index.js b/react-native-gutenberg-bridge/index.js
@@ -10,6 +10,8 @@ const isIOS = Platform.OS === 'ios';
 
 const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBridge );
 
+export const { isInitialColorSchemeDark } = RNReactNativeGutenbergBridge;
+
 export const mediaSources = {
 	deviceLibrary: 'DEVICE_MEDIA_LIBRARY',
 	deviceCamera: 'DEVICE_CAMERA',
@@ -70,6 +72,10 @@ export function subscribeMediaAppend( callback ) {
 	return gutenbergBridgeEvents.addListener( 'mediaAppend', callback );
 }
 
+export function subscribePreferredColorScheme( callback ) {
+	return gutenbergBridgeEvents.addListener( 'preferredColorScheme', callback );
+}
+
 /**
  * Request media picker for the given media source.
  *
+9 −8		.travis.yml
+30 −11		lib/client-assets.php
+9 −33		lib/compat.php
+6 −4		package-lock.json
+1 −9		packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js
+1 −2		packages/block-library/package.json
+1 −2		packages/block-library/src/embed/embed-preview.js
+55 −19		packages/components/src/utils/rtl.js
+124 −0		packages/components/src/utils/test/rtl.js
+33 −0		packages/compose/src/hooks/use-preferred-color-scheme/index.android.js
+0 −0		packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js
+0 −1		packages/e2e-test-utils/src/create-url.js
+0 −5		packages/e2e-test-utils/src/is-current-url.js
+3 −4		packages/e2e-tests/specs/editor/various/preview.test.js
+1 −0		test/native/setup.js