diff --git a/projects/packages/videopress/changelog/update-jetpack-blocks-confusing-connection-nudges b/projects/packages/videopress/changelog/update-jetpack-blocks-confusing-connection-nudges new file mode 100644 index 0000000000000..0a41d686ca108 --- /dev/null +++ b/projects/packages/videopress/changelog/update-jetpack-blocks-confusing-connection-nudges @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Update connection nudge for VideoPress connection banner in blocks diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/connect-banner.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/connect-banner.tsx index a4ec01bab7afd..3e3422c1c563e 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/connect-banner.tsx +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/connect-banner.tsx @@ -31,15 +31,22 @@ export default function ConnectBanner( { isConnected, isConnecting, }: ConnectBannerProps ): React.ReactElement { - if ( isConnected ) { + if ( isConnected && isModuleActive ) { return null; } - let connectButtonText = __( 'Connect', 'jetpack-videopress-pkg' ); + const needsActivation = isConnected && ! isModuleActive; + + let connectButtonText = __( 'Connect Jetpack', 'jetpack-videopress-pkg' ); if ( isConnecting ) { connectButtonText = __( 'Redirecting…', 'jetpack-videopress-pkg' ); } + let activateButtonText = __( 'Activate VideoPress', 'jetpack-videopress-pkg' ); + if ( isConnecting ) { + activateButtonText = __( 'Activating…', 'jetpack-videopress-pkg' ); + } + const connectYourAccountMessage = __( 'Connect your account to continue using VideoPress', 'jetpack-videopress-pkg' @@ -58,11 +65,12 @@ export default function ConnectBanner( { disabled={ isConnecting } isBusy={ isConnecting } > - { connectButtonText } + { needsActivation ? activateButtonText : connectButtonText } } + icon={ '' } > - { isModuleActive ? connectYourAccountMessage : connectJetpackModuleMessage } + { needsActivation ? connectJetpackModuleMessage : connectYourAccountMessage } ); } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/index.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/index.tsx index e6501db60bd1b..1676198043f76 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/index.tsx +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/index.tsx @@ -34,7 +34,7 @@ export default function BlockBanner( { }: BlockBannerProps ): React.ReactElement { return (
- + { icon && }
{ children }
{ isLoading && } { action &&
{ action }
} diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/style.scss index 3cf78ee0e8ce9..8964f84b82a95 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/style.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/banner/style.scss @@ -1,15 +1,39 @@ .block-banner { display: flex; - height: 48px; + justify-content: space-between; font-size: 14px; align-self: center; align-items: center; - background: #F6F7F7; - padding: 0 16px; + background: black; + border-radius: 2px; + padding: 0 20px; + box-shadow: 0 0 1px inset white; .block-banner__content { - color: #01283d; - flex-grow: 2; - margin: 0 8px; + color: white; + margin: 10px 10px 10px 0; + } + + .block-banner__action { + padding: 0; + + .components-button.is-primary { + background: white; + color: black; + font-weight: 600; + font-size: 14px; + padding: 4px 8px; + height: 28px; + margin: 8px 0 8px auto; + + &:hover:not(:disabled) { + background: #F6F7F7; + } + } + + .components-button.is-primary.is-busy { + background-size: 100px 100%; + background-image: linear-gradient(-45deg, #e34c84 28%, #ab235a 28%, #ab235a 72%, #e34c84 72%); + } } } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js index e7c2b99039535..660e7833e7721 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js @@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { usePermission } from '../../../../../admin/hooks/use-permission'; import useResumableUploader from '../../../../../hooks/use-resumable-uploader'; import { uploadFromLibrary } from '../../../../../hooks/use-uploader'; import { buildVideoPressURL, pickVideoBlockAttributesFromUrl } from '../../../../../lib/url'; @@ -29,12 +30,15 @@ const VideoPressUploader = ( { fileToUpload, isReplacing, onReplaceCancel, + isActive, } ) => { const [ uploadPaused, setUploadPaused ] = useState( false ); const [ uploadedVideoData, setUploadedVideoData ] = useState( false ); const [ isUploadingInProgress, setIsUploadingInProgress ] = useState( false ); const [ isVerifyingLocalMedia, setIsVerifyingLocalMedia ] = useState( false ); + const { hasConnectedOwner } = usePermission(); + /* * When the file to upload is set, start the upload process * just after the component is mounted. @@ -314,6 +318,24 @@ const VideoPressUploader = ( { ); } + if ( ! isActive ) { + const needsConnectionText = __( + 'Connect your WordPress.com account to enable high-quality, ad-free video.', + 'jetpack-videopress-pkg' + ); + + const needsActivationText = __( + 'Activate the VideoPress module to enable high-quality, ad-free video.', + 'jetpack-videopress-pkg' + ); + + return ( + + { ! hasConnectedOwner ? needsConnectionText : needsActivationText } + + ); + } + // Default view to select file to upload return ( { if ( ! errorMessage ) { @@ -87,6 +89,7 @@ export const PlaceholderWrapper = withNotices( function ( { label={ title } instructions={ disableInstructions ? null : instructions } notices={ noticeUI } + className={ className } > { children } @@ -148,6 +151,7 @@ export default function VideoPressEdit( { // Get the redirect URI for the connection flow. const [ isRedirectingToMyJetpack, setIsRedirectingToMyJetpack ] = useState( false ); + const { hasConnectedOwner } = usePermission(); // Detect if the chapter file is auto-generated. const chapter = tracks?.filter( track => track.kind === 'chapters' )?.[ 0 ]; @@ -395,15 +399,15 @@ export default function VideoPressEdit( {
<> { setIsRedirectingToMyJetpack( true ); - if ( ! isStandalonePluginActive ) { - return ( window.location.href = jetpackVideoPressSettingUrl ); + if ( ! hasConnectedOwner ) { + return ( window.location.href = myJetpackConnectUrl ); } - window.location.href = myJetpackConnectUrl; + window.location.href = jetpackVideoPressSettingUrl; } } /> @@ -414,6 +418,7 @@ export default function VideoPressEdit( { fileToUpload={ fileToUpload } isReplacing={ isReplacingFile?.isReplacing } onReplaceCancel={ cancelReplacingVideoFile } + isActive={ isActive } />
@@ -592,15 +597,15 @@ export default function VideoPressEdit( { { setIsRedirectingToMyJetpack( true ); - if ( ! isStandalonePluginActive ) { - return ( window.location.href = jetpackVideoPressSettingUrl ); + if ( ! hasConnectedOwner ) { + return ( window.location.href = myJetpackConnectUrl ); } - window.location.href = myJetpackConnectUrl; + window.location.href = jetpackVideoPressSettingUrl; } } /> diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/editor.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/editor.scss index 6dfbaa03c6fb1..a75c2c96c1592 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/editor.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/editor.scss @@ -52,6 +52,10 @@ } } +.components-placeholder.disabled { + min-height: 0; +} + .loading-wrapper { display: flex; width: 100%;