Jetpack AI: introduce seo extension availability (#40744)

* introduce new ai-seo-assistant feature availability on beta * show SEO Assistant CTA button on sidebar. Position and copy edits are temprary as they still don't do anything. Use conditional class is-beta-extension for visibility * make is-beta-extension CSS class look better * changelog
Automattic · Dec 26, 2024 · 01327e4 · 01327e4
1 parent 91bde80
commit 01327e4
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 4 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-jetpack-ai-introduce-seo-extension-availability b/projects/plugins/jetpack/changelog/add-jetpack-ai-introduce-seo-extension-availability
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Jetpack AI: introduce new beta feature ai-seo-assistant
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/ai-assistant.php b/projects/plugins/jetpack/extensions/blocks/ai-assistant/ai-assistant.php
@@ -225,3 +225,17 @@ function () {
 		}
 	}
 );
+
+/**
+ * Register the `ai-seo-assistant` extension.
+ */
+add_action(
+	'jetpack_register_gutenberg_extensions',
+	function () {
+		if ( apply_filters( 'jetpack_ai_enabled', true ) &&
+			apply_filters( 'ai_seo_assistant_enabled', false )
+		) {
+			\Jetpack_Gutenberg::set_extension_available( 'ai-seo-assistant' );
+		}
+	}
+);
diff --git a/projects/plugins/jetpack/extensions/index.json b/projects/plugins/jetpack/extensions/index.json
@@ -80,7 +80,8 @@
 		"videopress/video-chapters",
 		"ai-assistant-backend-prompts",
 		"ai-list-to-table-transform",
-		"ai-response-feedback"
+		"ai-response-feedback",
+		"ai-seo-assistant"
 	],
 	"experimental": [],
 	"no-post-editor": [

diff --git a/projects/plugins/jetpack/extensions/index.scss b/projects/plugins/jetpack/extensions/index.scss
@@ -2,7 +2,7 @@
 
 .is-beta-extension {
 	position: relative;
-	box-shadow: 0 0 3px var( --jp-green-30 );
+	box-shadow: 0 0 0px 15px white, 0 0 0px 16px var( --jp-green-30 );
 	transition: 0.5s box-shadow linear;
 
 	&.inset-shadow {
@@ -36,4 +36,4 @@
 			visibility: hidden;
 		}
 	}
-}
+}
diff --git a/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
@@ -9,7 +9,6 @@ import { PluginPrePublishPanel, PluginDocumentSettingPanel } from '@wordpress/ed
 import { store as editorStore } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
-import React from 'react';
 /**
  * Internal dependencies
  */
@@ -18,12 +17,14 @@ import useAICheckout from '../../../../blocks/ai-assistant/hooks/use-ai-checkout
 import useAiFeature from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
 import useAiProductPage from '../../../../blocks/ai-assistant/hooks/use-ai-product-page';
 import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability';
+import { isBetaExtension } from '../../../../editor';
 import JetpackPluginSidebar from '../../../../shared/jetpack-plugin-sidebar';
 import { PLAN_TYPE_FREE, PLAN_TYPE_UNLIMITED, usePlanType } from '../../../../shared/use-plan-type';
 import { FeaturedImage } from '../ai-image';
 import { Breve, registerBreveHighlights, Highlight } from '../breve';
 import { getBreveAvailability, canWriteBriefBeEnabled } from '../breve/utils/get-availability';
 import Feedback from '../feedback';
+import SeoAssistant from '../seo-assistant';
 import TitleOptimization from '../title-optimization';
 import UsagePanel from '../usage-panel';
 import {
@@ -59,6 +60,8 @@ const isAITitleOptimizationKeywordsFeatureAvailable = getFeatureAvailability(
 	'ai-title-optimization-keywords-support'
 );
 
+const isSeoAssistantEnabled = getFeatureAvailability( 'ai-seo-assistant' );
+
 const JetpackAndSettingsContent = ( {
 	placement,
 	requireUpgrade,
@@ -86,6 +89,19 @@ const JetpackAndSettingsContent = ( {
 				</PanelRow>
 			) }
 
+			{ isSeoAssistantEnabled && (
+				<PanelRow
+					className={ `jetpack-ai-sidebar__feature-section ${
+						isBetaExtension( 'ai-seo-assistant' ) ? 'is-beta-extension' : ''
+					}` }
+				>
+					<BaseControl __nextHasNoMarginBottom={ true }>
+						<BaseControl.VisualLabel>{ __( 'SEO', 'jetpack' ) }</BaseControl.VisualLabel>
+						<SeoAssistant busy={ false } disabled={ false } />
+					</BaseControl>
+				</PanelRow>
+			) }
+
 			{ canWriteBriefBeEnabled() && isBreveAvailable && (
 				<PanelRow>
 					<BaseControl __nextHasNoMarginBottom={ true }>

diff --git a/...plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx b/...plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx
@@ -0,0 +1,21 @@
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import debugFactory from 'debug';
+
+const debug = debugFactory( 'jetpack-ai:seo-assistant' );
+
+export default function SeoAssistant( { busy, disabled } ) {
+	return (
+		<div>
+			<p>{ __( 'Improve post engagement.', 'jetpack' ) }</p>
+			<Button
+				onClick={ () => debug( 'click' ) }
+				variant="secondary"
+				disabled={ disabled }
+				isBusy={ busy }
+			>
+				{ __( 'SEO Assistant', 'jetpack' ) }
+			</Button>
+		</div>
+	);
+}