Merge pull request #23205 from Yoast/feature/content-planner

Feature/content planner

Author: vraja-pro

config/webpack/paths.js

@@ -53,6 +53,7 @@ const getEntries = ( sourceDirectory = "./packages/js/src" ) => ( {
 	workouts: `${ sourceDirectory }/workouts.js`,
 	"frontend-inspector-resources": `${ sourceDirectory }/frontend-inspector-resources.js`,
 	"ai-generator": `${ sourceDirectory }/ai-generator/initialize.js`,
+	"ai-content-planner": `${ sourceDirectory }/ai-content-planner/initialize.js`,
 	"ai-consent": `${ sourceDirectory }/ai-consent/initialize.js`,
 	plans: `${ sourceDirectory }/plans/initialize.js`,
 } );

inc/class-wpseo-meta.php

@@ -99,7 +99,7 @@ class WPSEO_Meta {
 	 *                                                     Currently only used by add-on plugins.
 	 */
 	public static $meta_fields = [
-		'general'  => [
+		'general'         => [
 			'focuskw' => [
 				'type'  => 'hidden',
 				'title' => '',
@@ -131,7 +131,7 @@ class WPSEO_Meta {
 				'default_value' => 'false',
 			],
 		],
-		'advanced' => [
+		'advanced'        => [
 			'meta-robots-noindex'  => [
 				'type'          => 'hidden',
 				'default_value' => '0', // = post-type default.
@@ -171,8 +171,8 @@ class WPSEO_Meta {
 				'default_value' => '',
 			],
 		],
-		'social'   => [],
-		'schema'   => [
+		'social'          => [],
+		'schema'          => [
 			'schema_page_type'    => [
 				'type'    => 'hidden',
 				'options' => Schema_Types::PAGE_TYPES,
@@ -184,7 +184,7 @@ class WPSEO_Meta {
 			],
 		],
 		/* Fields we should validate & save, but not show on any form. */
-		'non_form' => [
+		'non_form'        => [
 			'linkdex' => [
 				'type'          => null,
 				'default_value' => '0',

packages/js/images/yoast.svg

@@ -17,6 +17,7 @@
     "@wordpress/api-fetch": "^7.8.2",
     "@wordpress/block-editor": "^14.3.16",
     "@wordpress/blocks": "^13.8.6",
+    "@wordpress/wordcount": "^4.27.0",
     "@wordpress/components": "^28.8.12",
     "@wordpress/compose": "^7.8.4",
     "@wordpress/data": "^10.8.4",

packages/js/package.json

@@ -1,40 +1,28 @@
-import { useDispatch, useSelect } from "@wordpress/data";
-import { useCallback } from "@wordpress/element";
-import { AiConsent } from "../../shared-admin/components";
+import PropTypes from "prop-types";
+import { AiGrantConsent } from "../../shared-admin/components";
 import { STORE_NAME_AI_CONSENT } from "../constants";
 
+const LINKS = {
+	termsOfService: "https://yoa.st/ai-fix-assessments-terms-of-service",
+	privacyPolicy: "https://yoa.st/ai-fix-assessments-privacy-policy",
+	learnMore: "https://yoa.st/ai-fix-assessments-consent-learn-more",
+};
+
 /**
  * The modal content for granting consent to use the AI features.
  *
  * @param {function} onStartGenerating Callback to start generating content after consent is given.
  *
  * @returns {JSX.Element} The element.
  */
-export const GrantConsent = ( { onStartGenerating } ) => {
-	const { termsOfServiceLink, privacyPolicyLink, learnMoreLink, imageLink, endpoint } = useSelect( select => {
-		const storeSelect = select( STORE_NAME_AI_CONSENT );
-		return {
-			termsOfServiceLink: storeSelect.selectLink( "https://yoa.st/ai-fix-assessments-terms-of-service" ),
-			privacyPolicyLink: storeSelect.selectLink( "https://yoa.st/ai-fix-assessments-privacy-policy" ),
-			learnMoreLink: storeSelect.selectLink( "https://yoa.st/ai-fix-assessments-consent-learn-more" ),
-			imageLink: storeSelect.selectImageLink( "ai-consent.png" ),
-			endpoint: storeSelect.selectAiGeneratorConsentEndpoint(),
-		};
-	}, [] );
-
-	const { storeAiGeneratorConsent } = useDispatch( STORE_NAME_AI_CONSENT );
-	const handleGiveConsent = useCallback( () => {
-		storeAiGeneratorConsent( true, endpoint );
-		onStartGenerating();
-	}, [ storeAiGeneratorConsent, onStartGenerating ] );
-
-	return (
-		<AiConsent
-			imageLink={ imageLink }
-			onGiveConsent={ handleGiveConsent }
-			learnMoreLink={ learnMoreLink }
-			termsOfServiceLink={ termsOfServiceLink }
-			privacyPolicyLink={ privacyPolicyLink }
-		/>
-	);
+export const GrantConsent = ( { onStartGenerating } ) => (
+	<AiGrantConsent
+		storeName={ STORE_NAME_AI_CONSENT }
+		onConsentGranted={ onStartGenerating }
+		linkStoreName={ STORE_NAME_AI_CONSENT }
+		links={ LINKS }
+	/>
+);
+GrantConsent.propTypes = {
+	onStartGenerating: PropTypes.func.isRequired,
 };

packages/js/src/ai-consent/components/grant-consent.js

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "yoast/content-planner-banner",
+	"title": "Yoast Content Planner Banner",
+	"category": "yoast-ai-blocks",
+	"supports": {
+		"inserter": false,
+		"html": false,
+		"reusable": false,
+		"multiple": false,
+		"lock": false
+	},
+	"textdomain": "wordpress-seo"
+}

packages/js/src/ai-content-planner/block.json

@@ -0,0 +1,89 @@
+import { registerBlockType } from "@wordpress/blocks";
+import { useBlockProps } from "@wordpress/block-editor";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { useCallback, useEffect, useRef } from "@wordpress/element";
+import block from "../block.json";
+import { InlineBanner } from "../components/inline-banner";
+import { CONTENT_PLANNER_STORE, FEATURE_MODAL_STATUS } from "../constants";
+import { STORE_NAME_EDITOR, STORE_NAME_AI } from "../../ai-generator/constants";
+import { useFetchContentSuggestions } from "../hooks/use-fetch-content-suggestions";
+
+const INJECTED_STYLE_ID = "yoast-seo-tailwind-css";
+
+/**
+ * The edit component for the Content Planner Banner block.
+ *
+ * Renders the inline banner in the editor. When the user dismisses it,
+ * the block is removed from the editor entirely.
+ *
+ * @param {Object} props           The block props.
+ * @param {string} props.clientId  The block's client ID.
+ * @returns {JSX.Element} The block edit component.
+ */
+const Edit = ( { clientId } ) => {
+	const blockProps = useBlockProps();
+	const ref = useRef( null );
+	const { isPremium, hasConsent } = useSelect( select => {
+		return {
+			isPremium: select( STORE_NAME_EDITOR ).getIsPremium(),
+			hasConsent: select( STORE_NAME_AI ).selectHasAiGeneratorConsent(),
+		};
+	}, [] );
+	const { removeBlock } = useDispatch( "core/block-editor" );
+	const { setFeatureModalStatus } = useDispatch( CONTENT_PLANNER_STORE );
+	const fetchContentSuggestions = useFetchContentSuggestions();
+
+	const handleDismiss = useCallback( () => {
+		removeBlock( clientId );
+	}, [ removeBlock, clientId ] );
+
+	const handleClick = useCallback( () => {
+		if ( hasConsent ) {
+			fetchContentSuggestions();
+		} else {
+			setFeatureModalStatus( FEATURE_MODAL_STATUS.consent );
+		}
+	}, [ hasConsent, fetchContentSuggestions, setFeatureModalStatus ] );
+
+	useEffect( () => {
+		// Inject the Tailwind stylesheet into the editor iframe if needed.
+		const ownerDoc = ref.current?.ownerDocument ?? document;
+		if ( ownerDoc === window.document || ownerDoc.getElementById( INJECTED_STYLE_ID ) ) {
+			return;
+		}
+		const mainLink = window.document.getElementById( INJECTED_STYLE_ID );
+		if ( ! mainLink ) {
+			return;
+		}
+		const link = ownerDoc.createElement( "link" );
+		link.id = INJECTED_STYLE_ID;
+		link.rel = "stylesheet";
+		link.href = mainLink.href;
+		ownerDoc.head.appendChild( link );
+	}, [] );
+
+	return (
+		<div { ...blockProps } ref={ ref }>
+			<InlineBanner
+				isPremium={ isPremium }
+				onDismiss={ handleDismiss }
+				onClick={ handleClick }
+			/>
+		</div>
+	);
+};
+
+/**
+ * Registers the Content Planner Banner block.
+ *
+ * Deferred behind a function so registration only happens when the Content
+ * Planner feature initializes, not at module import time.
+ *
+ * @returns {void}
+ */
+export function registerBannerBlock() {
+	registerBlockType( block, {
+		edit: Edit,
+		save: () => null,
+	} );
+}

packages/js/src/ai-content-planner/blocks/banner-block.js

@@ -0,0 +1,57 @@
+import { createBlock, registerBlockType } from "@wordpress/blocks";
+import { useBlockProps } from "@wordpress/block-editor";
+import { useEffect, useRef } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { ContentSuggestionBlock } from "../components/content-suggestion-block";
+
+registerBlockType( "yoast-seo/content-suggestion", {
+	apiVersion: 3,
+	title: __( "Content Suggestion", "wordpress-seo" ),
+	category: "text",
+	supports: { inserter: false },
+	transforms: {
+		to: [
+			{
+				type: "block",
+				blocks: [ "core/list" ],
+				transform: ( { suggestions } ) =>
+					createBlock(
+						"core/list",
+						{},
+						suggestions.map( ( suggestion ) => createBlock( "core/list-item", { content: suggestion } ) )
+					),
+			},
+		],
+	},
+	attributes: {
+		title: { type: "string", "default": "" },
+		suggestions: { type: "array", items: { type: "string" }, "default": [] },
+	},
+	edit: ( { attributes } ) => {
+		const ref = useRef( null );
+		const blockProps = useBlockProps( { ref } );
+
+		useEffect( () => {
+			const ownerDoc = ref.current?.ownerDocument ?? document;
+			if ( ownerDoc === window.document || ownerDoc.getElementById( "yoast-seo-tailwind-css" ) ) {
+				return;
+			}
+			const mainLink = window.document.getElementById( "yoast-seo-tailwind-css" );
+			if ( ! mainLink ) {
+				return;
+			}
+			const link = ownerDoc.createElement( "link" );
+			link.id = "yoast-seo-tailwind-css";
+			link.rel = "stylesheet";
+			link.href = mainLink.href;
+			ownerDoc.head.appendChild( link );
+		}, [] );
+
+		return (
+			<div { ...blockProps }>
+				<ContentSuggestionBlock contentNotes={ attributes.suggestions } />
+			</div>
+		);
+	},
+	save: () => null,
+} );

packages/js/src/ai-content-planner/blocks/content-suggestion-block.js

@@ -0,0 +1,93 @@
+import { Modal, useToggleState } from "@yoast/ui-library";
+import { useState, useEffect, useCallback, useRef } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import ApproveModal from "../containers/approve-modal";
+import { AiGrantConsent } from "../../shared-admin/components";
+import { ReplaceContentModal } from "./replace-content-modal";
+import { FEATURE_MODAL_STATUS, CONTENT_PLANNER_STORE } from "../constants";
+import { STORE_NAME_EDITOR, STORE_NAME_AI } from "../../ai-generator/constants";
+import { useFetchContentSuggestions, useApplyOutline } from "../hooks";
+import FeatureModal from "../containers/feature-modal";
+import { useSelect, useDispatch } from "@wordpress/data";
+
+
+/**
+ * The modal that orchestrates the flow between the approve, content suggestions,
+ * content outline, and replace content confirmation views.
+ *
+ * @returns {JSX.Element} The Content Planner Feature Modal.
+ */
+export const App = () => {
+	const { status, hasConsent } = useSelect( select => {
+		const contentPlannerSelectors = select( CONTENT_PLANNER_STORE );
+		return {
+			status: contentPlannerSelectors.selectFeatureModalStatus(),
+			hasConsent: select( STORE_NAME_AI ).selectHasAiGeneratorConsent(),
+		};
+	}, [] );
+	const { setFeatureModalStatus, closeModal } = useDispatch( CONTENT_PLANNER_STORE );
+	const [ hasVisitedReplace, setHasVisitedReplace ] = useState( false );
+	const [ replaceContentModalIsOpen, toggleReplaceContentModal, , openReplaceContentModal  ] = useToggleState( false );
+	const editedOutlineRef = useRef( null );
+	const handleApplyOutline = useApplyOutline( { editedOutlineRef } );
+	const fetchContentSuggestions = useFetchContentSuggestions();
+	const isConsentModalOpen = status === FEATURE_MODAL_STATUS.consent;
+
+	/**
+	 * Handles the click on the "Get content suggestions" button in the ApproveModal.
+	 * Sets the flag to indicate the transition is coming from the ApproveModal, then fetches content suggestions.
+	 * The flag is used to determine whether to apply a cross-fade transition when showing the SuggestionsPanel.
+	 * Updates the modal status to "content-suggestions" once suggestions are requested.
+	 *
+	 * @returns {void}
+	 */
+	const handleGetSuggestionsClick = useCallback( () => {
+		if ( ! hasConsent ) {
+			setFeatureModalStatus( FEATURE_MODAL_STATUS.consent );
+			return;
+		}
+		fetchContentSuggestions();
+	}, [ hasConsent, setFeatureModalStatus, fetchContentSuggestions ] );
+
+	const handleConfirmReplace = useCallback( () => {
+		handleApplyOutline();
+	}, [ handleApplyOutline ] );
+
+	useEffect( () => {
+		if ( ! status ) {
+			setHasVisitedReplace( false );
+		}
+	}, [ status ] );
+
+	return (
+		<>
+			<ApproveModal
+				onClick={ handleGetSuggestionsClick }
+			/>
+			<FeatureModal
+				editedOutlineRef={ editedOutlineRef }
+				handleApplyOutline={ handleApplyOutline }
+				openReplaceContentModal={ openReplaceContentModal }
+				setHasVisitedReplace={ setHasVisitedReplace }
+			/>
+			<ReplaceContentModal
+				onConfirm={ handleConfirmReplace }
+				isOpen={ replaceContentModalIsOpen && hasVisitedReplace }
+				onClose={ toggleReplaceContentModal }
+			/>
+
+			<Modal isOpen={ isConsentModalOpen } onClose={ closeModal } className="yst-introduction-modal">
+				<Modal.Panel
+					className="yst-max-w-lg yst-p-0 yst-rounded-3xl"
+					closeButtonScreenReaderText={ __( "Close modal", "wordpress-seo" ) }
+				>
+					<AiGrantConsent
+						storeName={ STORE_NAME_AI }
+						linkStoreName={ STORE_NAME_EDITOR }
+						onConsentGranted={ fetchContentSuggestions }
+					/>
+				</Modal.Panel>
+			</Modal>
+		</>
+	);
+};