Skip to content

Button Block#1616

Merged
lukewalczak merged 69 commits intodevelopfrom
callstack/rnmobile/button-block
Feb 6, 2020
Merged

Button Block#1616
lukewalczak merged 69 commits intodevelopfrom
callstack/rnmobile/button-block

Conversation

@lukewalczak
Copy link
Copy Markdown
Contributor

@lukewalczak lukewalczak commented Nov 25, 2019 •
edited
Loading

Fixes #1513

Ref to gutenberg PR:WordPress/gutenberg#18823
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 ✅

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
Screenshot 2019-12-02 at 10 35 50 Screenshot 2019-12-02 at 10 45 54

IOS

regular linear gradient
Screenshot 2019-12-02 at 11 05 07 Screenshot 2019-12-02 at 10 58 11

IOS Dark Mode

regular linear gradient
Screenshot 2019-12-02 at 11 12 28 Screenshot 2019-12-02 at 11 12 43

Expanding and shrinking RichText

android ios
android_rich_text ios_rich_text

Settings

ios android
Screenshot 2019-12-02 at 11 33 20 Screenshot 2019-12-02 at 11 05 49

Update release notes:

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

@lukewalczak lukewalczak force-pushed the callstack/rnmobile/button-block branch from 11e5cb0 to ac8b73c Compare November 29, 2019 12:06
@lukewalczak lukewalczak force-pushed the callstack/rnmobile/button-block branch from 75edcd9 to b878406 Compare December 2, 2019 10:24
@lukewalczak lukewalczak force-pushed the callstack/rnmobile/button-block branch from b878406 to 7be75d1 Compare December 2, 2019 10:32
@lukewalczak lukewalczak mentioned this pull request Dec 2, 2019
Merged
7 tasks
@iamthomasbishop
Copy link
Copy Markdown
Contributor

iamthomasbishop commented Dec 3, 2019

@lukewalczak Based on screenshots above, this is looking really nice! I also noticed the platform differences for padding, so I think we should fix that ASAP.

In terms of colors, I think as a starting point this is reasonable. If we aren’t going to support changing the text/bg Coles in the inspector, I think it might be worth implementing a little hint that we are building this functionality. It could be a similar flow to unsupported blocks, where we show a (?) icon as an entry point to an informational bottom sheet. Something like this:

44E6F944-9E78-4EAB-8A54-E34EB6F18861

One more question: what does the border radius of the outline (outset blue border) look like with larger radii? Curious how that border radius looks relative to the button radius itself.

@lukewalczak
Copy link
Copy Markdown
Contributor Author

lukewalczak commented Dec 4, 2019

@iamthomasbishop Currently, the value is a total sum of button radius + spacing between button and outline + outline border width. Let me know, what should be the value if the current one is incorrect.

@iamthomasbishop
Copy link
Copy Markdown
Contributor

iamthomasbishop commented Dec 4, 2019

@lukewalczak I think it looks right. I was mostly curious how it looks as you change the border-radius up/down, but from the looks of it, it should scale nicely.

@lukewalczak lukewalczak force-pushed the callstack/rnmobile/button-block branch 3 times, most recently from d2c4fd6 to d4e109c Compare January 18, 2020 16:00
@dratwas dratwas force-pushed the callstack/rnmobile/button-block branch from d4e109c to 5226498 Compare January 18, 2020 16:16
@lukewalczak lukewalczak force-pushed the callstack/rnmobile/button-block branch from 18bc424 to 9189dc2 Compare February 4, 2020 13:48
pinarol
pinarol approved these changes Feb 5, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@pinarol pinarol left a comment

Choose a reason for hiding this comment

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

LGTM! Let's revert bundles before merge.

@lukewalczak lukewalczak merged commit 3a22f08 into develop Feb 6, 2020
@lukewalczak lukewalczak deleted the callstack/rnmobile/button-block branch February 6, 2020 15:25
This was referenced Feb 17, 2020
Merged
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@koke koke koke left review comments

@pinarol pinarol pinarol approved these changes

+2 more reviewers

@Tug Tug Tug left review comments

@dratwas dratwas dratwas left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Blocks dependencies Pull requests that update a dependency file [Type] Enhancement Improves a current area of the editor

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Button block - 1st iteration

6 participants

@lukewalczak @iamthomasbishop @dratwas @koke @Tug @pinarol