Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correctly enable or disable the highlighting button #21960

Open
wants to merge 4 commits into
base: release/24.3
Choose a base branch
from
+73 −35
Open

Correctly enable or disable the highlighting button #21960

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e6eba00
Move the logic for disabling highlighting button from the AI button c…
FAMarfuaty Jan 9, 2025
5793438
Add the logic for disabling highlighting button to the Metabox and Si…
FAMarfuaty Jan 9, 2025
f8b2a39
Corrects if statement.
Jordi-PV Jan 10, 2025
6292c95
Removes unused useEffect
Jordi-PV Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 5 additions & 28 deletions packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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( "" );
Expand All @@ -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.
Expand Down Expand Up @@ -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}
Expand Down
40 changes: 35 additions & 5 deletions packages/js/src/components/fills/MetaboxFill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 );
Expand All @@ -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 ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be isBlockEditor()? 😄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! That's correct 👍

// 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 (
<>
Expand Down
33 changes: 32 additions & 1 deletion packages/js/src/components/fills/SidebarFill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 */
/**
Expand All @@ -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>
Expand Down
Loading