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 Gutenberg: Add a premium block category #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 Blocks: Add Ribbon to indicate Paid blocks in block picker #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 WordPress/gutenberg#16813)