d15d91535af6320a805f39598ec78159ea62763c

Committed 29 Oct 2025 08:37AM UTC coverage: 53.28% (+0.01%) from 53.267%

Build # d15d91535af6320a805f39598ec78159ea62763c

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #22623 from Yoast/add/pre-publish-sidebar-notificatio-default-seo-data

Add notification for default SEO title and meta description in the pre publish sidebar.

Coverage Stats

8497 of 15684 branches covered (54.18%)

Branch coverage included in aggregate %.

58 of 84 new or added lines in 10 files covered. (69.05%)

1 existing line in 1 file now uncovered.

32050 of 60418 relevant lines covered (53.05%)

39527.78 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

67.82

/packages/js/src/components/DefaultSeoDataAlert.js

import PropTypes from "prop-types";
import { ExclamationCircleIcon } from "@heroicons/react/solid";
import { select } from "@wordpress/data";
import { __, sprintf } from "@wordpress/i18n";
import { Fragment, useCallback, useMemo } from "@wordpress/element";
import { applyFilters } from "@wordpress/hooks";
import { Slot } from "@wordpress/components";
import { Button } from "@yoast/components";
import { safeCreateInterpolateElement } from "../helpers/i18n";
import { useOpenYoastSidebarWhenPublishing } from "../hooks/use-open-yoast-sidebar-when-publishing";

const STORE_NAME_EDITOR = "yoast-seo/editor";

/**
 * Renders the Default SEO Data Alert.
 *
 * @param {Object} isSeoDataDefault Whether SEO titles and meta descriptions are default.
 *
 * @returns {wp.Element} The Default SEO Data Alert.
 */
export default function DefaultSeoDataAlert( {
        isSeoDataDefault,
} ) {
        const postType = select( STORE_NAME_EDITOR ).getPostType();
        const isTitlesDefault = useMemo( () => {
                return isSeoDataDefault?.isAllTitlesDefault || false;
        }, [ isSeoDataDefault ] );

        const isDescriptionsDefault = useMemo( () => {
                return isSeoDataDefault?.isAllDescriptionsDefault || false;
        }, [ isSeoDataDefault ] );

        const showAlert = useMemo( () => {
                if ( postType !== "post" ) {
                        return false;
                }

                return isTitlesDefault || isDescriptionsDefault;
        }, [ postType, isTitlesDefault, isDescriptionsDefault ] );

        const customSeoDataNames = useMemo( () => {
                if ( isTitlesDefault && isDescriptionsDefault ) {
                        return __( "custom SEO titles and meta descriptions", "wordpress-seo" );
                } else if ( isTitlesDefault ) {
                        return __( "custom SEO titles", "wordpress-seo" );
                } else if ( isDescriptionsDefault ) {
                        return __( "custom meta descriptions", "wordpress-seo" );
                }
        }, [ isTitlesDefault, isDescriptionsDefault ] );

        const optimizedSeoDataNames = useMemo( () => {
                if ( isTitlesDefault && isDescriptionsDefault ) {
                        return __( "quick optimized SEO titles and meta descriptions", "wordpress-seo" );
                } else if ( isTitlesDefault ) {
                        return __( "quick optimized SEO titles", "wordpress-seo" );
                } else if ( isDescriptionsDefault ) {
                        return __( "quick optimized meta descriptions", "wordpress-seo" );
                }
        }, [ isTitlesDefault, isDescriptionsDefault ] );

        const message = useMemo( () => sprintf(
                /* translators: %1$s expands to "custom SEO titles" or "custom meta descriptions" or both. */
                __( "Stand out in the search results and attract more visitors by adding %1$s.", "wordpress-seo" ),
                customSeoDataNames
        ), [ customSeoDataNames ] );

        const proTip = useMemo( () => safeCreateInterpolateElement(
                sprintf(
                        /* translators: %1$s, %2$s expands to strong tags. %3$s, %4$s expands to emphasis tags.
                                %5$s expands to "quick optimized SEO titles" or "quick optimized meta descriptions" or both */
                        __(
                                "%1$sPro tip%2$s: Use %3$sAI Generate%4$s for %5$s.",
                                "wordpress-seo"
                        ),
                        "<strong>",
                        "</strong>",
                        "<em>",
                        "</em>",
                        optimizedSeoDataNames
                ),
                {
                        strong: <strong />,
                        em: <em />,
                }
        ), [ optimizedSeoDataNames ] );

        const titleButtons = useMemo( () => {
                if ( ! isTitlesDefault ) {
                        return [];
                }

                if ( isDescriptionsDefault ) {
                        return [];
                }

                return applyFilters( "yoast.replacementVariableEditor.additionalButtons", [], { fieldId: "yoast-google-preview-pre-publish", type: "title" } );
        }, [ isTitlesDefault, isDescriptionsDefault ] );

        const descButtons = useMemo( () => {
                if ( ! isDescriptionsDefault ) {
                        return [];
                }

                return applyFilters( "yoast.replacementVariableEditor.additionalButtons", [], { fieldId: "yoast-google-preview-pre-publish", type: "description" } );
        }, [ isTitlesDefault, isDescriptionsDefault ] );

        const openYoastSidebarWhenPublishing = useOpenYoastSidebarWhenPublishing( true );
        const onClick = useCallback( () => {
                openYoastSidebarWhenPublishing();
        }, [ openYoastSidebarWhenPublishing ] );

        return showAlert && <Fragment>
                <div className="yst-flex yst-items-center yst-gap-1 yst-mb-[-25px]">
                        <ExclamationCircleIcon className="yst-w-4 yst-h-4 yst-text-amber-500" />
                        <h4>{ __( "Default SEO data detected", "wordpress-seo" ) }</h4>
                </div>
                <p>{ message }</p>
                { titleButtons.length + descButtons.length > 0 && <p>
                        { proTip }
                </p> }
                <Slot name={ "yoast.replacementVariableEditor.additionalButtons.yoast-google-preview-pre-publish" } />
                { titleButtons.map( ( button, index ) => (
                        <Fragment key={ `additional-button-pre-publish-sidebar-title-${ index }` }>
                                { button }
                        </Fragment>
                ) ) }
                { descButtons.map( ( button, index ) => (
                        <Fragment key={ `additional-button-pre-publish-sidebar-description-${ index }` }>
                                { button }
                        </Fragment>
                ) ) }
                <Button className="yst-mt-2" onClick={ onClick }>{ __( "Write custom SEO data", "wordpress-seo" ) }</Button>
        </Fragment>;
}

DefaultSeoDataAlert.propTypes = {
        isSeoDataDefault: PropTypes.object.isRequired,
};

1	import PropTypes from "prop-types";
2	import { ExclamationCircleIcon } from "@heroicons/react/solid";
3	import { select } from "@wordpress/data";
4	import { __, sprintf } from "@wordpress/i18n";
5	import { Fragment, useCallback, useMemo } from "@wordpress/element";
6	import { applyFilters } from "@wordpress/hooks";
7	import { Slot } from "@wordpress/components";
8	import { Button } from "@yoast/components";
9	import { safeCreateInterpolateElement } from "../helpers/i18n";
10	import { useOpenYoastSidebarWhenPublishing } from "../hooks/use-open-yoast-sidebar-when-publishing";
11
12	const STORE_NAME_EDITOR = "yoast-seo/editor";	4✔
13
14	/**
15	* Renders the Default SEO Data Alert.
16	*
17	* @param {Object} isSeoDataDefault Whether SEO titles and meta descriptions are default.
18	*
19	* @returns {wp.Element} The Default SEO Data Alert.
20	*/
21	export default function DefaultSeoDataAlert( {
22	isSeoDataDefault,
23	} ) {
24	const postType = select( STORE_NAME_EDITOR ).getPostType();	4✔
25	const isTitlesDefault = useMemo( () => {	4✔
26	return isSeoDataDefault?.isAllTitlesDefault \|\| false;	4✔
27	}, [ isSeoDataDefault ] );
28
29	const isDescriptionsDefault = useMemo( () => {	4✔
30	return isSeoDataDefault?.isAllDescriptionsDefault \|\| false;	4✔
31	}, [ isSeoDataDefault ] );
32
33	const showAlert = useMemo( () => {	4✔
34	if ( postType !== "post" ) {	4!
NEW 35	return false;	×
36	}
37
38	return isTitlesDefault \|\| isDescriptionsDefault;	4✔
39	}, [ postType, isTitlesDefault, isDescriptionsDefault ] );
40
41	const customSeoDataNames = useMemo( () => {	4✔
42	if ( isTitlesDefault && isDescriptionsDefault ) {	4!
NEW 43	return __( "custom SEO titles and meta descriptions", "wordpress-seo" );	×
44	} else if ( isTitlesDefault ) {	4✔
NEW 45	return __( "custom SEO titles", "wordpress-seo" );	×
46	} else if ( isDescriptionsDefault ) {	4✔
NEW 47	return __( "custom meta descriptions", "wordpress-seo" );	×
48	}
49	}, [ isTitlesDefault, isDescriptionsDefault ] );
50
51	const optimizedSeoDataNames = useMemo( () => {	4✔
52	if ( isTitlesDefault && isDescriptionsDefault ) {	4!
NEW 53	return __( "quick optimized SEO titles and meta descriptions", "wordpress-seo" );	×
54	} else if ( isTitlesDefault ) {	4!
NEW 55	return __( "quick optimized SEO titles", "wordpress-seo" );	×
56	} else if ( isDescriptionsDefault ) {	4!
NEW 57	return __( "quick optimized meta descriptions", "wordpress-seo" );	×
58	}
59	}, [ isTitlesDefault, isDescriptionsDefault ] );
60
61	const message = useMemo( () => sprintf(	4✔
62	/* translators: %1$s expands to "custom SEO titles" or "custom meta descriptions" or both. */
63	__( "Stand out in the search results and attract more visitors by adding %1$s.", "wordpress-seo" ),
64	customSeoDataNames
65	), [ customSeoDataNames ] );
66
67	const proTip = useMemo( () => safeCreateInterpolateElement(	4✔
68	sprintf(
69	/* translators: %1$s, %2$s expands to strong tags. %3$s, %4$s expands to emphasis tags.
70	%5$s expands to "quick optimized SEO titles" or "quick optimized meta descriptions" or both */
71	__(
72	"%1$sPro tip%2$s: Use %3$sAI Generate%4$s for %5$s.",
73	"wordpress-seo"
74	),
75	"<strong>",
76	"</strong>",
77	"<em>",
78	"</em>",
79	optimizedSeoDataNames
80	),
81	{
82	strong: <strong />,
83	em: <em />,
84	}
85	), [ optimizedSeoDataNames ] );
86
87	const titleButtons = useMemo( () => {	4✔
88	if ( ! isTitlesDefault ) {	4!
89	return [];	4✔
90	}
91
NEW 92	if ( isDescriptionsDefault ) {	×
NEW 93	return [];	×
94	}
95
NEW 96	return applyFilters( "yoast.replacementVariableEditor.additionalButtons", [], { fieldId: "yoast-google-preview-pre-publish", type: "title" } );	×
97	}, [ isTitlesDefault, isDescriptionsDefault ] );
98
99	const descButtons = useMemo( () => {	4✔
100	if ( ! isDescriptionsDefault ) {	4!
101	return [];	4✔
102	}
103
NEW 104	return applyFilters( "yoast.replacementVariableEditor.additionalButtons", [], { fieldId: "yoast-google-preview-pre-publish", type: "description" } );	×
105	}, [ isTitlesDefault, isDescriptionsDefault ] );
106
107	const openYoastSidebarWhenPublishing = useOpenYoastSidebarWhenPublishing( true );	4✔
108	const onClick = useCallback( () => {	4✔
NEW 109	openYoastSidebarWhenPublishing();	×
110	}, [ openYoastSidebarWhenPublishing ] );
111
112	return showAlert && <Fragment>	4!
113	<div className="yst-flex yst-items-center yst-gap-1 yst-mb-[-25px]">
114	<ExclamationCircleIcon className="yst-w-4 yst-h-4 yst-text-amber-500" />
115	<h4>{ __( "Default SEO data detected", "wordpress-seo" ) }</h4>
116	</div>
117	<p>{ message }</p>
118	{ titleButtons.length + descButtons.length > 0 && <p>	×
119	{ proTip }
120	</p> }
121	<Slot name={ "yoast.replacementVariableEditor.additionalButtons.yoast-google-preview-pre-publish" } />
122	{ titleButtons.map( ( button, index ) => (
NEW 123	<Fragment key={ `additional-button-pre-publish-sidebar-title-${ index }` }>	×
124	{ button }
125	</Fragment>
126	) ) }
127	{ descButtons.map( ( button, index ) => (
NEW 128	<Fragment key={ `additional-button-pre-publish-sidebar-description-${ index }` }>	×
129	{ button }
130	</Fragment>
131	) ) }
132	<Button className="yst-mt-2" onClick={ onClick }>{ __( "Write custom SEO data", "wordpress-seo" ) }</Button>
133	</Fragment>;
134	}
135
136	DefaultSeoDataAlert.propTypes = {	4✔
137	isSeoDataDefault: PropTypes.object.isRequired,
138	};

Yoast / wordpress-seo / d15d91535af6320a805f39598ec78159ea62763c

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous