diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 1cdc0d0fd32eb..20130aa76f511 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 ( + <> + +
+ { placeholder() } + +
+ + ); + } + 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 = ( { 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 ( -
- - -
- ); - } - return ; -}