Merge pull request #21960 from Yoast/4522-readability-analysis-is-dis…

…abled-after-premium-analysis-is-rendered

Correctly enable or disable the highlighting button

packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { __ } from "@wordpress/i18n";
-import { useEffect, useCallback, useRef, useState } from "@wordpress/element";
+import { useCallback, useRef, useState } from "@wordpress/element";
 import { doAction } from "@wordpress/hooks";
 import { useSelect, useDispatch } from "@wordpress/data";
 
@@ -25,8 +25,11 @@ import { LockClosedIcon } from "@heroicons/react/solid";
 const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 	const aiFixesId = id + "AIFixes";
 	const [ isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse ] = useToggleState( false );
-	const activeAIButtonId = useSelect( select => select( "yoast-seo/editor" ).getActiveAIFixesButton(), [] );
-	const activeMarker = useSelect( select => select( "yoast-seo/editor" ).getActiveMarker(), [] );
+	const { activeMarker, editorMode, activeAIButtonId } = useSelect( ( select ) => ( {
+		activeMarker: select( "yoast-seo/editor" ).getActiveMarker(),
+		editorMode: select( "core/edit-post" ).getEditorMode(),
+		activeAIButtonId: select( "yoast-seo/editor" ).getActiveAIFixesButton(),
+	} ), [] );
 	const { setActiveAIFixesButton, setActiveMarker, setMarkerPauseStatus, setMarkerStatus } = useDispatch( "yoast-seo/editor" );
 	const focusElementRef = useRef( null );
 	const [ buttonClass, setButtonClass ] = useState( "" );
@@ -37,9 +40,6 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 	// The button is pressed when the active AI button id is the same as the current button id.
 	const isButtonPressed = activeAIButtonId === aiFixesId;
 
-	// Get the editor mode using useSelect.
-	const editorMode = useSelect( ( select ) => select( "core/edit-post" ).getEditorMode(), [] );
-
 	// Enable the button when:
 	// (1) other AI buttons are not pressed.
 	// (2) the AI button is not disabled.
@@ -76,29 +76,6 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 		};
 	}, [ isButtonPressed, activeAIButtonId, editorMode ] );
 
-
-	/**
-	 * Toggles the markers status, based on the editor mode and the AI assessment fixes button status.
-	 *
-	 * @param {string} editorMode The editor mode.
-	 * @param {boolean} activeAIButtonId The active AI button ID.
-	 *
-	 * @returns {void}
-	 */
-	useEffect( () => {
-		// Toggle markers based on editor mode.
-		if ( editorMode === "visual" && ! activeAIButtonId ) {
-			setMarkerStatus( "enabled" );
-		} else {
-			setMarkerStatus( "disabled" );
-		}
-
-		// Cleanup function to reset the marker status when the component unmounts or editor mode changes
-		return () => {
-			setMarkerStatus( "disabled" );
-		};
-	}, [ editorMode, activeAIButtonId, setMarkerStatus ] );
-
 	/**
 	 * Handles the button press state.
 	 * @returns {void}

packages/js/src/components/fills/MetaboxFill.js

@@ -24,6 +24,8 @@ import KeywordUpsell from "../modals/KeywordUpsell";
 import { BlackFridayProductEditorChecklistPromotion } from "../BlackFridayProductEditorChecklistPromotion";
 import { BlackFridayPromotion } from "../BlackFridayPromotion";
 import { withMetaboxWarningsCheck } from "../higherorder/withMetaboxWarningsCheck";
+import isBlockEditor from "../../helpers/isBlockEditor";
+import useToggleMarkerStatus from "./hooks/useToggleMarkerStatus";
 
 const BlackFridayProductEditorChecklistPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( BlackFridayProductEditorChecklistPromotion );
 const BlackFridayPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( BlackFridayPromotion );
@@ -37,12 +39,18 @@ const BlackFridayPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( B
  * @returns {wp.Element} The Metabox component.
  */
 export default function MetaboxFill( { settings } ) {
-	const isTerm = useSelect( ( select ) => select( "yoast-seo/editor" ).getIsTerm(), [] );
-	const isProduct = useSelect( ( select ) => select( "yoast-seo/editor" ).getIsProduct(), [] );
-	const isWooCommerceActive = useSelect( ( select ) => select( "yoast-seo/editor" ).getIsWooCommerceActive(), [] );
+	const { isTerm, isProduct, isWooCommerceActive } = useSelect( ( select ) => ( {
+		isTerm: select( "yoast-seo/editor" ).getIsTerm(),
+		isProduct: select( "yoast-seo/editor" ).getIsProduct(),
+		isWooCommerceActive: select( "yoast-seo/editor" ).getIsWooCommerceActive(),
+	} ), [] );
 
 	const shouldShowWooCommerceChecklistPromo = isProduct && isWooCommerceActive;
 
+	if ( isBlockEditor() ) {
+		useToggleMarkerStatus();
+	}
+
 	return (
 		<>
 			<Fill name="YoastMetabox">

packages/js/src/components/fills/SidebarFill.js

@@ -21,6 +21,8 @@ import SidebarCollapsible from "../SidebarCollapsible";
 import AdvancedSettings from "../../containers/AdvancedSettings";
 import WincherSEOPerformanceModal from "../../containers/WincherSEOPerformanceModal";
 import KeywordUpsell from "../modals/KeywordUpsell";
+import isBlockEditor from "../../helpers/isBlockEditor";
+import useToggleMarkerStatus from "./hooks/useToggleMarkerStatus";
 
 /* eslint-disable complexity */
 /**
@@ -38,6 +40,10 @@ export default function SidebarFill( { settings } ) {
 	const webinarIntroUrl = get( window, "wpseoScriptData.webinarIntroBlockEditorUrl", "https://yoa.st/webinar-intro-block-editor" );
 	const FirstEligibleNotification = useFirstEligibleNotification( { webinarIntroUrl } );
 
+	if ( isBlockEditor() ) {
+		useToggleMarkerStatus();
+	}
+
 	return (
 		<Fragment>
 			<Fill name="YoastSidebar">

packages/js/src/components/fills/hooks/useToggleMarkerStatus.js

@@ -0,0 +1,30 @@
+import { useDispatch, useSelect } from "@wordpress/data";
+import { useEffect } from "@wordpress/element";
+
+/**
+ * Toggles the markers status, based on the editor mode and the AI Optimize button status.
+ * @returns {void}
+ */
+const useToggleMarkerStatus = () => {
+	const { editorMode, activeAIButtonId } = useSelect( ( select ) => ( {
+		editorMode: select( "core/edit-post" ).getEditorMode(),
+		activeAIButtonId: select( "yoast-seo/editor" ).getActiveAIFixesButton(),
+	} ), [] );
+	const { setMarkerStatus } = useDispatch( "yoast-seo/editor" );
+
+	useEffect( () => {
+		// Toggle markers based on editor mode.
+		if ( ( editorMode === "visual" && activeAIButtonId ) || editorMode === "text" ) {
+			setMarkerStatus( "disabled" );
+		} else {
+			setMarkerStatus( "enabled" );
+		}
+
+		// Cleanup function to reset the marker status when the component unmounts or editor mode changes
+		return () => {
+			setMarkerStatus( "disabled" );
+		};
+	}, [ editorMode, activeAIButtonId ] );
+};
+
+export default useToggleMarkerStatus;