Display multiple images in a rich gallery.
This block is available in the latest version of WordPress and does not require the Gutenberg plugin.
Last updated
For developers
Block Grammar & Markup
<!-- wp:gallery {"linkTo":"none","className":"columns-2"} -->
<figure
class="wp-block-gallery has-nested-images columns-default is-cropped columns-2"
>
<!-- wp:image {"id":1421,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<img
src="https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190"
alt="Image gallery image"
class="wp-image-1421"
/>
</figure>
<!-- /wp:image -->
<!-- wp:image {"id":1440,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<img
src="https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580"
alt="Image gallery image"
class="wp-image-1440"
/>
</figure>
<!-- /wp:image -->
</figure>
<!-- /wp:gallery -->
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.
Provides context. Optional. Type: Object.
{
"allowResize": "allowResize",
"imageCrop": "imageCrop",
"fixedHeight": "fixedHeight"
}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.
{
"images": {
"type": "array",
"default": [],
"source": "query",
"selector": ".blocks-gallery-item",
"query": {
"url": {
"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "src"
},
"fullUrl": {
"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "data-full-url"
},
"link": {
"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "data-link"
},
"alt": {
"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "alt",
"default": ""
},
"id": {
"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "data-id"
},
"caption": {
"type": "rich-text",
"source": "rich-text",
"selector": ".blocks-gallery-item__caption"
}
}
},
"ids": {
"type": "array",
"items": {
"type": "number"
},
"default": []
},
"shortCodeTransforms": {
"type": "array",
"items": {
"type": "object"
},
"default": []
},
"columns": {
"type": "number",
"minimum": 1,
"maximum": 8
},
"caption": {
"type": "rich-text",
"source": "rich-text",
"selector": ".blocks-gallery-caption"
},
"imageCrop": {
"type": "boolean",
"default": true
},
"randomOrder": {
"type": "boolean",
"default": false
},
"fixedHeight": {
"type": "boolean",
"default": true
},
"linkTarget": {
"type": "string"
},
"linkTo": {
"type": "string"
},
"sizeSlug": {
"type": "string",
"default": "large"
},
"allowResize": {
"type": "boolean",
"default": false
}
}Block Supports
Optional. Type: Object.
A set of options that enables or disables block controls in the editor, for example gradient colors or padding.
{
"anchor": true,
"align": true,
"html": false,
"units": [
"px",
"em",
"rem",
"vh",
"vw"
],
"spacing": {
"margin": true,
"padding": true,
"blockGap": [
"horizontal",
"vertical"
],
"__experimentalSkipSerialization": [
"blockGap"
],
"__experimentalDefaultControls": {
"blockGap": true,
"margin": false,
"padding": false
}
},
"color": {
"text": false,
"background": true,
"gradients": true
},
"layout": {
"allowSwitching": false,
"allowInheriting": false,
"allowEditing": false,
"default": {
"type": "flex"
}
},
"interactivity": {
"clientNavigation": true
}
}Transforms
Optional. Type: Object.
Transforms provide rules for what a block can be transformed from and what it can be transformed to.
Transforms from: Image.
Shortcodes.
Files.
Transforms to: Image.