[RNMobile] Support Theme Colors and Gradients #14085

chipsnyder · 2020-05-08T00:17:55Z

Fixes: wordpress-mobile/gutenberg-mobile#1744

Related PRs
gutenberg WordPress/gutenberg#22197
gutenberg-mobile wordpress-mobile/gutenberg-mobile#2241

Description

Adds support for theme defined colors and gradients to be injected into the editor from the mobile apps.

Colors can then be displayed by the same mechanisms that utilize the settings lookup for colors and gradients. This is currently supported on Cover and Button blocks

How has this been tested?

Note Atomic sites don't seem to support the wp/v2/themes API changes yet so this can be tested with a free site or a self-hosted site
To help with testing this theme can be added to a self-hosted site: twentytwenty-copy.zip

Colors

1.) Select a theme with custom colors (such as TwentyTwenty)
2.) Create a post with blocks that have a custom color set (such as Cover or Button)
3.) Load editor on mobile

Expect to see the custom color on the block

Gradients

1.) Select a theme with custom gradients or add gradients to a theme
2.) Create a post with blocks that have a custom gradient set (such as Cover or Button)
3.) Load editor on mobile

Expect to see the custom gradient on the block

No Wifi

1.) Set up blocks for custom color and gradient
2.) View the post on mobile to cache the theme
3.) Turn off wifi to the device
4.) Reload the editor

Expect to see the custom colors on the blocks

No Wifi - Force kill the app

1.) Set up blocks for custom color and gradient
2.) View the post on mobile to cache the theme
3.) Turn off wifi to the device
4.) Stop the app from running in the background
5.) Reload the editor

Expect to see the custom colors on the blocks

Screenshots

Types of changes

New feature: Theme support

PR submission checklist:

I have considered adding unit tests where possible.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

…4-themeColor

… colors to Gutenberg

…4-themeColor

… api

…4-themeColor

peril-wordpress-mobile · 2020-05-08T00:18:00Z

You can trigger an installable build for these changes by visiting CircleCI here.

github-actions · 2020-05-08T00:18:33Z

	Warnings
⚠️	PR is missing at least one label.

Generated by 🚫 dangerJS against 2436309

peril-wordpress-mobile · 2020-05-08T00:41:38Z

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

chipsnyder · 2020-05-08T19:09:25Z

WordPress/Classes/ViewRelated/Gutenberg/GutenbergViewController.swift

+        let themeSupportStore = StoreContainer.shared.editorTheme
+        themeSupportQuery = themeSupportStore.query(EditorThemeQuery(blog: post.blog))
+        themeSupportReceipt = themeSupportStore.onStateChange { [weak self] (_, state) in
+            DispatchQueue.main.async {
+                if let strongSelf = self, let themeSupport = state.editorTheme(forBlog: strongSelf.post.blog)?.themeSupport {
+                    strongSelf.gutenberg.updateTheme(themeSupport)
+                }
+            }
+        }


I've considered moving these calls outside of the GutenbergViewController. Ultimately I liked it here better because:

It's closer to the location where it is being used.

It's a fast enough call to where the average case will have this loaded before the user sees the editor.

If on a significantly slow network and a user navigates quickly to the editor, then there would still need to be some hook to the Gutenberg editor to call update theme.

This only matters for the initial load of the editor for a blog, or if the theme changes; because the theme will load from a cache if no changes were detected.

Con:

There is a hiccup where the event can fire while the editor is still loading. I put a workaround for that issue here.

Can we move this code to an extension file: GutenbergViewController+ThemeSupport?
And have all the methods associated with theme support moved there?

Yeah that sounds like a good plan.

I ended up moving these to an extension in the same file with a comment. Moving it to a new file would have resulted in changing the access level to a few objects like gutenberg and the themeSupportQuery and themeSupportReceipt which I feel are better left as private

Let me know if this works for you.

chipsnyder · 2020-05-08T19:14:21Z

Hey @SergioEstevao

@pinarol and I thought you might be a good person to ask for in this review when you have time. Not sure how your review plate is right now though so let me know if you want me to ping someone else.

…4-themeColor

SergioEstevao · 2020-05-21T17:11:33Z

Testing the following:

Button

Expect to see the custom solid color on the block
Expect to see the custom gradient color on the block

Cover

Expect to see the custom solid color on the block
Expect to see the custom gradient color on the block

No Wifi

Expect to see the custom solid color on the block
Expect to see the custom gradient color on the block

No Wifi - Force kill the app

Expect to see the custom solid color on the block
Expect to see the custom gradient color on the block

SergioEstevao · 2020-05-21T21:15:43Z

WordPress/Classes/Stores/EditorThemeStore.swift

+        guard let responseData = try? JSONSerialization.data(withJSONObject: response, options: []) else { return }
+        let themeSupports = try? JSONDecoder().decode([EditorTheme].self, from: responseData)
+
+        if let themeKey = EditorThemeStoreState.key(forBlog: blog),


To make it easier to read this code can we use guard statements instead of having these nested conditions?

SergioEstevao · 2020-05-21T21:18:51Z

WordPress/Classes/Models/EditorTheme.swift

+
+    init(from decoder: Decoder) throws {
+        let map = try decoder.container(keyedBy: CodingKeys.self)
+        self.colors = try? map.decode([[String: String]].self, forKey: .colors)


Are we using try? here because this key can be optional?

Yeah if the colors or gradients are missing then the JSON will have editor-color-palette: false or editor-gradient-presets: false so try? here is to protect against the type change.

It's then left as an optional to make sure we don't send an empty array to Gutenberg and override the default colors that we might want.

SergioEstevao

Functionality wise it's working as described, I just left some code comments to be addressed.

chipsnyder · 2020-05-22T14:56:50Z

@SergioEstevao This should be good to go again. I'll handle the Podfile.lock conflict once I have the real commit from the GB side.

SergioEstevao · 2020-05-25T20:18:53Z

WordPress/Classes/ViewRelated/Gutenberg/GutenbergViewController.swift

@@ -747,6 +753,10 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
            "mentions": post.blog.isAccessibleThroughWPCom()
        ]
    }
+
+    func gutenbergEditorTheme() -> GutenbergEditorTheme? {


Could this method move to the extension also?

Yup I can move that. My thought here was that since it's a required method of GutenbergBridgeDataSource that it belonged with that extension, but I can just leave a comment on the method to help signify that.

This has been moved now.

SergioEstevao

Looking good, feel free to merge after the merge conflict is solved.

chipsnyder · 2020-05-27T17:37:02Z

Looking good, feel free to merge after the merge conflict is solved.

🙇 Thank you @SergioEstevao

…4-themeColor

chipsnyder · 2020-05-28T15:14:34Z

I'll plan to merge this as soon as the Gutenber Pr's are approved and merged

SergioEstevao · 2020-05-28T16:01:34Z

Can we delay this merge until next week, we are in the process of cutting a release of GB Mobile and this functionality will not be part of the release. If you wish you can merge it on the after-release branch

…

Sent from my iPhone

On 28 May 2020, at 16:14, Chip ***@***.***> wrote: I'll plan to merge this as soon as the Gutenber Pr's are approved and merged — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

SergioEstevao

Can we please target the gutenberg/after_1.29.0 branch or wait for next week after the release 1.40 is cut from develop?

chipsnyder · 2020-05-28T16:27:02Z

Yup that shouldn't be a problem to wait. I'm still working on getting reviews for the other layers any way.

…4-themeColor

SergioEstevao

All good!

chipsnyder added 12 commits March 27, 2020 10:57

Point to develop branch

16b7e6e

Merge remote-tracking branch 'origin/develop' into rnmobile/issue/174…

ce7c504

…4-themeColor

Merge remote-tracking branch 'origin/develop' into rnmobile/issue/174…

7da72a8

…4-themeColor

Adds baseline theme support store to provide ground work to add theme…

dd88567

… colors to Gutenberg

Merge remote-tracking branch 'origin/develop' into rnmobile/issue/174…

7d54903

…4-themeColor

Fetch and Parse color palette colors for the theme

020cc51

Rename ThemeSupportStore to EditorThemeStore, and removed clear theme…

5ad5b41

… api

Merge remote-tracking branch 'origin/develop' into rnmobile/issue/174…

1d38c5d

…4-themeColor

Remove unused method calls

ef4ae30

Add support for custom gradients for gutenberg

480f548

Enable local cache for theme supprt

f218bd9

Merge remote-tracking branch 'origin/develop' into rnmobile/issue/174…

2436309

…4-themeColor

This was referenced May 8, 2020

Support Theme Colors and Gradients wordpress-mobile/gutenberg-mobile#2241

Merged

[RNMobile] Support Theme Colors and Gradients WordPress/gutenberg#22197

Merged

Update gutenberg referecne

24de75d

chipsnyder commented May 8, 2020

View reviewed changes

chipsnyder requested review from SergioEstevao and pinarol May 8, 2020 19:10

chipsnyder marked this pull request as ready for review May 8, 2020 19:14

chipsnyder added 3 commits May 11, 2020 12:06

Update gutenberg reference

383e2a4

Merge remote-tracking branch 'origin/develop' into rnmobile/issue/174…

508103d

…4-themeColor

Update GB reference

4dc5f81

SergioEstevao self-assigned this May 21, 2020

SergioEstevao reviewed May 21, 2020

View reviewed changes

SergioEstevao requested changes May 21, 2020

View reviewed changes

Refactor to make code more readable

39fe593

SergioEstevao reviewed May 25, 2020

View reviewed changes

Refactor file layout

fb480ca

chipsnyder mentioned this pull request May 26, 2020

[Gutenberg] Editor Theme Color support. wordpress-mobile/WordPress-FluxC-Android#1593

Merged

1 task

SergioEstevao approved these changes May 27, 2020

View reviewed changes

chipsnyder mentioned this pull request May 27, 2020

[Gutenberg] Support Theme Colors and Gradients wordpress-mobile/WordPress-Android#12041

Merged

3 tasks

Merge remote-tracking branch 'origin/develop' into rnmobile/issue/174…

aae9ffb

…4-themeColor

SergioEstevao self-requested a review May 28, 2020 16:21

SergioEstevao requested changes May 28, 2020

View reviewed changes

Merge remote-tracking branch 'origin/develop' into rnmobile/issue/174…

06352af

…4-themeColor

chipsnyder added the Gutenberg compatibility label Jun 3, 2020

chipsnyder added this to the 15.1 milestone Jun 3, 2020

SergioEstevao self-requested a review June 3, 2020 19:20

SergioEstevao approved these changes Jun 3, 2020

View reviewed changes

chipsnyder merged commit 8056b01 into develop Jun 3, 2020

chipsnyder deleted the rnmobile/issue/1744-themeColor branch June 3, 2020 19:25

geriux mentioned this pull request Feb 17, 2021

[Global Styles] Implement Global Styles endpoint wordpress-mobile/gutenberg-mobile#3163

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RNMobile] Support Theme Colors and Gradients #14085

[RNMobile] Support Theme Colors and Gradients #14085

chipsnyder commented May 8, 2020 •

edited

Loading

peril-wordpress-mobile bot commented May 8, 2020 •

edited

Loading

github-actions bot commented May 8, 2020

peril-wordpress-mobile bot commented May 8, 2020 •

edited

Loading

chipsnyder May 8, 2020

SergioEstevao May 21, 2020

chipsnyder May 21, 2020

chipsnyder May 22, 2020

chipsnyder commented May 8, 2020

SergioEstevao commented May 21, 2020 •

edited

Loading

SergioEstevao May 21, 2020

SergioEstevao May 21, 2020

chipsnyder May 21, 2020

SergioEstevao left a comment

chipsnyder commented May 22, 2020

SergioEstevao May 25, 2020

chipsnyder May 26, 2020

chipsnyder May 26, 2020

SergioEstevao left a comment

chipsnyder commented May 27, 2020

chipsnyder commented May 28, 2020

SergioEstevao commented May 28, 2020 via email

SergioEstevao left a comment

chipsnyder commented May 28, 2020

SergioEstevao left a comment

[RNMobile] Support Theme Colors and Gradients #14085

[RNMobile] Support Theme Colors and Gradients #14085

Conversation

chipsnyder commented May 8, 2020 • edited Loading

Description

How has this been tested?

Colors

Gradients

No Wifi

No Wifi - Force kill the app

Screenshots

Types of changes

PR submission checklist:

peril-wordpress-mobile bot commented May 8, 2020 • edited Loading

github-actions bot commented May 8, 2020

peril-wordpress-mobile bot commented May 8, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chipsnyder commented May 8, 2020

SergioEstevao commented May 21, 2020 • edited Loading

Button

Cover

No Wifi

No Wifi - Force kill the app

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SergioEstevao left a comment

Choose a reason for hiding this comment

chipsnyder commented May 22, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SergioEstevao left a comment

Choose a reason for hiding this comment

chipsnyder commented May 27, 2020

chipsnyder commented May 28, 2020

SergioEstevao commented May 28, 2020 via email

SergioEstevao left a comment

Choose a reason for hiding this comment

chipsnyder commented May 28, 2020

SergioEstevao left a comment

Choose a reason for hiding this comment

chipsnyder commented May 8, 2020 •

edited

Loading

peril-wordpress-mobile bot commented May 8, 2020 •

edited

Loading

peril-wordpress-mobile bot commented May 8, 2020 •

edited

Loading

SergioEstevao commented May 21, 2020 •

edited

Loading