Social: Improve media picker UX — always-visible buttons, clearer menu options

projects/packages/publicize/_inc/components/media-section-v2/icons/sparkle.tsx

@@ -0,0 +1,10 @@
+const sparkle = (
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
+		<path
+			d="M19.6611 11.5224L16.3782 10.39C15.0799 9.94387 14.0561 8.92011 13.61 7.62181L12.4775 4.33887C12.3231 3.88704 11.6769 3.88704 11.5225 4.33887L10.39 7.62181C9.94388 8.92011 8.9201 9.94387 7.6218 10.39L4.33887 11.5224C3.88704 11.6768 3.88704 12.3231 4.33887 12.4776L7.6218 13.61C8.9201 14.0561 9.94388 15.0799 10.39 16.3782L11.5225 19.6611C11.6769 20.113 12.3231 20.113 12.4775 19.6611L13.61 16.3782C14.0561 15.0799 15.0799 14.0561 16.3782 13.61L19.6611 12.4776C20.113 12.3231 20.113 11.6768 19.6611 11.5224ZM15.8291 12.2431L14.1876 12.8093C13.5356 13.0323 13.0266 13.5471 12.8036 14.1934L12.2374 15.8348C12.1572 16.0636 11.837 16.0636 11.7569 15.8348L11.1907 14.1934C10.9677 13.5414 10.4529 13.0323 9.80662 12.8093L8.16515 12.2431C7.93637 12.163 7.93637 11.8427 8.16515 11.7626L9.80662 11.1964C10.4586 10.9734 10.9677 10.4586 11.1907 9.81233L11.7569 8.17087C11.837 7.94209 12.1572 7.94209 12.2374 8.17087L12.8036 9.81233C13.0266 10.4643 13.5414 10.9734 14.1876 11.1964L15.8291 11.7626C16.0579 11.8427 16.0579 12.163 15.8291 12.2431Z"
+			fill="currentColor"
+		/>
+	</svg>
+);
+
+export default sparkle;

projects/packages/publicize/_inc/components/media-section-v2/index.tsx

@@ -11,7 +11,6 @@ import { BaseControl, Button, ExternalLink } from '@wordpress/components';
 import { useCallback, useMemo, useReducer, useRef } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
 import useFeaturedImage from '../../hooks/use-featured-image';
 import useImageGeneratorConfig from '../../hooks/use-image-generator-config';
 import useMediaDetails from '../../hooks/use-media-details';
@@ -395,38 +394,37 @@ export default function MediaSectionV2( {
 						render={ renderMediaUpload }
 					/>
 
-					{ /* Show dropdown + preview when there's media */ }
+					{ /* Show preview + dropdown when there's media */ }
 					{ previewData && (
 						<>
-							<MediaSourceMenu
-								currentSource={ currentSource }
-								onSelect={ handleSourceSelect }
-								onMediaLibraryClick={ handleMediaLibraryClick }
-								onAiImageClick={ handleAiImageClick }
-								disabled={ disabled }
-								featuredImageId={ featuredImageId }
-							>
-								{ ( { open } ) => (
-									<MediaPreview
-										media={ previewData }
-										isLoading={ currentSource === 'sig' && sigIsLoading }
-										onReplace={ open }
-										onRemove={ handleRemove }
-										disabled={ disabled }
-										showRemove={ currentSource === 'media-library' || currentSource === 'sig' }
-									/>
-								) }
-							</MediaSourceMenu>
-							{ currentSource === 'sig' && (
-								<Button
-									className={ clsx( styles.selectButton, styles.editTemplateButton ) }
-									variant="secondary"
-									onClick={ onEditTemplate }
+							<MediaPreview
+								media={ previewData }
+								isLoading={ currentSource === 'sig' && sigIsLoading }
+							/>
+							<div className={ styles.actions }>
+								<MediaSourceMenu
+									currentSource={ currentSource }
+									onSelect={ handleSourceSelect }
+									onMediaLibraryClick={ handleMediaLibraryClick }
+									onAiImageClick={ handleAiImageClick }
 									disabled={ disabled }
-								>
-									{ __( 'Edit template', 'jetpack-publicize-pkg' ) }
-								</Button>
-							) }
+									featuredImageId={ featuredImageId }
+									onRemove={ handleRemove }
+								/>
+								{ currentSource === 'sig' && (
+									<div className={ styles.action }>
+										<Button
+											__next40pxDefaultSize
+											className={ styles.selectButton }
+											variant="primary"
+											onClick={ onEditTemplate }
+											disabled={ disabled }
+										>
+											{ __( 'Edit', 'jetpack-publicize-pkg' ) }
+										</Button>
+									</div>
+								) }
+							</div>
 							<CustomMediaToggle
 								source={ effectiveSource }
 								checked={ isShareAsAttachment }
@@ -445,6 +443,7 @@ export default function MediaSectionV2( {
 							onAiImageClick={ handleAiImageClick }
 							disabled={ disabled }
 							featuredImageId={ featuredImageId }
+							onRemove={ handleRemove }
 						/>
 					) }
 					{ currentSource === 'media-library' && (

projects/packages/publicize/_inc/components/media-section-v2/media-preview.tsx

@@ -3,73 +3,38 @@
  * Displays media preview
  */
 
-import {
-	Button,
-	Spinner,
-	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-} from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import styles from './styles.module.scss';
 import { MediaPreviewProps } from './types';
 
 /**
- * MediaPreview component matching WordPress core featured image pattern
+ * MediaPreview component
  *
  * @param {MediaPreviewProps} props - Component props
  * @return {JSX.Element|null} MediaPreview component
  */
-export default function MediaPreview( {
-	media,
-	isLoading = false,
-	onReplace,
-	onRemove,
-	disabled = false,
-	showRemove = true,
-}: MediaPreviewProps ) {
+export default function MediaPreview( { media, isLoading = false }: MediaPreviewProps ) {
 	if ( ! media && ! isLoading ) {
 		return null;
 	}
 
 	return (
-		<div className={ styles.container }>
-			<div className={ styles.preview }>
-				{ media &&
-					! isLoading &&
-					( media.type === 'video' ? (
-						<video className={ styles.previewImage } controls>
-							<source src={ media.url } />
-						</video>
-					) : (
-						<img
-							className={ styles.previewImage }
-							src={ media.url }
-							alt={ __( 'Media preview', 'jetpack-publicize-pkg' ) }
-						/>
-					) ) }
-				{ isLoading && <Spinner /> }
-			</div>
-			{ ( media || isLoading ) && (
-				<HStack className={ styles.actions }>
-					<Button
-						__next40pxDefaultSize
-						className={ styles.action }
-						onClick={ onReplace }
-						disabled={ disabled }
-					>
-						{ __( 'Replace', 'jetpack-publicize-pkg' ) }
-					</Button>
-					{ showRemove && (
-						<Button
-							__next40pxDefaultSize
-							className={ styles.action }
-							onClick={ onRemove }
-							disabled={ disabled }
-						>
-							{ __( 'Remove', 'jetpack-publicize-pkg' ) }
-						</Button>
-					) }
-				</HStack>
-			) }
+		<div className={ styles.preview }>
+			{ media &&
+				! isLoading &&
+				( media.type === 'video' ? (
+					<video className={ styles.previewImage } controls>
+						<source src={ media.url } />
+					</video>
+				) : (
+					<img
+						className={ styles.previewImage }
+						src={ media.url }
+						alt={ __( 'Media preview', 'jetpack-publicize-pkg' ) }
+					/>
+				) ) }
+			{ isLoading && <Spinner /> }
 		</div>
 	);
 }

projects/packages/publicize/_inc/components/media-section-v2/media-source-menu.tsx

@@ -3,14 +3,46 @@
  * Displays a dropdown menu with grouped media source options
  */
 
-import { Button, Dropdown, MenuGroup } from '@wordpress/components';
+import { Button, Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import MediaSourceMenuItem from './media-source-menu-item';
 import styles from './styles.module.scss';
 import { MediaSourceMenuProps } from './types';
 import { getMediaSourceOptions } from './utils/media-source-options';
 
+/**
+ * Menu item for clearing media selection.
+ *
+ * @param {object}   root0            - Component props.
+ * @param {boolean}  root0.isSelected - Whether this option is currently active.
+ * @param {Function} root0.onRemove   - Callback to clear media.
+ * @param {Function} root0.onClose    - Callback to close the dropdown.
+ * @return {JSX.Element} NoMediaMenuItem component.
+ */
+function NoMediaMenuItem( {
+	isSelected,
+	onRemove,
+	onClose,
+}: {
+	isSelected: boolean;
+	onRemove?: () => void;
+	onClose: () => void;
+} ) {
+	const handleClick = useCallback( () => {
+		onRemove?.();
+		onClose();
+	}, [ onRemove, onClose ] );
+
+	return (
+		<MenuGroup>
+			<MenuItem isSelected={ isSelected } onClick={ handleClick }>
+				{ __( 'No media', 'jetpack-publicize-pkg' ) }
+			</MenuItem>
+		</MenuGroup>
+	);
+}
+
 /**
  * MediaSourceMenu component
  *
@@ -24,15 +56,19 @@ export default function MediaSourceMenu( {
 	onAiImageClick,
 	disabled = false,
 	featuredImageId,
+	onRemove,
 	children,
 }: MediaSourceMenuProps ) {
 	// Get options from function to ensure translations are loaded
 	const options = useMemo( () => getMediaSourceOptions(), [] );
 
-	// Group options by category
+	// Group options by category, hiding "Featured image" when no featured image exists
 	const linkPreviewOptions = useMemo(
-		() => options.filter( opt => opt.group === 'link-preview' ),
-		[ options ]
+		() =>
+			options.filter(
+				opt => opt.group === 'link-preview' && ( opt.id !== 'featured-image' || featuredImageId )
+			),
+		[ options, featuredImageId ]
 	);
 	const attachmentOptions = useMemo(
 		() => options.filter( opt => opt.group === 'attachment' ),
@@ -44,6 +80,7 @@ export default function MediaSourceMenu( {
 			<>
 				{ ! children && (
 					<Button
+						__next40pxDefaultSize
 						className={ styles.selectButton }
 						variant="secondary"
 						onClick={ onToggle }
@@ -64,7 +101,7 @@ export default function MediaSourceMenu( {
 			<>
 				<MenuGroup
 					label={ _x(
-						'For link preview',
+						'Link preview',
 						'The image source to use for post link preview on social media.',
 						'jetpack-publicize-pkg'
 					) }
@@ -76,16 +113,13 @@ export default function MediaSourceMenu( {
 							isSelected={ currentSource === option.id }
 							onSelect={ onSelect }
 							onClose={ onClose }
-							disabled={
-								currentSource === option.id ||
-								( option.id === 'featured-image' && ! featuredImageId )
-							}
+							disabled={ currentSource === option.id }
 						/>
 					) ) }
 				</MenuGroup>
 				<MenuGroup
 					label={ _x(
-						'For attachment',
+						'Attachment',
 						'The media source to use for post attachment on social media.',
 						'jetpack-publicize-pkg'
 					) }
@@ -102,6 +136,13 @@ export default function MediaSourceMenu( {
 						/>
 					) ) }
 				</MenuGroup>
+				{ ! featuredImageId && (
+					<NoMediaMenuItem
+						isSelected={ ! currentSource }
+						onRemove={ onRemove }
+						onClose={ onClose }
+					/>
+				) }
 			</>
 		),
 		[
@@ -112,6 +153,7 @@ export default function MediaSourceMenu( {
 			onSelect,
 			onMediaLibraryClick,
 			onAiImageClick,
+			onRemove,
 		]
 	);