Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile] Color settings #21326

Merged
merged 77 commits into from
May 5, 2020
Merged

[RNMobile] Color settings #21326

merged 77 commits into from
May 5, 2020

Conversation

lukewalczak
Copy link
Member

@lukewalczak lukewalczak commented Apr 1, 2020

Description

Fixes wordpress-mobile/gutenberg-mobile#1692

Ref to testing wp-ios: wordpress-mobile/WordPress-iOS#13690
Ref to testing wp-android: wordpress-mobile/WordPress-Android#11571
Ref to gutenberg-mobile: wordpress-mobile/gutenberg-mobile#2096

That PR introduces the color settings for mobile component (in that PR color settings are connected to button component).

Color Settings allow to choose:

  • default color from defualt colors palette,
  • gradient color,
  • custom color using color picker

How has this been tested?

Check them there

Screenshots

Quick video preseting color settings functionality.

Some screenshots

Settings Background Text Custom Gradient
Screenshot 2020-04-01 at 16 31 22 Screenshot 2020-04-01 at 16 31 25 Screenshot 2020-04-01 at 16 37 50 Screenshot 2020-04-01 at 16 31 34 Screenshot 2020-04-01 at 16 31 28

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

Copy link
Member

@geriux geriux left a comment

Choose a reason for hiding this comment

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

Hey @lukewalczak 👋 left a few comments but nothing really important. I'm going to test on both iOS and Android to see if I spot anything.

@@ -50,7 +52,7 @@ const cleanEmptyObject = ( object ) => {
: cleanedNestedObjects;
};

function ColorPanel( { settings, clientId, enableContrastChecking = true } ) {
function ColorPanel( { settings, clientId, enableContrastChecking = isWebPlatform } ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm, I'm wondering if we could change it a bit to block the contrast checking for mobile even if it is set to true in props?

Copy link
Member Author

Choose a reason for hiding this comment

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

We can add check isWebPlatform before each enableContrastCheking.

Copy link
Member

@geriux geriux left a comment

Choose a reason for hiding this comment

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

LGTM! ✅ Great work on this @lukewalczak !!

Copy link
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.

Awesome work @lukewalczak 🎉

@lukewalczak lukewalczak merged commit 8177be3 into master May 5, 2020
@lukewalczak lukewalczak deleted the rnmobile/settings-color-picker branch May 5, 2020 12:29
@github-actions github-actions bot added this to the Gutenberg 8.1 milestone May 5, 2020
@iamthomasbishop
Copy link

It brings me such great joy to see this work merged — amazing work @lukewalczak! 👏

@gziolo
Copy link
Member

gziolo commented May 19, 2020

I stumbled upon this PR while trying to move supports to block.json:
#22422 (comment)

It looks like colors are handled differently on mobile. What's the reason for using conditions like:

__experimentalColor: Platform.OS === 'web',

Would it be okay if we would not run the code that uses this flag on mobile instead? It would be still valuable to share the same configuration between mobile and web. You need to keep in mind that this is something that site owners or plugin authors can modify to customize their experience.

@lukewalczak
Copy link
Member Author

lukewalczak commented May 20, 2020

Currently, on mobile, we are supporting colors only in a few blocks such as Buttons or Cover. Without blocking that flag we'll have an unexpected color setting in settings for blocks, which are not ready yet for that functionality.

The second options is to create separate file dedicated for the mobile platform (index.native.js).

@gziolo
Copy link
Member

gziolo commented May 20, 2020

@lukewalczak, thank you for the response. Would something like #22502 work as intended with the current state of support for colors in the mobile app?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block Customization Issues related to Phase 2: Customization efforts Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Color picker to be used in block settings
5 participants