From 57934381bdf32dc0551fd7833a4deec2b6738d12 Mon Sep 17 00:00:00 2001
From: aidamarfuaty <aida@yoast.com>
Date: Thu, 9 Jan 2025 15:32:30 +0100
Subject: [PATCH] Add the logic for disabling highlighting button to the
 Metabox and Sidebar fill

---
 .../js/src/components/fills/MetaboxFill.js    | 40 ++++++++++++++++---
 .../js/src/components/fills/SidebarFill.js    | 33 ++++++++++++++-
 2 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/packages/js/src/components/fills/MetaboxFill.js b/packages/js/src/components/fills/MetaboxFill.js
index 95197220fae..d847974f160 100644
--- a/packages/js/src/components/fills/MetaboxFill.js
+++ b/packages/js/src/components/fills/MetaboxFill.js
@@ -1,6 +1,6 @@
 /* External dependencies */
-import { useSelect } from "@wordpress/data";
-import { Fragment } from "@wordpress/element";
+import { useDispatch, useSelect } from "@wordpress/data";
+import { Fragment, useEffect } from "@wordpress/element";
 import { Fill } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
 import PropTypes from "prop-types";
@@ -24,6 +24,7 @@ import KeywordUpsell from "../modals/KeywordUpsell";
 import { BlackFridayProductEditorChecklistPromotion } from "../BlackFridayProductEditorChecklistPromotion";
 import { BlackFridayPromotion } from "../BlackFridayPromotion";
 import { withMetaboxWarningsCheck } from "../higherorder/withMetaboxWarningsCheck";
+import isBlockEditor from "../../helpers/isBlockEditor";
 
 const BlackFridayProductEditorChecklistPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( BlackFridayProductEditorChecklistPromotion );
 const BlackFridayPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( BlackFridayPromotion );
@@ -37,11 +38,40 @@ 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, activeAIButtonId } = useSelect( ( select ) => ( {
+		isTerm: select( "yoast-seo/editor" ).getIsTerm(),
+		isProduct: select( "yoast-seo/editor" ).getIsProduct(),
+		isWooCommerceActive: select( "yoast-seo/editor" ).getIsWooCommerceActive(),
+		activeAIButtonId: select( "yoast-seo/editor" ).getActiveAIFixesButton(),
+	} ), [] );
+	const editorMode = isBlockEditor() ? useSelect( ( select ) => select( "core/edit-post" ).getEditorMode(), [] ) : null;
+
+	const { setMarkerStatus } = useDispatch( "yoast-seo/editor" );
 
 	const shouldShowWooCommerceChecklistPromo = isProduct && isWooCommerceActive;
+	/**
+	 * 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( () => {
+		if ( ! editorMode ) {
+			// 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, setMarkerStatus ] );
 
 	return (
 		<>
diff --git a/packages/js/src/components/fills/SidebarFill.js b/packages/js/src/components/fills/SidebarFill.js
index d7dc69d21c5..a6fedeca504 100644
--- a/packages/js/src/components/fills/SidebarFill.js
+++ b/packages/js/src/components/fills/SidebarFill.js
@@ -1,6 +1,7 @@
 /* External dependencies */
 import { Fill } from "@wordpress/components";
-import { Fragment } from "@wordpress/element";
+import { useDispatch, useSelect } from "@wordpress/data";
+import { Fragment, useEffect } from "@wordpress/element";
 import PropTypes from "prop-types";
 import { __ } from "@wordpress/i18n";
 import { get } from "lodash";
@@ -21,6 +22,7 @@ import SidebarCollapsible from "../SidebarCollapsible";
 import AdvancedSettings from "../../containers/AdvancedSettings";
 import WincherSEOPerformanceModal from "../../containers/WincherSEOPerformanceModal";
 import KeywordUpsell from "../modals/KeywordUpsell";
+import isBlockEditor from "../../helpers/isBlockEditor";
 
 /* eslint-disable complexity */
 /**
@@ -37,6 +39,35 @@ import KeywordUpsell from "../modals/KeywordUpsell";
 export default function SidebarFill( { settings } ) {
 	const webinarIntroUrl = get( window, "wpseoScriptData.webinarIntroBlockEditorUrl", "https://yoa.st/webinar-intro-block-editor" );
 	const FirstEligibleNotification = useFirstEligibleNotification( { webinarIntroUrl } );
+	const { editorMode, activeAIButtonId } = useSelect( ( select ) => ( {
+		editorMode: select( "core/edit-post" ).getEditorMode(),
+		activeAIButtonId: select( "yoast-seo/editor" ).getActiveAIFixesButton(),
+	} ), [] );
+	const { setMarkerStatus } = useDispatch( "yoast-seo/editor" );
+
+	/**
+	 * 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( () => {
+		if ( isBlockEditor() ) {
+			// 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, setMarkerStatus ] );
 
 	return (
 		<Fragment>