图库

在丰富的图库中显示多张图片。

• 名称: core/gallery
• 类别: 媒体
• API 版本: 3
• 块类型: 混合（静态保存 + 服务器增强）
• 关键词: images, photos

块关系

允许的内部块:
– core/image

属性

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

支持

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

• anchor: true
• align: true
• background:
  • backgroundImage: true
  • backgroundSize: true
  • gradient: true
• html: false
• units: "px", "em", "rem", "vh", "vw"
• spacing:
  • margin: true
  • padding: true
  • blockGap: {"sides":["horizontal","vertical"],"__experimentalDefault":"var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )"}
• color:
  • text: false
  • background: true
  • gradients: true
• shadow: true
• dimensions:
  • minHeight: true
  • minWidth: true
• layout:
  • allowSwitching: false
  • allowInheriting: false
  • allowEditing: true
  • allowOrientation: false
  • allowJustification: false
  • allowVerticalAlignment: false
  • allowWrap: false
  • allowSizingOnChildren: true
  • default: {"type":"flex"}
• filter:
  • duotone: true
• interactivity:
  • clientNavigation: true
• listView: true

上下文

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

使用的上下文:

• galleryId
• postId
• postType

提供的上下文:

• allowResize → 属性 allowResize
• imageCrop → 属性 imageCrop
• fixedHeight → 属性 fixedHeight
• navigationButtonType → 属性 navigationButtonType

CSS 选择器

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

• filter:
  • duotone: .wp-block-gallery :where(img)

块标记

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

<!-- wp:gallery {"linkTo":"none","className":"columns-2"} -->
<figure
    class="wp-block-gallery has-nested-images columns-default is-cropped columns-2"
>
    <!-- wp:image {"id":1421,"sizeSlug":"large","linkDestination":"none"} -->
    <figure class="wp-block-image size-large">
        <img
            src="https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190"
            alt="图像库图像"
            class="wp-image-1421"
        />
    </figure>
    <!-- /wp:image -->

    <!-- wp:image {"id":1440,"sizeSlug":"large","linkDestination":"none"} -->
    <figure class="wp-block-image size-large">
        <img
            src="https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580"
            alt="图像库图像"
            class="wp-image-1440"
        />
    </figure>
    <!-- /wp:image -->
</figure>
<!-- /wp:gallery -->

来源

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