Post Featured Image not displaying when published

[bbertucc]

Description

A Post Featured Image in the query block displays perfectly when editing a page. When published, the image disappears.

Step-by-step reproduction instructions

Here's what blocks I'm using..

Expected behaviour

The feature image would display when published.

Actual behaviour

No image.

WordPress information

• WP: 5.7
• Gutenberg version: 10.5.3
• Are all plugins except Gutenberg deactivated? Yes.
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes.

Device information

• Device: Desktop
• Operating system: macOS 11.3
• Browser: Safari 14.1

[carolinan]

Hi
I have not been able to reproduce this in the block editor+ front with Gutenberg version 10.5.3, version: 10.5.4 or current trunk.
I am using WP 5.7.1, Windows 10, Chrome. Theme: Twenty Twenty-One.

[bbertucc]

@carolinan here is my block code:

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:query {"queryId":7,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
<!-- wp:query-loop -->
<!-- wp:heading {"level":5,"textColor":"purple"} -->
<h5 class="has-purple-color has-text-color">FEATURED</h5>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-featured-image /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-hierarchical-terms {"term":"category","textAlign":"center"} /-->

<!-- wp:post-author {"textAlign":"center","showAvatar":false} /-->

<!-- wp:spacer {"height":49} -->
<div style="height:49px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:post-date {"textAlign":"center"} /-->

<!-- wp:post-title {"textAlign":"center","isLink":true,"textColor":"black"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:query-loop -->
<!-- /wp:query --></div>
<!-- /wp:group -->

[carolinan]

Tested with the sample code, It is only blank on the front if the post that is in the loop does not have a featured image.

[bbertucc]

Weird. Tried it on two different installs.

Here is what I'm seeing in the editor:

Here is what I'm seeing when it's published:

Strangely, the post title block is also acting strange.. taking the title of the page rather than the post

[torounit]

@bbertucc

By turning off "Inherit query from template" in the query block, you should be able to display the image.

If "Inherit query from template" is enabled, the image of the current post should be displayed, but it is not.

[ntsekouras]

Thanks for reporting this @bbertucc! The truth is that the there is a problem to be solved about context detection in Query Loop, which now results in some inconsistencies between front-end and editor, when inherit is set to true.

As @torounit mentioned:

If "Inherit query from template" is enabled, the image of the current post should be displayed

And it seems to me it does 😄 . The confusing part is that if we have the inherit to true, the editor shows a list of posts, that will not be the end result in front-end. From your snippet you have inherit === true, so one scenario I can think of for the problem you're describing is:

1. In editor you're seeing a Featured Image from another post, as it has one
2. In front-end you end up seeing your current page/post's info, which happens to not have a featured image.

Is that the case?

---

-edit: By seeing your last comment:

Strangely, the post title block is also acting strange.. taking the title of the page rather than the post

This seems to be the case and I guess this issue can be closed when @bbertucc verifies it.

[ntsekouras]

Closing this as it seems it was the inherit option. Feel free to reopen if needed.