Add LearnHow link

[nightnei]

Proposed Changes

Follow up to #2317
@katinthehatsite noticed that we don't have space for "Learn how" link. In the previous PR I didn't see this type of links, so this PR utilizes that component to avoid duplications and make that component reuzabled.

Testing Instructions

Apply the next diff:

diff --git a/src/components/content-tab-settings.tsx b/src/components/content-tab-settings.tsx
index fa96d5dd..14f79d97 100644
--- a/src/components/content-tab-settings.tsx
+++ b/src/components/content-tab-settings.tsx
@@ -99,7 +99,7 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
                                                                </Button>
                                                        ) }
                                                </div>
-                                               { ! isCertificateTrusted && selectedSite.enableHttps && (
+                                               { selectedSite.enableHttps && (
                                                        <div className="mt-1 max-w-96">
                                                                <span className="text-a8c-gray-50 mt-1">
                                                                        { __(
diff --git a/src/modules/add-site/components/create-site-form.tsx b/src/modules/add-site/components/create-site-form.tsx
index 2778cda5..441e6ad2 100644
--- a/src/modules/add-site/components/create-site-form.tsx
+++ b/src/modules/add-site/components/create-site-form.tsx
@@ -374,7 +374,7 @@ export const CreateSiteForm = ( {
                                                                        </div>
                                                                ) }
 
-                                                               { ! isCertificateTrusted && useCustomDomain && setEnableHttps && (
+                                                               { useCustomDomain && setEnableHttps && (
                                                                        <div className="text-a8c-gray-50 text-xs mt-2">
                                                                                { __(
                                                                                        'You need to manually add the Studio root certificate authority to your keychain and trust it to enable HTTPS.'
diff --git a/src/modules/site-settings/edit-site-details.tsx b/src/modules/site-settings/edit-site-details.tsx
index 4a3d908b..8fde875d 100644
--- a/src/modules/site-settings/edit-site-details.tsx
+++ b/src/modules/site-settings/edit-site-details.tsx
@@ -323,7 +323,7 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
                                                                        </div>
                                                                ) }
 
-                                                               { ! isCertificateTrusted && useCustomDomain && (
+                                                               { useCustomDomain && (
                                                                        <div className="text-a8c-gray-50 text-xs mt-2">

1. Open Site settings and assert that link looks and works good
   
2. Open Edit site dialog and assert the same
   
3. Click "Add site" and assert the same
   

[wpmobilebot]

📊 Performance Test Results

Comparing b0946c6 vs trunk

site-editor

Metric	trunk	b0946c6	Diff	Change
load	6884.00 ms	7040.00 ms	+156.00 ms	🔴 2.3%

site-startup

Metric	trunk	b0946c6	Diff	Change
siteCreation	16117.00 ms	9081.00 ms	-7036.00 ms	🟢 -43.7%
siteStartup	3960.00 ms	3952.00 ms	-8.00 ms	🟢 -0.2%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

[gcsecsey]

Changes LGTM and work well

Edit site:

Site settings:

Add site:

[bcotrim]

We removed the arrow and the associated aria-label for accessibility.
I'm not sure if it was intentional, so I wanted to flag it.

The learnHow boolean prop isn't very clear in my opinion. Consider using a label prop instead:

  export function LearnMoreLink( {
      docsLinksKey,
      className,
      label,
  }: {
      docsLinksKey: DocsLinkKey;
      className?: string;
      label?: string;
  } ) {
      const { __ } = useI18n();
      const locale = useI18nLocale();

      return (
          <Button
              className={ className }
              onClick={ ( e: React.MouseEvent ) => {
                  e.stopPropagation();
                  getIpcApi().openURL( getLocalizedLink( locale, docsLinksKey ) );
              } }
              variant="link"
          >
              { label ?? __( 'Learn more' ) }
          </Button>
      );
  }

If we want to restrict labels to specific variants, we could have an internal DocsLink component with two exported wrappers (LearnMoreLink and LearnHowLink).

[nightnei]

We removed the arrow and the associated aria-label for accessibility.
I'm not sure if it was intentional, so I wanted to flag it.

It was intentional, the main reason is the same as for "Learn more" link - #2317 (comment)

Consider using a label prop instead:

I intentionally wanted to avoid custom labels, to avoid duplications (setting label={ __ ("Learn how") } ) and have consistency across Studio.

If we want to restrict labels to specific variants, we could have an internal DocsLink component with two exported wrappers (LearnMoreLink and LearnHowLink).

This sugesstion is great, thanks, I will go with it 👍

[bcotrim]

Thanks for making the changes @nightnei
LGTM 👍

[wojtekn]

Is there any benefit to using 'Learn how' wording instead of 'Learn more'? Should we unify it?