Skip to content

Support Theme Colors and Gradients#2241

Merged
chipsnyder merged 37 commits intodevelopfrom
issue/1744-themeColors
Jun 3, 2020
Merged

Support Theme Colors and Gradients#2241
chipsnyder merged 37 commits intodevelopfrom
issue/1744-themeColors

Conversation

@chipsnyder
Copy link
Copy Markdown
Contributor

@chipsnyder chipsnyder commented May 8, 2020

Fixes: #1744

Related PRs
gutenberg WordPress/gutenberg#22197
WordPress-Android wordpress-mobile/WordPress-Android#12041
WordPress-FluxC-Android wordpress-mobile/WordPress-FluxC-Android#1593
WordPress-iOS wordpress-mobile/WordPress-iOS#14085


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

PR submission checklist:

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

@chipsnyder chipsnyder added the [Type] Enhancement Improves a current area of the editor label May 8, 2020
@chipsnyder chipsnyder marked this pull request as ready for review May 8, 2020 19:15
@chipsnyder
Copy link
Copy Markdown
Contributor Author

Hey @dratwas

I made some changes to update the settings with colors and gradients loaded from themes. When you get time will you take a look and see if this will conflict with anything you're working on for the color picker?

@chipsnyder
Copy link
Copy Markdown
Contributor Author

How about Android?

@pinarol and I were thinking it would be best to get iOS and the Gutenberg side merged first to get feedback then do a different PR for Android (currently in progress).

I should have the Android side of this done today or tomorrow, so I'll have an Android build available for testing then.

@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented May 28, 2020

Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

@chipsnyder
Copy link
Copy Markdown
Contributor Author

I should have the Android side of this done today or tomorrow, so I'll have an Android build available for testing then.

I was able to get the Android side up and included it in this PR since it kind of went stale. @dratwas Would you be able to re-review with those changes?

The iOS side was reviewed and tested by @SergioEstevao and I reached out to @mchowning to request his review on the Android side

@dratwas
Copy link
Copy Markdown
Contributor

dratwas commented Jun 3, 2020

I'm not sure if the update of bundles should be a part of that PR but the code looks good!

Awesome work @chipsnyder 🎉

@chipsnyder
Copy link
Copy Markdown
Contributor Author

I'm not sure if the update of bundles should be a part of that PR

Thanks for the review @dratwas. I included the bundle update here so the Native App Prs can be merged to the after_1.29.0 branches with the merged commit. That way we don't have a PR sitting stale until the official Gutenberg release merge.

Copy link
Copy Markdown
Contributor

@dratwas dratwas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job @chipsnyder 🎉

@chipsnyder chipsnyder added this to the 1.30 milestone Jun 3, 2020
@chipsnyder chipsnyder merged commit a3a155d into develop Jun 3, 2020
@chipsnyder chipsnyder deleted the issue/1744-themeColors branch June 3, 2020 18:44
<Editor
initialHtml={ initialData }
initialHtmlModeEnabled={ initialHtmlModeEnabled }
initialHtmlModeEnabled={ this.props.initialHtmlModeEnabled }
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not suggesting a change here, just curious if there is a rationale for why initialHtmlModeEnabled was removed from a destructuring while the other three props were added to it?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this came about as just a resolution to a merge conflict. For the other const declarations it was suggested to use this.props.whatever which I had converted to on a previous merge then I think just ran into issues when resolving it later

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Type] Enhancement Improves a current area of the editor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants