@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.