diff --git a/packages/js/src/components/WincherSEOPerformanceModal.js b/packages/js/src/components/WincherSEOPerformanceModal.js
index 55f0db5efbc..48f70d8b748 100644
--- a/packages/js/src/components/WincherSEOPerformanceModal.js
+++ b/packages/js/src/components/WincherSEOPerformanceModal.js
@@ -2,9 +2,11 @@
import { Fragment, useCallback } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import PropTypes from "prop-types";
+import styled from "styled-components";
/* Yoast dependencies */
import { colors } from "@yoast/style-guide";
+import { CollapsibleStateless } from "@yoast/components";
/* Internal dependencies */
import { ModalContainer } from "./modals/Container";
@@ -14,6 +16,17 @@ import { isCloseEvent } from "./modals/editorModals/EditorModal.js";
import SidebarButton from "./SidebarButton";
import WincherSEOPerformance from "../containers/WincherSEOPerformance";
+const MetaboxModalButton = styled( CollapsibleStateless )`
+ h2 > button {
+ padding-left: 24px;
+ padding-top: 16px;
+
+ &:hover {
+ background-color: #f0f0f0;
+ }
+ }
+`;
+
/**
* Handles the click event on the "Track SEO performance" button.
*
@@ -98,6 +111,19 @@ export default function WincherSEOPerformanceModal( props ) {
onClick={ onModalOpen }
/>
}
+
+ { location === "metabox" && }
);
}
diff --git a/packages/js/src/components/fills/MetaboxFill.js b/packages/js/src/components/fills/MetaboxFill.js
index bdd8d94567b..c4a5b7b20a1 100644
--- a/packages/js/src/components/fills/MetaboxFill.js
+++ b/packages/js/src/components/fills/MetaboxFill.js
@@ -1,11 +1,11 @@
/* External dependencies */
-import { Fragment, useCallback } from "@wordpress/element";
+import { Fragment } from "@wordpress/element";
import { Fill } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import PropTypes from "prop-types";
-import { colors } from "@yoast/style-guide";
/* Internal dependencies */
+import WincherSEOPerformanceModal from "../../containers/WincherSEOPerformanceModal";
import CollapsibleCornerstone from "../../containers/CollapsibleCornerstone";
import SnippetEditor from "../../containers/SnippetEditor";
import Warning from "../../containers/Warning";
@@ -17,7 +17,6 @@ import AdvancedSettings from "../../containers/AdvancedSettings";
import SocialMetadataPortal from "../portals/SocialMetadataPortal";
import SchemaTabContainer from "../../containers/SchemaTab";
import SEMrushRelatedKeyphrases from "../../containers/SEMrushRelatedKeyphrases";
-import WincherSEOPerformance from "../../containers/WincherSEOPerformance";
import { isWordProofIntegrationActive } from "../../helpers/wordproof";
import WordProofAuthenticationModals from "../../components/modals/WordProofAuthenticationModals";
import PremiumSEOAnalysisModal from "../modals/PremiumSEOAnalysisModal";
@@ -28,23 +27,10 @@ import KeywordUpsell from "../KeywordUpsell";
* Creates the Metabox component.
*
* @param {Object} settings The feature toggles.
- * @param {Object} store The Redux store.
- * @param {Object} theme The theme to use.
- * @param {Array} wincherKeyphrases The Wincher trackable keyphrases.
- * @param {Function} setWincherNoKeyphrase Sets wincher no keyphrases in the store.
*
* @returns {wp.Element} The Metabox component.
*/
-export default function MetaboxFill( { settings, wincherKeyphrases, setWincherNoKeyphrase } ) {
- const onToggleWincher = useCallback( () => {
- if ( ! wincherKeyphrases.length ) {
- setWincherNoKeyphrase( true );
- // This is fragile, should replace with a real React ref.
- document.querySelector( "#focus-keyword-input-metabox" ).focus();
- return false;
- }
- }, [ wincherKeyphrases, setWincherNoKeyphrase ] );
-
+export default function MetaboxFill( { settings } ) {
return (
<>
{ isWordProofIntegrationActive() && }
@@ -93,16 +79,7 @@ export default function MetaboxFill( { settings, wincherKeyphrases, setWincherNo
}
{ settings.isKeywordAnalysisActive && settings.isWincherIntegrationActive &&
-
-
-
+
}
{ settings.isCornerstoneActive &&
@@ -131,8 +108,6 @@ export default function MetaboxFill( { settings, wincherKeyphrases, setWincherNo
MetaboxFill.propTypes = {
settings: PropTypes.object.isRequired,
- wincherKeyphrases: PropTypes.array.isRequired,
- setWincherNoKeyphrase: PropTypes.func.isRequired,
};
/* eslint-enable complexity */
diff --git a/packages/js/src/containers/MetaboxFill.js b/packages/js/src/containers/MetaboxFill.js
index 518650b4a7f..7ef90c3056b 100644
--- a/packages/js/src/containers/MetaboxFill.js
+++ b/packages/js/src/containers/MetaboxFill.js
@@ -1,4 +1,4 @@
-import { withSelect, withDispatch } from "@wordpress/data";
+import { withSelect } from "@wordpress/data";
import { compose } from "@wordpress/compose";
import MetaboxFill from "../components/fills/MetaboxFill";
@@ -6,19 +6,11 @@ export default compose( [
withSelect( ( select, ownProps ) => {
const {
getPreferences,
- getWincherTrackableKeyphrases,
} = select( "yoast-seo/editor" );
return {
settings: getPreferences(),
store: ownProps.store,
- wincherKeyphrases: getWincherTrackableKeyphrases(),
- };
- } ),
- withDispatch( ( dispatch ) => {
- const { setWincherNoKeyphrase } = dispatch( "yoast-seo/editor" );
- return {
- setWincherNoKeyphrase,
};
} ),
] )( MetaboxFill );