b2cdb4a8bbaeaf115e11e0be25203fb1c767dcea

Committed 24 Jul 2025 06:59AM UTC coverage: 52.536% (+0.3%) from 52.203%

Build # b2cdb4a8bbaeaf115e11e0be25203fb1c767dcea

Build Type

Pull #22381

github

Committed by

web-flow

Commit Message

Merge 46a96d07b into d7b01156a

Pull Request Pull Request #22381: JS: Solve react/require-default-props warnings

Run Details

8376 of 15389 branches covered (54.43%)

Branch coverage included in aggregate %.

26 of 127 new or added lines in 57 files covered. (20.47%)

27 existing lines in 22 files now uncovered.

30975 of 59514 relevant lines covered (52.05%)

40119.17 hits per line

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

0.0

/packages/js/src/components/ImageSelectComponent.js

/* eslint-disable complexity */
import { useCallback, useEffect, useMemo, useState } from "@wordpress/element";
import { ImageSelect } from "@yoast/components";
import { validateFacebookImage } from "@yoast/helpers";
import PropTypes from "prop-types";
import { fetchAttachment, openMedia } from "../helpers/selectMedia";

/**
 * Renders the ImageSelect.
 *
 * Using WP media to get an attachment and syncing to hidden fields.
 *
 * @param {string} hiddenField The ID of the hidden field for the image URL.
 * @param {string} [hiddenFieldImageId=""] The ID of the hidden field for the image ID.
 * @param {string} [hiddenFieldFallbackImageId=""] The ID of the hidden field for the fallback image ID.
 * @param {boolean} [hasImageValidation=false] Whether to validate the image.
 * @param {...Object} [imageSelectProps] Additional props for the ImageSelect.
 *
 * @returns {JSX.Element} The element.
 */
const ImageSelectComponent = ( {
        hiddenField,
        hiddenFieldImageId = "",
        hiddenFieldFallbackImageId = "",
        hasImageValidation = false,
        ...imageSelectProps
} ) => {
        const [ usingFallback, setUsingFallback ] = useState( ( document.getElementById( hiddenFieldFallbackImageId ) !== null ) );
        const hiddenFieldElement = useMemo( () => document.getElementById( hiddenField ) );
        const hiddenFieldSelectImageElement = useMemo( () => document.getElementById( hiddenFieldImageId ) );

        let hiddenFieldImageIdElement = null;

        if ( hiddenFieldFallbackImageId && document.getElementById( hiddenFieldFallbackImageId ) ) {
                hiddenFieldImageIdElement = useMemo( () => document.getElementById( hiddenFieldFallbackImageId ) );
        } else {
                hiddenFieldImageIdElement = hiddenFieldSelectImageElement;
        }

        const [ image, setImage ] = useState( {
                url: hiddenFieldElement ? hiddenFieldElement.value : "",
                id: hiddenFieldImageIdElement ? parseInt( hiddenFieldImageIdElement.value, 10 ) : "",
                alt: "",
        } );
        const [ warnings, setWarnings ] = useState( [] );

        const updateHiddenFields = useCallback( data => {
                if ( hiddenFieldElement ) {
                        hiddenFieldElement.value = data.url;
                }
                if ( hiddenFieldImageIdElement ) {
                        hiddenFieldImageIdElement.value = data.id;
                }
        } );

        const selectImage = useCallback( () => openMedia( data => {
                hiddenFieldImageIdElement = hiddenFieldSelectImageElement;
                setImage( data );
                updateHiddenFields( data );
                if ( hasImageValidation ) {
                        setWarnings( validateFacebookImage( data ) );
                }

                setUsingFallback( false );
        } ), [ hasImageValidation, updateHiddenFields ] );

        const removeImage = useCallback( () => {
                hiddenFieldImageIdElement = hiddenFieldSelectImageElement;
                const emptyImage = { url: "", id: "", alt: "" };
                setImage( emptyImage );
                updateHiddenFields( emptyImage );
                setWarnings( [] );
                setUsingFallback( true );
        }, [ updateHiddenFields ] );

        useEffect( () => {
                if ( image.id && ! image.alt ) {
                        fetchAttachment( image.id ).then( data => setImage( data ) );
                }
        }, [ image ] );

        return <ImageSelect
                { ...imageSelectProps }
                usingFallback={ usingFallback }
                imageUrl={ image.url }
                imageId={ image.id }
                imageAltText={ image.alt }
                onClick={ selectImage }
                onRemoveImageClick={ removeImage }
                warnings={ warnings }
        />;
};

ImageSelectComponent.propTypes = {
        hiddenField: PropTypes.string.isRequired,
        hiddenFieldImageId: PropTypes.string,
        hiddenFieldFallbackImageId: PropTypes.string,
        hasImageValidation: PropTypes.bool,
};

export default ImageSelectComponent;

1	/* eslint-disable complexity */
2	import { useCallback, useEffect, useMemo, useState } from "@wordpress/element";
3	import { ImageSelect } from "@yoast/components";
4	import { validateFacebookImage } from "@yoast/helpers";
5	import PropTypes from "prop-types";
6	import { fetchAttachment, openMedia } from "../helpers/selectMedia";
7
8	/**
9	* Renders the ImageSelect.
10	*
11	* Using WP media to get an attachment and syncing to hidden fields.
12	*
13	* @param {string} hiddenField The ID of the hidden field for the image URL.
14	* @param {string} [hiddenFieldImageId=""] The ID of the hidden field for the image ID.
15	* @param {string} [hiddenFieldFallbackImageId=""] The ID of the hidden field for the fallback image ID.
16	* @param {boolean} [hasImageValidation=false] Whether to validate the image.
17	* @param {...Object} [imageSelectProps] Additional props for the ImageSelect.
18	*
19	* @returns {JSX.Element} The element.
20	*/
NEW 21	const ImageSelectComponent = ( {	×
22	hiddenField,
23	hiddenFieldImageId = "",	×
24	hiddenFieldFallbackImageId = "",	×
25	hasImageValidation = false,	×
26	...imageSelectProps
27	} ) => {
28	const [ usingFallback, setUsingFallback ] = useState( ( document.getElementById( hiddenFieldFallbackImageId ) !== null ) );	×
29	const hiddenFieldElement = useMemo( () => document.getElementById( hiddenField ) );	×
30	const hiddenFieldSelectImageElement = useMemo( () => document.getElementById( hiddenFieldImageId ) );	×
31
32	let hiddenFieldImageIdElement = null;	×
33
34	if ( hiddenFieldFallbackImageId && document.getElementById( hiddenFieldFallbackImageId ) ) {	×
35	hiddenFieldImageIdElement = useMemo( () => document.getElementById( hiddenFieldFallbackImageId ) );	×
36	} else {
37	hiddenFieldImageIdElement = hiddenFieldSelectImageElement;	×
38	}
39
40	const [ image, setImage ] = useState( {	×
41	url: hiddenFieldElement ? hiddenFieldElement.value : "",	×
42	id: hiddenFieldImageIdElement ? parseInt( hiddenFieldImageIdElement.value, 10 ) : "",	×
43	alt: "",
44	} );
45	const [ warnings, setWarnings ] = useState( [] );	×
46
47	const updateHiddenFields = useCallback( data => {	×
48	if ( hiddenFieldElement ) {	×
49	hiddenFieldElement.value = data.url;	×
50	}
51	if ( hiddenFieldImageIdElement ) {	×
52	hiddenFieldImageIdElement.value = data.id;	×
53	}
54	} );
55
56	const selectImage = useCallback( () => openMedia( data => {	×
57	hiddenFieldImageIdElement = hiddenFieldSelectImageElement;	×
58	setImage( data );	×
59	updateHiddenFields( data );	×
60	if ( hasImageValidation ) {	×
61	setWarnings( validateFacebookImage( data ) );	×
62	}
63
64	setUsingFallback( false );	×
65	} ), [ hasImageValidation, updateHiddenFields ] );
66
67	const removeImage = useCallback( () => {	×
68	hiddenFieldImageIdElement = hiddenFieldSelectImageElement;	×
69	const emptyImage = { url: "", id: "", alt: "" };	×
70	setImage( emptyImage );	×
71	updateHiddenFields( emptyImage );	×
72	setWarnings( [] );	×
73	setUsingFallback( true );	×
74	}, [ updateHiddenFields ] );
75
76	useEffect( () => {	×
77	if ( image.id && ! image.alt ) {	×
78	fetchAttachment( image.id ).then( data => setImage( data ) );	×
79	}
80	}, [ image ] );
81
82	return <ImageSelect	×
83	{ ...imageSelectProps }
84	usingFallback={ usingFallback }
85	imageUrl={ image.url }
86	imageId={ image.id }
87	imageAltText={ image.alt }
88	onClick={ selectImage }
89	onRemoveImageClick={ removeImage }
90	warnings={ warnings }
91	/>;
92	};
93
94	ImageSelectComponent.propTypes = {	×
95	hiddenField: PropTypes.string.isRequired,
96	hiddenFieldImageId: PropTypes.string,
97	hiddenFieldFallbackImageId: PropTypes.string,
98	hasImageValidation: PropTypes.bool,
99	};
100
101	export default ImageSelectComponent;

Yoast / wordpress-seo / b2cdb4a8bbaeaf115e11e0be25203fb1c767dcea

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