Contact Info Jetpack enabled in Production

[cameronvoell]

The Contact-info jetpack block was added to gutenberg-mobile behind a DEV flag in this PR: #1934. This issue is tracking the following required tasks remaining before removing the DEV Flag:

2. WP API Auth support for checking if jetpack is enabled.
3. Design Review - (can be tested with App Center build 27246 link)

[iamthomasbishop]

Hey @cameronvoell 👋 Finally had some time to sit down to do a proper design review — impressive work thus far! My notes are mostly small things, which I hope won't be massive curveballs 😄

• When the block is added to the canvas, the parent block (Contact info) should be selected — currently the first child (Email) is selected.
• Font-size on the child blocks is a bit small (should be standard size, 16px). We might want to bump up the line-height of the Address block as a result.
• The color of placeholder text labels should use the standard colors (looks like it’s using a different gray).
• Question regarding the Address child block: Does this get different formatting for different locales? Or is it US-address-only?
• Can we pull the `Link address to...” toggle into a block settings sheet? It seems odd to place that on the canvas.
• Question: Are there any other block settings for the parent?
• Keyboard types: Can we change the type of keyboard based on the type of input it is? For example, when the user is in the Phone number input they should see the number-centric keyboard, when in Email they should see the email-centric keyboard, etc.
• We might want to restrict the types of blocks that are shown in the inserter while a child block is selected. For example, if I have Phone number selected and tap on the inserter, I would expect to only see blocks related to the parent Contact info block (Phone number, address, and email). Although I could see a case where folks would want to add a separator, headings, or spacer 🤔 I would be surprised if cover, quote, gallery, video, list, or image are used in this context.
• I don’t think this is specific to this project, but I noticed that sometimes when you tap the keyboard-hide button while a RichText block is selected, the keyboard doesn’t actually hide, it just removes focus from the block.

[illusaen]

Hey @cameronvoell 👋 Finally had some time to sit down to do a proper design review — impressive work thus far! My notes are mostly small things, which I hope won't be massive curveballs 😄

* When the block is added to the canvas, the parent block (`Contact info`) should be selected — currently the first child (`Email`) is selected.

* Font-size on the child blocks is a bit small (should be standard size, 16px). We might want to bump up the line-height of the Address block as a result.

* The color of placeholder text labels should use the standard colors (looks like it’s using a different gray).

* Question regarding the `Address` child block: Does this get different formatting for different locales? Or is it US-address-only?

* Can we pull the `Link address to...” toggle into a block settings sheet? It seems odd to place that on the canvas.

* Question: Are there any other block settings for the parent?

* Keyboard types: Can we change the type of keyboard based on the type of input it is? For example, when the user is in the `Phone number` input they should see the number-centric keyboard, when in `Email` they should see the email-centric keyboard, etc.

* We might want to restrict the types of blocks that are shown in the inserter while a child block is selected. For example, if I have `Phone number` selected and tap on the inserter, I would expect to only see blocks related to the parent `Contact info` block (Phone number, address, and email). Although I could see a case where folks would want to add a separator, headings, or spacer 🤔 I would be surprised if cover, quote, gallery, video, list, or image are used in this context.

* I don’t think this is specific to this project, but I noticed that sometimes when you tap the `keyboard-hide` button while a RichText block is selected, the keyboard doesn’t actually hide, it just removes focus from the block.

Hello @iamthomasbishop ! Working on this as my trial project. I've answered some questions and made some changes according to your points as seen in the giphy below; however, I do have some questions still:

• Placeholder color used elsewhere is currently a custom color (not in base-styles) -- should I use that one instead of the light-gray-placeholder color in base-styles?
• Are there changes in color (placeholder color, text color, etc) that I should be adding in dark mode?
• Do I still need to increase line height for the address lines?
• Is there a style I need to use for the block settings for the "Link to Google Map" settings?

  Answer to your question: parent contact info block currently does not have other settings.

• Answer to your question on address locales: Currently, the format does not change but the text is localized.
• Should I be changing behaviour (i.e. don't select email on insert, limit available inserted blocks when in contact info) for JetPack web as well? Currently I am but I can revert those changes if needed.
• Answer to your question about keyboard hiding: I have noticed this issue in other blocks as well but I can take a look at it if you'd like. Not sure if it should be part of this issue though?
  
  

[iamthomasbishop]

@illusaen 👋 I'll try to answer your questions while I've got a moment, and I can loop back tomorrow if you have additional questions or if something I write doesn't make sense 😆

Placeholder color used elsewhere is currently a custom color (not in base-styles) -- should I use that one instead of the light-gray-placeholder color in base-styles?

I'm not 100% sure where light-gray-placeholder is coming from, but I am guessing it's one of the color we're getting from the web side. Essentially what I'd like is the placeholder text color on this block to match that of other blocks. I can dig around tomorrow in our base-styles/color variables to figure out which exact ones we are using in light mode / dark mode.

Are there changes in color (placeholder color, text color, etc) that I should be adding in dark mode?

We're in a bit of an awkward transition w/r/t colors right now (we're partly migrated, will be finishing that migration in the next few weeks), so temporarily light mode is using some "old" colors (aka Colors Archive) and dark mode is using some "new-ish" colors (aka Color Studio). Again I'd have to look at exact colors to remember how they're mapped in our codebase, but that's the gist. Suffice it to say, the state of these color variables/tokens will be dramatically improved in the coming weeks 😄

Do I still need to increase line height for the address lines?

I think that'd be great -- at least to provide a larger tap-target for each item. IIRC, line-heights work slightly different between platforms, but ideally each row would be slightly taller in order to provide a slightly larger tap target. Perhaps we can start with an additional 2 or 4px on top/bottom each.

Is there a style I need to use for the block settings for the "Link to Google Map" settings?

I think we just need some padding on the left/right sides of the table cell. The rest of the styling on the cell is inherited and looks about right. We should probably also add a title to the sheet (before the switch cell), using the section title component. That would make the bottom sheet look something like this:

Should I be changing behaviour (i.e. don't select email on insert, limit available inserted blocks when in contact info) for JetPack web as well? Currently I am but I can revert those changes if needed.

I don't think we should be touching the web side's behavior, but I'll let a dev chime in to confirm/deny.

Answer to your question about keyboard hiding: I have noticed this issue in other blocks as well but I can take a look at it if you'd like. Not sure if it should be part of this issue though?

Yea, that is probably a separate issue, think it's a known one. If not, we can make an issue and tackle it separately.

[illusaen]

Hi @iamthomasbishop, I found a few different places using different placeholder text colors -- at a short glance, Rich Text, Button, and Gallery Image. I'm using Rich Text since that seems to be the most widely-used one; please give me a shout if I should be using a different one. Rich Text also comes with a dark style for dark mode while the others do not.

I added padding to line height (2px) for not just the address lines but also email/phone number since I felt like they looked mismatched if I only added it to one; I can change that if desired though.

I'm using default settings for block settings now; if more padding is desired, that can easily be changed as well. However, there is no current translation for the string Contact Info Settings.

Please find Giphy/SS attached.

[iamthomasbishop]

@illusaen I think the colors are still slightly off. I believe rich text is correct component, but the colors don't look quite right (for example, the "start writing" placeholder is the desired color, which is a different color between light/dark modes. Here's a visual in dark mode).

added padding to line height (2px) for not just the address lines but also email/phone number since I felt like they looked mismatched if I only added it to one; I can change that if desired though.

I don't think we need to add padding/height to the single-field blocks, I just want to make sure that the tap targets (rows) on the multi-field blocks are large enough (example). Out of curiosity, what is the current height of each row in the address block? I think something in the neighborhood of ~28px should be sufficient.

I'm using default settings for block settings now; if more padding is desired, that can easily be changed as well.

The styling/padding on the sheet looks good in your new examples. Also, I just realized I used the wrong title in that settings sheet -- it should use the currently selected block, which would have been the Address -- so my mockup should have shown "Address settings" as the title, like this.

However, there is no current translation for the string Contact Info Settings.

I'm guessing that is a side effect of moving the control to the settings sheet, but I'm not sure. Perhaps we'll need to initiate or make this translatable, but I'm not sure how we would go about doing that.

@maxme do you have any insight into how we would make this translatable? ☝️ tl;dr -- we're moving this "Link address to Google Maps" setting (a switch cell) from the canvas to a block settings bottomSheet.

[illusaen]

@illusaen I think the colors are still slightly off. I believe rich text is correct component, but the colors don't look quite right (for example, the "start writing" placeholder is the desired color, which is a different color between light/dark modes. Here's a visual in dark mode).

added padding to line height (2px) for not just the address lines but also email/phone number since I felt like they looked mismatched if I only added it to one; I can change that if desired though.

I don't think we need to add padding/height to the single-field blocks, I just want to make sure that the tap targets (rows) on the multi-field blocks are large enough (example). Out of curiosity, what is the current height of each row in the address block? I think something in the neighborhood of ~28px should be sufficient.

I'm using default settings for block settings now; if more padding is desired, that can easily be changed as well.

The styling/padding on the sheet looks good in your new examples. Also, I just realized I used the wrong title in that settings sheet -- it should use the currently selected block, which would have been the Address -- so my mockup should have shown "Address settings" as the title, like this.

However, there is no current translation for the string Contact Info Settings.

I'm guessing that is a side effect of moving the control to the settings sheet, but I'm not sure. Perhaps we'll need to initiate or make this translatable, but I'm not sure how we would go about doing that.

@maxme do you have any insight into how we would make this translatable? ☝️ tl;dr -- we're moving this "Link address to Google Maps" setting (a switch cell) from the canvas to a block settings bottomSheet.

• So you're 100% right -- the colors don't match even though I'm using the same variable. Will have to ask around about that.
• I'm not actually using lineHeight since it's being removed in AztecView anyway; I'm adding padding. I added 4px to the address specifically and removed the padding from the other lines; maybe that'll look better :)
• I changed the string from Contact Info Settings to Address Settings, although as an aside that string still does not exist in the *.pot files.

Here's a SS of the padding (ignoring color for now):