Social: Add the new media selection UI

projects/js-packages/publicize-components/changelog/add-social-new-media-selector-ui

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add the new media selection UI for Social

projects/js-packages/publicize-components/src/components/form/share-post-form.tsx

@@ -5,6 +5,7 @@ import useSocialMediaMessage from '../../hooks/use-social-media-message';
 import { features } from '../../utils/constants';
 import { useIsSocialNote } from '../../utils/use-is-social-note';
 import MediaSection from '../media-section';
+import MediaSectionV2 from '../media-section-v2';
 import MessageBoxControl from '../message-box-control';
 import SocialImageGeneratorPanel from '../social-image-generator/panel';
 import styles from './styles.module.scss';
@@ -41,15 +42,20 @@ export const SharePostForm: FC< SharePostFormProps > = ( { analyticsData = null
 				/>
 			) }
 			{ siteHasFeature( features.UNIFIED_UI_V1 ) ? (
-				<div>HERE GOES THE NEW MEDIA SECTION</div>
-			) : null }
-			{ siteHasFeature( features.ENHANCED_PUBLISHING ) && (
 				<div className={ styles[ 'share-post-form__media-section' ] }>
-					<MediaSection analyticsData={ analyticsData } />
+					<MediaSectionV2 analyticsData={ analyticsData } />
 				</div>
+			) : (
+				<>
+					{ siteHasFeature( features.ENHANCED_PUBLISHING ) && (
+						<div className={ styles[ 'share-post-form__media-section' ] }>
+							<MediaSection analyticsData={ analyticsData } />
+						</div>
+					) }
+					{ /* Social Image Generator panel - only shown when not using unified UI */ }
+					{ postCanUseSig && <SocialImageGeneratorPanel /> }
+				</>
 			) }
-			{ /* Social Image Generator panel */ }
-			{ postCanUseSig && <SocialImageGeneratorPanel /> }
 		</>
 	);
 };

projects/js-packages/publicize-components/src/components/media-section-v2/custom-media-toggle.tsx

@@ -0,0 +1,65 @@
+/**
+ * CustomMediaToggle component
+ * Toggle for sharing image as attachment instead of link preview
+ */
+
+import { ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { getAttachmentDescription } from './media-source-menu';
+import styles from './styles.module.scss';
+import { MediaSourceType } from './types';
+
+interface CustomMediaToggleProps {
+	/**
+	 * Current media source type
+	 */
+	source: MediaSourceType;
+
+	/**
+	 * Whether the toggle is checked (attached media is set)
+	 */
+	checked: boolean;
+
+	/**
+	 * Callback when toggle changes
+	 */
+	onChange: ( checked: boolean ) => void;
+
+	/**
+	 * Whether the toggle is disabled
+	 */
+	disabled?: boolean;
+}
+
+/**
+ * Toggle for sharing image as attachment
+ *
+ * @param {CustomMediaToggleProps} props - Component props
+ * @return {JSX.Element|null} CustomMediaToggle component
+ */
+export default function CustomMediaToggle( {
+	source,
+	checked,
+	onChange,
+	disabled = false,
+}: CustomMediaToggleProps ) {
+	const description = getAttachmentDescription( source );
+
+	// Only show for sources that have an attachment description (featured-image, sig)
+	if ( ! description ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles[ 'custom-media-toggle' ] }>
+			<ToggleControl
+				label={ __( 'Share as attachment', 'jetpack-publicize-components' ) }
+				checked={ checked }
+				onChange={ onChange }
+				disabled={ disabled }
+				help={ description }
+				__nextHasNoMarginBottom={ true }
+			/>
+		</div>
+	);
+}