Fix blogroll block unhelpful error when user not connected (#39638)

* Add connection nudge to blogroll block

* changelog

* Update connection banner to show if current user is not connected

projects/plugins/jetpack/changelog/fix-blogroll-block-unhelpful-error-when-user-not-connected

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Show connection nudge instead of error if user is not connected on blogroll block

projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js

@@ -26,8 +26,8 @@ import clsx from 'clsx';
  */
 import UsagePanel from '../../plugins/ai-assistant-plugin/components/usage-panel';
 import { USAGE_PANEL_PLACEMENT_BLOCK_SETTINGS_SIDEBAR } from '../../plugins/ai-assistant-plugin/components/usage-panel/types';
+import ConnectBanner from '../../shared/components/connect-banner';
 import { PLAN_TYPE_FREE, PLAN_TYPE_UNLIMITED, usePlanType } from '../../shared/use-plan-type';
-import ConnectPrompt from './components/connect-prompt';
 import FeedbackControl from './components/feedback-control';
 import QuotaExceededMessage, { FairUsageNotice } from './components/quota-exceeded-message';
 import ToolbarControls from './components/toolbar-controls';
@@ -305,7 +305,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 	const banner = (
 		<>
 			{ isOverLimit && isSelected && <QuotaExceededMessage placement="ai-assistant-block" /> }
-			{ ! connected && <ConnectPrompt /> }
+			{ ! connected && <ConnectBanner /> }
 		</>
 	);
 

projects/plugins/jetpack/extensions/blocks/ai-chat/edit.js

@@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import './editor.scss';
-import ConnectPrompt from './components/nudge-connect';
+import ConnectBanner from '../../shared/components/connect-banner';
 import EnableJetpackSearchPrompt from './components/nudge-enable-search';
 import { DEFAULT_ASK_BUTTON_LABEL, DEFAULT_PLACEHOLDER } from './constants';
 import { AiChatControls } from './controls';
@@ -34,7 +34,7 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 	);
 	return (
 		<div { ...blockProps }>
-			<ConnectPrompt />
+			<ConnectBanner />
 			<EnableJetpackSearchPrompt />
 			<div className="jetpack-ai-chat-question-wrapper">
 				<TextControl

projects/plugins/jetpack/extensions/blocks/blogroll/edit.js

@@ -1,10 +1,12 @@
+import { useConnection } from '@automattic/jetpack-connection';
 import { InspectorControls, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { PanelBody, ToggleControl, FlexBlock, Spinner, Notice } from '@wordpress/components';
 import { dispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
+import ConnectBanner from '../../shared/components/connect-banner';
 import BlogrollAppender from './components/blogroll-appender';
 import useRecommendations from './use-recommendations';
 import { useSiteRecommendationSync } from './use-site-recommendations';
@@ -21,6 +23,8 @@ export function BlogRollEdit( { className, attributes, setAttributes, clientId }
 		load_placeholders,
 	} = attributes;
 
+	const { isUserConnected } = useConnection();
+
 	const {
 		isLoading: isLoadingRecommendations,
 		recommendations,
@@ -55,6 +59,19 @@ export function BlogRollEdit( { className, attributes, setAttributes, clientId }
 		} ),
 	} );
 
+	if ( ! isUserConnected ) {
+		return (
+			<>
+				<ConnectBanner
+					explanation={ __(
+						'Connect your WordPress.com account to use the Blogroll block.',
+						'jetpack'
+					) }
+				/>
+			</>
+		);
+	}
+
 	const errorMessage = recommendationsErrorMessage || subscriptionsErrorMessage;
 
 	return (

projects/plugins/jetpack/extensions/shared/components/connect-banner/index.tsx

@@ -0,0 +1,47 @@
+/*
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/*
+ * Internal dependencies
+ */
+import useAutosaveAndRedirect from '../../use-autosave-and-redirect';
+import { Nudge } from '../upgrade-nudge';
+import type { MouseEvent, FC } from 'react';
+
+interface ConnectBannerProps {
+	explanation?: string;
+}
+
+import './style.scss';
+
+const ConnectBanner: FC< ConnectBannerProps > = ( { explanation = null } ) => {
+	const checkoutUrl = `${ window?.Jetpack_Editor_Initial_State?.adminUrl }admin.php?page=my-jetpack#/connection`;
+	const { autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect( checkoutUrl );
+
+	const goToCheckoutPage = ( event: MouseEvent< HTMLButtonElement > ) => {
+		autosaveAndRedirect( event );
+	};
+
+	return (
+		<div>
+			<Nudge
+				buttonText={ __( 'Connect Jetpack', 'jetpack' ) }
+				checkoutUrl={ checkoutUrl }
+				className="jetpack-connect-banner-nudge"
+				description={ __( 'Your account is not connected to Jetpack at the moment.', 'jetpack' ) }
+				goToCheckoutPage={ goToCheckoutPage }
+				isRedirecting={ isRedirecting }
+			/>
+			<div className="jetpack-connect-banner">
+				{ explanation && (
+					<div className="jetpack-connect-banner__explanation">
+						<p>{ explanation }</p>
+					</div>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default ConnectBanner;

projects/plugins/jetpack/extensions/shared/components/connect-banner/style.scss

@@ -0,0 +1,45 @@
+@import '@automattic/jetpack-base-styles/style';
+
+.jetpack-connect-banner-nudge {
+	.jetpack-upgrade-plan-banner__wrapper {
+		flex-wrap: nowrap;
+
+		&__description {
+			line-height: 24px;
+		}
+
+		.components-button.is-primary {
+			background-color: var( --jp-white );
+			color: var( --jp-black );
+			margin-top: 8px;
+			margin-bottom: 8px;
+
+			&:hover {
+				background-color: var( --jp-gray-0 );
+			}
+		}
+	}
+}
+
+.jetpack-connect-banner {
+	color: var( --jp-black-80 );
+    background-color: var( --jp-white );
+    box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.12), 0px 3px 9px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+	border-radius: 0 0 2px 2px;
+
+	&__explanation {
+		display: flex;
+		padding: 8px 8px 8px 12px;
+		align-items: flex-end;
+		box-sizing: border-box;
+		border-radius: 6px 6px 0 0;
+		gap: 6px;
+
+		p {
+			color: var( --jp-gray-20 );
+			font-size: var( --font-label );
+			padding: 6px 8px;
+			margin: 0;
+		}
+	}
+}

projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx

@@ -5,13 +5,13 @@ import clsx from 'clsx';
 import './style.scss';
 
 export const Nudge = ( {
-	align,
 	className,
-	title,
 	description,
+	align = null,
+	title = null,
 	buttonText = null,
 	visible = true,
-	context,
+	context = null,
 	checkoutUrl = null,
 	goToCheckoutPage = null,
 	isRedirecting = false,