Media & Text

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:

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.

Documentation

{
  "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.

Documentation

{
  "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.

Documentation

Transforms from: Image. Video. Cover.

Transforms to: Image. Video. Cover.


View blocks per attribute or block support: