Image

Insert an image to make a visual statement.

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

Context

Context is used to pass values from a block to a descendant block; for example, a query and post template passing the query ID to the inner blocks.

Documentation

Uses context. Optional. Type: Object.

[
  "allowResize",
  "imageCrop",
  "fixedHeight",
  "pattern/overrides",
  "postId",
  "postType"
]

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

{
  "url": {
    "type": "string",
    "source": "attribute",
    "selector": "img",
    "attribute": "src",
    "__experimentalRole": "content"
  },
  "alt": {
    "type": "string",
    "source": "attribute",
    "selector": "img",
    "attribute": "alt",
    "default": "",
    "__experimentalRole": "content"
  },
  "caption": {
    "type": "rich-text",
    "source": "rich-text",
    "selector": "figcaption",
    "__experimentalRole": "content"
  },
  "lightbox": {
    "type": "object",
    "enabled": {
      "type": "boolean"
    }
  },
  "title": {
    "type": "string",
    "source": "attribute",
    "selector": "img",
    "attribute": "title",
    "__experimentalRole": "content"
  },
  "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"
  },
  "id": {
    "type": "number",
    "__experimentalRole": "content"
  },
  "width": {
    "type": "string"
  },
  "height": {
    "type": "string"
  },
  "aspectRatio": {
    "type": "string"
  },
  "scale": {
    "type": "string"
  },
  "sizeSlug": {
    "type": "string"
  },
  "linkDestination": {
    "type": "string"
  },
  "linkTarget": {
    "type": "string",
    "source": "attribute",
    "selector": "figure > a",
    "attribute": "target"
  }
}

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

{
  "interactivity": true,
  "align": [
    "left",
    "center",
    "right",
    "wide",
    "full"
  ],
  "anchor": true,
  "color": {
    "text": false,
    "background": false
  },
  "filter": {
    "duotone": true
  },
  "__experimentalBorder": {
    "color": true,
    "radius": true,
    "width": true,
    "__experimentalSkipSerialization": true,
    "__experimentalDefaultControls": {
      "color": true,
      "radius": true,
      "width": true
    }
  },
  "shadow": {
    "__experimentalSkipSerialization": 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:
Shortcodes.
Files.


View blocks per attribute or block support: