Cover Block: gradient backgrounds with type radial are not rendered in the app

[designsimply]

Describe the bug

Gradient backgrounds with type radial are not rendered in the app.

To Reproduce

1. Add a Cover block from the Web editor
2. Select a gradient background with type radial.
3. Open the post from the app.
4. Expect to see the Cover block with the gradient as background.

Expected behavior

I expected to see a result similar to the web view when I open the cover block in the app.

Screenshots

Web	Block Editor Dark Theme in app	Block Editor Light Theme in app

^{Tested with WPAndroid 14.6-rc-1 on Pixel 3 Android 10.}

Smartphone

• Device: Pixel 3
• OS: Android 10
• Version: WPAndroid 14.6-rc-1

[geriux]

Thanks for opening the issue @designsimply! Radial gradients aren't supported just yet, only linear ones.

It does look a bit weird showing a solid background for these cases but not sure what could be the best approach while we don't give support for radial gradients. What do you think @pinarol?

[pinarol]

@geriux does the library we use for linear gradient come with the radial capability?

It does look a bit weird showing a solid background for these cases but not sure what could be the best approach while we don't give support for radial gradients. What do you think @pinarol?

I’d better defer this question to @iamthomasbishop

[geriux]

@geriux does the library we use for linear gradient come with the radial capability?

Sadly no, I even checked there's an opened issue about it but doesn't look like they will add it anytime soon =(

[iamthomasbishop]

@geriux I'm surprised that the library supports linear gradients but not radial ones — is this something we can extend, or investigate another library that provides this? I think this will become very important to support, especially when we expand on/allow customization of gradients in the color picking flow.

[geriux]

@geriux I'm surprised that the library supports linear gradients but not radial ones — is this something we can extend, or investigate another library that provides this?

Yeah, when I checked the name of the library react-native-linear-gradient I was like ok, it probably won't have support. I searched and there's an open issue about it but nobody has added this functionality.

I saw there's another library that only does radial gradients, so maybe we can just bring that functionality into the library we are using now.

[iamthomasbishop]

@geriux Ah, I didn't realize when I wrote my response that the library was literally titled linear-gradient 😄 Makes sense that radial gradients are not included.

I saw there's another library that only does radial gradients, so maybe we can just bring that functionality into the library we are using now.

I think that makes sense, although I would hope there is another library somewhere (or if it's worth creating our own and sharing it) that provides more comprehensive gradient support (radial, linear, angle, etc). I'll defer to y'all when it comes to libraries and which we use 😄

[lukewalczak]

I've just started working on supporting radial-gradient and already have some part done:

web	mobile

However, some questions arose during the work:

1. How do we want to distinguish between linear and radial gradient on mobile in color settings?
   On the web there are two buttons to switch between the.
   

2. Should gradient palette change according to gradient type?
   On the web there is always the same palette.
   

3. Should color indicator change according to gradient type?
   On the web it's changing accordingly to type
   

@iamthomasbishop please give me some feedback

[iamthomasbishop]

@lukewalczak I analyzed the flow on web, and found that it’s a bit weird, and in some cases I couldn’t even get any background colors to apply (there seems to be some bugs on this, at least for MacOS Safari). I have a bunch of thoughts (and if they are too long, we can always drop them in a separate issue) that I’ll share below, but first I’ll try to answer your questions.

1. How do we want to distinguish between linear and radial gradient on mobile in color settings?

It depends on where it’s located and how we want to place it in the hierarchy, but I would likely either use a Segmented Control, a drop down button, or a table row with a disclosure (chevron on right side to indicate another action). I’ll share more on this in my notes below.

2. Should gradient palette change according to gradient type?

I think that’d be nice but the hierarchy is unclear on web and I’m not sure if it makes sense to distinctly separate different gradient types. I imagine various types of gradients can and should coexist in the same list.

3. Should color indicator change according to gradient type?

Yes, I think so.

Problems

In theory, the gradient presets make sense, but it’s when you go to customize the gradient is when it gets confusing to me — let me explain.

When you select a preset from the list, it selects a linear gradient. This is as expected, but when you make any customizations to the gradient, it is not clear what is selected or what you’re editing. For example, if I select a preset, then tap the Radial type button, it removes selection and de-selects the swatch. I’m not actually customizing that swatch I had selected, I’m creating a new singular gradient and it’s applied to the setting.

We should make it clear and very distinct when you’re customizing and what/where that is.

Note: this confusion applies to any customization you make after selecting a preset, but I’ll focus on the Radial/Linear selection here.

The other thing is the type selector is awkwardly placed and thus feels disconnected in terms of hierarchy. As a result (similar to the point above), I was confused that when I selected the Radial option, the current swatch was de-selected instead of it being clear that I was making a custom gradient. I have the same problem with the angle property. You aren’t ever actually changing the swatch itself, but it’s not clear that that is what’s happening.

Proposal

I’ll share some suggestions based on what I think a more “ideal” flow would be based on our new color picking UX via the Button(s) blocks, then I will offer what I think could be a quicker but more crude and not-as-good UX.

My proposal would be to approach this similarly to how we did the main color picker flow, but with an added step that would be very familiar.

Build on the current gradients sheet

We could build on the current gradients sheet, but append a (+) swatch onto the end (similar to what we do for custom color on solid colors). Tapping on this + brings you to a gradient customizer...

Explicit gradient customize/add sheet

The gradient customizer shows you a large preview of the gradient, a slider that allows you to see/customize the control points (and add a new one) similar to the web’s component. If you tap on any of the control points, we would show the custom picker. Tap & dragging on a control point moves its position property.

Then we have a vanilla Slider component to customize the angle. This sheet would have a Segmented Control for the Linear/Radial type selector, as well as “Cancel” and “Apply” buttons just like on the current custom picker. Tapping “Apply” applies the new gradient to the end of the list, where the (+) button was — in this scenario, we would only allow a single custom gradient for now, just like custom solid colors.

All together now

This is what that looks like altogether. The main additions of note are the (+) button on the gradients sheet and the new gradient customizer sheet, which we’ll obviously need to sort out.

Quick fix

If we need to apply a quick fix, I would suggest we stick to only the type and angle controls — unless we can implement the color scale slider thingy quickly. This would mean they can’t customize the color control points but they can customize the angle (if linear is selected) — because I think we’re going to want to at least allow users to edit the angle. Here’s a couple of options with that in mind:

Option A

This combines everything into the current Gradients sheet. It adds gradient type (either a disclosure or a toggle using the web’s linear/radial icons) and angle (using our Slider component).

Option B

Adds a “Customize Gradient” button to the existing Gradients sheet. It goes to a sub-sheet to customize the type and angle properties.

Feedback

@lukewalczak I’m curious to know what you think. Would the preferred option make sense and be feasible to extend our current color sheets? Or do you have other ideas?

[lukewalczak]

I think that initially, we are going to implement one of the quick solutions. I'm more convinced into option B since it will be easier later to iterate on it and add next functionalities such as adding the new color to a gradient.

I'm going then to:

Leave gradient swatches as they are right now (keep linear), but change indicator according to chosen type.

I assume that:

1. Customize Gradient option is available only when Gradient segment is active.

2. Angle option is available only when Linear type is chosen.

Questions:

1. Should linear-gradient swatch be selected when its radial equivalent is chosen?

cc: @pinarol

[iamthomasbishop]

I'm more convinced into option B since it will be easier later to iterate on it and add next functionalities such as adding the new color to a gradient.

That’s what I was also thinking, glad to hear you agree 😀.

Leave gradient swatch as they are right now (keep linear), but change indicator according to chosen type.

What do you mean by “change the indicator”?

1. Customize Gradient option is available only when Gradient segment is active.

2. Angle option is available only when Linear type is chosen.

Both correct 👍

Should linear-gradient swatch be selected when its radial equivalent is chosen?

I think so, because you’re essentially just picking a different type of the same gradient. Although this diverges from the web (this is related to one of my noted confusions in the last comment), it makes more sense to me and I think is a subtle enough difference that it shouldn’t create user-facing problems.

[lukewalczak]

What do you mean by “change the indicator”?

I meant that color indicator will change according to the gradient type in both places:

• Color Control

radial	linear

• Next to segmented control

radial	linear

Let me know if it's correct ✌️

[iamthomasbishop]

Ahh yes, that’s good 👍. I would assume that if I customize the angle and/or the type that the end result also shows on the indicator as well, is that correct?

[lukewalczak]

SUMMARY

What have to be done within that issue:

• - support displaying radial gradient [RNMobile] Allow to display radial-gradient WordPress/gutenberg#22384

• - quick solution for supporting gradients infrastructure - [RNMobile] Add radial gradient infrastructure WordPress/gutenberg#22493

Next iteration to achieve complete gradient settings will be handled in separate issue: #2284

[hypest]

Next iteration to achieve complete gradient settings will be handled in separate issue: #2284

Does that mean we can close this ticket @lukewalczak?

[lukewalczak]

Since radial gradient is supported in the app we can close that issue