Jetpack: (8P) Premium Blocks: Replace (paid) label with upgrade indicator

[obenland]

Let's replace the (paid) label with a star indicator in every premium block's icon. This task does not include adding the contextual tip shown in the screenshot.
We might need to add block-specific CSS to position the star correctly in each icon.

This might require changes in both Jetpack and FSE plugin.

Screenshot

Prior art:

• Premium Content
• Donations block
• https://github.com/Automattic/jetpack/pull/14739

Example for star usage: Donation Block

See 123-gh-dotcom-manage

[obenland]

@sfougnier @jancavan Is there a chance I could defer to you for the creation of that star SVG?

[jancavan]

@obenland I think we already have a star icon, or at least it's showing the G2 icon Figma. Is it not in the repo?

[obenland]

It is, thanks. I updated the issue description with a reference to a pre-existing implementation.

[cpapazoglou]

Previous exploration paYJgx-rs-p2

[frontdevde]

Digging into this a bit, I found there was a prior attempt made in a similar direction:

https://github.com/Automattic/jetpack/pull/13490/files#diff-bb769916a770ad52c514ba7ab6609e48R54

Wondering if we could go a similar route using <Dashicon icon="star-filled" /> instead of the Ribbon and then adjusting the position of the star icon via CSS as needed.

[jancavan]

Just an FYI - the Premium visual indicators should disappear after a user has upgraded (as per @sfougnier).

See pbAPfg-EE-p2/#comment-1374

cc @obenland @Automattic/ajax

[jeryj]

Looked into this a little with @mreishus. One idea was to use ::after to add in an SVG to the icons. This adds a circle to every icon:

.block-editor-block-icon::after {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/svg%3E");
}

Since we only want it on Paid blocks, we'd have to curate that list of blocks:

// specify which blocks we want this to show up for
.editor-block-list-item-jetpack-recurring-payments,
.editor-block-list-item-jetpack-simple-payments {
    .block-editor-block-icon::after {
        display: block;
        content: '';
        width: 24px;
        height: 24px;
        position: absolute;
        transform: translateX(100%);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='red' cx='2' cy='2' r='2'/%3E%3C/svg%3E");
    }
}

However, this only works for the block selector. It doesn't appear everywhere the block icon is used (Preview, Inline Inserter). I didn't see named classes for places like the / inline inserter, so we wouldn't be able to target those icons.

The last option we explored was adding the Circle directly into the SVG of the icon.

export const icon = (
    <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <Rect x="0" fill="none" width="24" height="24" />
        <G>
            <Path d="M20 4H4c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2h16c1.105 0 2-.895 2-2V6c0-1.105-.895-2-2-2zm0 2v2H4V6h16zM4 18v-6h16v6H4zm2-4h7v2H6v-2zm9 0h3v2h-3v-2z" />
        </G>
        <Circle fill="red" cx="24" cy="3" r="4"/>
    </SVG>
);

This gets us the red circle on every icon since it's embedded within it. The issue then is, how do we manage appending the extra SVG to the end of the icon? Some quick ideas:

• Having multiple copies of paid icons.
• Somehow injecting our SVG dynamically to the end of the Icon component (we didn't see a way to do this, but it would be amazing)
• In paYJgx-rs-p2 we had explored adding a separate SVG (so the icon would be made up of two SVGs instead of one), but that was not a recommended path.
• ???

Any other ideas? If we can append the SVG inside of the existing block icons so it's one <svg> element, then we should be good to go on displaying the star icon.

[mreishus]

~Draft pull request of an experiment of injecting SVG dynamically: https://github.com/Automattic/jetpack/pull/16485~ _( Cleaned up branch, diff: 25b10-pb )_
This would require all icon files in jetpack to be changed to accept the svgExtra "prop".

[mtias]

@jancavan @obenland the icon in the G2 library is unlikely to be adequate here since it uses a base grid that is too large. It seems you should custom hint an svg that is specifically designed for this use. Also looking at the mockups, it seems there's a white stroke added around the star that should also be accounted for.

[mtias]

@jeryj @mreishus my impression is that whether to use icons or not remains tentative, so I'd advise against any kind of abstraction (svgExtra) and suggest instead to just add or import the start icon directly in each icon you want to modify since you have access to all of them.

[jeryj]

@mtias Thanks for your input and direction! To make sure I'm understanding clearly, are you saying we should:

• Have two copies of the paid block icons (one with the star and one without)
• Switch out which icon is showed depending on their plan state with requiresPaidPlan()

Going with the manual route, I think we'd try to keep all the paid icons within Jetpack and switch them out in the block registration. We'll need to figure out how to catch blocks registered via different plugins, like FSE. @retrofox and @jeherve, I believe I saw a conversation between the both of you where you were discussing how best to do this?

[cpapazoglou]

As it seems we need to test the navigation section too and make sure the icon is shown / positioned properly

[sfougnier]

Latest Design
The latest push here has been to switch the star icon out in favor of a dot, which will be applied in the same positioning as the star within the block icons in the inserter (as well as where ever those icons appear in the editor).

Application
Happy to help advise on exact placement and on what blocks this will need to appear on, although this list of blocks is what I have been testing against.

Design Links
Flow states
Block states

[cpapazoglou]

Current Issue covers jetpack blocks, we have 2 more pending issues for FSE and WPcom:
https://github.com/Automattic/wp-calypso/issues/44524
https://github.com/Automattic/wp-calypso/issues/44352