diff --git a/projects/plugins/jetpack/changelog/fix-remove-replace-button b/projects/plugins/jetpack/changelog/fix-remove-replace-button new file mode 100644 index 0000000000000..0fe7e60101d99 --- /dev/null +++ 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 \ No newline at end of file diff --git a/projects/plugins/jetpack/extensions/shared/external-media/editor.scss b/projects/plugins/jetpack/extensions/shared/external-media/editor.scss index 8d8a3d46f77f6..2e9e4859f32fc 100644 --- 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 index 7a274185376f7..7d5fac3fdb10d 100644 --- 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 index 169f625f28e5d..fd956c98a0640 100644 --- 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 } ) => (