云策 WordPress 开发者社区

块编辑器开发文档

@wordpress/media-fields

查看官方原文 ↗
💡 云策文档标注

概述

@wordpress/media-fields 包为 WordPress DataViews 提供可复用的媒体附件属性字段定义，用于显示和编辑媒体属性。该包主要供 Gutenberg 内部使用，版本间可能发生重大变更。

关键要点

  • 提供 altTextField、captionField、descriptionField、filenameField、filesizeField、mediaDimensionsField、mediaThumbnailField、mimeTypeField 等字段定义，覆盖常见媒体属性。
  • 字段可用于 DataViews 组件中，通过导入和配置 fields 数组来构建媒体库界面。
  • 该包是 Gutenberg 项目的一部分，贡献需参考项目主贡献指南。

代码示例

import {
    altTextField,
    captionField,
    filesizeField,
} from '@wordpress/media-fields';
import { DataViews } from '@wordpress/dataviews';

const fields = [
    altTextField,
    captionField,
    filesizeField,
];

export function MyMediaLibrary( { items } ) {
    return (
        <DataViews
            data={ items }
            fields={ fields }
            view={ view }
            onChangeView={ setView }
        />
    );
}
📄 原文内容

This package provides reusable field definitions for displaying and editing media attachment properties in WordPress DataViews. It’s primarily intended for internal use within Gutenberg and may change significantly between releases.

Usage

Available Fields

This package exports field definitions for common media attachment properties:

  • altTextField – Alternative text for images
  • captionField – Media caption text
  • descriptionField – Detailed description
  • filenameField – File name (read-only)
  • filesizeField – File size with human-readable formatting
  • mediaDimensionsField – Image dimensions (width × height)
  • mediaThumbnailField – Thumbnail preview
  • mimeTypeField – MIME type display

Using Media Fields in DataViews

import {
    altTextField,
    captionField,
    filesizeField,
} from '@wordpress/media-fields';
import { DataViews } from '@wordpress/dataviews';

const fields = [
    altTextField,
    captionField,
    filesizeField,
];

export function MyMediaLibrary( { items } ) {
    return (
        <DataViews
            data={ items }
            fields={ fields }
            view={ view }
            onChangeView={ setView }
        />
    );
}

Contributing to this package

This package is part of the Gutenberg project. To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.