(3P) Premium Blocks: Add contextual tip for upgrade star icon

[obenland]

This will add a contextual tip to explain the meaning of the premium block stars, introduced in #44048.

I'm not sure if that is even possible currently, we should investigate if we can use __experimentalInserterMenuExtension for that and maybe position that tip via CSS.

Screenshot

Prior Art

• Contextual Tips

See 123-gh-dotcom-manage

[obenland]

@sfougnier @jancavan Is there a chance I could defer to you for the creation of that star-with-background SVG that's being displayed in the tip?

[mreishus]

It looks like the goal is to overwrite the <Tip> element in Gutenberg, which provides a "global tip".

In Gutenberg:

• tips.js - Provides <Tips>, which reads from a locally defined globalTips and renders one
• menu.js - Renders <Tips> from tips.js above

I'm not seeing a way that the tips can modified from outside gutenberg. Two possible ways to approach this:

• A: Submit a PR to gutenberg to make the tips extensible. (Currently unsure of specifics)
• B: Try a solution without changing gutenberg, such as the one Konstantin mentioned at the beginning of this issue. Generally injecting an element and positioning it with CSS.

I haven't tried B yet, I'll spend some time playing around with it tomorrow.

[mreishus]

In testing, I was able to use __experimentalInserterMenuExtension to add a <div> to the menu. However, I'm not able to use CSS to position it over the global tooltip space. I tried using absolute positioning. Without changing other parts of the site, the nearest positioned parent is the scrollable block inserter div:

Now, I can add bottom: 0px to put it at the bottom of the list, sort of. It's at the bottom of the first screenful of blocks before you scroll at all. But we need to 'break out' of that parent and go lower than that. What if I use a negative position on the bottom attribute? Well, it moves it lower and lower inside the list of blocks, but still inside the scrollable container. And if I tweak the position to be at the bottom of the scrollable container and then go even more negative, it extends the scrollable container. Example:

I'm not seeing a way to do this with CSS, but I'm open to suggestions if anyone has any. I think we need some sort of modification to gutenberg.

Edit: Checking on a CSS driven approach with :after and .content.

[mreishus]

Here's a css only approach. I used a placeholder SVG star from wikipedia for the time being. The positioning of it can be tweaked as well.

.block-editor-inserter__tips {
	.components-tip {
		svg {
			visibility: hidden;
		}
	}
	&::before {
		display: block;
		content: ' ';
		background-image: url( 'https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg' );
		position: absolute;
		background-size: 24px 24px;
		height: 24px;
		width: 24px;
	}
	&::after {
		content: 'Premium tools are available for you to preview within your site without an upgrade.';
		position: absolute;
		bottom: 16px;
		right: 16px;
		left: 50px;
		height: 39px;
		z-index: 11;
		background: #fff;
		text-align: center;
		overflow: hidden;
	}
}

Issues:

• Text is not available for translation. I don't see a way to stick something on a data- element as done on (5P) Premium Blocks: Add banner to block preview #44055.
• Banner would always appear. It should only appear for non-upgraded users. Maybe there's a parent class somewhere that reflects that?

[mreishus]

Note about customizing through Gutenberg. Even if we are able to add an override mechanism for globalTips in tips.js, that would change the text only. Currently, tips.js is hardcoded to use the <Tip> component, which uses a hardcoded icon. So we'd either have to add an icon customization method as well, or use a portal slot/filler mechanism for the tip space.

[ghost]

The star asset can be found here:
Star.svg.zip

[mreishus]

Halting work on this, unassigning.

[obenland]

@mreishus What are the next steps for this?

[mreishus]

Decide which approach to use:

CSS:

• I have a initial version above, but it has four problems:
  • Lacking translation (Unsure how to fix)
  • Appears always, instead of only when unpaid
  • Needs to use proper star SVG.
  • One small range of very narrow browser widths where a word or two gets cut off.

Integration with Gutenberg:

• No code done. Two broad approaches possible
  • Add a mechanism to override globalTips in tips.js. This must be combined with a mechanism that overrides the graphic in the Tip component.
  • OR
  • Use a slot/filler mechanism in gutenberg's menu.js to override the <Tips> component entirely.

[obenland]

WordPress/gutenberg#22109 (comment) has some good feedback from Core maintainers around creating a Tips API to register, unregister, and display Tips. It might be worth investing time into making that properly extensible for more ease of use down the road

[ghost]

Latest design
Based on some of the issues that have come up with this in terms of both the functionality and implementation, the latest designs have removed this feature. The placement of messaging is now within the block + sidebar only.

Design Links
Flow states
Block states

[mreishus]

the latest designs have removed this feature

Closing this issue as it's not needed at this time.