@wordpress/components

インストール

npm install @wordpress/components --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。そのような言語機能やAPIのサポートが限られているか、まったくない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含める必要があります。

使用法

Gutenberg内では、これらのコンポーネントはcomponentsのルートディレクトリからインポートすることでアクセスできます:

/**
 * WordPress dependencies
 */
import { Button } from '@wordpress/components';
export default function MyButton() {
   return <Button>Click Me!</Button>;
}

多くのコンポーネントにはスタイルを追加するためのCSSが含まれており、正しく表示されるためにはそれを読み込む必要があります。WordPress内では、wp-componentsスタイルシートをプラグインのスタイルシートの依存関係として追加してください。依存関係を指定する方法についてはwp_enqueue_styleのドキュメントを参照してください。

WordPress以外のプロジェクトでは、build-style/style.cssファイルに直接リンクしてください。それはnode_modules/@wordpress/components/build-style/style.cssにあります。

ポップオーバー

デフォルトでは、Popoverコンポーネントはドキュメントのボディに追加された追加の要素内にレンダリングされます。

ポップオーバーのレンダリング位置を正確に制御したい場合は、Popover.Slotコンポーネントを使用する必要があります。

以下の例は、コンポーネントをラップする方法を示しています。

``````bash
/**
 * External dependencies
 */
import { Popover, SlotFillProvider } from '@wordpress/components';
/**
 * Internal dependencies
 */
import { MyComponentWithPopover } from './my-component';
const Example = () => {
   <SlotFillProvider>
   <MyComponentWithPopover />
   <Popover.Slot />
   </SlotFillProvider>;
};
`

TypeScript

このパッケージは、エクスポートするコンポーネントのための独自の型を公開していますが、コンポーネントのプロパティのための独自の型はエクスポートしていません。プロパティの型を抽出する必要がある場合は、React.ComponentPropsを使用して要素から型を取得してください。

import type { ComponentProps } from 'react';
import { Button } from '@wordpress/components';
export default function MyButton( props: ComponentProps< typeof Button > ) {
   return <Button { ...props }>Click Me!</Button>;
}

ドキュメントと例

コンポーネントのドキュメントと例はhttps://wordpress.github.io/gutenberg/で閲覧できます。

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主な貢献者ガイドをお読みください。

このパッケージには、追加の詳細を見つけることができる独自の貢献情報もあります。