From e866e0ea449cee36708347676dd12a8a2a6ed90a Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 3 Jan 2023 07:47:56 +0100
Subject: [PATCH] Update the logic for which controls to display in different
 scenarios

---
 .../src/post-featured-image/edit.js           | 72 ++++++++++++-------
 1 file changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 1cdc0d0fd32ebe..20130aa76f5115 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -43,7 +43,7 @@ function getMediaSourceUrlBySizeSlug( media, slug ) {
 	);
 }
 
-function PostFeaturedImageDisplay( {
+export default function PostFeaturedImageEdit( {
 	clientId,
 	attributes,
 	setAttributes,
@@ -167,6 +167,11 @@ function PostFeaturedImageDisplay( {
 		</>
 	);
 	let image;
+
+	/**
+	 * A post featured image block placed in a query loop
+	 * does not have image replacement or upload options.
+	 */
 	if ( ! featuredImage && isDescendentOfQueryLoop ) {
 		return (
 			<>
@@ -183,6 +188,32 @@ function PostFeaturedImageDisplay( {
 		);
 	}
 
+	/**
+	 * A post featured image placed in a block template, outside a query loop,
+	 * does not have a postId and will always be a placeholder image.
+	 * It does not have image replacement, upload, or link options.
+	 */
+	if ( ! featuredImage && ! postId ) {
+		return (
+			<>
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					imageSizeOptions={ imageSizeOptions }
+				/>
+				<div { ...blockProps }>
+					{ placeholder() }
+					<Overlay
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
+				</div>
+			</>
+		);
+	}
+
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
@@ -190,6 +221,13 @@ function PostFeaturedImageDisplay( {
 		objectFit: height && scale,
 	};
 
+	/**
+	 * When the post featured image block is placed in a context where:
+	 * - It has a postId (for example in a single post)
+	 * - It is not inside a query loop
+	 * - It has no image assigned yet
+	 * Then display the placeholder with the image upload option.
+	 */
 	if ( ! featuredImage ) {
 		image = (
 			<MediaPlaceholder
@@ -236,6 +274,12 @@ function PostFeaturedImageDisplay( {
 		);
 	}
 
+	/**
+	 * When the post featured image block:
+	 * - Has an image assigned
+	 * - Is not inside a query loop
+	 * Then display the image and the image replacement option.
+	 */
 	return (
 		<>
 			{ controls }
@@ -266,29 +310,3 @@ function PostFeaturedImageDisplay( {
 		</>
 	);
 }
-
-export default function PostFeaturedImageEdit( props ) {
-	const blockProps = useBlockProps();
-	const borderProps = useBorderProps( props.attributes );
-
-	if ( ! props.context?.postId ) {
-		return (
-			<div { ...blockProps }>
-				<Placeholder
-					className={ classnames(
-						'block-editor-media-placeholder',
-						borderProps.className
-					) }
-					withIllustration={ true }
-					style={ borderProps.style }
-				/>
-				<Overlay
-					attributes={ props.attributes }
-					setAttributes={ props.setAttributes }
-					clientId={ props.clientId }
-				/>
-			</div>
-		);
-	}
-	return <PostFeaturedImageDisplay { ...props } />;
-}