-
Notifications
You must be signed in to change notification settings - Fork 798
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
(8P) Premium Blocks: Replace (paid) label with upgrade indicator #16628
Comments
@sfougnier @jancavan Is there a chance I could defer to you for the creation of that star SVG? |
@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? |
It is, thanks. I updated the issue description with a reference to a pre-existing implementation. |
Previous exploration paYJgx-rs-p2 |
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 |
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 |
Looked into this a little with @mreishus. One idea was to use .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 The last option we explored was adding the 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:
Any other ideas? If we can append the SVG inside of the existing block icons so it's one |
|
@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 Thanks for your input and direction! To make sure I'm understanding clearly, are you saying we should:
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? |
Latest Design Application Design Links |
Current Issue covers jetpack blocks, we have 2 more pending issues for FSE and WPcom: |
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:
Example for star usage: Donation Block
See 123-gh-dotcom-manage
The text was updated successfully, but these errors were encountered: