Jetpack: Blocks: differentiate premium blocks from free ones when customer doesn't have paid plan

[thomasguillot]

Update 9th August 2019: premium blocks now discoverable for free customers in the block picker, I've changed this issue to be more specific about the presentation of these blocks in the block picker since that's what these designs are concentrating anyway. - @simison

---

As stated in the documentation:

The feature is available to Premium and Business plan subscribers on WordPress.com and on Premium and Professional plans for Jetpack sites running version 5.2 or higher.

Which makes this block completely hidden for other users.

Here, I suggest:

1. Show the block button but disabled
2. Attach a tooltip to it (different content depending on Jetpack or WPcom user)
3. Link the tooltip to an upgrade screen

And use this pattern for all future blocks requiring a plan.

[simison]

How should it look like for touch screens?

[thomasguillot]

How should it look like for touch screens?

I see this to behave just like the tooltip menu: https://cloudup.com/cYHt14ThyJR

[marekhrabe]

Adding one more question: What should it look like if user ends up with this premium block (which they don't have rights to use) already inserted into the post?

This could happen in many ways: copy&pasted block from another site with this feature active, handwriting its code, site export+import flow etc…

[thomasguillot]

At the moment, this is what a user would get if they downgrade/don't have the correct plan but have a SP block:

Instead, we could use a placeholder, encouraging users to upgrade. Also, we wouldn't have to show the shortcode!

[marekhrabe]

I'm not familiar with the Gutenberg block picker and how easy it is to disable a block there and add the popover with upgrade link. If that's something that is not ready out of the box now, wouldn't it be easier to always allow the block to be inserted and decide inside the block edit() whether to show the upgrade screen or its real UI?

[simison]

Why is this important? It saves customers from disappointing surprises and feeling of uncertainty about other blocks.

A couple more ideas that have been floating around:

1. Separate categories were explored in https://github.com/Automattic/jetpack/pull/12431
   
   Note that categories are greyscale in latest Gutenberg, so icons as separating factor won't work anymore.

2. Show different icon color
   

3. Show colored border
   

4. Add "Premium" suffix to block name _(hat tip to @ockham)_
   

5. A ribbon around the block name in the block picker _(hat tip to @ockham, see PR https://github.com/Automattic/jetpack/pull/13490)_
   

Note that this menu also would need similar mechanism:

[simison]

Idea via @mtias:

Don’t mind the presentation, but using the block description card for this could be interesting

(PR for help panel in core https://github.com/WordPress/gutenberg/pull/16813)

[obenland]

More ideas via @lessbloat:

[WunderBart]

I really like the idea of the badge icon from https://github.com/Automattic/jetpack/issues/11875#issuecomment-584377505. To address the currency issue (cc @lessbloat), maybe instead of the dollar sign, we could use e.g. a star icon as an indication of a premium entity? I also think that explaining what that icon means as suggested here https://github.com/Automattic/jetpack/issues/11875#issuecomment-584366823 would be a good idea. The premium icon would also be convenient as an indication in the / triggered list (re: https://github.com/Automattic/jetpack/issues/11875#issuecomment-519799019).

Together, it could look more-less like this:

[davemart-in]

I really like that @WunderBart. The only minor change that I would make would be to make the orange border around the paid plan description in the block preview the same color green as the icon. Nice work! Let's do this! Let me know what you need from me to make this happen.

[obenland]

@WunderBart @jeryj Based on the latest comments on paYJgx-rs-p2#comment-659, let's also separate these premium blocks out into their own category.

[WunderBart]

Thanks for the update, @obenland. To summarize the initial direction we've decided to take - we're going to:

• Add the paid label to block title if a current paid plan doesn't cover it (already started in https://github.com/Automattic/jetpack/pull/14739) [paYJgx-rs-p2#comment-656],
• Separate premium blocks out into their own category (probably will happen in a separate PR) [paYJgx-rs-p2#comment-659].

cc @davemart-in, @jeryj.