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