@automattic/jetpack-shared-extension-utils 1.0.2 → 1.1.0

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 2025-06-16
+### Added
+- Components: Add reusable link to open support articles in Help Center. [#43883]
+
 ## [1.0.2] - 2025-06-10
 ### Changed
 - Update dependencies. [#43796]
@@ -657,6 +661,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[1.1.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/1.0.2...1.1.0
 [1.0.2]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/1.0.1...1.0.2
 [1.0.1]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/1.0.0...1.0.1
 [1.0.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.20.3...1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/shared-extension-utils/#readme",
 	"bugs": {
@@ -21,8 +21,8 @@
 		"@automattic/color-studio": "4.1.0",
 		"@automattic/jetpack-analytics": "^1.0.0",
 		"@automattic/jetpack-base-styles": "^1.0.0",
-		"@automattic/jetpack-components": "^1.1.1",
-		"@automattic/jetpack-connection": "^1.2.1",
+		"@automattic/jetpack-components": "^1.1.2",
+		"@automattic/jetpack-connection": "^1.2.2",
 		"@automattic/jetpack-script-data": "^0.4.3",
 		"@wordpress/api-fetch": "7.24.0",
 		"@wordpress/block-editor": "14.19.0",

package/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';

package/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>
+		);
+	}
+);