Set media and words side-by-side for a richer layout.
- Name:
core/media-text - Category: media
- API Version: 3
- Block Type: Hybrid (static save + server enhancements)
- Keywords:
image,video
Attributes
Defined via the attributes property in block.json.
| Attribute | Type | Default | Description |
|---|---|---|---|
align |
string |
"none" |
— |
mediaAlt |
string |
"" |
Source: attribute. Selector: figure img. HTML attr: alt. Role: content |
mediaPosition |
string |
"left" |
— |
mediaId |
number |
— | Role: content |
mediaUrl |
string |
— | Source: attribute. Selector: figure video,figure img. HTML attr: src. Role: content |
mediaLink |
string |
— | — |
linkDestination |
string |
— | — |
linkTarget |
string |
— | Source: attribute. Selector: figure a. HTML attr: target |
href |
string |
— | Source: attribute. Selector: figure a. HTML attr: href. Role: content |
rel |
string |
— | Source: attribute. Selector: figure a. HTML attr: rel |
linkClass |
string |
— | Source: attribute. Selector: figure a. HTML attr: class |
mediaType |
string |
— | Role: content |
mediaWidth |
number |
50 |
— |
mediaSizeSlug |
string |
— | — |
isStackedOnMobile |
boolean |
true |
— |
verticalAlignment |
string |
— | — |
imageFill |
boolean |
— | — |
focalPoint |
object |
— | — |
useFeaturedImage |
boolean |
false |
— |
Supports
Defined via the supports property in block.json.
anchor:truealign:"wide","full"html:falsecolor:spacing:margin:truepadding:true
typography:fontSize:truelineHeight:true
interactivity:clientNavigation:true
allowedBlocks:true
Context
Defined via the usesContext and providesContext properties in block.json.
Uses context:
postIdpostType
Block Markup
This is a hybrid block. It saves static markup that the server may enhance during rendering.
<!-- wp:media-text {"mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile">
<figure class="wp-block-media-text__media">
<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/>
</figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">My Content</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
Source
- block.json (reference)
- Source directory — browse
edit.js,save.js,index.php, and more.