Merge branch 'release/23.2' of github.com:Yoast/wordpress-seo into trunk

inc/class-wpseo-utils.php

@@ -866,6 +866,7 @@ public static function get_admin_l10n() {
 			// phpcs:ignore Generic.ControlStructures.DisallowYodaConditions -- Bug: squizlabs/PHP_CodeSniffer#2962.
 			'isPrivateBlog'         => ( (string) get_option( 'blog_public' ) ) === '0',
 			'news_seo_is_active'    => ( defined( 'WPSEO_NEWS_FILE' ) ),
+			'isAiFeatureActive'     => (bool) WPSEO_Options::get( 'enable_ai_generator' ),
 		];
 
 		$additional_entries = apply_filters( 'wpseo_admin_l10n', [] );

package.json

@@ -75,7 +75,7 @@
     "webpack-bundle-analyzer": "^4.9.1"
   },
   "yoast": {
-    "pluginVersion": "23.2-RC5"
+    "pluginVersion": "23.2-RC6"
   },
   "version": "0.0.0"
 }

packages/js/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "cd ../.. && wp-scripts build --config config/webpack/webpack.config.js",
     "test": "jest",
-    "lint": "eslint src tests --max-warnings=73"
+    "lint": "eslint src tests --max-warnings=69"
   },
   "dependencies": {
     "@draft-js-plugins/mention": "^5.0.0",

packages/js/src/components/contentAnalysis/SeoAnalysis.js

@@ -40,7 +40,7 @@ class SeoAnalysis extends Component {
 	 * @param {string} location The location of the upsell component. Used to determine the shortlinks in the component.
 	 * @param {string} locationContext In which editor this component is rendered.
 	 *
-	 * @returns {wp.Element} A modalButtonContainer component with the modal for a keyword synonyms upsell.
+	 * @returns {JSX.Element} A modalButtonContainer component with the modal for a keyword synonyms upsell.
 	 */
 	renderSynonymsUpsell( location, locationContext ) {
 		const modalProps = {
@@ -76,7 +76,7 @@ class SeoAnalysis extends Component {
 	 * @param {string} location The location of the upsell component. Used to determine the shortlinks in the component.
 	 * @param {string} locationContext In which editor this component is rendered.
 	 *
-	 * @returns {wp.Element} A modalButtonContainer component with the modal for a multiple keywords upsell.
+	 * @returns {JSX.Element} A modalButtonContainer component with the modal for a multiple keywords upsell.
 	 */
 	renderMultipleKeywordsUpsell( location, locationContext ) {
 		const modalProps = {
@@ -112,7 +112,7 @@ class SeoAnalysis extends Component {
 	 * @param {string} location The location of the upsell component. Used to determine the shortlink in the component.
 	 * @param {string} locationContext In which editor this component is rendered.
 	 *
-	 * @returns {wp.Element} The AnalysisUpsell component.
+	 * @returns {JSX.Element} The AnalysisUpsell component.
 	 */
 	renderWordFormsUpsell( location, locationContext ) {
 		let url = location === "sidebar"
@@ -133,7 +133,7 @@ class SeoAnalysis extends Component {
 	 * @param {string} location       Where this component is rendered.
 	 * @param {string} scoreIndicator String indicating the score.
 	 *
-	 * @returns {wp.Element} The rendered score icon portal element.
+	 * @returns {JSX.Element} The rendered score icon portal element.
 	 */
 	renderTabIcon( location, scoreIndicator ) {
 		// The tab icon should only be rendered for the metabox.
@@ -191,28 +191,40 @@ class SeoAnalysis extends Component {
 		];
 	}
 
+	/* eslint-disable complexity */
 	/**
-	 * Renders the AI Assessment Fixes button.
+	 * Renders the Yoast AI Optimize button.
+	 * The button is shown when:
+	 * - The assessment can be fixed through Yoast AI Optimize.
+	 * - The AI feature is enabled (for Yoast SEO Premium users; for Free users, the button is shown with an upsell).
+	 * - We are in the block editor.
+	 * - We are not in the Elementor editor, nor in the Elementor in-between screen.
 	 *
-	 * @param {boolean} hasAIFixes Whether the assessment has AI fixes or not.
-	 * @param {string} id The assessment ID for which the AI fixes should be applied to.
+	 * @param {boolean} hasAIFixes Whether the assessment can be fixed through Yoast AI Optimize.
+	 * @param {string} id The assessment ID.
 	 *
-	 * @returns {JSX.Element} The AI Assessment Fixes button.
+	 * @returns {void|JSX.Element} The AI Optimize button, or nothing if the button should not be shown.
 	 */
 	renderAIFixesButton = ( hasAIFixes, id ) => {
 		const isPremium = getL10nObject().isPremium;
 
+		// Don't show the button if the AI feature is not enabled for Yoast SEO Premium users.
+		if ( isPremium && ! this.props.isAiFeatureEnabled ) {
+			return;
+		}
+
 		// The reason of adding the check if Elementor is active or not is because `isBlockEditor` method also returns `true` for Elementor.
 		// The reason of adding the check if the Elementor editor is active, is to stop showing the buttons in the in-between screen.
 		return hasAIFixes && isBlockEditor() && ! this.props.isElementor && ! document.body.classList.contains( "elementor-editor-active" ) && (
 			<AIAssessmentFixesButton id={ id } isPremium={ isPremium } />
 		);
 	};
+	/* eslint-enable complexity */
 
 	/**
 	 * Renders the SEO Analysis component.
 	 *
-	 * @returns {wp.Element} The SEO Analysis component.
+	 * @returns {JSX.Element} The SEO Analysis component.
 	 */
 	render() {
 		const score = getIndicatorForScore( this.props.overallScore );
@@ -291,6 +303,7 @@ SeoAnalysis.propTypes = {
 	overallScore: PropTypes.number,
 	shouldUpsellHighlighting: PropTypes.bool,
 	isElementor: PropTypes.bool,
+	isAiFeatureEnabled: PropTypes.bool,
 };
 
 SeoAnalysis.defaultProps = {
@@ -302,6 +315,7 @@ SeoAnalysis.defaultProps = {
 	overallScore: null,
 	shouldUpsellHighlighting: false,
 	isElementor: false,
+	isAiFeatureEnabled: false,
 };
 
 export default withSelect( ( select, ownProps ) => {
@@ -310,6 +324,7 @@ export default withSelect( ( select, ownProps ) => {
 		getMarksButtonStatus,
 		getResultsForKeyword,
 		getIsElementorEditor,
+		getPreference,
 	} = select( "yoast-seo/editor" );
 
 	const keyword = getFocusKeyphrase();
@@ -319,5 +334,6 @@ export default withSelect( ( select, ownProps ) => {
 		marksButtonStatus: ownProps.hideMarksButtons ? "disabled" : getMarksButtonStatus(),
 		keyword,
 		isElementor: getIsElementorEditor(),
+		isAiFeatureEnabled: getPreference( "isAiFeatureActive", false ),
 	};
 } )( SeoAnalysis );

packages/js/src/redux/reducers/preferences.js

@@ -37,6 +37,7 @@ function getDefaultState() {
 		isWincherIntegrationActive: isWincherIntegrationActive(),
 		isInsightsEnabled: get( window, "wpseoScriptData.metabox.isInsightsEnabled", false ),
 		isNewsEnabled: ! ! window.wpseoAdminL10n.news_seo_is_active,
+		isAiFeatureActive: Boolean( window.wpseoAdminL10n.isAiFeatureActive ),
 	};
 }
 

packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js

@@ -39,7 +39,7 @@ export const AiFixAssessmentsUpsell = ( {
 			<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
 				<div className="yst-relative yst-w-full">
 					<VideoFlow
-						videoId="vmrahpfjxp"
+						videoId="vun9z1dpfh"
 						thumbnail={ thumbnail }
 						wistiaEmbedPermission={ wistiaEmbedPermission }
 					/>
@@ -54,7 +54,7 @@ export const AiFixAssessmentsUpsell = ( {
 					</span>
 				</div>
 			</div>
-			<div className="yst-px-10 yst-pb-10 yst-flex yst-flex-col yst-items-center">
+			<div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">
 				<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
 					<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
 						{

packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js

@@ -54,11 +54,12 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( {
 				</div>
 				<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
 					<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
+						<span className="yst-logo-icon" />
 						{ newToText }
 					</span>
 				</div>
 			</div>
-			<div className="yst-px-10 yst-pb-10 yst-flex yst-flex-col yst-items-center">
+			<div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">
 				<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
 					<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
 						{ title }
@@ -157,11 +158,7 @@ AiGenerateTitlesAndDescriptionsUpsell.defaultProps = {
 		__( "Unlock with %1$s", "wordpress-seo" ),
 		"Yoast SEO Premium"
 	),
-	newToText: sprintf(
-		/* translators: %1$s expands to Yoast SEO Premium. */
-		__( "New in %1$s", "wordpress-seo" ),
-		"Yoast SEO Premium"
-	),
+	newToText: "Yoast SEO Premium",
 	isProductCopy: false,
 	bundleNote: "",
 };

packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap

@@ -15,7 +15,7 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = `
           class="yst-absolute yst-w-full yst-h-full yst-top-0 yst-left-0"
         >
           <div
-            class="wistia_embed wistia_async_vmrahpfjxp videoFoam=true"
+            class="wistia_embed wistia_async_vun9z1dpfh videoFoam=true"
           />
         </div>
       </div>
@@ -40,7 +40,7 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = `
     </div>
   </div>
   <div
-    class="yst-px-10 yst-pb-10 yst-flex yst-flex-col yst-items-center"
+    class="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center"
   >
     <div
       class="yst-mt-4 yst-mx-1.5 yst-text-center"