插入图像以做出视觉声明。

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

属性

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

属性类型默认值描述
blobstring—角色: local
urlstring—来源: attribute。 选择器: img。 HTML 属性: src。 角色: content
altstring""来源: attribute。 选择器: img。 HTML 属性: alt。 角色: content
captionrich-text—来源: rich-text。 选择器: figcaption。 角色: content
lightboxobject——
titlestring—来源: attribute。 选择器: img。 HTML 属性: title。 角色: content
hrefstring—来源: attribute。 选择器: figure > a。 HTML 属性: href。 角色: content
relstring—来源: attribute。 选择器: figure > a。 HTML 属性: rel
linkClassstring—来源: attribute。 选择器: figure > a。 HTML 属性: class
idnumber—角色: content
widthstring——
heightstring——
aspectRatiostring——
scalestring——
focalPointobject——
sizeSlugstring——
linkDestinationstring——
linkTargetstring—来源: attribute。 选择器: figure > a。 HTML 属性: target
isDecorativebooleanfalse—

支持功能

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

上下文

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

使用的上下文:

  • allowResize
  • imageCrop
  • fixedHeight
  • navigationButtonType
  • postId
  • postType
  • queryId
  • galleryId

块样式

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

样式名称标签默认值
default默认是
rounded圆角否

CSS 选择器

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

  • 尺寸: .wp-block-image img, .wp-block-image .components-placeholder
  • 边框: .wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder
  • 阴影: .wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder
  • 滤镜:
    • 双色： .wp-block-image img, .wp-block-image .components-placeholder

区块标记

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

<!-- wp:core/image -->
<figure class="wp-block-image"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" /></figure>
<!-- /wp:core/image -->

来源