Cover

Add an image or video with a text overlay — great for headers.

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

Category:

For developers

Block Grammar & Markup

<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
<div class="wp-block-cover">
    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
    <img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover" />
    <div class="wp-block-cover__inner-container">
		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
		<p class="has-text-align-center has-large-font-size">
			Guten Berg!
		</p>
		<!-- /wp:paragraph -->
	</div>
</div>
<!-- /wp:cover -->

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.

[
  "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"
  },
  "useFeaturedImage": {
    "type": "boolean",
    "default": false
  },
  "id": {
    "type": "number"
  },
  "alt": {
    "type": "string",
    "source": "attribute",
    "selector": "img",
    "attribute": "alt",
    "default": ""
  },
  "hasParallax": {
    "type": "boolean",
    "default": false
  },
  "isRepeated": {
    "type": "boolean",
    "default": false
  },
  "dimRatio": {
    "type": "number",
    "default": 100
  },
  "overlayColor": {
    "type": "string"
  },
  "customOverlayColor": {
    "type": "string"
  },
  "backgroundType": {
    "type": "string",
    "default": "image"
  },
  "focalPoint": {
    "type": "object"
  },
  "minHeight": {
    "type": "number"
  },
  "minHeightUnit": {
    "type": "string"
  },
  "customGradient": {
    "type": "string"
  },
  "contentPosition": {
    "type": "string"
  },
  "isDark": {
    "type": "boolean",
    "default": true
  },
  "allowedBlocks": {
    "type": "array"
  },
  "templateLock": {
    "type": [
      "string",
      "boolean"
    ],
    "enum": [
      "all",
      "insert",
      "contentOnly",
      false
    ]
  },
  "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,
  "spacing": {
    "padding": true,
    "margin": [
      "top",
      "bottom"
    ],
    "__experimentalDefaultControls": {
      "padding": true
    }
  },
  "color": {
    "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
    "text": false,
    "background": false
  },
  "typography": {
    "fontSize": true,
    "lineHeight": true,
    "__experimentalFontFamily": true,
    "__experimentalFontWeight": true,
    "__experimentalFontStyle": true,
    "__experimentalTextTransform": true,
    "__experimentalTextDecoration": true,
    "__experimentalLetterSpacing": true,
    "__experimentalDefaultControls": {
      "fontSize": 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: Image. Video. Group.

Transforms to: Image. Video. Group.