diff --git a/packages/js/src/components/SchemaTab.js b/packages/js/src/components/SchemaTab.js index 49263f0fc0c..29d58236612 100644 --- a/packages/js/src/components/SchemaTab.js +++ b/packages/js/src/components/SchemaTab.js @@ -7,6 +7,7 @@ import PropTypes from "prop-types"; import styled from "styled-components"; import WooCommerceUpsell from "./WooCommerceUpsell"; import { get } from "lodash"; +import { useSelect } from "@wordpress/data"; const NewsLandingPageLink = makeOutboundLink(); @@ -14,6 +15,8 @@ const SchemaContainer = styled.div` padding: 16px; `; +const STORE = "yoast-seo/editor"; + /** * The NewsAlert upsell. * @@ -66,7 +69,9 @@ NewsAlert.propTypes = { * @returns {Object[]} A copy of the schema type options. */ const getSchemaTypeOptions = ( schemaTypeOptions, defaultType, postTypeName ) => { - const disablePageTypeSelect = get( window, "wpseoScriptData.postType", "" ) === "product" && get( window, "wpseoScriptData.isWooCommerceSEOActive", false ); + const isProduct = useSelect( ( select ) => select( STORE ).getIsProduct(), [] ); + const isWooSeoActive = useSelect( select => select( STORE ).getIsWooSeoActive(), [] ); + const disablePageTypeSelect = isProduct && isWooSeoActive; const schemaOption = disablePageTypeSelect ? { name: __( "Item Page", "wordpress-seo" ), value: "ItemPage" } : schemaTypeOptions.find( option => option.value === defaultType ); return [ { @@ -165,7 +170,10 @@ const Content = ( props ) => { const woocommerceUpsell = get( window, "wpseoScriptData.woocommerceUpsell", "" ); const [ focusedArticleType, setFocusedArticleType ] = useState( props.schemaArticleTypeSelected ); const woocommerceUpsellText = __( "Want your products stand out in search results with rich results like price, reviews and more?", "wordpress-seo" ); - const disablePageTypeSelect = get( window, "wpseoScriptData.postType", "" ) === "product" && get( window, "wpseoScriptData.isWooCommerceSEOActive", false ); + const isProduct = useSelect( ( select ) => select( STORE ).getIsProduct(), [] ); + const isWooSeoActive = useSelect( select => select( STORE ).getIsWooSeoActive(), [] ); + + const disablePageTypeSelect = isProduct && isWooSeoActive; const handleOptionChange = useCallback( ( _, value ) => { diff --git a/packages/js/src/redux/selectors/isWooSEO.js b/packages/js/src/redux/selectors/isWooSEO.js index 58941473125..cfcc9760812 100644 --- a/packages/js/src/redux/selectors/isWooSEO.js +++ b/packages/js/src/redux/selectors/isWooSEO.js @@ -6,3 +6,11 @@ import { get } from "lodash"; * @returns {Boolean} Whether the plugin is WooCommerce SEO or not. */ export const getIsWooSeoUpsell = () => get( window, "wpseoScriptData.woocommerceUpsell", false ); + + +/** + * Determines whether the WooCommerce SEO addon is active. + * + * @returns {Boolean} Whether the plugin is WooCommerce SEO or not. + */ +export const getIsWooSeoActive = () => Boolean( get( window, "wpseoScriptData.isWooCommerceSeoActive", false ) );