{
}
actions={ headerActions }
>
diff --git a/projects/packages/videopress/src/client/admin/components/page-subtitle/index.tsx b/projects/packages/videopress/src/client/admin/components/page-subtitle/index.tsx
new file mode 100644
index 000000000000..922577fa2a5f
--- /dev/null
+++ b/projects/packages/videopress/src/client/admin/components/page-subtitle/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import SupportLink from '../../../components/support-link';
+
+/**
+ * Subtitle for the VideoPress admin page header, shared by the dashboard and
+ * the video details screen.
+ *
+ * @return The subtitle element.
+ */
+export default function PageSubTitle() {
+ return createInterpolateElement(
+ __(
+ 'Professional quality, ad-free video hosting. Learn more.',
+ 'jetpack-videopress-pkg'
+ ),
+ { link: }
+ );
+}
diff --git a/projects/packages/videopress/src/client/components/support-link/index.tsx b/projects/packages/videopress/src/client/components/support-link/index.tsx
new file mode 100644
index 000000000000..4f72bab2b4e6
--- /dev/null
+++ b/projects/packages/videopress/src/client/components/support-link/index.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { isWpcomPlatformSite } from '@automattic/jetpack-script-data';
+import { useDispatch } from '@wordpress/data';
+import { Link } from '@wordpress/ui';
+/**
+ * Types
+ */
+import type { ReactNode } from 'react';
+
+type Props = {
+ children?: ReactNode;
+};
+
+const SUPPORT_POST_ID = 4458;
+
+// Holds the WordPress.com blue on every admin color scheme; the radius rounds
+// the focus ring's outline.
+const linkStyle = {
+ color: 'var(--color-link, #3858e9)',
+ borderRadius: 'var(--wpds-border-radius-sm, 2px)',
+};
+
+/**
+ * Links to the VideoPress support doc. WordPress.com sites open it in the Help
+ * Center; everywhere else it opens the Jetpack doc in a new tab.
+ *
+ * @param props - Component props.
+ * @param props.children - Link text.
+ * @return The link element.
+ */
+export default function SupportLink( { children }: Props ) {
+ const helpCenter = useDispatch( 'automattic/help-center' ) as
+ | { setShowSupportDoc?: ( url: string, postId: number ) => void }
+ | undefined;
+ const setShowSupportDoc = helpCenter?.setShowSupportDoc;
+
+ const supportUrl = isWpcomPlatformSite()
+ ? 'https://wordpress.com/support/videopress/'
+ : 'https://jetpack.com/support/jetpack-videopress/';
+
+ if ( setShowSupportDoc ) {
+ return (
+ {
+ event.preventDefault();
+ setShowSupportDoc( supportUrl, SUPPORT_POST_ID );
+ } }
+ style={ linkStyle }
+ >
+ { children }
+
+ );
+ }
+
+ return (
+
+ { children }
+
+ );
+}
diff --git a/projects/packages/videopress/src/dashboard/components/connection-gate/connect-screen.tsx b/projects/packages/videopress/src/dashboard/components/connection-gate/connect-screen.tsx
index 212139f69c98..40269b5253b9 100644
--- a/projects/packages/videopress/src/dashboard/components/connection-gate/connect-screen.tsx
+++ b/projects/packages/videopress/src/dashboard/components/connection-gate/connect-screen.tsx
@@ -1,6 +1,7 @@
import AdminPage from '@automattic/jetpack-components/admin-page';
import { __ } from '@wordpress/i18n';
import { Button, Stack, Text } from '@wordpress/ui';
+import PageSubTitle from '../page-subtitle';
import './style.scss';
type Props = {
@@ -26,10 +27,7 @@ export default function ConnectScreen( { onConnect, isConnecting }: Props ) {
return (
}
>
diff --git a/projects/packages/videopress/src/dashboard/components/connection-gate/pricing-upsell.tsx b/projects/packages/videopress/src/dashboard/components/connection-gate/pricing-upsell.tsx
index 6d6ad6a9669c..7e363955d02c 100644
--- a/projects/packages/videopress/src/dashboard/components/connection-gate/pricing-upsell.tsx
+++ b/projects/packages/videopress/src/dashboard/components/connection-gate/pricing-upsell.tsx
@@ -11,6 +11,7 @@ import useConnection from '@automattic/jetpack-connection/use-connection';
import { __, sprintf } from '@wordpress/i18n';
import { useState } from 'react';
import { VIDEOPRESS_ADMIN_PAGE } from '../../utils/constants';
+import PageSubTitle from '../page-subtitle';
import './style.scss';
/**
@@ -62,10 +63,7 @@ export default function PricingUpsell() {
return (
}
>
diff --git a/projects/packages/videopress/src/dashboard/components/dashboard-layout/index.tsx b/projects/packages/videopress/src/dashboard/components/dashboard-layout/index.tsx
index d3d29642a302..562aa541de90 100644
--- a/projects/packages/videopress/src/dashboard/components/dashboard-layout/index.tsx
+++ b/projects/packages/videopress/src/dashboard/components/dashboard-layout/index.tsx
@@ -6,11 +6,11 @@ import useConnectionErrorNotice, {
ConnectionError,
} from '@automattic/jetpack-connection/use-connection-error-notice';
import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
import { useNavigate } from '@wordpress/route';
import { Stack, Tabs } from '@wordpress/ui';
import DashboardTabs, { TAB_PATHS, type DashboardTab } from '../dashboard-tabs';
import OnboardingModal from '../onboarding-modal';
+import PageSubTitle from '../page-subtitle';
import './style.scss';
import type { ReactNode } from 'react';
@@ -56,10 +56,7 @@ export default function DashboardLayout( { activeTab, children, actions, hideFoo
return (
}
actions={ actions }
showFooter={ ! hideFooter }
>
diff --git a/projects/packages/videopress/src/dashboard/components/page-subtitle/index.tsx b/projects/packages/videopress/src/dashboard/components/page-subtitle/index.tsx
new file mode 100644
index 000000000000..2a461b39509f
--- /dev/null
+++ b/projects/packages/videopress/src/dashboard/components/page-subtitle/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import SupportLink from '../../../client/components/support-link';
+
+/**
+ * Subtitle for the VideoPress admin page header, shared by the dashboard chrome
+ * and the pre-connection screens so every state of the page reads the same.
+ *
+ * @return The subtitle element.
+ */
+export default function PageSubTitle() {
+ return createInterpolateElement(
+ __(
+ 'Host, manage, customize, and track your videos — all in one place. Learn more.',
+ 'jetpack-videopress-pkg'
+ ),
+ { link: }
+ );
+}
diff --git a/projects/plugins/jetpack/changelog/add-videopress-admin-learn-more-link b/projects/plugins/jetpack/changelog/add-videopress-admin-learn-more-link
new file mode 100644
index 000000000000..f432924411ee
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-videopress-admin-learn-more-link
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+VideoPress: Add a "Learn more" support link to the admin page.
diff --git a/projects/plugins/videopress/changelog/add-videopress-admin-learn-more-link b/projects/plugins/videopress/changelog/add-videopress-admin-learn-more-link
new file mode 100644
index 000000000000..bfeaf600ff41
--- /dev/null
+++ b/projects/plugins/videopress/changelog/add-videopress-admin-learn-more-link
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add a "Learn more" support link to the admin page.