Add Help Link to Premium Styles Plan Limitation Message

[donalirl]

What

Add the below support link to the warning message displayed to users who edit Styles without an eligible plan:

Your site includes premium styles that are only visible to visitors after upgrading to the Premium plan or higher.

https://wordpress.com/support/using-styles/#access-to-styles

Why

The message alone is confusing to some users who don't understand why the styles are gated. We can alleviate this confusion with a link to more context on our /support site. Example: 8569729-zd-a8c

How

Could use a "Learn more" option next to the text:

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8569729-zen

[mrfoxtalbot]

Nice idea. Inline support FTW.

[mrfoxtalbot]

I hate to be pestering you again but @dsas, do you know what dev or team could tackle this one? Thanks!

[dsas]

I hate to be pestering you again but @dsas, do you know what dev or team could tackle this one? Thanks!

@mrfoxtalbot mine! @Automattic/t-rex

[epeicher]

After some investigation, here are my findings:

• There are two scenarios that could be affected by this change:
  • The notification in the Global Styles View left-hand side bar (code here).
  • The notification in the main editor (code here)

Left-hand side bar	Main editor

Suggestions

• The notification in the left-hand side bar already includes a link, and we could easily include another.
• The notification in the main editor uses createWarningNotice that only accepts String in the main message (API reference here). This warning notice seems to be designed to use the Action buttons to do further actions, so we can include another button there for Learn more.

What do you think about the suggestions, @donalirl , @mrfoxtalbot ?

@Automattic/t-rex, please add your view on this, as you might have more context about this area of code.

[mmtr]

This warning notice seems to be designed to use the Action buttons to do further actions, so we can include another button there for Learn more.

This should be fine, we already do it in the post editor:

[donalirl]

What do you think about the suggestions, @donalirl , @mrfoxtalbot ?

Fine with me. Maybe this is already the plan, but can the link open within the Help Center, rather than in a new tab? This is how other in-editor links work, such as the block guides:

[epeicher]

Hi @donalirl, I have created the linked PR https://github.com/Automattic/jetpack/pull/39226 to progress this but I have not found a way to display the link in the Help Center.

@mmtr, would you have any tips or code examples I could use to open links in help centers that can be called from the wpcom-global-styles component?

[mmtr]

@epeicher I don't know any example off the top of my head. Have you checked how the "Block guide" link works?

https://github.com/Automattic/jetpack/blob/trunk/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-description-links/index.tsx

[miksansegundo]

When looking for a code example to open the Help Center programmatically, I found the PR https://github.com/Automattic/wp-calypso/pull/93247 and the logic in the file https://github.com/Automattic/wp-calypso/blob/28740d3224a8fc659adc6d056ad6b424826bbe7d/packages/help-center/src/hooks/use-action-hooks.ts#L34

However, that mechanism that uses the URL param help-center= is not working on my tests. Am I missing anything?

[epeicher]

When looking for a code example to open the Help Center programmatically, I found the PR #93247 and the logic in the file

https://github.com/Automattic/wp-calypso/blob/28740d3224a8fc659adc6d056ad6b424826bbe7d/packages/help-center/src/hooks/use-action-hooks.ts#L34

However, that mechanism that uses the URL param help-center= is not working on my tests. Am I missing anything?

Thanks for the recommendation @miksansegundo! I have also tested, and it's not working for me either, I will investigate the other options suggested here and in the PR, thanks for them!

[donalirl]

@epeicher In case it's helpful, I'll tag in a few people who might know more about how it works to open the link in the help center instead of a new tab: @escapemanuele @arcangelini @jjchrisdiehl

[arcangelini]

Hey friends! I tested this myself using the action hook ?help-center=home and it indeed looks like there is something wrong. The Help Center is opening however it is being loaded offscreen. We will get a fix for this ASAP!

However, I don't know if that would affect the programatic opening of Help Center. I see in your PR that you are using setShowSupportDoc. It could be easier if you use the useOpenArticleInHelpCenter hook. It would look something like this:

import { useOpenArticleInHelpCenter } from '@automattic/help-center/src/hooks';

const { openArticleInHelpCenter } = useOpenArticleInHelpCenter();

const onClick = () => {
	openArticleInHelpCenter( localizedUrl );
}

[arcangelini]

Got a fix for opening Help Center on page load #94359

I will say that this is still not working in the Editor. I am not sure what is causing that yet, but I opted to start with this fix as it is a pretty major issue since we forward users to /home?help-center=wapuu to give them support.

[epeicher]

I see in your PR that you are using setShowSupportDoc. It could be easier if you use the useOpenArticleInHelpCenter hook.

Thanks @arcangelini for the suggestion! I think @donalirl comment was based on the previous try of opening in another window, but since then I was able to open the support doc on the Help Center. (Sorry @donalirl, I should have pinged you with the good news! 😄 )

Anyways, I have tried your suggestion, but I'm not convinced that it could be easier for the following reasons:

• It requires to add an additional dependency (@automattic/help-center) to the Jetpack package. That additional dependency has some transitive dependencies that we would bring into the repo, and one of them @automattic/odie-client is failing when I try to install it. For sure, this can be fixed, but the maintenance cost of another dependency does not seem to be worthy.
• The current approach is used in some other parts of the repo, so this change is more consistent with the existing codebase.

What do you think? Please note that I'm not familiar with the Help Center, so happy to hear options here 😄

[arcangelini]

That indeed would be a valid reason. The hook is really just a wrapper for what you have in your PR so the only added benefit is keeping it updated if anything changes in the future. That is definitely something we could improve on. Thanks for the heads up! What you have looks great.