Display a post’s featured image.
Attributes
Defined via the attributes property in block.json.
| Attribute | Type | Default | Description |
|---|---|---|---|
isLink |
boolean |
false |
Role: content |
aspectRatio |
string |
— | — |
width |
string |
— | — |
height |
string |
— | — |
scale |
string |
"cover" |
— |
sizeSlug |
string |
— | — |
rel |
string |
"" |
HTML attr: rel. Role: content |
linkTarget |
string |
"_self" |
Role: content |
overlayColor |
string |
— | — |
customOverlayColor |
string |
— | — |
dimRatio |
number |
0 |
— |
gradient |
string |
— | — |
customGradient |
string |
— | — |
useFirstImageFromPost |
boolean |
false |
— |
Supports
Defined via the supports property in block.json.
anchor:truealign:"left","right","center","wide","full"color:text:falsebackground:false
filter:duotone:true
shadow:truehtml:falsespacing:margin:truepadding:true
interactivity:clientNavigation:true
Context
Defined via the usesContext and providesContext properties in block.json.
Uses context:
postIdpostTypequeryId
CSS Selectors
Defined via the selectors property in block.json.
- dimensions:
.wp-block-post-featured-image img - border:
.wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay - shadow:
.wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder - filter:
- duotone:
.wp-block-post-featured-image img, .wp-block-post-featured-image .wp-block-post-featured-image__placeholder, .wp-block-post-featured-image .components-placeholder__illustration, .wp-block-post-featured-image .components-placeholder::before
- duotone:
Block Markup
This is a dynamic block. It is rendered on the server and does not save HTML in post content.
In post content, it is stored as a block comment:
<!-- wp:post-featured-image /-->
Source
- block.json (reference)
- Source directory — browse
edit.js,save.js,index.php, and more.