Cover

Add an image or video with a text overlay.

• Name: core/cover
• Category: media
• API Version: 3
• Block Type: Hybrid (static save + server enhancements)

Attributes

Defined via the attributes property in block.json.

Supports

Defined via the supports property in block.json.

• anchor: true
• align: true
• html: false
• shadow: true
• spacing:
  • padding: true
  • margin: ["top","bottom"]
  • blockGap: true
• color:
  • heading: true
  • text: true
  • background: false
  • enableContrastChecker: false
• dimensions:
  • aspectRatio: true
• typography:
  • fontSize: true
  • lineHeight: true
• layout:
  • allowJustification: false
• interactivity:
  • clientNavigation: true
• filter:
  • duotone: true
• allowedBlocks: true

Context

Defined via the usesContext and providesContext properties in block.json.

Uses context:

• postId
• postType

CSS Selectors

Defined via the selectors property in block.json.

• filter:
  • duotone: .wp-block-cover > .wp-block-cover__image-background, .wp-block-cover > .wp-block-cover__video-background

Block Markup

This is a hybrid block. It saves static markup that the server may enhance during rendering.

<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
<div class="wp-block-cover">
    <img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover" />
    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
    <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 -->

Source

• block.json (reference)
• Source directory — browse edit.js, save.js, index.php, and more.