@wordpress/data-controls Edit

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 #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 ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

The following controls are available on the object returned by the module:

Top ↑

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

Dispatches a control action for triggering a registry dispatch.

Usage

import { dispatch } from '@wordpress/data-controls';

// Action generator using dispatch
export function* myAction() {
    yield dispatch( 'core/edit-post', 'togglePublishSidebar' );
    // do some other things.
}

Parameters

• storeKey string: The key for the store the action belongs to
• actionName string: The name of the action to dispatch
• args Array: Arguments for the dispatch action.

Returns

• Object: The control descriptor.

# select

Dispatches a control action for triggering a registry select.

Note: when this control action is handled, it automatically considers
selectors that may have a resolver. It will await and return the resolved
value when the selector has not been resolved yet.

Usage

import { select } from '@wordpress/data-controls';

// Action generator using select
export function* myAction() {
    const isSidebarOpened = yield select( 'core/edit-post', 'isEditorSideBarOpened' );
    // do stuff with the result from the select.
}

Parameters

• storeKey string: The key for the store the selector belongs to
• selectorName string: The name of the selector
• args Array: Arguments for the select.

Returns

• Object: The control descriptor.