2ff480e4798c2a9cbf817381929ae76152760538

Committed 07 May 2024 08:59AM UTC coverage: 51.243% (-1.2%) from 52.395%

Build # 2ff480e4798c2a9cbf817381929ae76152760538

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #21366 from Yoast/fix/mentions-spacing

Prevents interactions between spans in the meta description field

Run Details

7465 of 13623 branches covered (54.8%)

Branch coverage included in aggregate %.

0 of 1 new or added line in 1 file covered. (0.0%)

1434 existing lines in 40 files now uncovered.

28351 of 56272 relevant lines covered (50.38%)

39919.67 hits per line

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

0.0

/packages/js/src/shared-admin/helpers/search-appearance-description-mention.js

import { useCallback, useState } from "@wordpress/element";
import PropTypes from "prop-types";
import { Root, Badge, Tooltip } from "@yoast/ui-library";
import { Fill } from "@wordpress/components";
import { get } from "lodash";
import { addFilter } from "@wordpress/hooks";
import { __, sprintf, _n } from "@wordpress/i18n";
import { select } from "@wordpress/data";

/**
 * Renders a badge with tooltip for mentions.
 * @param {string} mentionsName The name of the mentions.
 * @param {JSX.node} children The children of the tooltip.
 * @returns {JSX.Element} The badge with a tooltip.
 */
const MentionsWithTooltip = ( { mentionsName, children } ) => {
        const [ isVisible, setIsVisible ] = useState( false );
        const handleMouseEnter = useCallback(
                () => setIsVisible( true ),
                [ setIsVisible ]
        );
        const handleMouseLeave = useCallback(
                () => setIsVisible( false ),
                [ setIsVisible ]
        );
        return (
                <>
                        <Badge
                                variant="plain"
                                className="yst-text-slate-500 yst-relative yst-cursor-pointer"
                                aria-describedby={ Tooltip.id }
                                onMouseEnter={ handleMouseEnter }
                                onMouseLeave={ handleMouseLeave }
                        >
                                <span>{ mentionsName }</span>
                                { isVisible && (
                                        <Tooltip
                                                id={ Tooltip.id }
                                                className="yst--translate-x-10 yst-max-w-lg yst-text-xs"
                                        >
                                                { children }
                                        </Tooltip>
                                ) }
                        </Badge>
                </>
        );
};

/**
 * Define the component prop types.
*/
MentionsWithTooltip.propTypes = {
        mentionsName: PropTypes.node.isRequired,
        children: PropTypes.node.isRequired,
};

/**
 * Adds the mentions.
 * @param {JSX.node[]} mentions The current mentions.
 * @param {string} fieldId The replacement variable editor's field ID.
 * @returns {JSX.node[]} The mentions.
 */
const filterReplacementVariableEditorMentions = ( mentions, { fieldId } ) => {
        const isRtl = get( window, "wpseoScriptData.metabox.isRtl", false );
        const getDate = select( "yoast-seo/editor" ).getDateFromSettings;
        const isProduct = select( "yoast-seo/editor" ).getIsProduct();
        const isPreviewField = fieldId === "yoast-google-preview-description-metabox" || fieldId === "yoast-google-preview-description-modal";
        const dateCharacters = getDate().length;
        const emDashCharacters = 3;
        const newMentions = [];
        if ( ! isProduct && isPreviewField ) {
                newMentions.push(
                        <Fill
                                name={ `yoast.replacementVariableEditor.additionalMentions.${fieldId}` }
                        >
                                <Root context={ { isRtl } }>
                                        <MentionsWithTooltip mentionsName={ __( "Date", "wordpress-seo" ) }>
                                                { sprintf(
                                                        /* translators: %s expands to the amount of characters */
                                                        _n( "The 'Date' variable is fixed and adds %s character to the length of your meta description.", "The 'Date' variable is fixed and adds %s characters to the length of your meta description.", dateCharacters, "wordpress-seo" ), dateCharacters ) }
                                        </MentionsWithTooltip>
                                        &nbsp;
                                        <MentionsWithTooltip mentionsName={ "—" }>
                                                { sprintf(
                                                        /* translators: %s expands to the amount of characters */
                                                        _n( "The em dash (—) is fixed and adds %s character to the length of your meta description.", "The em dash (—) is fixed and adds %s characters to the length of your meta description.", emDashCharacters, "wordpress-seo" ), emDashCharacters ) }
                                        </MentionsWithTooltip>
                                        &nbsp;
                                </Root>
                        </Fill>
                );
        }
        return [ ...mentions, ...newMentions ];
};

/**
 * Registers the search appearance description mention.
 * @returns {void}
 */
export const registerSearchAppearanceDescriptionMention = () => {
        addFilter(
                "yoast.replacementVariableEditor.additionalMentions",
                "yoast/yoast-seo/Mentions",
                filterReplacementVariableEditorMentions
        );
};

1	import { useCallback, useState } from "@wordpress/element";
2	import PropTypes from "prop-types";
3	import { Root, Badge, Tooltip } from "@yoast/ui-library";
4	import { Fill } from "@wordpress/components";
5	import { get } from "lodash";
6	import { addFilter } from "@wordpress/hooks";
7	import { __, sprintf, _n } from "@wordpress/i18n";
8	import { select } from "@wordpress/data";
9
10	/**
11	* Renders a badge with tooltip for mentions.
12	* @param {string} mentionsName The name of the mentions.
13	* @param {JSX.node} children The children of the tooltip.
14	* @returns {JSX.Element} The badge with a tooltip.
15	*/
16	const MentionsWithTooltip = ( { mentionsName, children } ) => {	×
17	const [ isVisible, setIsVisible ] = useState( false );	×
18	const handleMouseEnter = useCallback(	×
19	() => setIsVisible( true ),	×
20	[ setIsVisible ]
21	);
22	const handleMouseLeave = useCallback(	×
23	() => setIsVisible( false ),	×
24	[ setIsVisible ]
25	);
26	return (	×
27	<>
28	<Badge
29	variant="plain"
30	className="yst-text-slate-500 yst-relative yst-cursor-pointer"
31	aria-describedby={ Tooltip.id }
32	onMouseEnter={ handleMouseEnter }
33	onMouseLeave={ handleMouseLeave }
34	>
35	<span>{ mentionsName }</span>
36	{ isVisible && (	×
37	<Tooltip
38	id={ Tooltip.id }
39	className="yst--translate-x-10 yst-max-w-lg yst-text-xs"
40	>
41	{ children }
42	</Tooltip>
43	) }
44	</Badge>
45	</>
46	);
47	};
48
49	/**
50	* Define the component prop types.
51	*/
52	MentionsWithTooltip.propTypes = {	×
53	mentionsName: PropTypes.node.isRequired,
54	children: PropTypes.node.isRequired,
55	};
56
57	/**
58	* Adds the mentions.
59	* @param {JSX.node[]} mentions The current mentions.
60	* @param {string} fieldId The replacement variable editor's field ID.
61	* @returns {JSX.node[]} The mentions.
62	*/
63	const filterReplacementVariableEditorMentions = ( mentions, { fieldId } ) => {	×
64	const isRtl = get( window, "wpseoScriptData.metabox.isRtl", false );	×
65	const getDate = select( "yoast-seo/editor" ).getDateFromSettings;	×
66	const isProduct = select( "yoast-seo/editor" ).getIsProduct();	×
67	const isPreviewField = fieldId === "yoast-google-preview-description-metabox" \|\| fieldId === "yoast-google-preview-description-modal";	×
68	const dateCharacters = getDate().length;	×
NEW 69	const emDashCharacters = 3;	×
70	const newMentions = [];	×
71	if ( ! isProduct && isPreviewField ) {	×
72	newMentions.push(	×
73	<Fill
74	name={ `yoast.replacementVariableEditor.additionalMentions.${fieldId}` }
75	>
76	<Root context={ { isRtl } }>
77	<MentionsWithTooltip mentionsName={ __( "Date", "wordpress-seo" ) }>
78	{ sprintf(
79	/* translators: %s expands to the amount of characters */
80	_n( "The 'Date' variable is fixed and adds %s character to the length of your meta description.", "The 'Date' variable is fixed and adds %s characters to the length of your meta description.", dateCharacters, "wordpress-seo" ), dateCharacters ) }
81	</MentionsWithTooltip>
82
83	<MentionsWithTooltip mentionsName={ "—" }>
84	{ sprintf(
85	/* translators: %s expands to the amount of characters */
86	_n( "The em dash (—) is fixed and adds %s character to the length of your meta description.", "The em dash (—) is fixed and adds %s characters to the length of your meta description.", emDashCharacters, "wordpress-seo" ), emDashCharacters ) }
87	</MentionsWithTooltip>
88
89	</Root>
90	</Fill>
91	);
92	}
93	return [ ...mentions, ...newMentions ];	×
94	};
95
96	/**
97	* Registers the search appearance description mention.
98	* @returns {void}
99	*/
100	export const registerSearchAppearanceDescriptionMention = () => {	×
101	addFilter(	×
102	"yoast.replacementVariableEditor.additionalMentions",
103	"yoast/yoast-seo/Mentions",
104	filterReplacementVariableEditorMentions
105	);
106	};

Yoast / wordpress-seo / 2ff480e4798c2a9cbf817381929ae76152760538

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