Nearest Phase Modulator

    @wordpress/components
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/wordpress__components package

    21.1.0 • Public • Published

    Component Reference

    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

    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.

    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 and Tooltips

    If you're using Popover or Tooltip components outside of the editor, make sure they are rendered within a SlotFillProvider and with a Popover.Slot somewhere up the element tree.

    By default, the Popover component will render inline i.e. within its parent to which it should anchor. Depending upon the context in which the Popover is being consumed, this might lead to incorrect positioning. For example, when being nested within another popover.

    This issue can be solved by rendering popovers to a specific location in the DOM via the Popover.Slot. For this to work, you will need your use of the Popover component and its Slot to be wrapped in a SlotFill provider.

    A Popover is also used as the underlying mechanism to display Tooltip components. So the same considerations should be applied to them.

    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>
    };

    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.



    Code is Poetry.

    Install

    npm i @wordpress/components

    DownloadsWeekly Downloads

    42,177

    Version

    21.1.0

    License

    GPL-2.0-or-later

    Unpacked Size

    15.9 MB

    Total Files

    5033

    Last publish

    Collaborators

    • gutenbergplugin
    • mamaduka
    • ryanwelcher
    • adamziel
    • garypendergast
    • aduth
    • riad
    • adamsilverstein
    • gziolo
    • ntwb
    • noisysocks
    • kadamwhite
    • jorgefilipecosta
    • ellatrix
    • iandunn206
    • whyisjake
    • ockham
    • sirreal
    • nosolosw
    • wpisabel
    • ntsekouras
    • nerrad
    • desrosj
    • talldanwp
    • peterwilsoncc