Importing Components

WordPress Components

You can reference WordPress’ Core Components in the Gutenberg GitHub repo or in the Block Editor Handbook. Another good reference is the Gutenberg Storybook.

To import components into your codebase, use the @wordpress/components npm package. Detailed instructions and usage can be found in the Block Editor Handbook and the npm directory. Some have been copied here for quick reference.

Installation

Install the module

npm install @wordpress/components --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.

Usage

Within Gutenberg, these components can be accessed by importing from the components root directory:

/**
 * WordPress dependencies
 */
import { Button } from '@wordpress/components';

export default function MyButton() {
	return <Button>Click Me!</Button>;
}

Many components include CSS to add style, you will need to add in order to appear correctly. Within WordPress, add the wp-components stylesheet as a dependency of your plugin’s stylesheet. See wp_enqueue_style documentation for how to specify dependencies.

For ID specific components, hooks, and functions, see BU Block Imports.