ca4dc5ff21b0e40890305bc4114032de2ca68aaa

Committed 27 Jan 2025 09:40AM UTC coverage: 54.567% (-0.02%) from 54.583%

Build # ca4dc5ff21b0e40890305bc4114032de2ca68aaa

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #21962 from Yoast/show-alert-when-avif-file-is-used-in-social-preview

Show alert when avif file is used in social preview

Run Details

7742 of 13776 branches covered (56.2%)

Branch coverage included in aggregate %.

4 of 17 new or added lines in 4 files covered. (23.53%)

2 existing lines in 1 file now uncovered.

30152 of 55669 relevant lines covered (54.16%)

41330.14 hits per line

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

85.0

/packages/components/src/image-select/ImageSelect.js

import React from "react";
import { __ } from "@wordpress/i18n";
import ImageSelectButtons from "./ImageSelectButtons";
import PropTypes from "prop-types";
import FieldGroup from "../field-group/FieldGroup";
import Alert from "../Alert";

/* eslint-disable complexity */
/**
 * Renders ImageSelect component.
 *
 * @param {Object} props The props.
 *
 * @returns {React.Component} The ImageSelect.
 */
function ImageSelect( props ) {
        const imageSelected = props.usingFallback === false && props.imageUrl !== "";
        const previewImageUrl = props.imageUrl || props.defaultImageUrl || "";
        const showWarnings = props.warnings.length > 0 && ( imageSelected || props.usingFallback );
        const imageClassNames = [ "yoast-image-select__preview" ];
        if ( previewImageUrl === "" ) {
                imageClassNames.push( "yoast-image-select__preview--no-preview" );
        }
        if ( showWarnings ) {
                imageClassNames.push( "yoast-image-select__preview-has-warnings" );
        }


        const imageSelectButtonsProps = {
                imageSelected: imageSelected,
                onClick: props.onClick,
                onRemoveImageClick: props.onRemoveImageClick,
                selectImageButtonId: props.selectImageButtonId,
                replaceImageButtonId: props.replaceImageButtonId,
                removeImageButtonId: props.removeImageButtonId,
                isDisabled: props.isDisabled,
        };

        /**
         * @returns {JSXElement} returns a text for screen readers.
         */
        const ScreenReaderText = () => {
                return (
                        <span className="screen-reader-text">
                                {
                                        imageSelected
                                                ? __( "Replace image", "wordpress-seo" )
                                                : __( "Select image", "wordpress-seo" )
                                }
                        </span>
                );
        };

        return (
                <div
                        className="yoast-image-select"
                        onMouseEnter={ props.onMouseEnter }
                        onMouseLeave={ props.onMouseLeave }
                >
                        <FieldGroup
                                label={ props.label }
                                hasNewBadge={ props.hasNewBadge }
                                hasPremiumBadge={ props.hasPremiumBadge }
                        >
                                { props.hasPreview &&
                                        <button
                                                className={ imageClassNames.join( " " ) }
                                                onClick={ props.onClick }
                                                type="button"
                                                disabled={ props.isDisabled }
                                        >
                                                { previewImageUrl !== "" &&
                                                        <img src={ previewImageUrl } alt={ props.imageAltText } className="yoast-image-select__preview--image" />
                                                }
                                                <ScreenReaderText />
                                        </button>
                                }
                                {
                                        showWarnings && <div role="alert">
                                                {
                                                        props.warnings.map( ( warning, index ) => <Alert key={ `warning${ index }` } type="warning">
                                                                { warning }
                                                        </Alert> )
                                                }
                                        </div>
                                }
                                <ImageSelectButtons { ...imageSelectButtonsProps } />
                        </FieldGroup>
                </div>
        );
}

/* eslint-enable complexity */

export default ImageSelect;

ImageSelect.propTypes = {
        defaultImageUrl: PropTypes.string,
        imageUrl: PropTypes.string,
        imageAltText: PropTypes.string,
        hasPreview: PropTypes.bool.isRequired,
        label: PropTypes.string.isRequired,
        onClick: PropTypes.func,
        onMouseEnter: PropTypes.func,
        onMouseLeave: PropTypes.func,
        onRemoveImageClick: PropTypes.func,
        selectImageButtonId: PropTypes.string,
        replaceImageButtonId: PropTypes.string,
        removeImageButtonId: PropTypes.string,
        warnings: PropTypes.arrayOf( PropTypes.string ),
        hasNewBadge: PropTypes.bool,
        isDisabled: PropTypes.bool,
        usingFallback: PropTypes.bool,
        hasPremiumBadge: PropTypes.bool,
};

ImageSelect.defaultProps = {
        defaultImageUrl: "",
        imageUrl: "",
        imageAltText: "",
        onClick: () => {},
        onMouseEnter: () => {},
        onMouseLeave: () => {},
        onRemoveImageClick: () => {},
        selectImageButtonId: "",
        replaceImageButtonId: "",
        removeImageButtonId: "",
        warnings: [],
        hasNewBadge: false,
        isDisabled: false,
        usingFallback: false,
        hasPremiumBadge: false,
};

1	import React from "react";
2	import { __ } from "@wordpress/i18n";
3	import ImageSelectButtons from "./ImageSelectButtons";
4	import PropTypes from "prop-types";
5	import FieldGroup from "../field-group/FieldGroup";
6	import Alert from "../Alert";
7
8	/* eslint-disable complexity */
9	/**
10	* Renders ImageSelect component.
11	*
12	* @param {Object} props The props.
13	*
14	* @returns {React.Component} The ImageSelect.
15	*/
16	function ImageSelect( props ) {
17	const imageSelected = props.usingFallback === false && props.imageUrl !== "";	8✔
18	const previewImageUrl = props.imageUrl \|\| props.defaultImageUrl \|\| "";	8✔
19	const showWarnings = props.warnings.length > 0 && ( imageSelected \|\| props.usingFallback );	8!
20	const imageClassNames = [ "yoast-image-select__preview" ];	8✔
21	if ( previewImageUrl === "" ) {	8✔
22	imageClassNames.push( "yoast-image-select__preview--no-preview" );	4✔
23	}
24	if ( showWarnings ) {	8!
NEW 25	imageClassNames.push( "yoast-image-select__preview-has-warnings" );	×
26	}
27
28
29	const imageSelectButtonsProps = {	8✔
30	imageSelected: imageSelected,
31	onClick: props.onClick,
32	onRemoveImageClick: props.onRemoveImageClick,
33	selectImageButtonId: props.selectImageButtonId,
34	replaceImageButtonId: props.replaceImageButtonId,
35	removeImageButtonId: props.removeImageButtonId,
36	isDisabled: props.isDisabled,
37	};
38
39	/**
40	* @returns {JSXElement} returns a text for screen readers.
41	*/
42	const ScreenReaderText = () => {	8✔
43	return (	4✔
44	<span className="screen-reader-text">
45	{
46	imageSelected	2✔
47	? __( "Replace image", "wordpress-seo" )
48	: __( "Select image", "wordpress-seo" )
49	}
50	</span>
51	);
52	};
53
54	return (	8✔
55	<div
56	className="yoast-image-select"
57	onMouseEnter={ props.onMouseEnter }
58	onMouseLeave={ props.onMouseLeave }
59	>
60	<FieldGroup
61	label={ props.label }
62	hasNewBadge={ props.hasNewBadge }
63	hasPremiumBadge={ props.hasPremiumBadge }
64	>
65	{ props.hasPreview &&	6✔
66	<button
67	className={ imageClassNames.join( " " ) }
68	onClick={ props.onClick }
69	type="button"
70	disabled={ props.isDisabled }
71	>
72	{ previewImageUrl !== "" &&	3✔
73	<img src={ previewImageUrl } alt={ props.imageAltText } className="yoast-image-select__preview--image" />
74	}
75	<ScreenReaderText />
76	</button>
77	}
78	{
79	showWarnings && <div role="alert">	4!
80	{
81	props.warnings.map( ( warning, index ) => <Alert key={ `warning${ index }` } type="warning">	×
82	{ warning }
83	</Alert> )
84	}
85	</div>
86	}
87	<ImageSelectButtons { ...imageSelectButtonsProps } />
88	</FieldGroup>
89	</div>
90	);
91	}
92
93	/* eslint-enable complexity */
94
95	export default ImageSelect;
96
97	ImageSelect.propTypes = {	8✔
98	defaultImageUrl: PropTypes.string,
99	imageUrl: PropTypes.string,
100	imageAltText: PropTypes.string,
101	hasPreview: PropTypes.bool.isRequired,
102	label: PropTypes.string.isRequired,
103	onClick: PropTypes.func,
104	onMouseEnter: PropTypes.func,
105	onMouseLeave: PropTypes.func,
106	onRemoveImageClick: PropTypes.func,
107	selectImageButtonId: PropTypes.string,
108	replaceImageButtonId: PropTypes.string,
109	removeImageButtonId: PropTypes.string,
110	warnings: PropTypes.arrayOf( PropTypes.string ),
111	hasNewBadge: PropTypes.bool,
112	isDisabled: PropTypes.bool,
113	usingFallback: PropTypes.bool,
114	hasPremiumBadge: PropTypes.bool,
115	};
116
117	ImageSelect.defaultProps = {	8✔
118	defaultImageUrl: "",
119	imageUrl: "",
120	imageAltText: "",
121	onClick: () => {},
122	onMouseEnter: () => {},
123	onMouseLeave: () => {},
124	onRemoveImageClick: () => {},
125	selectImageButtonId: "",
126	replaceImageButtonId: "",
127	removeImageButtonId: "",
128	warnings: [],
129	hasNewBadge: false,
130	isDisabled: false,
131	usingFallback: false,
132	hasPremiumBadge: false,
133	};

Yoast / wordpress-seo / ca4dc5ff21b0e40890305bc4114032de2ca68aaa

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