コンポーネントリファレンス

このパッケージには、汎用 WordPress コンポーネントライブラリーが含まれています。このコンポーネントを使用すると、画面とWordPress ダッシュボード機能との間で共有される共通 UI 要素を作成できます。

npm install @wordpress/components --save

このパッケージは、コードが ES2015+ 環境で実行されることを仮定しています。その言語機能や API の一部のみ、または、まったくサポートしない環境で使用するには、コードに @wordpress/babel-preset-default の polyfill を含めてください。

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コンポーネントは、ドキュメントの body に追加された、余分な要素の中にレンダーします。

ポップオーバーがレンダーする場所を正確にコントロールしたければ、Popover.Slotコンポーネントを使用する必要があります。

次の例は、Popover を使ってコンポーネントをラップし、それらの popover を DOM の 1 つの場所にレンダリングする方法を示します。

/**
 * External dependencies
 */
import { Popover, SlotFillProvider } from '@wordpress/components';

/**
 * Internal dependencies
 */
import { MyComponentWithPopover } from './my-component';

const Example = () => {
	<SlotFillProvider>
		<MyComponentWithPopover />
		<Popover.Slot />
	</SlotFillProvider>;
};

このパッケージは、エクスポートするコンポーネントに対して独自の型を公開しますが、コンポーネントの props に対しては独自の型をエクスポートしません。props の型を抽出する必要がある場合は、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 プロジェクトの一部である、個別パッケージです。このプロジェクトは、monorepo として構成されています。複数の自己完結型ソフトウェアパッケージで構成されており、それぞれが特定の目的を持ちます。この monorepo のパッケージは npm で公開され、WordPress や他のソフトウェアプロジェクトで利用されています。

このパッケージや Gutenberg 全体へのコントリビュートの詳細については、プロジェクトのメインのコントリビューターガイドを参照ください。

このパッケージには、また、追加の詳細詳細を記述した独自の コントリビューター情報 があります。

原文およびその下のページを参照してください。

原文

最終更新日: 2024年7月7日