媒体与文本

将媒体和文字并排显示以丰富布局。

• 名称: core/media-text
• 类别: 媒体
• API 版本: 3
• 块类型: 混合（静态保存 + 服务器增强）
• 关键词: image, video

属性

通过 block.json 中的 attributes 属性定义。

支持

通过 block.json 中的 supports 属性定义。

• 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

上下文

通过 block.json 中的 usesContext 和 providesContext 属性定义。

使用的上下文：

• postId
• postType

CSS 选择器

通过 block.json 中的 selectors 属性定义。

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

区块标记

这是一个 混合区块。它保存服务器在渲染期间可能增强的静态标记。

<!-- 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">我的内容</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:media-text -->

来源

• block.json (参考)
• 源代码目录 — 浏览 edit 和 save 源文件、index.php 等。