Set media and words side-by-side for a richer layout.
This block is available in the latest version of WordPress and does not require the Gutenberg plugin.
Last updated
Category: Media
For developers
Block Grammar & Markup
<!-- 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 -->
Block Attributes
Optional. Type: Object.
Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.
{
"mediaAlt": {
"type": "string",
"source": "attribute",
"selector": "figure img",
"attribute": "alt",
"default": "",
"__experimentalRole": "content"
},
"mediaPosition": {
"type": "string",
"default": "left"
},
"mediaId": {
"type": "number",
"__experimentalRole": "content"
},
"mediaUrl": {
"type": "string",
"source": "attribute",
"selector": "figure video,figure img",
"attribute": "src",
"__experimentalRole": "content"
},
"mediaLink": {
"type": "string"
},
"linkDestination": {
"type": "string"
},
"linkTarget": {
"type": "string",
"source": "attribute",
"selector": "figure a",
"attribute": "target"
},
"href": {
"type": "string",
"source": "attribute",
"selector": "figure a",
"attribute": "href",
"__experimentalRole": "content"
},
"rel": {
"type": "string",
"source": "attribute",
"selector": "figure a",
"attribute": "rel"
},
"linkClass": {
"type": "string",
"source": "attribute",
"selector": "figure a",
"attribute": "class"
},
"mediaType": {
"type": "string",
"__experimentalRole": "content"
},
"mediaWidth": {
"type": "number",
"default": 50
},
"mediaSizeSlug": {
"type": "string"
},
"isStackedOnMobile": {
"type": "boolean",
"default": true
},
"verticalAlignment": {
"type": "string"
},
"imageFill": {
"type": "boolean"
},
"focalPoint": {
"type": "object"
},
"allowedBlocks": {
"type": "array"
}
}
Block Supports
Optional. Type: Object.
A set of options that enables or disables block controls in the editor, for example gradient colors or padding.
{
"anchor": true,
"align": [
"wide",
"full"
],
"html": false,
"color": {
"gradients": true,
"heading": true,
"link": true,
"__experimentalDefaultControls": {
"background": true,
"text": true
}
},
"spacing": {
"margin": true,
"padding": true
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalTextDecoration": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true
}
},
"interactivity": {
"clientNavigation": true
}
}
Transforms
Optional. Type: Object.
Transforms provide rules for what a block can be transformed from and what it can be transformed to.
Transforms from: Image. Video. Cover.
Transforms to: Image. Video. Cover.