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
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.
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.
{
"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.
{
"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.
Transforms from: Image. Video. Group.
Transforms to: Image. Video. Group.