Skip to content

Styles missing from images when using useFirstImageFromPost #64851

Closed as not planned
@richtabor

Description

@richtabor

The Post Featured Image block supports using the first image from a post's content using the useFirstImageFromPost attributes, when a featured image is not assigned to the post.

However, this image does not receive styles on the front-end, as seen in the visual below (missing the border radius and aspect ratio styles). It is also missing width: 100%; height: 100%; object-fit: cover; which is added by the aspect ratio styling.

Editor

CleanShot 2024-08-27 at 17 03 31

Frontend

The brown image is a post pulled from the post; not a true featured image.

CleanShot 2024-08-27 at 17 03 40

Here's the pattern markup I'm using:

<!-- wp:query {"queryId":1,"query":{"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"perPage":5},"enhancedPagination":true,"metadata":{"categories":["blog"],"name":"Photoblog","patternName":"kanso/query-photoblog"}} -->
<div class="wp-block-query"><!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"grid","columnCount":3,"minimumColumnWidth":null}} -->
<!-- wp:group {"metadata":{"name":"Post Wrapper"},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:post-featured-image {"aspectRatio":"1","useFirstImageFromPost":true,"style":{"border":{"radius":"16px"}}} /--></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:query -->

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] Post Featured ImageAffects the Post Featured Image Block[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions