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 );


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.

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