Media & Text

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.

Supports

Defined via the supports property in block.json.

• anchor: true
• align: "wide", "full"
• html: false
• background:
  • backgroundImage: true
  • backgroundSize: true
  • gradient: true
• color:
  • gradients: true
  • heading: true
  • link: true
  • button: true
• dimensions:
  • minHeight: true
  • minWidth: true
• spacing:
  • margin: true
  • padding: true
• shadow: true
• typography:
  • fontSize: true
  • lineHeight: true
• filter:
  • duotone: true
• interactivity:
  • clientNavigation: true
• allowedBlocks: true

Context

Defined via the usesContext and providesContext properties in block.json.

Uses context:

• postId
• postType

CSS Selectors

Defined via the selectors property in block.json.

• filter:
  • duotone: .wp-block-media-text > .wp-block-media-text__media img, .wp-block-media-text > .wp-block-media-text__media video

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 the edit and save source files, index.php, and more.