[RNMobile] Button Block

[lukewalczak]

Fixes wordpress-mobile/gutenberg-mobile#1513

Ref to gb-mobile: wordpress-mobile/gutenberg-mobile#1616
Ref to WordPress-Android: wordpress-mobile/WordPress-Android#10902
Ref to WordPress-iOS:wordpress-mobile/WordPress-iOS#13060

This PR introduces 1st iteration of mobile Button block component.

To achieve gradient background color on mobile react-native-linear-gradient comes in handy.

The first iteration includes:

• Rendering Button with:
  • gradient background color ✅
  • custom background color chosen from picker ✅
  • custom text color chosen from picker ✅
• Options to change border radius, add link, open url in new tab ✅
• Expanding and shrinking RichText ✅
• Notification for missing color settings functionality ✅

Blockers:

• cannot render button with background color chosen from color palette ❌
• cannot render button with text color chosen from color palette ❌
  * issue with expanding and shrinking RichText on iOS ❌
  * issue with shrinking RichText on Android ❌
  * issue with text color on WordPress-iOS ❌

To test:

-> Gradient

• open draft post on web
• add Button
• choose the gradient background color
• save post
• open draft post on mobile
• check if a gradient is correct

-> Custom background color

• open draft post on web
• add Button
• choose the custom background color from picker
• save post
• open draft post on mobile
• check if a background color is correct

-> Custom text color

• open draft post on web
• add Button
• choose the custom text color from picker
• save post
• open draft post on mobile
• check if a text color is correct

-> Border radius

• open draft post on mobile
• add Button
• open settings
• move slider to change border radius value

-> Add link

• open draft post on mobile
• add Button
• open settings
• pass a url
• switch on open in new tab
• open a preview mode
• click Button and check if it opens a new window with passed url

Screenshot / gifs:

ANDROID

regular	linear gradient

IOS

regular	linear gradient

IOS Dark Mode

regular	linear gradient

Expanding and shrinking RichText

android	ios

Settings

ios	android

Update release notes:

• If there are user facing changes, I have added an item to RELEASE-NOTES.txt.

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

[lukewalczak]

UPDATES

• new fallback color
• notification bottom sheet

regular	settings	notification

regular	settings	notification

regular	settings	notification

ios	android

[iamthomasbishop]

@lukewalczak Regarding the link rel icon part, it's looking good in the last screenshot above. 👍

[lukewalczak]

@pinarol Thanks for reporting that weird behaviour, which I didn't notice before.
I'm not sure if it's related specifically with that PR, because I'm also able to reproduce it on develop, please check pasted gif.

I saved in clipboard www.wordpress.com/read.
Then I'm opening a new post draft, and adding fresh Heading component. Next clicking the link icon and actually link is already in URL field.

Can you please check if you're able to follow my steps and reproduce it as well?

[pinarol]

Then I'm opening a new post draft, and adding fresh Heading component. Next clicking the link icon and actually link is already in URL field.

Yes but it shouldn't override the already existing link. When I try on Android with an already existing Button, it is overriding that Button's link as well.

[pinarol]

I just tested with WPiOS as well, and couldn't generate any odd behavior, here are the things I've tested:

• Custom colors are rendered with no problem, both for the text and background

• Theme colors fallback to this gray background and white font:

• New Buttons are created with the same color in web:

• Gradient colors are working well:

• Border radius is working
• Button max width is calculated OK inside inner blocks
• Bottom sheets ok with light&dark modes

Links:

• Created a link url on web and verified it is matching the value on mobile
• Created a link on mobile and see it is working it in the page preview
• Checked if 'Open in new tab' option works
• Created a link rel on web and verified it is matching the value on mobile and vice versa
• Remove link button clears everything in the link bottom sheet

So after we sort out the link override on Android, this should be ready to go. I haven't checked the latest version of the code yet, I'll do that tomorrow.

[lukewalczak]

Yes but it shouldn't override the already existing link. When I try on Android with an already existing Button, it is overriding that Button's link as well.

I see, will investigate it!

[pinarol]

Dropping some code review comments.

[pinarol]

I am happy we reverted changes to link/modal.native.js, this way it looks and works much better. IMO, after addressing the duplications this is ready to go. I tested this on WPAndroid and working ok. I'll test one more time after the possible code changes.

[lukewalczak]

UPDATES

1. Reused code for controls within bottom sheets
2. Add support for selection color

[pinarol]

LGTM! 🎉 Great job!
I repeated my tests on both platforms.