Cover

Restricting video embed providers

The Cover block can use a background video embedded from a URL. The allowedVideoProviders attribute controls which providers are offered when embedding a video. It accepts an array of provider slugs and defaults to all supported providers: youtube, vimeo, videopress, animoto, tiktok, and wordpress-tv.

This attribute can only remove providers from the supported list, never add new ones. If no providers remain allowed, the “Embed video from URL” option is hidden entirely.

You can apply this attribute directly in the block markup. For example, the following markup allows only YouTube and Vimeo.

<!-- wp:cover {"allowedVideoProviders":["youtube","vimeo"]} -->
<div class="wp-block-cover">
    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span>
    <div class="wp-block-cover__inner-container"></div>
</div>
<!-- /wp:cover -->

You can also use block filters to set the default value globally. The example below removes YouTube from every Cover block while keeping the other providers.

function example_restrict_cover_video_providers( $args, $block_type ) {

    if ( 'core/cover' !== $block_type ) {
        return $args;
    }

    if ( ! isset( $args['attributes']['allowedVideoProviders']['default'] ) ) {
        return $args;
    }

    // Remove YouTube.
    $args['attributes']['allowedVideoProviders']['default'] = array_values(
        array_diff(
            $args['attributes']['allowedVideoProviders']['default'],
            [ 'youtube' ]
        )
    );

    return $args;
}
add_filter( 'register_block_type_args', 'example_restrict_cover_video_providers', 10, 2 );

To disable video embeds entirely, either unset the attribute’s default or set it to an empty array. The example below removes it for every Cover block.

function example_disable_cover_video_embeds( $args, $block_type ) {

    if ( 'core/cover' !== $block_type ) {
        return $args;
    }

    unset( $args['attributes']['allowedVideoProviders']['default'] );

    return $args;
}
add_filter( 'register_block_type_args', 'example_disable_cover_video_embeds', 10, 2 );

Overlay color and opacity

The Cover block’s overlay controls are part of its color settings. The opacity slider sets how transparent the overlay color is, so it appears next to that color rather than on its own.

Both controls only appear if the block has at least one color or gradient to pick from. A theme.json that leaves the block with none, like the one below, hides them:

{
    "version": 3,
    "settings": {
        "color": {
            "defaultPalette": false,
            "defaultGradients": false,
            "palette": [],
            "gradients": []
        }
    }
}

Turning on color.custom or color.customGradient will not bring them back. Those settings add the custom color picker, they do not give the block anything to pick from. To show the overlay controls again, give the block a color or gradient, either for every block or just the Cover block:

{
    "version": 3,
    "settings": {
        "blocks": {
            "core/cover": {
                "color": {
                    "defaultGradients": true
                }
            }
        }
    }
}

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.

Attribute	Type	Default	Description
url	string	—	Role: content
useFeaturedImage	boolean	false	—
id	number	—	—
alt	string	""	—
hasParallax	boolean	false	—
isRepeated	boolean	false	—
dimRatio	number	100	—
overlayColor	string	—	—
customOverlayColor	string	—	—
isUserOverlayColor	boolean	—	—
backgroundType	string	"image"	—
focalPoint	object	—	—
minHeight	number	—	—
minHeightUnit	string	—	—
gradient	string	—	—
customGradient	string	—	—
contentPosition	string	—	—
isDark	boolean	true	—
templateLock	string \| boolean	—	Enum: all, insert, contentOnly, false
tagName	string	"div"	—
sizeSlug	string	—	—
poster	string	—	Source: attribute. Selector: video. HTML attr: poster
allowedVideoProviders	array	["youtube","vimeo","videopress","animoto","tiktok","wordpress-tv"]	—

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
  • link: true
  • button: true
  • background: false
  • enableContrastChecker: false
• dimensions:
  • aspectRatio: true
  • minWidth: true
• typography:
  • fontSize: true
  • lineHeight: true
• layout:
  • allowJustification: false
• interactivity:
  • clientNavigation: true
  • interactive: 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 the edit and save source files, index.php, and more.