Content Guidelines: Add AI-powered generate/improve UI via Jetpack

projects/plugins/jetpack/_inc/content-guidelines-ai.js

@@ -0,0 +1,15 @@
+/**
+ * Content Guidelines AI — Entry point.
+ *
+ * Injects Jetpack AI-powered generate/improve buttons into the
+ * Content Guidelines admin page (Gutenberg experimental feature).
+ */
+import './content-guidelines-ai/store';
+import './content-guidelines-ai/style.scss';
+import { startInjection } from './content-guidelines-ai/lib/inject';
+
+if ( document.readyState === 'loading' ) {
+	document.addEventListener( 'DOMContentLoaded', startInjection );
+} else {
+	startInjection();
+}

projects/plugins/jetpack/_inc/content-guidelines-ai.php

@@ -0,0 +1,92 @@
+<?php
+/**
+ * Content Guidelines AI — Jetpack AI integration.
+ *
+ * Enqueues a standalone JS bundle on the Content Guidelines admin page
+ * that adds AI-powered guideline generation via Jetpack.
+ *
+ * @package automattic/jetpack
+ */
+
+use Automattic\Jetpack\Connection\Manager as Connection_Manager;
+use Automattic\Jetpack\Redirect;
+use Automattic\Jetpack\Status;
+use Automattic\Jetpack\Status\Host;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit( 0 );
+}
+
+/**
+ * Enqueue content-guidelines-ai script on the Content Guidelines admin page.
+ *
+ * @since $$next-version$$
+ *
+ * @param string $hook_suffix The current admin page hook suffix.
+ */
+function jetpack_content_guidelines_ai_enqueue_scripts( $hook_suffix ) {
+	if ( 'settings_page_guidelines-wp-admin' !== $hook_suffix ) {
+		return;
+	}
+
+	$asset_file = JETPACK__PLUGIN_DIR . '_inc/build/content-guidelines-ai.min.asset.php';
+	$asset      = file_exists( $asset_file ) ? require $asset_file : array(
+		'dependencies' => array( 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices' ),
+		'version'      => JETPACK__VERSION,
+	);
+
+	wp_enqueue_script(
+		'jetpack-content-guidelines-ai',
+		plugins_url( '_inc/build/content-guidelines-ai.min.js', JETPACK__PLUGIN_FILE ),
+		$asset['dependencies'],
+		$asset['version'],
+		true
+	);
+
+	wp_enqueue_style(
+		'jetpack-content-guidelines-ai',
+		plugins_url( '_inc/build/content-guidelines-ai.css', JETPACK__PLUGIN_FILE ),
+		array( 'wp-components' ),
+		$asset['version']
+	);
+
+	// Determine AI availability per site type and pass config to JS.
+	if ( ! class_exists( 'Jetpack_AI_Helper' ) ) {
+		require_once JETPACK__PLUGIN_DIR . '_inc/lib/class-jetpack-ai-helper.php';
+	}
+
+	$host         = new Host();
+	$is_wpcom     = $host->is_wpcom_simple() || $host->is_woa_site();
+	$is_connected = $host->is_wpcom_simple()
+		|| ( ( new Connection_Manager( 'jetpack' ) )->has_connected_owner() && ! ( new Status() )->is_offline_mode() );
+	$ai_enabled   = \Jetpack_AI_Helper::is_enabled();
+
+	$config = array(
+		'available'   => $ai_enabled && $is_connected,
+		'isConnected' => $is_connected,
+	);
+
+	if ( ! $config['available'] ) {
+		if ( ! $is_connected ) {
+			// Self-hosted site not connected to WordPress.com.
+			$config['upgradeUrl'] = admin_url( 'admin.php?page=jetpack#/dashboard' );
+		} elseif ( $is_wpcom ) {
+			// wpcom simple or atomic — needs AI plan.
+			$config['upgradeUrl'] = Redirect::get_url( 'jetpack-ai-yearly-tier-upgrade-nudge' );
+		} else {
+			// Self-hosted connected — needs Jetpack AI product.
+			$config['upgradeUrl'] = Redirect::get_url( 'jetpack-ai-upgrade-url-for-jetpack-sites' );
+		}
+	}
+
+	wp_add_inline_script(
+		'jetpack-content-guidelines-ai',
+		sprintf(
+			'window.jetpackContentGuidelinesAiConfig = %s;',
+			wp_json_encode( $config, JSON_HEX_TAG | JSON_HEX_AMP )
+		),
+		'before'
+	);
+}
+
+add_action( 'admin_enqueue_scripts', 'jetpack_content_guidelines_ai_enqueue_scripts' );

projects/plugins/jetpack/_inc/content-guidelines-ai/components/empty-state-banner.jsx

@@ -0,0 +1,66 @@
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+import useGenerateAll from '../hooks/use-generate-all';
+import { AI_STORE_NAME } from '../store';
+
+export default function EmptyStateBanner() {
+	const { generate } = useGenerateAll();
+	const { dismissBanner } = useDispatch( AI_STORE_NAME );
+
+	const dismissed = useSelect( select => select( AI_STORE_NAME ).isBannerDismissed(), [] );
+
+	const handleDismiss = useCallback( () => {
+		dismissBanner();
+	}, [ dismissBanner ] );
+
+	const handleGetStarted = useCallback( () => {
+		dismissBanner();
+		generate();
+	}, [ dismissBanner, generate ] );
+
+	if ( dismissed ) {
+		return null;
+	}
+
+	return (
+		<div className="jetpack-content-guidelines-ai__banner">
+			<div className="jetpack-content-guidelines-ai__banner-content">
+				<h2>{ __( 'Generate your guidelines in seconds', 'jetpack' ) }</h2>
+				<p>
+					{ __(
+						'Use Jetpack to analyze your site and create draft guidelines based on your actual content.',
+						'jetpack'
+					) }
+				</p>
+				<div className="jetpack-content-guidelines-ai__banner-actions">
+					<Button
+						className="jetpack-content-guidelines-ai__banner-cta"
+						variant="primary"
+						onClick={ handleGetStarted }
+					>
+						{ __( 'Get started', 'jetpack' ) }
+					</Button>
+					<Button
+						className="jetpack-content-guidelines-ai__banner-close-text"
+						variant="tertiary"
+						onClick={ handleDismiss }
+					>
+						{ __( 'Close', 'jetpack' ) }
+					</Button>
+				</div>
+			</div>
+			<Button
+				className="jetpack-content-guidelines-ai__banner-close"
+				icon={ closeSmall }
+				label={ __( 'Dismiss banner', 'jetpack' ) }
+				size="small"
+				onClick={ handleDismiss }
+			/>
+			<div className="jetpack-content-guidelines-ai__banner-orb jetpack-content-guidelines-ai__banner-orb--top" />
+			<div className="jetpack-content-guidelines-ai__banner-orb jetpack-content-guidelines-ai__banner-orb--bottom" />
+		</div>
+	);
+}

projects/plugins/jetpack/_inc/content-guidelines-ai/components/section-generate-button.jsx

@@ -0,0 +1,59 @@
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { STORE_NAME } from '../constants';
+import { suggestGuidelines } from '../lib/api';
+import { showUnavailableNotice } from '../lib/availability';
+import { AI_STORE_NAME } from '../store';
+
+export default function SectionGenerateButton( { slug } ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { startSectionLoading, stopSectionLoading, setSuggestion } = useDispatch( AI_STORE_NAME );
+
+	const sectionLoading = useSelect(
+		select => select( AI_STORE_NAME ).isSectionLoading( slug ),
+		[ slug ]
+	);
+	const draft = useSelect( select => select( STORE_NAME ).getGuideline( slug ), [ slug ] );
+
+	const isEmpty = ! draft;
+	const generateLabel = __( 'Generate guidelines', 'jetpack' );
+	const improveLabel = __( 'Improve guidelines', 'jetpack' );
+	const label = isEmpty ? generateLabel : improveLabel;
+
+	const handleClick = useCallback( async () => {
+		if ( showUnavailableNotice() ) {
+			return;
+		}
+
+		startSectionLoading( slug );
+		try {
+			const existingContent = draft ? { [ slug ]: draft } : {};
+			const response = await suggestGuidelines( [ slug ], existingContent );
+			const suggestion = response?.suggestions?.[ slug ];
+			if ( suggestion ) {
+				setSuggestion( slug, suggestion );
+			}
+		} catch {
+			createErrorNotice( __( 'Failed to generate guidelines. Please try again.', 'jetpack' ), {
+				type: 'snackbar',
+			} );
+		} finally {
+			stopSectionLoading( slug );
+		}
+	}, [ slug, draft, startSectionLoading, stopSectionLoading, setSuggestion, createErrorNotice ] );
+
+	return (
+		<Button
+			variant="tertiary"
+			onClick={ handleClick }
+			disabled={ sectionLoading }
+			accessibleWhenDisabled
+			className="jetpack-content-guidelines-ai__section-generate-button"
+		>
+			{ label }
+		</Button>
+	);
+}

projects/plugins/jetpack/_inc/content-guidelines-ai/components/suggest-all-button.jsx

@@ -0,0 +1,42 @@
+import { JetpackLogo } from '@automattic/jetpack-components';
+import { Button } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { STORE_NAME, VALID_SECTIONS } from '../constants';
+import useGenerateAll from '../hooks/use-generate-all';
+import { AI_STORE_NAME } from '../store';
+
+export default function SuggestAllButton() {
+	const { generate, loading } = useGenerateAll();
+
+	const bannerDismissed = useSelect( select => select( AI_STORE_NAME ).isBannerDismissed(), [] );
+
+	const allGuidelines = useSelect( select => {
+		const store = select( STORE_NAME );
+		return Object.fromEntries( VALID_SECTIONS.map( slug => [ slug, store.getGuideline( slug ) ] ) );
+	}, [] );
+
+	const allEmpty = VALID_SECTIONS.every( slug => ! allGuidelines[ slug ] );
+
+	const generateLabel = __( 'Generate guidelines', 'jetpack' );
+	const improveLabel = __( 'Improve guidelines', 'jetpack' );
+	const label = allEmpty ? generateLabel : improveLabel;
+
+	// Hide when the banner is visible (not yet dismissed).
+	const hiddenProps = ! bannerDismissed ? { style: { display: 'none' }, 'aria-hidden': true } : {};
+
+	return (
+		<Button
+			{ ...hiddenProps }
+			variant="primary"
+			icon={ <JetpackLogo showText={ false } height={ 18 } logoColor="#fff" /> }
+			onClick={ generate }
+			disabled={ loading }
+			accessibleWhenDisabled
+			isBusy={ loading }
+			className="jetpack-content-guidelines-ai__suggest-all-button"
+		>
+			{ label }
+		</Button>
+	);
+}

projects/plugins/jetpack/_inc/content-guidelines-ai/components/suggestion-actions.jsx

@@ -0,0 +1,120 @@
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { diffWords } from 'diff';
+import { STORE_NAME } from '../constants';
+import { AI_STORE_NAME } from '../store';
+
+export default function SuggestionActions( { slug } ) {
+	const suggestion = useSelect( select => select( AI_STORE_NAME ).getSuggestion( slug ), [ slug ] );
+	const sectionLoading = useSelect(
+		select => select( AI_STORE_NAME ).isSectionLoading( slug ),
+		[ slug ]
+	);
+	const { clearSuggestion } = useDispatch( AI_STORE_NAME );
+	const { setGuideline } = useDispatch( STORE_NAME );
+
+	const [ original, setOriginal ] = useState( '' );
+	const [ textareaHeight, setTextareaHeight ] = useState( null );
+
+	// Direct DOM class manipulation is necessary because this component is rendered in
+	// a separate React root injected into Gutenberg's page — we can't control classes
+	// on Gutenberg-owned elements through React props.
+	useEffect( () => {
+		const form = document.getElementById( `content-guidelines-${ slug }` );
+		if ( ! form ) {
+			return;
+		}
+
+		// Capture textarea draft and height before hiding it.
+		if ( suggestion && ! form.classList.contains( 'has-jetpack-suggestion' ) ) {
+			const textarea = form.querySelector( 'textarea' );
+			if ( textarea ) {
+				setOriginal( textarea.value || '' );
+				if ( textarea.offsetHeight > 0 ) {
+					setTextareaHeight( textarea.offsetHeight );
+				}
+			}
+		}
+
+		form.classList.toggle( 'has-jetpack-suggestion', !! suggestion );
+		form.classList.toggle( 'is-jetpack-loading', sectionLoading && ! suggestion );
+		return () => {
+			form.classList.remove( 'has-jetpack-suggestion', 'is-jetpack-loading' );
+		};
+	}, [ slug, suggestion, sectionLoading ] );
+
+	const diff = useMemo( () => {
+		if ( ! suggestion ) {
+			return [];
+		}
+		return diffWords( original, suggestion );
+	}, [ original, suggestion ] );
+
+	const handleAccept = useCallback( () => {
+		setGuideline( slug, suggestion );
+		clearSuggestion( slug );
+	}, [ slug, suggestion, setGuideline, clearSuggestion ] );
+
+	const handleDismiss = useCallback( () => {
+		clearSuggestion( slug );
+	}, [ slug, clearSuggestion ] );
+
+	const handleKeyDown = useCallback(
+		e => {
+			if ( e.key === 'Enter' || e.key === ' ' ) {
+				e.preventDefault();
+				handleAccept();
+			}
+		},
+		[ handleAccept ]
+	);
+
+	if ( ! suggestion ) {
+		return null;
+	}
+
+	return (
+		<div className="jetpack-content-guidelines-ai__suggestion">
+			<div
+				className="jetpack-content-guidelines-ai__diff"
+				style={ textareaHeight ? { height: textareaHeight } : undefined }
+				role="button"
+				tabIndex={ 0 }
+				aria-label={ __( 'Click to accept suggested changes', 'jetpack' ) }
+				onClick={ handleAccept }
+				onKeyDown={ handleKeyDown }
+			>
+				<span className="screen-reader-text">
+					{ __( 'Changes from current to suggested guidelines:', 'jetpack' ) }
+				</span>
+				{ diff.map( ( part, i ) => {
+					if ( part.added ) {
+						return (
+							<ins key={ i } className="jetpack-content-guidelines-ai__diff-added">
+								{ part.value }
+							</ins>
+						);
+					}
+					if ( part.removed ) {
+						return (
+							<del key={ i } className="jetpack-content-guidelines-ai__diff-removed">
+								{ part.value }
+							</del>
+						);
+					}
+					return <span key={ i }>{ part.value }</span>;
+				} ) }
+			</div>
+			<div className="jetpack-content-guidelines-ai__suggestion-actions">
+				<Button variant="primary" onClick={ handleAccept }>
+					{ __( 'Accept suggestion', 'jetpack' ) }
+				</Button>
+				<Button variant="tertiary" onClick={ handleDismiss }>
+					{ __( 'Dismiss', 'jetpack' ) }
+				</Button>
+			</div>
+		</div>
+	);
+}