封面

限制视频嵌入提供商

Cover 块可以使用从 URL 嵌入的背景视频。allowedVideoProviders 属性控制嵌入视频时提供哪些提供商。它接受一个提供商 slugs 数组，默认支持所有提供商：youtube、vimeo、videopress、animoto、tiktok 和 wordpress-tv。

此属性只能从支持列表中 移除 提供商，而不能添加新的。如果不再允许任何提供商，“从 URL 嵌入视频”选项将完全隐藏。

您可以直接在块标记中应用此属性。例如，以下标记仅允许 YouTube 和 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 -->

您还可以使用 块过滤器 全局设置默认值。下面的示例从每个 Cover 块中移除 YouTube，同时保留其他提供商。

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

若要完全禁用视频嵌入，请取消设置属性的默认值或将其设置为空数组。下面的示例为每个 Cover 块移除该属性。

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

覆盖颜色和透明度

Cover 块的覆盖层控件是其颜色设置的一部分。透明度滑块设置覆盖层颜色的透明程度，因此它出现在该颜色旁边而不是单独显示。

只有当块至少有一个可选的颜色或渐变时，这两个控件才会出现。像下面这样不留任何内容的 theme.json 会隐藏它们：

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

打开 color.custom 或 color.customGradient 不会将它们带回。这些设置添加了自定义颜色选择器，它们并没有给块提供任何可选内容。要再次显示覆盖层控件，请为每个块或仅为 Cover 块赋予颜色或渐变：

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

添加带有文本覆盖层的图像或视频。

• Name: core/cover
• Category: media
• API Version: 3
• Block Type: Hybrid（静态保存 + 服务器增强）

属性

通过 block.json 中的 attributes 属性定义。

支持

通过 block.json 中的 supports 属性定义。

• 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
  • interactive: true
• filter:
  • duotone: true
• allowedBlocks: true

上下文

通过 block.json 中的 usesContext 和 providesContext 属性定义。

使用的上下文：

• postId
• postType

CSS 选择器

通过 block.json 中的 selectors 属性定义。

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

区块标记

这是一个 混合区块。它保存服务器在渲染期间可能进行增强的静态标记。

<!-- 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 -->

来源

• block.json (参考)
• 源代码目录 — 浏览 edit 和 save 源文件、index.php 等。