Media Buttons: don't show duplicate buttons

Previously, our "Select Image" button would still show alongside Core's "Replace Image" button. Now, Cores' button is not shown, and our button shows as "Replace Image" when an image has been selected.

Fixes #19555

projects/plugins/jetpack/changelog/fix-remove-replace-button

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Media Buttons: don't show duplicate buttons when a featured image is selected

projects/plugins/jetpack/extensions/shared/external-media/editor.scss

@@ -413,5 +413,6 @@ $grid-size: 8px;
 .editor-post-featured-image {
 	.components-dropdown .jetpack-external-media-button-menu {
 		margin-right: 8px;
+		margin-bottom: 1em;
 	}
 }

projects/plugins/jetpack/extensions/shared/external-media/index.js

@@ -50,6 +50,12 @@ if ( isCurrentUserConnected() && 'function' === typeof useBlockEditContext ) {
 			const { name } = useBlockEditContext();
 			let { render } = props;
 
+			// Featured Image gets rendered twice in the Post sidebar when an image is selected.
+			// We only want the first of the two, which conveniently has a value prop
+			if ( isFeaturedImage( props ) && props.value === undefined ) {
+				return <></>;
+			}
+
 			if ( isAllowedBlock( name, render ) || isFeaturedImage( props ) ) {
 				const { allowedTypes, gallery = false, value = [] } = props;
 

projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js

@@ -13,10 +13,10 @@ import MediaSources from './media-sources';
 function MediaButtonMenu( props ) {
 	const { mediaProps, open, setSelectedSource, isFeatured, isReplace } = props;
 	const originalComponent = mediaProps.render;
-
-	if ( isFeatured && mediaProps.value === undefined ) {
-		return originalComponent( { open } );
-	}
+	const featuredImageIsSelected = isFeatured && mediaProps.value > 0;
+	let isPrimary = isFeatured;
+	let isTertiary = ! isFeatured;
+	const extraProps = {};
 
 	if ( isReplace ) {
 		return (
@@ -38,6 +38,13 @@ function MediaButtonMenu( props ) {
 		label = __( 'Select Media', 'jetpack' );
 	}
 
+	if ( isFeatured && featuredImageIsSelected ) {
+		label = __( 'Replace Image', 'jetpack' );
+		isPrimary = false;
+		isTertiary = false;
+		extraProps.isSecondary = true;
+	}
+
 	return (
 		<>
 			{ isFeatured && originalComponent( { open } ) }
@@ -47,12 +54,13 @@ function MediaButtonMenu( props ) {
 				contentClassName="jetpack-external-media-button-menu__options"
 				renderToggle={ ( { isOpen, onToggle } ) => (
 					<Button
-						isTertiary={ ! isFeatured }
-						isPrimary={ isFeatured }
+						isTertiary={ isTertiary }
+						isPrimary={ isPrimary }
 						className="jetpack-external-media-button-menu"
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						onClick={ onToggle }
+						{ ...extraProps }
 					>
 						{ label }
 					</Button>