Improve look/feel of premium block promos on WordPress.com

[davemart-in]

We've got a hand full of blocks on WP.com that require a specific plan. If you're on a lower plan, you'll see a prompt to upgrade in order to use these blocks. The design of these promo's could use some love.

Steps to reproduce the issue

1. Create a WordPress.com free account.
2. Add a page
3. Add one of the following blocks:

• Simple Payments
• Recurring Payments
• OpenTable
• Calendly

What I expected

Promo looks consistent, minimal, and well designed.

What happened instead

Screenshots

Here's what these promos look like now:

[davemart-in]

@olesyabrk shared some design concepts for this:

A)

B)

C)

D)

[keoshi]

Are these actual screenshots of the upgrade banners?

[davemart-in]

The ones in the issue are, yes. They're pretty inconsistent and could use some love.

[keoshi]

That's really odd. Could be caused by the latest styling changes on G2 and it almost seems like some classes aren't even being targeted anymore. I have a slight preference for proposal A and I'd love to see this fixed in a couple of days.

@folletto @jeherve so you're aware of this.

[folletto]

I agree on proposal A, but... I'd like to ping @jasmussen to see if he has any advice on how to style a block like that in the new G2 world.

[davemart-in]

My feedback on option A: It's important that they're there, but we don't really need to draw too much attention to these promos.

Button We already use a primary button in some of the blocks now, so we should probably stick with secondary button styling for the "Upgrade" button.

Border The other thing I wonder about is the need for the solid dark border around the promo.

[folletto]

Yes I agree. I'd also note that the example of that specific block is a bit misleading as it has a lot going on inside too, which doesn't help in finding the right solution. I'd try to find a solution first that fits well the paradigm, and then try and apply to 2-3 blocks and see how it works.

[keoshi]

One more thing to bear in mind is that right now in most contexts the bounding box/outline on the mocks doesn't exist on the block, so the separation between elements and blocks might appear more arbitrary than what we're seeing here.

[jasmussen]

Thanks for the ping! Excited about premium blocks.

Here's a GIF showing the current block as I see it:

Separate to the conversation on notices specifically, and I'll circle back to that in a moment, I would love to see an effort made to reduce the jump that happens from selected to unselected states. It is, in some cases, unavoidable. But in the noble effort to try and avoid that, it's possible that the placeholder state can move closer to the final state, so the switch isn't so jarring. It isn't inherently wrong — but the placeholder state doesn't have to look like a barren form field.

Imagine the placeholder state looking almost exactly like the final rendered state when you first insert it, and then you click it to reveal that every part of it is customizable, without a shift in dimensions:

This is something the recurring payments block handles already:

That's obviously a separate effort to the question of the notice, but worth noting nevertheless.

For the notice, I have only a few thoughts on the treatment:

• Because it's not actually a WordPress component, it should not have to be beholden to any G2 design. It could make sense to leverage DNA, like icon style, inherited fonts, metrics and so on, just to feel like it belongs in the context. But I wanted to just clarify that if for whatever reason you'd prefer to put a powerful WordPress.com blue as the background with white text on it, no G2 efforts should hold you back — only a sense of good design!
• If you do want to be totally beholden to some of the G2 elements that are currently trickling out, consider using (and improving!) the actual Notice component. It's not in Storybook, the closest equivalent is the snackbar, and in fact the Notice component is so unused it could actually use a lot of love to help prove its worth and make it part of storybook.
• I'd avoid drop shadows here, because presumably the notice card lays flat on top of the block, as opposed to floating over it.

Hope this was helpful!

[davemart-in]

Feedback from @mtias:

I see a few problems with the wrapper element: the selected state seems to add quite a bit of padding around the block content itself. That would mean every time the block is selected there would be a “jump” as the content shrinks to accommodate the padding unless this is how the block is presented all the time, which has its own issues as it would depart a bit from the WYSIWYG principle.

Generally we have a pretty clear distinction between placeholder cards and the regular content. This approach seems to mix the two (showing the block name and icon in the canvas of the block while the block is showing its actual content). I know the simple payments block is not the best example since it works currently like an embedded form and not like most other blocks out there. However, this mixed effect would likely be more pronounced on the other blocks that need this treatment (recurring payments is just a single button element, for example).

I’d suggest perhaps looking at adding this notice to the toolbar itself as a possible alternative since it’s not taller than before and should accommodate copy better.

[pablohoneyhoney]

If leveraging G2 language, I don't think those explorations feel native. I wonder if this could be solved with these: https://github.com/WordPress/gutenberg/issues/20591

[davemart-in]

I removed this from the Earn board. I know that @dwolfe is doing a sprint on this right now.