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 );