From ec88bf301f6f968483bfa0df711d6801420117e2 Mon Sep 17 00:00:00 2001 From: Griffith Chen Date: Thu, 10 Sep 2026 08:24:58 +0800 Subject: [PATCH] VideoPress: add a "Learn more" support link to the admin page Point the admin page subtitle at the VideoPress support doc, on the modernized dashboard and its pre-connection screens as well as on the legacy admin page and its video details screen. WordPress.com sites open the doc in the Help Center; everywhere else it opens the Jetpack doc in a new tab. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01VefBqFyexhm3Y9zPXmriWJ --- .../add-videopress-admin-learn-more-link | 4 ++ .../admin/components/admin-page/index.tsx | 3 +- .../components/edit-video-details/index.tsx | 3 +- .../admin/components/page-subtitle/index.tsx | 25 ++++++++ .../client/components/support-link/index.tsx | 63 +++++++++++++++++++ .../connection-gate/connect-screen.tsx | 6 +- .../connection-gate/pricing-upsell.tsx | 6 +- .../components/dashboard-layout/index.tsx | 7 +-- .../components/page-subtitle/index.tsx | 25 ++++++++ .../add-videopress-admin-learn-more-link | 4 ++ .../add-videopress-admin-learn-more-link | 4 ++ 11 files changed, 135 insertions(+), 15 deletions(-) create mode 100644 projects/packages/videopress/changelog/add-videopress-admin-learn-more-link create mode 100644 projects/packages/videopress/src/client/admin/components/page-subtitle/index.tsx create mode 100644 projects/packages/videopress/src/client/components/support-link/index.tsx create mode 100644 projects/packages/videopress/src/dashboard/components/page-subtitle/index.tsx create mode 100644 projects/plugins/jetpack/changelog/add-videopress-admin-learn-more-link create mode 100644 projects/plugins/videopress/changelog/add-videopress-admin-learn-more-link diff --git a/projects/packages/videopress/changelog/add-videopress-admin-learn-more-link b/projects/packages/videopress/changelog/add-videopress-admin-learn-more-link new file mode 100644 index 000000000000..bfeaf600ff41 --- /dev/null +++ b/projects/packages/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. diff --git a/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx b/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx index 5aec91cd47a8..0715286aed37 100644 --- a/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx +++ b/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx @@ -31,6 +31,7 @@ import { usePermission } from '../../hooks/use-permission'; import { usePlan } from '../../hooks/use-plan'; import useSelectVideoFiles from '../../hooks/use-select-video-files'; import { NeedUserConnectionGlobalNotice } from '../global-notice'; +import PageSubTitle from '../page-subtitle'; import PricingSection from '../pricing-section'; import { ConnectSiteSettingsSection as SettingsSection } from '../site-settings-section'; import { ConnectVideoStorageMeter } from '../video-storage-meter'; @@ -74,7 +75,7 @@ const Admin = () => { return ( } >
{ } 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.