External Media: don't show duplicate buttons for post thumbnails

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,11 @@ $grid-size: 8px;
 .editor-post-featured-image {
 	.components-dropdown .jetpack-external-media-button-menu {
 		margin-right: 8px;
+		margin-bottom: 1em;
 	}
 }
+
+// Override DropDown component styles when warpping the "Set featured image" button.
+.editor-post-featured-image .components-dropdown {
+	display: initial;
+}

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/index.js

@@ -41,6 +41,7 @@ function MediaButton( props ) {
 				setSelectedSource={ setSelectedSource }
 				isReplace={ isReplaceMenu( mediaProps ) }
 				isFeatured={ isFeaturedImage( mediaProps ) }
+				hasImage={ mediaProps.value > 0 }
 			/>
 
 			{ ExternalLibrary && <ExternalLibrary onClose={ closeLibrary } { ...mediaProps } /> }

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

@@ -11,12 +11,11 @@ import { media } from '@wordpress/icons';
 import MediaSources from './media-sources';
 
 function MediaButtonMenu( props ) {
-	const { mediaProps, open, setSelectedSource, isFeatured, isReplace } = props;
+	const { mediaProps, open, setSelectedSource, isFeatured, isReplace, hasImage } = props;
 	const originalComponent = mediaProps.render;
-
-	if ( isFeatured && mediaProps.value === undefined ) {
-		return originalComponent( { open } );
-	}
+	let isPrimary = isFeatured;
+	let isSecondary = false;
+	let isTertiary = ! isFeatured;
 
 	if ( isReplace ) {
 		return (
@@ -38,33 +37,53 @@ function MediaButtonMenu( props ) {
 		label = __( 'Select Media', 'jetpack' );
 	}
 
+	if ( isFeatured && hasImage ) {
+		label = __( 'Replace Image', 'jetpack' );
+		isPrimary = false;
+		isTertiary = false;
+		isSecondary = true;
+	}
+
 	return (
 		<>
-			{ isFeatured && originalComponent( { open } ) }
+			{ isFeatured && hasImage && originalComponent( { open } ) }
 
 			<Dropdown
 				position="bottom right"
 				contentClassName="jetpack-external-media-button-menu__options"
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button
-						isTertiary={ ! isFeatured }
-						isPrimary={ isFeatured }
-						className="jetpack-external-media-button-menu"
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-						onClick={ onToggle }
-					>
-						{ label }
-					</Button>
-				) }
-				renderContent={ () => (
+				renderToggle={ ( { isOpen, onToggle } ) =>
+					// Featured image: when there's no image set, wrap the component, as it's already a (giant) button,
+					// there's no need to add a second button.
+					isFeatured && ! hasImage ? (
+						originalComponent( { open: onToggle } )
+					) : (
+						<Button
+							isPrimary={ isPrimary }
+							isSecondary={ isSecondary }
+							isTertiary={ isTertiary }
+							className="jetpack-external-media-button-menu"
+							aria-haspopup="true"
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ label }
+						</Button>
+					)
+				}
+				renderContent={ ( { onClose } ) => (
 					<NavigableMenu aria-label={ label }>
 						<MenuGroup>
-							<MenuItem icon={ media } onClick={ open }>
+							<MenuItem
+								icon={ media }
+								onClick={ () => {
+									onClose();
+									open();
+								} }
+							>
 								{ __( 'Media Library', 'jetpack' ) }
 							</MenuItem>
 
-							<MediaSources open={ open } setSource={ setSelectedSource } />
+							<MediaSources open={ open } setSource={ setSelectedSource } onClick={ onClose } />
 						</MenuGroup>
 					</NavigableMenu>
 				) }

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

@@ -9,13 +9,20 @@ import { Fragment } from '@wordpress/element';
  */
 import { mediaSources } from '../sources';
 
-function MediaSources( { originalButton = null, open, setSource } ) {
+function MediaSources( { originalButton = null, onClick = () => {}, open, setSource } ) {
 	return (
 		<Fragment>
 			{ originalButton && originalButton( { open } ) }
 
 			{ mediaSources.map( ( { icon, id, label } ) => (
-				<MenuItem icon={ icon } key={ id } onClick={ () => setSource( id ) }>
+				<MenuItem
+					icon={ icon }
+					key={ id }
+					onClick={ () => {
+						onClick();
+						setSource( id );
+					} }
+				>
 					{ label }
 				</MenuItem>
 			) ) }