Show alert when avif file is used in social preview

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

@@ -15,12 +15,8 @@ import Alert from "../Alert";
 function ImageSelect( props ) {
 	const imageSelected = props.usingFallback === false && props.imageUrl !== "";
 	const previewImageUrl = props.imageUrl || props.defaultImageUrl || "";
-	const showWarnings = props.warnings.length > 0 && imageSelected;
-
-	let imageClassName = showWarnings ? "yoast-image-select__preview yoast-image-select__preview-has-warnings" : "yoast-image-select__preview";
-	if ( previewImageUrl === "" ) {
-		imageClassName = "yoast-image-select__preview yoast-image-select__preview--no-preview";
-	}
+	const showWarnings = props.warnings.length > 0 && ( imageSelected || props.imageFallbackUrl !== "" );
+	const imageClassName =  previewImageUrl === ""  ? "yoast-image-select__preview yoast-image-select__preview--no-preview" : "yoast-image-select__preview";
 
 	const imageSelectButtonsProps = {
 		imageSelected: imageSelected,
@@ -72,7 +68,7 @@ function ImageSelect( props ) {
 					</button>
 				}
 				{
-					showWarnings && <div role="alert">
+					showWarnings && <div role="alert" className="yst-mt-4">
 						{
 							props.warnings.map( ( warning, index ) => <Alert key={ `warning${ index }` } type="warning">
 								{ warning }
@@ -91,6 +87,7 @@ export default ImageSelect;
 ImageSelect.propTypes = {
 	defaultImageUrl: PropTypes.string,
 	imageUrl: PropTypes.string,
+	imageFallbackUrl: PropTypes.string.isRequired,
 	imageAltText: PropTypes.string,
 	hasPreview: PropTypes.bool.isRequired,
 	label: PropTypes.string.isRequired,

packages/js/src/components/social/FacebookWrapper.js

@@ -3,6 +3,7 @@ import { Slot } from "@wordpress/components";
 import PropTypes from "prop-types";
 
 import SocialForm from "../social/SocialForm";
+import { useFallbackWarning } from "./useFallbackWarning";
 
 /**
  * This wrapper is connected to the facebook container. So the data is connected to both components.
@@ -15,6 +16,8 @@ import SocialForm from "../social/SocialForm";
 const FacebookWrapper = ( props ) => {
 	const [ activeMetaTabId, setActiveMetaTabId ] = useState( "" );
 
+	useFallbackWarning( props.imageFallbackUrl, props.imageUrl, props.imageWarnings );
+
 	// Set active meta tab id on window event.
 	const handleMetaTabChange = useCallback( ( event ) => {
 		setActiveMetaTabId( event.detail.metaTabId );
@@ -49,6 +52,9 @@ FacebookWrapper.propTypes = {
 	isPremium: PropTypes.bool.isRequired,
 	onLoad: PropTypes.func.isRequired,
 	location: PropTypes.string.isRequired,
+	imageFallbackUrl: PropTypes.string.isRequired,
+	imageUrl: PropTypes.string.isRequired,
+	imageWarnings: PropTypes.array.isRequired,
 };
 
 export default FacebookWrapper;

packages/js/src/components/social/TwitterWrapper.js

@@ -3,6 +3,7 @@ import { Slot } from "@wordpress/components";
 import PropTypes from "prop-types";
 
 import SocialForm from "../social/SocialForm";
+import { useFallbackWarning } from "./useFallbackWarning";
 
 /**
  * This wrapper is connected to the twitter container. So the data is connected to both components.
@@ -13,6 +14,8 @@ import SocialForm from "../social/SocialForm";
  * @returns {JSX.Element} The TwitterWrapper.
  */
 const TwitterWrapper = ( props ) => {
+	useFallbackWarning( props.imageFallbackUrl, props.imageUrl, props.imageWarnings );
+
 	useEffect( () => {
 		// Load on the next cycle because the editor inits asynchronously, and we need to load the data after the component is fully loaded.
 		setTimeout( props.onLoad );
@@ -27,6 +30,9 @@ TwitterWrapper.propTypes = {
 	isPremium: PropTypes.bool.isRequired,
 	onLoad: PropTypes.func.isRequired,
 	location: PropTypes.string.isRequired,
+	imageFallbackUrl: PropTypes.string.isRequired,
+	imageUrl: PropTypes.string.isRequired,
+	imageWarnings: PropTypes.array.isRequired,
 };
 
 export default TwitterWrapper;

packages/js/src/components/social/useFallbackWarning.js

@@ -0,0 +1,30 @@
+import { useEffect } from "@wordpress/element";
+import { __, sprintf } from "@wordpress/i18n";
+
+/**
+ * Checks if the fallback image is in AVIF format and sets a warning message.
+ *
+ * @param {string} imageFallbackUrl
+ * @param {string} imageUrl
+ * @param {array} imageWarnings
+ *
+ * @returns {void}
+ */
+export const useFallbackWarning = ( imageFallbackUrl, imageUrl, imageWarnings ) => {
+	useEffect( () => {
+		if ( imageUrl === "" ) {
+			imageWarnings.length = 0;
+			if ( imageFallbackUrl.toLowerCase().endsWith( ".avif" ) ) {
+				const warningMessage = sprintf(
+					/* Translators: %s expands to the jpg format, %s expands to the png format, %s expands to the gif format. */
+					__(
+						"The image automatically added from your content is in an unsupported format. Supported formats are %s, %s, %s and %s. Please select or upload an image in a supported format to ensure it displays correctly on social media.",
+						"wordpress-seo"
+					),
+					"JPG", "PNG", "WEBP", "GIF"
+				);
+				imageWarnings.push( warningMessage );
+			}
+		}
+	}, [ imageFallbackUrl, imageUrl ] );
+};