Post editor: Open support links in Help Center (#43883)

This commit ensures that the support links of the Excerpt and Tags panels in the WP.com post editor are opened directly in the Help Center rather than on a new tab.

Author: mmtr

projects/js-packages/shared-extension-utils/changelog/dotsup-57-master-list-open-support-links-in-help-center-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Components: Add reusable link to open support articles in Help Center

projects/js-packages/shared-extension-utils/src/components/index.js

@@ -1,2 +1,3 @@
 export { default as JetpackEditorPanelLogo } from './jetpack-editor-panel-logo';
 export { Nudge } from './upgrade-nudge';
+export { WpcomSupportLink } from './wpcom-support-link';

projects/js-packages/shared-extension-utils/src/components/wpcom-support-link.jsx

@@ -0,0 +1,44 @@
+import { ExternalLink } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import React, { forwardRef } from 'react';
+
+/**
+ * Renders a link that opens a WP.com support article in the Help Center.
+ *
+ * @param {object}          props               - The component props.
+ * @param {string}          props.supportLink   - Support link URL.
+ * @param {number}          props.supportPostId - Support post ID.
+ * @param {React.Component} props.children      - Support link content.
+ * @param {Function}        [props.onClick]     - Callback function to be called when the link is clicked.
+ * @param {object}          [props.style]       - CSS properties to be applied to the link.
+ * @return {React.JSX.Element} The component to render.
+ */
+export const WpcomSupportLink = forwardRef(
+	( { supportLink, supportPostId, children, onClick, style }, ref ) => {
+		const helpCenterDispatch = useDispatch( 'automattic/help-center' );
+		const setShowSupportDoc = helpCenterDispatch?.setShowSupportDoc;
+
+		if ( setShowSupportDoc ) {
+			return (
+				<a
+					href={ supportLink }
+					// eslint-disable-next-line react/jsx-no-bind
+					onClick={ event => {
+						event.preventDefault();
+						onClick?.();
+						setShowSupportDoc( supportLink, supportPostId );
+					} }
+					style={ style }
+					ref={ ref }
+				>
+					{ children }
+				</a>
+			);
+		}
+		return (
+			<ExternalLink href={ supportLink } onClick={ onClick } style={ style } ref={ ref }>
+				{ children }
+			</ExternalLink>
+		);
+	}
+);

projects/packages/jetpack-mu-wpcom/changelog/dotsup-57-master-list-open-support-links-in-help-center-modal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Post editor: Open WP.com support articles in Help Center

projects/packages/jetpack-mu-wpcom/src/features/tags-education/tags-education.js

@@ -1,6 +1,6 @@
 import { localizeUrl } from '@automattic/i18n-utils';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { ExternalLink } from '@wordpress/components';
+import { WpcomSupportLink } from '@automattic/jetpack-shared-extension-utils/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 
@@ -15,14 +15,15 @@ const addTagsEducationLink = createHigherOrderComponent( PostTaxonomyType => {
 		return (
 			<>
 				<PostTaxonomyType { ...props } />
-				<ExternalLink
-					href={ localizeUrl( 'https://wordpress.com/support/posts/tags/' ) }
+				<WpcomSupportLink
+					supportLink={ localizeUrl( 'https://wordpress.com/support/posts/tags/' ) }
+					supportPostId={ 8586 }
 					onClick={ () => {
 						tracks.recordEvent( 'jetpack_mu_wpcom_tags_education_link_click' );
 					} }
 				>
 					{ window.wpcomTagsEducation.actionText }
-				</ExternalLink>
+				</WpcomSupportLink>
 			</>
 		);
 	};

projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-description-links/index.tsx

@@ -6,7 +6,7 @@ import blockInfoMapping, {
 	blockInfoWithVariations,
 	childrenBlockInfoWithDifferentUrl,
 } from './src/block-links-map';
-import DescriptionSupportLink from './src/inline-support-link';
+import DescriptionSupportLink from './src/description-support-link';
 
 const createLocalizedDescriptionWithLearnMore = (
 	title: string,

projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-description-links/src/inline-support-link.tsx renamed to projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-description-links/src/description-support-link.tsx

@@ -1,7 +1,6 @@
 import { localizeUrl } from '@automattic/i18n-utils';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { Button, ExternalLink } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { WpcomSupportLink } from '@automattic/jetpack-shared-extension-utils/components';
 import { __ } from '@wordpress/i18n';
 import React, { useState, JSXElementConstructor, ReactElement } from 'react';
 
@@ -33,9 +32,6 @@ export default function DescriptionSupportLink( {
 	// Since there was no identifier in the environment to differentiate.
 	const [ ref, setRef ] = useState< Element | null >();
 	const { tracks } = useAnalytics();
-	const helpCenterDispatch = useDispatch( 'automattic/help-center' );
-	const setShowHelpCenter = helpCenterDispatch?.setShowHelpCenter;
-	const setShowSupportDoc = helpCenterDispatch?.setShowSupportDoc;
 
 	if ( ref && ! ref?.closest( '.block-editor-block-inspector' ) ) {
 		return children as React.JSX.Element;
@@ -45,39 +41,20 @@ export default function DescriptionSupportLink( {
 		<>
 			{ children }
 			<br />
-			{ setShowHelpCenter ? (
-				<Button
-					onClick={ () => {
-						setShowHelpCenter( true );
-						setShowSupportDoc( localizeUrl( url ), postId );
-						tracks.recordEvent( 'jetpack_mu_wpcom_block_description_support_link_click', {
-							block: title,
-							support_link: url,
-						} );
-					} }
-					style={ { marginTop: 10, height: 'unset' } }
-					ref={ reference => ref !== reference && setRef( reference ) }
-					className="fse-inline-support-link is-compact"
-					variant="link"
-				>
-					{ __( 'Block guide', 'jetpack-mu-wpcom' ) }
-				</Button>
-			) : (
-				<ExternalLink
-					onClick={ () => {
-						tracks.recordEvent( 'jetpack_mu_wpcom_block_description_support_link_click', {
-							block: title,
-							support_link: url,
-						} );
-					} }
-					ref={ reference => ref !== reference && setRef( reference ) }
-					style={ { display: 'block', marginTop: 10, maxWidth: 'fit-content' } }
-					className="fse-inline-support-link"
-					href={ url }
-				>
-					{ __( 'Learn more', 'jetpack-mu-wpcom' ) }
-				</ExternalLink>
-			) }
+			<WpcomSupportLink
+				supportLink={ localizeUrl( url ) }
+				supportPostId={ postId }
+				onClick={ () => {
+					tracks.recordEvent( 'jetpack_mu_wpcom_block_description_support_link_click', {
+						block: title,
+						support_link: url,
+					} );
+				} }
+				style={ { display: 'block', marginTop: 10, maxWidth: 'fit-content' } }
+				ref={ reference => ref !== reference && setRef( reference ) }
+			>
+				{ __( 'Block guide', 'jetpack-mu-wpcom' ) }
+			</WpcomSupportLink>
 		</>
 	);
 }

projects/plugins/jetpack/changelog/dotsup-57-master-list-open-support-links-in-help-center-modal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Post editor: Open WP.com support articles in Help Center

projects/plugins/jetpack/extensions/plugins/ai-content-lens/extend/ai-post-excerpt/index.tsx

@@ -11,6 +11,7 @@ import {
 	isSimpleSite,
 	useAnalytics,
 } from '@automattic/jetpack-shared-extension-utils';
+import { WpcomSupportLink } from '@automattic/jetpack-shared-extension-utils/components';
 import { TextareaControl, ExternalLink, Button, Notice, BaseControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -218,12 +219,6 @@ ${ postContent }
 
 	const { requireUpgrade, isOverLimit } = useAiFeature();
 
-	// Set the docs link depending on the site type
-	const docsLink =
-		isAtomicSite() || isSimpleSite()
-			? __( 'https://wordpress.com/support/excerpts/', 'jetpack' )
-			: __( 'https://jetpack.com/support/create-better-post-excerpts-with-ai/', 'jetpack' );
-
 	return (
 		<div className="jetpack-ai-post-excerpt">
 			<TextareaControl
@@ -235,9 +230,23 @@ ${ postContent }
 				disabled={ isTextAreaDisabled }
 			/>
 
-			<ExternalLink href={ docsLink }>
-				{ __( 'Learn more about manual excerpts', 'jetpack' ) }
-			</ExternalLink>
+			{ isAtomicSite() || isSimpleSite() ? (
+				<WpcomSupportLink
+					supportLink={ __( 'https://wordpress.com/support/excerpts/', 'jetpack' ) }
+					supportPostId={ 1569 }
+				>
+					{ __( 'Learn more about manual excerpts', 'jetpack' ) }
+				</WpcomSupportLink>
+			) : (
+				<ExternalLink
+					href={ __(
+						'https://jetpack.com/support/create-better-post-excerpts-with-ai/',
+						'jetpack'
+					) }
+				>
+					{ __( 'Learn more about manual excerpts', 'jetpack' ) }
+				</ExternalLink>
+			) }
 
 			<div className="jetpack-generated-excerpt__ai-container">
 				{ error?.code && error.code !== 'error_quota_exceeded' && (

projects/plugins/jetpack/extensions/plugins/seo/components/upsell.js

@@ -1,6 +1,6 @@
 import { useAnalytics, useUpgradeFlow } from '@automattic/jetpack-shared-extension-utils';
-import { Button, ExternalLink } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { WpcomSupportLink } from '@automattic/jetpack-shared-extension-utils/components';
+import { Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -23,10 +23,6 @@ const UpsellNotice = ( { requiredPlan } ) => {
 		goToCheckoutPage( event );
 	};
 
-	const helpCenterDispatch = useDispatch( 'automattic/help-center' );
-	const setShowHelpCenter = helpCenterDispatch?.setShowHelpCenter;
-	const setShowSupportDoc = helpCenterDispatch?.setShowSupportDoc;
-
 	return (
 		<>
 			<div>
@@ -38,20 +34,7 @@ const UpsellNotice = ( { requiredPlan } ) => {
 			</div>
 
 			<div className="components-seo-upsell__learn-more">
-				{ setShowHelpCenter ? (
-					<Button
-						onClick={ () => {
-							setShowHelpCenter( true );
-							setShowSupportDoc( supportUrl );
-						} }
-						className="components-seo-upsell__learn-more-link"
-						variant="link"
-					>
-						{ supportLinkTitle }
-					</Button>
-				) : (
-					<ExternalLink href={ supportUrl }>{ supportLinkTitle }</ExternalLink>
-				) }
+				<WpcomSupportLink url={ supportUrl } postId={ 120916 } text={ supportLinkTitle } />
 			</div>
 
 			<Button