@wordpress/fields

This package provides core elements for the DataView library, designed to simplify the creation and management of data display elements in WordPress.

Installation

Install the module

npm install @wordpress/fields --save

Setup

This package requires CSS from this package and from multiple dependency packages.

Within WordPress

To ensure proper load order, add the wp-components stylesheet as a dependency of your plugin’s stylesheet. See wp_enqueue_style documentation for how to specify dependencies.

WordPress registers no handle for this package’s own stylesheet, so load it with your plugin’s script:

import '@wordpress/fields/build-style/style.css';

Outside WordPress

Install and load these stylesheets in your application:

npm install @wordpress/fields @wordpress/theme @wordpress/components

import '@wordpress/theme/design-tokens.css';
import '@wordpress/components/build-style/style.css';
import '@wordpress/fields/build-style/style.css';

RTL versions of the stylesheets are available in the same paths, but with -rtl appended to the filename (style-rtl.css). The design tokens stylesheet is universal and does not have a separate RTL version.

Usage

MediaEdit

A media edit control component that provides a media picker UI with upload functionality for selecting WordPress media attachments. Supports both the traditional WordPress media library and the experimental DataViews media modal.

This component is intended to be used as the Edit property of a field definition when registering fields with registerEntityField from @wordpress/editor.

Usage

import { MediaEdit } from '@wordpress/fields';
import type { DataFormControlProps } from '@wordpress/dataviews';

const featuredImageField = {
    id: 'featured_media',
    type: 'media',
    label: 'Featured Image',
    Edit: ( props: DataFormControlProps< MyPostType > ) => (
        <MediaEdit { ...props } allowedTypes={ [ 'image' ] } />
    ),
};

Parameters

• props MediaEditProps<Item>: – The component props.
• props.data Item: – The item being edited.
• props.field Object: – The field configuration with getValue and setValue methods.
• props.onChange Function: – Callback function when the media selection changes.
• props.allowedTypes [string[]]: – Array of allowed media types. Use ['*'] to allow all file types. Default ['image'].
• props.multiple [boolean]: – Whether to allow multiple media selections. Default false.
• props.hideLabelFromVision [boolean]: – Whether the label should be hidden from vision.
• props.isExpanded [boolean]: – Whether to render in an expanded form. Default false.

Returns

• React.JSX.Element: The media edit control component.

MediaEditProps

Undocumented declaration.

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

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