[not verified] 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
Automattic · May 4, 2021 · 5ac595a · 5ac595a
1 parent 3c13d9d
commit 5ac595a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-remove-replace-button b/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
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/editor.scss b/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;
 	}
 }
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/index.js b/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;
 

diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-button/media-menu.js b/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>