The data controls module is a module intended to simplify implementation of common controls used with the @wordpress/data
package.
Note: It is assumed that the registry being used has the controls plugin enabled on it (see more details on controls here)
Installation
Install the module
npm install @wordpress/data-controls --save
This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default
in your code.
The following controls are available on the object returned by the module:
API
apiFetch
Dispatches a control action for triggering an api fetch call.
Usage
import { apiFetch } from '@wordpress/data-controls';
// Action generator using apiFetch
export function* myAction() {
const path = '/v2/my-api/items';
const items = yield apiFetch( { path } );
// do something with the items.
}
Parameters
- request
Object
: Arguments for the fetch request.
Returns
Object
: The control descriptor.
controls
The default export is what you use to register the controls with your custom store.
Usage
// WordPress dependencies
import { controls } from '@wordpress/data-controls';
import { registerStore } from '@wordpress/data';
// Internal dependencies
import reducer from './reducer';
import * as selectors from './selectors';
import * as actions from './actions';
import * as resolvers from './resolvers';
registerStore( 'my-custom-store', {
reducer,
controls,
actions,
selectors,
resolvers,
} );
Returns
Object
: An object for registering the default controls with the store.
dispatch
Control for dispatching an action in a registered data store. Alias for the dispatch
control in the @wordpress/data
package.
Parameters
- storeNameOrDescriptor
string | StoreDescriptor
: The store object or identifier. - actionName
string
: The action name. - args
any[]
: Arguments passed without change to the@wordpress/data
control.
select
Control for resolving a selector in a registered data store. Alias for the resolveSelect
built-in control in the @wordpress/data
package.
Parameters
- storeNameOrDescriptor
string | StoreDescriptor
: The store object or identifier. - selectorName
string
: The selector name. - args
any[]
: Arguments passed without change to the@wordpress/data
control.
syncSelect
Control for calling a selector in a registered data store. Alias for the select
built-in control in the @wordpress/data
package.
Parameters
- storeNameOrDescriptor
string | StoreDescriptor
: The store object or identifier. - selectorName
string
: The selector name. - args
any[]
: Arguments passed without change to the@wordpress/data
control.
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.