[RNMobile] Support Theme Colors and Gradients #22197
Conversation
|
Size Change: +4.34 kB (0%) Total Size: 1.12 MB
ℹ️ View Unchanged
|
chipsnyder
added
the
Mobile App - i.e. Android or iOS
|
@chipsnyder I'm afraid that it will not work with the color picker since we use the defaults from I think that the colors from settings should be used in the color-picker too. You should be able to test that since this feature is merged already. Just open button settings and check if the palette is correct. |
|
Thanks for the guidance @dratwas. I should be able to refactor that to pull from the updated settings instead of from the default pre-loaded ones. I'll work on that adjustment now. |
…/issue/1744-themeColors
|
Tested and updated this for the color picker. Those changes are in place now Instead of loading from Settings_Defaults I was able to just load in the updated settings |
|
Is it possible to use the primary color of theme when we first create the button? Currently we are still using gray. It can be worth exploring web side to find out how they decide which one is the primary color. Linking @lukewalczak in case he might have an opinion since he developed the Button block. |
This would probably be the main challenge but I'll do some digging and see what I can find. |
|
Looking through the code and at the twenty-twenty theme, for buttons, it seems to default to what's defined in the theme's class Twenty-Twenty theme: So for this case it will display We could default to displaying the first color set in |
|
I agree with @chipsnyder, |
|
The case where Button is created on mobile is easier to resolve as far as I see, we can initially set the first color in the palette to the block attributes that way it'll be displayed correctly on web as well. Let's decide what to do if the Button is created on web without any color info. What should mobile display? @iamthomasbishop was mentioning we could show a warning message somewhere in this case. Can you describe where that message could be @iamthomasbishop ? In addition to the warning message which color do you think we should fallback to? @iamthomasbishop
|
|
@youknowriad We can really use your opinion on this. Do you think it makes sense to create Button blocks with an initial palette color on web? Currently they have no color info that mobile can render until somebody sets a color for them. |
I'm not certain. Themes might have a default color and a palette to change it. It's all theme specific. I guess you can't load the default CSS on mobile which makes this hard. Maybe we can accept that mobile apps are not wysiwyg and just use the default gray buttons. It's not ideal but I suspect that this issue will come up for any block and not just for the background color which means trying to solve it in adhoc way won't get us that far |
|
Thanks for the context @youknowriad . |
@youknowriad one more question on this, what do you mean by |
|
I mean the theme's CSS that style button for instance. (editor styles) |
|
I opened a new issue for the button enhancement (wordpress-mobile/gutenberg-mobile#2278) so that we can come up with our path forward and continue to discuss that in a different thread. |
|
No new updates were needed here for the Android side so I went ahead and updated this with master, @dratwas can you take a look for me? |
Fixes: wordpress-mobile/gutenberg-mobile#1744
Related PRs
gutenberg-mobilewordpress-mobile/gutenberg-mobile#2241WordPress-Androidwordpress-mobile/WordPress-Android#12041WordPress-FluxC-Androidwordpress-mobile/WordPress-FluxC-Android#1593WordPress-iOSwordpress-mobile/WordPress-iOS#14085Description
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/themesAPI changes yet so this can be tested with a free site or a self-hosted siteTo 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
Checklist: