[Gutenberg] Set consistent editor colours in both the WordPress and Jetpack apps #16968
Conversation
You can test the Jetpack changes on this Pull Request by downloading an installable build (jetpack-installable-build-pr16968-b141a12.apk), or scanning this QR code:
|
You can test the WordPress changes on this Pull Request by downloading an installable build (wordpress-installable-build-pr16968-b141a12.apk), or scanning this QR code:
|
SiobhyB
changed the title
SiobhyB
added
Gutenberg
This variable will be used to set a consistent colour for the editor across both the WordPress and Jetpack apps.
The new 'PostSettingsTheme' will be used to style different UI element in Post Settings to ensure consistency with the editor.
The category screen's being changed in this commit are only used within the Post Settings screen.
It is necessary to create a custom theme for the date picker/calendar available from the Post Settings screen. This is because 'Theme.AppCompat.DayNight.Dialog.Alert' needs to be set as the theme's parent in order to inherit the other styles from that theme.
With this commit, 'colorSecondaryVariant' is set via the app's dark mode styles in order to ensure some parts of the Post Settings screen remain blue.
|
@mkevins, I wondered if you might have availability to help review this PR? I definitely lack Android-specific experience and your expertise would be really valuable. 🙇♀️ |
There was a problem hiding this comment.
This looks good to me. I tested both the WordPress and Jetpack apps on an Samsung Galaxy S20, both light and dark modes. I did not encounter any unexpected UI colors. 🎉
I am interested to see @mkevins' feedback on the code before we merge.
Thank you for your hard work to put this together!
I'm happy to have a look 👍 I've taken the PR for a spin to test it out, and I found some strange behavior: the image and gallery blocks are invisible for some reason. I suspect that it isn't directly due to the changes in this PR, but somehow indirectly. For example, the images reappear when I revert this single line: diff --git a/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml b/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
index 5ea25d451a..9777e8c01d 100644
--- a/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
+++ b/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
@@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gutenberg_container"
- android:theme="@style/GutenbergContainerTheme"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@android:color/white"I notice that it does not occur for other image-containing blocks, such as media-text, cover, etc. so I suspect it has something to do with an issue with FastImage. I found a similar issue that has been addressed with a work-around: WordPress/gutenberg#42869 and sure enough, invoking that work-around in this PR (i.e. rotating the device to trigger the fallback I haven't gotten to the root of why this is happening, but I've tried a few things to investigate it. Since we are indeed using a custom Glide module, I added this: diff --git a/packages/react-native-bridge/android/build.gradle b/packages/react-native-bridge/android/build.gradle
index 99069d55cf..064b8eb015 100644
--- a/packages/react-native-bridge/android/build.gradle
+++ b/packages/react-native-bridge/android/build.gradle
@@ -1,6 +1,7 @@
buildscript {
ext {
willPublishReactNativeBridgeBinary = properties["willPublishReactNativeBridgeBinary"]?.toBoolean() ?: false
+ excludeAppGlideModule = true
}
}
diff --git a/packages/react-native-editor/android/build.gradle b/packages/react-native-editor/android/build.gradle
index 848c570734..05bb0c8a33 100644
--- a/packages/react-native-editor/android/build.gradle
+++ b/packages/react-native-editor/android/build.gradle
@@ -8,6 +8,7 @@ buildscript {
targetSdkVersion = 30
supportLibVersion = '28.0.0'
ndkVersion = "21.4.7075529"
+ excludeAppGlideModule = true
}
repositories {
google()But this did not resolve the issue. Disabling FastImage does resolve the issue, so perhaps that is an option until we uncover the root of the issue (cc: @geriux in case you have any more insight about that, or know whether disabling FastImage is feasible). To explore more about the issue, I also tried using the parent theme directly (i.e. bypassing the other changes from this PR): diff --git a/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml b/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
index 5ea25d451a..3f251531f2 100644
--- a/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
+++ b/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gutenberg_container"
- android:theme="@style/GutenbergContainerTheme"
+ android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar.Bridge"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@android:color/white"and even applying just this single change directly on diff --git a/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml b/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
index 9777e8c01d..3f251531f2 100644
--- a/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
+++ b/libs/editor/src/main/res/layout/fragment_gutenberg_editor.xml
@@ -1,6 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gutenberg_container"
+ android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar.Bridge"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="@android:color/white"and this was enough to cause the invisible images with FastImage. I will investigate this further. |
|
Circling back to mention that I investigated the disappearing images further here, but did not discover the root cause of that issue. Aside from the unexpected issue described above (which seems to only be tangentially related with the changes in this PR), the approach in this PR looks correct to me. Nice work making these changes. When the FastImage issue is resolved (either temporarily by disabling it, or by resolving the root cause), I think it'd be good to merge |
Yes I think we should, I'll open a PR to do that. I'll take that offer to review it 😄 Thanks! |
|
I've created the PR to disable FastImage on Android. |
|
Now that FastImage is disabled on Android in |
@dcalhoun I agree on not merging this PR until version 20.6 is cut, due to the need of integrating the disabling of FastImage into WPAndroid. However, I think that for moving forward the PR review and testing, maybe we could just update the Gutenberg Mobile reference to point to the latest commit of the Gutenberg Mobile repo, wdyt? |
Indeed, a great point. I will do that. |
… into gutenberg/incorporate-consistent-accent-color
dcalhoun
left a comment
dcalhoun
left a comment
There was a problem hiding this comment.
I retested the color changes in the Jetpack and WordPress mobile apps on a Samsung Galaxy S20. 👍🏻
@mkevins I did not encounter any of the aforementioned issues with the Image or Gallery block. However, I was unable to reproduce this issue with the older build either. Would you be willing to verify the invisible images are no longer an issue for you?
Once we are able to integrate a gutenberg-mobile alpha release after the 20.5 release cut, I believe can move forward merging this PR.
build.gradle
Outdated
| wordPressUtilsVersion = '2.7.0' | ||
| wordPressLoginVersion = 'trunk-657bed28fa735780e3ffcc214503a9e5d1286d6c' | ||
| gutenbergMobileVersion = 'v1.81.0' | ||
| gutenbergMobileVersion = 'trunk-c39088daab5b49b48db81b01bc1e143999d8396b' |
There was a problem hiding this comment.
Friendly reminder: we'll need to change this to a gutenberg-mobile alpha release prior to merging this PR.
Oh interesting! Would you mind adding the testing details (phone, API version, etc.) for the scenario in which you could not reproduce the invisible images? I think this could be really helpful in narrowing down the root cause of the FastImage issue (since I believe there is still an effort underway to re-enable that once the root of the issue is found). Perhaps adding a note to this issue would be the best place for it, if you have a moment.
Sure thing! I'll test this today. 👍 Thanks for pushing the ref update! |
I tested
Thank you! |
mkevins
left a comment
mkevins
left a comment
There was a problem hiding this comment.
These changes look good, and I have tested this with the latest gutenberg-mobile reference update (which brings changes to disable FastImage), and this is working as expected. I tested all the flows mentioned in the description, as well as exploring a few menus / settings (i.e. URL input for image links, etc.), and the colors are working as described. Nice work!
… into gutenberg/incorporate-consistent-accent-color
|
Found 1 violations: The PR caused the following dependency changes: +--- com.automattic:about:0.0.6
| \--- androidx.compose.ui:ui:1.0.5 -> 1.1.1
-| \--- androidx.autofill:autofill:1.0.0 -> 1.1.0
+| \--- androidx.autofill:autofill:1.0.0
+--- com.automattic:stories:1.4.0
-| +--- com.github.bumptech.glide:glide:4.10.0 -> 4.12.0
-| | +--- com.github.bumptech.glide:gifdecoder:4.12.0
-| | | \--- androidx.annotation:annotation:1.0.0 -> 1.2.0
-| | +--- com.github.bumptech.glide:disklrucache:4.12.0
-| | +--- com.github.bumptech.glide:annotations:4.12.0
-| | +--- androidx.fragment:fragment:1.0.0 -> 1.4.1 (*)
-| | +--- androidx.vectordrawable:vectordrawable-animated:1.0.0 -> 1.1.0 (*)
-| | \--- androidx.exifinterface:exifinterface:1.2.0
-| | \--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+| +--- com.github.bumptech.glide:glide:4.10.0 -> 4.11.0
+| | +--- com.github.bumptech.glide:gifdecoder:4.11.0
+| | | \--- androidx.annotation:annotation:1.0.0 -> 1.2.0
+| | +--- com.github.bumptech.glide:disklrucache:4.11.0
+| | +--- com.github.bumptech.glide:annotations:4.11.0
+| | +--- androidx.fragment:fragment:1.0.0 -> 1.4.1 (*)
+| | +--- androidx.vectordrawable:vectordrawable-animated:1.0.0 -> 1.1.0 (*)
+| | \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.1.0-beta01
+| | \--- androidx.annotation:annotation:1.1.0 -> 1.2.0
| +--- jp.wasabeef:glide-transformations:4.3.0
-| | \--- com.github.bumptech.glide:glide:4.11.0 -> 4.12.0 (*)
+| | \--- com.github.bumptech.glide:glide:4.11.0 (*)
| \--- com.automattic.stories:photoeditor:1.4.0
| +--- androidx.camera:camera-core:1.0.0-alpha06
-| | \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.2.0 (*)
+| | \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.1.0-beta01 (*)
-| +--- com.github.bumptech.glide:glide:4.10.0 -> 4.12.0 (*)
+| +--- com.github.bumptech.glide:glide:4.10.0 -> 4.11.0 (*)
| \--- com.automattic.stories:mp4compose:1.4.0
-| \--- com.github.bumptech.glide:glide:4.10.0 -> 4.12.0 (*)
+| \--- com.github.bumptech.glide:glide:4.10.0 -> 4.11.0 (*)
+--- project :libs:image-editor
| \--- com.github.yalantis:ucrop:2.2.4
-| +--- androidx.exifinterface:exifinterface:1.1.0-beta01 -> 1.2.0 (*)
+| +--- androidx.exifinterface:exifinterface:1.1.0-beta01 (*)
| \--- com.squareup.okhttp3:okhttp:3.12.1 -> 4.9.2
-| \--- com.squareup.okio:okio:2.8.0 -> 2.9.0
-| +--- org.jetbrains.kotlin:kotlin-stdlib:1.4.10 -> 1.6.10 (*)
-| \--- org.jetbrains.kotlin:kotlin-stdlib-common:1.4.10 -> 1.6.10
+| \--- com.squareup.okio:okio:2.8.0
+| +--- org.jetbrains.kotlin:kotlin-stdlib:1.4.0 -> 1.6.10 (*)
+| \--- org.jetbrains.kotlin:kotlin-stdlib-common:1.4.0 -> 1.6.10
-+--- androidx.exifinterface:exifinterface:1.0.0 -> 1.2.0 (*)
++--- androidx.exifinterface:exifinterface:1.0.0 -> 1.1.0-beta01 (*)
-+--- com.squareup.okio:okio:2.8.0 -> 2.9.0 (*)
++--- com.squareup.okio:okio:2.8.0 (*)
+--- com.airbnb.android:lottie:3.4.0
-| \--- com.squareup.okio:okio:1.17.4 -> 2.9.0 (*)
+| \--- com.squareup.okio:okio:1.17.4 -> 2.8.0 (*)
-+--- com.github.bumptech.glide:glide:4.10.0 -> 4.12.0 (*)
++--- com.github.bumptech.glide:glide:4.10.0 -> 4.11.0 (*)
+--- com.google.android.gms:play-services-code-scanner:16.0.0-beta1
| \--- com.google.mlkit:barcode-scanning-common:17.0.0
| \--- com.google.mlkit:vision-common:17.0.0
-| \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.2.0 (*)
+| \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.1.0-beta01 (*)
+--- org.wordpress:fluxc:{strictly 1.50.0} -> 1.50.0
-| \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.2.0 (*)
+| \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.1.0-beta01 (*)
+--- project :libs:editor
-| \--- org.wordpress-mobile.gutenberg-mobile:react-native-gutenberg-bridge:v1.81.0
-| +--- com.facebook.fresco:animated-gif:2.0.0
-| | +--- com.parse.bolts:bolts-tasks:1.4.0
-| | +--- com.facebook.soloader:soloader:0.6.0 -> 0.10.1
-| | | +--- com.facebook.soloader:annotation:0.10.1
-| | | \--- com.facebook.soloader:nativeloader:0.10.1
-| | +--- com.facebook.fresco:fbcore:2.0.0 -> 2.5.0
-| | \--- com.facebook.fresco:animated-base:2.0.0
-| | +--- com.facebook.fresco:fbcore:2.0.0 -> 2.5.0
-| | +--- com.facebook.fresco:imagepipeline-base:2.0.0 -> 2.5.0
-| | | +--- com.facebook.infer.annotation:infer-annotation:0.18.0
-| | | | +--- com.google.code.findbugs:jsr305:3.0.1 -> 3.0.2
-| | | | \--- org.jetbrains.kotlin:kotlin-annotations-jvm:1.3.72
-| | | +--- com.facebook.soloader:annotation:0.10.1
-| | | +--- com.parse.bolts:bolts-tasks:1.4.0
-| | | \--- com.facebook.fresco:fbcore:2.5.0
-| | +--- com.facebook.fresco:imagepipeline:2.0.0 -> 2.5.0
-| | | +--- com.facebook.soloader:nativeloader:0.10.1
-| | | +--- com.facebook.soloader:annotation:0.10.1
-| | | +--- com.parse.bolts:bolts-tasks:1.4.0
-| | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | \--- com.facebook.fresco:imagepipeline-base:2.5.0 (*)
-| | +--- com.facebook.fresco:animated-drawable:2.0.0
-| | | +--- com.facebook.fresco:imagepipeline:2.0.0 -> 2.5.0 (*)
-| | | +--- com.facebook.fresco:drawee:2.0.0 -> 2.5.0
-| | | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | | +--- com.facebook.fresco:imagepipeline:2.5.0 (*)
-| | | | +--- com.facebook.fresco:imagepipeline-native:2.5.0
-| | | | | +--- com.facebook.fresco:imagepipeline:2.5.0 (*)
-| | | | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | | | \--- com.facebook.soloader:soloader:0.10.1 (*)
-| | | | +--- com.facebook.fresco:memory-type-ashmem:2.5.0
-| | | | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | | | \--- com.facebook.fresco:imagepipeline:2.5.0 (*)
-| | | | +--- com.facebook.fresco:memory-type-native:2.5.0
-| | | | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | | | +--- com.facebook.fresco:imagepipeline:2.5.0 (*)
-| | | | | +--- com.facebook.fresco:imagepipeline-native:2.5.0 (*)
-| | | | | \--- com.facebook.soloader:nativeloader:0.10.1
-| | | | +--- com.facebook.fresco:memory-type-java:2.5.0
-| | | | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | | | +--- com.facebook.fresco:imagepipeline:2.5.0 (*)
-| | | | | \--- com.facebook.fresco:imagepipeline-native:2.5.0 (*)
-| | | | +--- com.facebook.fresco:ui-common:2.5.0
-| | | | | \--- com.facebook.fresco:fbcore:2.5.0
-| | | | \--- com.facebook.fresco:middleware:2.5.0
-| | | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | | \--- com.facebook.fresco:ui-common:2.5.0 (*)
-| | | \--- com.facebook.fresco:fbcore:2.0.0 -> 2.5.0
-| | \--- com.parse.bolts:bolts-tasks:1.4.0
-| +--- com.google.android.material:material:1.2.1 -> 1.6.0-alpha01 (*)
-| +--- com.facebook.react:react-native:0.66.2
-| | +--- com.facebook.infer.annotation:infer-annotation:0.18.0 (*)
-| | +--- com.facebook.yoga:proguard-annotations:1.19.0
-| | +--- javax.inject:javax.inject:1
-| | +--- androidx.appcompat:appcompat:1.0.2 -> 1.3.1 (*)
-| | +--- androidx.autofill:autofill:1.1.0 (*)
-| | +--- androidx.swiperefreshlayout:swiperefreshlayout:1.0.0 -> 1.1.0 (*)
-| | +--- com.facebook.fresco:fresco:2.5.0
-| | | +--- com.facebook.fresco:soloader:2.5.0
-| | | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | | \--- com.facebook.soloader:soloader:0.10.1 (*)
-| | | +--- com.facebook.soloader:nativeloader:0.10.1
-| | | +--- com.facebook.fresco:ui-common:2.5.0 (*)
-| | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | +--- com.facebook.fresco:drawee:2.5.0 (*)
-| | | +--- com.facebook.fresco:imagepipeline:2.5.0 (*)
-| | | +--- com.facebook.fresco:imagepipeline-native:2.5.0 (*)
-| | | +--- com.facebook.fresco:memory-type-ashmem:2.5.0 (*)
-| | | +--- com.facebook.fresco:memory-type-native:2.5.0 (*)
-| | | +--- com.facebook.fresco:memory-type-java:2.5.0 (*)
-| | | +--- com.facebook.fresco:nativeimagefilters:2.5.0
-| | | | +--- com.facebook.fresco:imagepipeline:2.5.0 (*)
-| | | | +--- com.facebook.fresco:imagepipeline-native:2.5.0 (*)
-| | | | +--- com.facebook.fresco:memory-type-ashmem:2.5.0 (*)
-| | | | +--- com.facebook.fresco:memory-type-native:2.5.0 (*)
-| | | | +--- com.facebook.fresco:memory-type-java:2.5.0 (*)
-| | | | +--- com.facebook.soloader:nativeloader:0.10.1
-| | | | +--- com.parse.bolts:bolts-tasks:1.4.0
-| | | | \--- com.facebook.fresco:fbcore:2.5.0
-| | | \--- com.facebook.fresco:nativeimagetranscoder:2.5.0
-| | | +--- com.facebook.fresco:imagepipeline-base:2.5.0 (*)
-| | | +--- com.facebook.soloader:nativeloader:0.10.1
-| | | +--- com.parse.bolts:bolts-tasks:1.4.0
-| | | \--- com.facebook.fresco:fbcore:2.5.0
-| | +--- com.facebook.fresco:imagepipeline-okhttp3:2.5.0
-| | | +--- com.facebook.fresco:fbcore:2.5.0
-| | | +--- com.facebook.fresco:imagepipeline:2.5.0 (*)
-| | | +--- com.facebook.fresco:imagepipeline-native:2.5.0 (*)
-| | | +--- com.facebook.fresco:memory-type-ashmem:2.5.0 (*)
-| | | +--- com.facebook.fresco:memory-type-native:2.5.0 (*)
-| | | +--- com.facebook.fresco:memory-type-java:2.5.0 (*)
-| | | \--- com.squareup.okhttp3:okhttp:3.12.1 -> 4.9.2 (*)
-| | +--- com.facebook.fresco:ui-common:2.5.0 (*)
-| | +--- com.facebook.soloader:soloader:0.10.1 (*)
-| | +--- com.google.code.findbugs:jsr305:3.0.2
-| | +--- com.squareup.okhttp3:okhttp:4.9.1 -> 4.9.2 (*)
-| | +--- com.squareup.okhttp3:okhttp-urlconnection:4.9.1 -> 4.9.2 (*)
-| | +--- com.squareup.okio:okio:2.9.0 (*)
-| | \--- com.facebook.fbjni:fbjni-java-only:0.2.2
-| | \--- com.facebook.soloader:nativeloader:0.10.1
-| +--- org.wordpress-mobile:react-native-svg:9.13.6
-| | \--- com.facebook.react:react-native:0.66.2 (*)
-| +--- com.github.wordpress-mobile:react-native-video:5.2.0-wp-2
-| | +--- com.facebook.react:react-native:0.66.2 (*)
-| | +--- com.google.android.exoplayer:exoplayer:2.13.3
-| | | +--- com.google.android.exoplayer:exoplayer-core:2.13.3
-| | | | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | | +--- com.google.android.exoplayer:exoplayer-common:2.13.3
-| | | | | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | | | \--- com.google.guava:guava:27.1-android
-| | | | | +--- com.google.guava:failureaccess:1.0.1
-| | | | | \--- com.google.guava:listenablefuture:9999.0-empty-to-avoid-conflict-with-guava
-| | | | \--- com.google.android.exoplayer:exoplayer-extractor:2.13.3
-| | | | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | | \--- com.google.android.exoplayer:exoplayer-common:2.13.3 (*)
-| | | +--- com.google.android.exoplayer:exoplayer-dash:2.13.3
-| | | | +--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
-| | | | \--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | +--- com.google.android.exoplayer:exoplayer-hls:2.13.3
-| | | | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | | \--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
-| | | +--- com.google.android.exoplayer:exoplayer-smoothstreaming:2.13.3
-| | | | +--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
-| | | | \--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | +--- com.google.android.exoplayer:exoplayer-transformer:2.13.3
-| | | | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | | \--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
-| | | \--- com.google.android.exoplayer:exoplayer-ui:2.13.3
-| | | +--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
-| | | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | +--- androidx.recyclerview:recyclerview:1.1.0 (*)
-| | | \--- androidx.media:media:1.2.1 (*)
-| | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | +--- androidx.core:core:1.1.0 -> 1.7.0 (*)
-| | +--- androidx.media:media:1.1.0 -> 1.2.1 (*)
-| | +--- com.google.android.exoplayer:extension-okhttp:2.13.3
-| | | +--- com.google.android.exoplayer:exoplayer-common:2.13.3 (*)
-| | | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
-| | | \--- com.squareup.okhttp3:okhttp:3.12.11 -> 4.9.2 (*)
-| | \--- com.squareup.okhttp3:okhttp:${OKHTTP_VERSION} -> 4.9.2 (*)
-| +--- com.github.wordpress-mobile:react-native-linear-gradient:2.5.6-wp-2
-| | \--- com.facebook.react:react-native:0.66.2 (*)
-| +--- com.github.wordpress-mobile:react-native-slider:3.0.2-wp-2
-| | \--- com.facebook.react:react-native:0.66.2 (*)
-| +--- org.wordpress-mobile:react-native-get-random-values:1.4.0
-| | \--- com.facebook.react:react-native:0.66.2 (*)
-| +--- org.wordpress-mobile:react-native-masked-view:0.2.6
-| | \--- com.facebook.react:react-native:0.66.2 (*)
-| +--- org.wordpress-mobile:react-native-screens:2.9.0
-| | +--- com.facebook.react:react-native:0.66.2 (*)
-| | +--- androidx.appcompat:appcompat:1.1.0 -> 1.3.1 (*)
-| | +--- androidx.fragment:fragment:1.2.1 -> 1.4.1 (*)
-| | +--- androidx.coordinatorlayout:coordinatorlayout:1.1.0 (*)
-| | +--- androidx.swiperefreshlayout:swiperefreshlayout:1.0.0 -> 1.1.0 (*)
-| | \--- com.google.android.material:material:1.1.0 -> 1.6.0-alpha01 (*)
-| +--- org.wordpress-mobile:react-native-safe-area-context:3.2.0
-| | \--- com.facebook.react:react-native:0.66.2 (*)
-| +--- com.github.wordpress-mobile:react-native-reanimated:2.4.1-wp-3
-| +--- com.github.wordpress-mobile:react-native-prompt-android:1.0.0-wp-2
-| | +--- com.facebook.react:react-native:0.66.2 (*)
-| | \--- androidx.appcompat:appcompat:1.0.0 -> 1.3.1 (*)
-| +--- org.wordpress-mobile:react-native-webview:11.6.2
-| | +--- com.facebook.react:react-native:0.66.2 (*)
-| | \--- org.jetbrains.kotlin:kotlin-stdlib:1.4.10 -> 1.6.10 (*)
-| +--- org.wordpress-mobile:react-native-clipboard:1.9.0
-| | \--- com.facebook.react:react-native:0.66.2 (*)
-| +--- org.wordpress-mobile:react-native-fast-image:8.5.11
-| | +--- com.facebook.react:react-native:0.66.2 (*)
-| | +--- com.github.bumptech.glide:glide:4.12.0 (*)
-| | \--- com.github.bumptech.glide:okhttp3-integration:4.12.0
-| | +--- com.github.bumptech.glide:glide:4.12.0 (*)
-| | +--- com.squareup.okhttp3:okhttp:3.9.1 -> 4.9.2 (*)
-| | \--- androidx.annotation:annotation:1.0.0 -> 1.2.0
-| +--- com.github.wordpress-mobile:react-native-gesture-handler:2.3.2-wp-1
-| | +--- com.facebook.react:react-native:0.66.2 (*)
-| | +--- com.github.wordpress-mobile:react-native-reanimated:2.4.1-wp-1 -> 2.4.1-wp-3
-| | +--- androidx.appcompat:appcompat:1.2.0 -> 1.3.1 (*)
-| | +--- androidx.core:core-ktx:1.6.0 -> 1.7.0 (*)
-| | \--- org.jetbrains.kotlin:kotlin-stdlib:1.5.20 -> 1.6.10 (*)
-| +--- org.wordpress-mobile.gutenberg-mobile:react-native-aztec:v1.81.0
-| | +--- androidx.legacy:legacy-support-v4:1.0.0 (*)
-| | +--- androidx.gridlayout:gridlayout:1.0.0 (*)
-| | +--- androidx.cardview:cardview:1.0.0 (*)
-| | +--- androidx.appcompat:appcompat:1.2.0 -> 1.3.1 (*)
-| | +--- androidx.recyclerview:recyclerview:1.1.0 (*)
-| | +--- com.facebook.react:react-native:0.66.2 (*)
-| | +--- org.wordpress:aztec:v1.6.0 (*)
-| | +--- org.wordpress.aztec:wordpress-shortcodes:v1.6.0 (*)
-| | +--- org.wordpress.aztec:wordpress-comments:v1.6.0 (*)
-| | +--- org.wordpress.aztec:glide-loader:v1.6.0
-| | | +--- org.jetbrains.kotlin:kotlin-stdlib:1.4.20 -> 1.6.10 (*)
-| | | +--- org.wordpress:aztec:v1.6.0 (*)
-| | | \--- com.github.bumptech.glide:glide:4.10.0 -> 4.12.0 (*)
-| | \--- org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.5.32 -> 1.6.10 (*)
-| +--- org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.5.32 -> 1.6.10 (*)
-| \--- org.wordpress-mobile:hermes-release-mirror:0.66.2
+| \--- org.wordpress-mobile.gutenberg-mobile:react-native-gutenberg-bridge:v1.82.0-alpha1 FAILED
+--- com.zendesk:support:5.0.2
| \--- com.zendesk:guide:1.0.1
| \--- com.zendesk:messaging:5.1.0
| \--- com.zendesk:common-ui:4.0.1
| \--- com.zendesk.belvedere2:belvedere:3.0.0-RC
| \--- com.squareup.picasso:picasso:2.8
-| \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.2.0 (*)
+| \--- androidx.exifinterface:exifinterface:1.0.0 -> 1.1.0-beta01 (*)
-\--- com.google.android.exoplayer:exoplayer:2.13.3 (*)
+\--- com.google.android.exoplayer:exoplayer:2.13.3
+ +--- com.google.android.exoplayer:exoplayer-core:2.13.3
+ | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+ | +--- com.google.android.exoplayer:exoplayer-common:2.13.3
+ | | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+ | | \--- com.google.guava:guava:27.1-android
+ | | +--- com.google.guava:failureaccess:1.0.1
+ | | \--- com.google.guava:listenablefuture:9999.0-empty-to-avoid-conflict-with-guava
+ | \--- com.google.android.exoplayer:exoplayer-extractor:2.13.3
+ | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+ | \--- com.google.android.exoplayer:exoplayer-common:2.13.3 (*)
+ +--- com.google.android.exoplayer:exoplayer-dash:2.13.3
+ | +--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
+ | \--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+ +--- com.google.android.exoplayer:exoplayer-hls:2.13.3
+ | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+ | \--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
+ +--- com.google.android.exoplayer:exoplayer-smoothstreaming:2.13.3
+ | +--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
+ | \--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+ +--- com.google.android.exoplayer:exoplayer-transformer:2.13.3
+ | +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+ | \--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
+ \--- com.google.android.exoplayer:exoplayer-ui:2.13.3
+ +--- com.google.android.exoplayer:exoplayer-core:2.13.3 (*)
+ +--- androidx.annotation:annotation:1.1.0 -> 1.2.0
+ +--- androidx.recyclerview:recyclerview:1.1.0 (*)
+ \--- androidx.media:media:1.2.1 (*)
Please review and act accordingly
|
Fixes the Android side of wordpress-mobile/gutenberg-mobile#5047, iOS PR is here
Description
In the Jetpack app, some UI elements like the cursor, text selection, and caret are using a green colour. However, the rest of the editor’s elements are using blue.
To be consistent with colours across the editor, this PR seeks to update them for consistency across both the WordPress and Jetpack apps. The PR specifically achieves the following for the Jetpack app:
There's still some known inconsistencies that need to be addressed in separate PRs, however:
Screenshots
A before/after screenshot taken from the Jetpack app to show the editor's green → blue colour changes:
Testing
Special considerations to keep in mind while testing include:
Code Changes
React Native RootView
GutenbergContainerThemewas created under the editor'sstyles.xmlfile. This theme references an accent colour that equals the same hex code as the WordPress app's primary colour. This new theme is then applied to the editor's fragment.xml.Post Settings
colorPrimaryEditorvariable has been added tocolors_base.xmlfor both WordPress (light mode / dark mode) and Jetpack (light mode / dark mode).PostSettingsThemein the main app'sstyle.xml(light mode / dark mode).PostSettingsThemecan now be applied to any areas in the Post Settings screen that should remain blue across both the WordPress and Jetpack apps. For example, the input dialogs and the add categories screen.Regression Notes
There's the potential for this PR to unexpectedly change colours in either the WordPress or Jetpack app beyond what's desired. For example, the cursor colour may unexpectedly change within the WordPress app.
I manually tested both apps, making sure to experiment with various blocks and writing flows.
No automated tests.
PR submission checklist:
RELEASE-NOTES.txtif necessary.