This package includes a library of generic WordPress components to be used for creating common UI elements shared between screens and features of the WordPress dashboard.
Installation
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 styles, which you will need to load in order for them 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.
In non-WordPress projects, link to the build-style/style.css
file directly, it is located at node_modules/@wordpress/components/build-style/style.css
.
Popovers
By default, the Popover
component will render within an extra element appended to the body of the document.
If you want to precisely contol where the popovers render, you will need to use the Popover.Slot
component.
The following example illustrates how you can wrap a component using a
Popover
and have those popovers render to a single location in the DOM.
/**
* External dependencies
*/
import { Popover, SlotFillProvider } from '@wordpress/components';
/**
* Internal dependencies
*/
import { MyComponentWithPopover } from './my-component';
const Example = () => {
<SlotFillProvider>
<MyComponentWithPopover />
<Popover.Slot />
</SlotFillProvider>;
};
TypeScript
This package exposes its own types for the components it exports, however it doesn’t export its own types for component props. If you need to extract the props type, please use React.ComponentProps
to get the types from the element.
import type { ComponentProps } from 'react';
import { Button } from '@wordpress/components';
export default function MyButton( props: ComponentProps< typeof Button > ) {
return <Button { ...props }>Click Me!</Button>;
}
Docs & examples
You can browse the components docs and examples at https://wordpress.github.io/gutenberg/
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.
This package also has its own contributing information where you can find additional details.