Image

Insert an image to make a visual statement.

• Name: core/image
• Category: media
• API Version: 3
• Block Type: Hybrid (static save + server enhancements)
• Keywords: img, photo, picture

Attributes

Defined via the attributes property in block.json.

Attribute	Type	Default	Description
blob	string	—	Role: local
url	string	—	Source: attribute. Selector: img. HTML attr: src. Role: content
alt	string	""	Source: attribute. Selector: img. HTML attr: alt. Role: content
caption	rich-text	—	Source: rich-text. Selector: figcaption. Role: content
lightbox	object	—	—
title	string	—	Source: attribute. Selector: img. HTML attr: title. Role: content
href	string	—	Source: attribute. Selector: figure > a. HTML attr: href. Role: content
rel	string	—	Source: attribute. Selector: figure > a. HTML attr: rel
linkClass	string	—	Source: attribute. Selector: figure > a. HTML attr: class
id	number	—	Role: content
width	string	—	—
height	string	—	—
aspectRatio	string	—	—
scale	string	—	—
focalPoint	object	—	—
sizeSlug	string	—	—
linkDestination	string	—	—
linkTarget	string	—	Source: attribute. Selector: figure > a. HTML attr: target
isDecorative	boolean	false	—

Supports

Defined via the supports property in block.json.

• interactivity: true
• align: "left", "center", "right", "wide", "full"
• anchor: true
• color:
  • text: false
  • background: false
• filter:
  • duotone: true
• spacing:
  • margin: true
• shadow: true

Context

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

Uses context:

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

Block Styles

Defined via the styles property in block.json.

Style Name	Label	Default
default	Default	Yes
rounded	Rounded	No

CSS Selectors

Defined via the selectors property in block.json.

• dimensions: .wp-block-image img, .wp-block-image .components-placeholder
• border: .wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder
• shadow: .wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder
• filter:
  • duotone: .wp-block-image img, .wp-block-image .components-placeholder

Block Markup

This is a hybrid block. It saves static markup that the server may enhance during rendering.

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

Source

• block.json (reference)
• Source directory — browse edit.js, save.js, index.php, and more.