# 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

```bash
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](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters) for how to specify dependencies.

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

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

### Outside WordPress

Install and load these stylesheets in your application:

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

```js
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

<!-- START TOKEN(Autogenerated API docs) -->

### 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_

```tsx
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.

<!-- END TOKEN(Autogenerated API docs) -->

## 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](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) 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](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).

<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>