Add support for featured image toggle and display

Author: dhruvikpatel18

packages/block-editor/src/components/background-image-control/index.js

@@ -275,13 +275,37 @@ function BackgroundImageControls( {
 	displayInPanel,
 	defaultValues,
 	containerRef,
+	useFeaturedImage,
+	onToggleFeaturedImage,
 } ) {
 	const [ isUploading, setIsUploading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
 
-	const { id, title, url } = style?.background?.backgroundImage || {
+	const featuredImageData = useSelect( ( select ) => {
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const { getEditedPostAttribute } = select( 'core/editor' );
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const { getMedia } = select( 'core' );
+
+		const featuredMediaId = getEditedPostAttribute( 'featured_media' );
+
+		return featuredMediaId ? getMedia( featuredMediaId ) : null;
+	}, [] );
+
+	const { id, title, url, featuredImage } = style?.background
+		?.backgroundImage || {
 		...inheritedValue?.background?.backgroundImage,
 	};
+	const useFeaturedImageValue =
+		typeof useFeaturedImage !== 'undefined'
+			? useFeaturedImage
+			: !! featuredImage;
+
+	const displayUrl =
+		useFeaturedImageValue && featuredImageData?.source_url
+			? featuredImageData.source_url
+			: url;
+
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
@@ -297,6 +321,39 @@ function BackgroundImageControls( {
 			)
 		);
 
+	const toggleFeaturedImage = () => {
+		const currentBackgroundImage =
+			style?.background?.backgroundImage &&
+			typeof style.background.backgroundImage === 'object'
+				? style.background.backgroundImage
+				: {};
+
+		const nextValue = ! useFeaturedImageValue;
+
+		if ( nextValue && featuredImageData?.source_url ) {
+			onChange(
+				setImmutably( style, [ 'background', 'backgroundImage' ], {
+					url: featuredImageData.source_url,
+					id: featuredImageData.id,
+					source: 'featured',
+					title: featuredImageData.title?.rendered,
+					featuredImage: true,
+				} )
+			);
+			return;
+		}
+
+		onChange(
+			setImmutably( style, [ 'background', 'backgroundImage' ], {
+				...currentBackgroundImage,
+				featuredImage: false,
+			} )
+		);
+	};
+
+	const onToggleFeaturedImageHandler =
+		onToggleFeaturedImage || toggleFeaturedImage;
+
 	const onSelectMedia = ( media ) => {
 		if ( ! media || ! media.url ) {
 			resetBackgroundImage();
@@ -375,16 +432,18 @@ function BackgroundImageControls( {
 			} )
 		);
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
-	const imgLabel = title || getFilename( url ) || __( 'Image' );
+	const imgLabel = title || getFilename( displayUrl ) || __( 'Image' );
 
 	return (
 		<div className="block-editor-global-styles-background-panel__image-tools-panel-item">
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
 				mediaId={ id }
-				mediaURL={ url }
+				mediaURL={ displayUrl }
 				allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
 				accept="image/*"
+				useFeaturedImage={ useFeaturedImageValue }
+				onToggleFeaturedImage={ onToggleFeaturedImageHandler }
 				onSelect={ onSelectMedia }
 				popoverProps={ {
 					className: clsx( {
@@ -394,7 +453,7 @@ function BackgroundImageControls( {
 				} }
 				name={
 					<InspectorImagePreviewItem
-						imgUrl={ url }
+						imgUrl={ displayUrl }
 						filename={ title }
 						label={ imgLabel }
 					/>
@@ -644,6 +703,8 @@ export default function BackgroundImagePanel( {
 	inheritedValue = value,
 	settings,
 	defaultValues = {},
+	useFeaturedImage,
+	onToggleFeaturedImage,
 } ) {
 	/*
 	 * Resolve any inherited "ref" pointers.
@@ -739,6 +800,8 @@ export default function BackgroundImagePanel( {
 							onRemoveImage={ () => setIsDropDownOpen( false ) }
 							defaultValues={ defaultValues }
 							containerRef={ containerRef }
+							useFeaturedImage={ useFeaturedImage }
+							onToggleFeaturedImage={ onToggleFeaturedImage }
 						/>
 						<BackgroundSizeControls
 							onChange={ onChange }
@@ -760,6 +823,8 @@ export default function BackgroundImagePanel( {
 					} }
 					onRemoveImage={ () => setIsDropDownOpen( false ) }
 					containerRef={ containerRef }
+					useFeaturedImage={ useFeaturedImage }
+					onToggleFeaturedImage={ onToggleFeaturedImage }
 				/>
 			) }
 		</div>