Cover

Add an image or video with a text overlay.

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: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",
    "default": ""
  },
  "hasParallax": {
    "type": "boolean",
    "default": false
  },
  "isRepeated": {
    "type": "boolean",
    "default": false
  },
  "dimRatio": {
    "type": "number",
    "default": 100
  },
  "overlayColor": {
    "type": "string"
  },
  "customOverlayColor": {
    "type": "string"
  },
  "isUserOverlayColor": {
    "type": "boolean"
  },
  "backgroundType": {
    "type": "string",
    "default": "image"
  },
  "focalPoint": {
    "type": "object"
  },
  "minHeight": {
    "type": "number"
  },
  "minHeightUnit": {
    "type": "string"
  },
  "gradient": {
    "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
    ]
  },
  "tagName": {
    "type": "string",
    "default": "div"
  }
}

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"
    ],
    "blockGap": true,
    "__experimentalDefaultControls": {
      "padding": true,
      "blockGap": true
    }
  },
  "__experimentalBorder": {
    "color": true,
    "radius": true,
    "style": true,
    "width": true,
    "__experimentalDefaultControls": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    }
  },
  "color": {
    "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
    "heading": true,
    "text": true,
    "background": false,
    "__experimentalSkipSerialization": [
      "gradients"
    ],
    "enableContrastChecker": false
  },
  "dimensions": {
    "aspectRatio": true
  },
  "typography": {
    "fontSize": true,
    "lineHeight": true,
    "__experimentalFontFamily": true,
    "__experimentalFontWeight": true,
    "__experimentalFontStyle": true,
    "__experimentalTextTransform": true,
    "__experimentalTextDecoration": true,
    "__experimentalLetterSpacing": true,
    "__experimentalDefaultControls": {
      "fontSize": true
    }
  },
  "layout": {
    "allowJustification": false
  },
  "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.

Documentation

Transforms from: Image. Video. Group.

Transforms to: Image. Video. Group.


View blocks per attribute or block support: