Gallery

Display multiple images in a rich gallery.

This block is available in the latest version of WordPress and does not require the Gutenberg plugin.

Category:

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.

Documentation

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.

Documentation

{
  "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": "string",
        "source": "html",
        "selector": ".blocks-gallery-item__caption"
      }
    }
  },
  "ids": {
    "type": "array",
    "items": {
      "type": "number"
    },
    "default": []
  },
  "shortCodeTransforms": {
    "type": "array",
    "default": [],
    "items": {
      "type": "object"
    }
  },
  "columns": {
    "type": "number",
    "minimum": 1,
    "maximum": 8
  },
  "caption": {
    "type": "string",
    "source": "html",
    "selector": ".blocks-gallery-caption"
  },
  "imageCrop": {
    "type": "boolean",
    "default": true
  },
  "fixedHeight": {
    "type": "boolean",
    "default": true
  },
  "linkTarget": {
    "type": "string"
  },
  "linkTo": {
    "type": "string"
  },
  "sizeSlug": {
    "type": "string",
    "default": "large"
  },
  "allowResize": {
    "type": "boolean",
    "default": false
  },
  "layout": {
    "type": "object"
  },
  "anchor": {
    "type": "string",
    "source": "attribute",
    "attribute": "id",
    "selector": "*"
  }
}

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

{
  "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
    }
  },
  "color": {
    "text": false,
    "background": true,
    "gradients": true
  },
  "__experimentalLayout": {
    "allowSwitching": false,
    "allowInheriting": false,
    "allowEditing": false,
    "default": {
      "type": "flex"
    }
  }
}

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: Image.
Shortcodes.
Files.

Transforms to: Image.