Update VideoPress block connection banner, align with other blocks

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

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 }
 				</Button>
 			}
+			icon={ '' }
 		>
-			{ isModuleActive ? connectYourAccountMessage : connectJetpackModuleMessage }
+			{ needsActivation ? connectJetpackModuleMessage : connectYourAccountMessage }
 		</Banner>
 	);
 }

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 (
 		<div className="block-banner">
-			<Icon icon={ icon } />
+			{ icon && <Icon icon={ icon } /> }
 			<div className="block-banner__content">{ children }</div>
 			{ isLoading && <Spinner /> }
 			{ action && <div className="block-banner__action">{ action }</div> }

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

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 (
+			<PlaceholderWrapper disableInstructions className="disabled">
+				<span>{ ! hasConnectedOwner ? needsConnectionText : needsActivationText }</span>
+			</PlaceholderWrapper>
+		);
+	}
+
 	// Default view to select file to upload
 	return (
 		<MediaPlaceholder

projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx

@@ -21,6 +21,7 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
+import { usePermission } from '../../../admin/hooks/use-permission';
 import {
 	isStandaloneActive,
 	isVideoPressActive,
@@ -71,6 +72,7 @@ export const PlaceholderWrapper = withNotices( function ( {
 	noticeOperations,
 	instructions = description,
 	disableInstructions,
+	className,
 } ) {
 	useEffect( () => {
 		if ( ! errorMessage ) {
@@ -87,6 +89,7 @@ export const PlaceholderWrapper = withNotices( function ( {
 			label={ title }
 			instructions={ disableInstructions ? null : instructions }
 			notices={ noticeUI }
+			className={ className }
 		>
 			{ children }
 		</Placeholder>
@@ -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( {
 			<div { ...blockProps } className={ blockMainClassName }>
 				<>
 					<ConnectBanner
-						isConnected={ isActive }
+						isConnected={ hasConnectedOwner }
 						isModuleActive={ isModuleActive || isStandalonePluginActive }
 						isConnecting={ isRedirectingToMyJetpack }
 						onConnect={ () => {
 							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 }
 					/>
 				</>
 			</div>
@@ -592,15 +597,15 @@ export default function VideoPressEdit( {
 
 			<ConnectBanner
 				isModuleActive={ isModuleActive || isStandalonePluginActive }
-				isConnected={ isActive }
+				isConnected={ hasConnectedOwner }
 				isConnecting={ isRedirectingToMyJetpack }
 				onConnect={ () => {
 					setIsRedirectingToMyJetpack( true );
-					if ( ! isStandalonePluginActive ) {
-						return ( window.location.href = jetpackVideoPressSettingUrl );
+					if ( ! hasConnectedOwner ) {
+						return ( window.location.href = myJetpackConnectUrl );
 					}
 
-					window.location.href = myJetpackConnectUrl;
+					window.location.href = jetpackVideoPressSettingUrl;
 				} }
 			/>
 

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%;