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

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

モジュールのインストール

npm install @wordpress/components --save

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

Gutenberg 内でコンポーネントにアクセスするには components ルートディレクトリからインポートしてください。

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

exportdefaultfunctionMyButton() {
	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 コンポーネント、または Tooltip コンポーネントをエディターの外で使用している場合、それらのコンポーネントは、SlotFillProvider 内で、要素ツリーのどこかで Popover.Slot と一緒にレンダーされる必要があります。

Popover コンポーネントは、デフォルトではインラインでレンダーされます。すなわち、その親の中に固定されます。しかし、使用されるコンテキストによっては、Popover が不適切な位置に表示される場合があります。例えば、他の popover の中にネストしている場合です。

この問題は、popover を Popover.Slot を介して DOM の特定の場所にレンダリングすることで解決できます。このためには、 Popover コンポーネントとその Slot を SlotFill プロバイダでラップする必要があります。

Popover は Tooltip コンポーネントを表示するベースのメカニズムとしても使用されます。したがって、同じ考慮が、Tooltip でも必要です。

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

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

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

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

コンポーネントのドキュメントとサンプルは https://wordpress.github.io/gutenberg/ で参照できます。

これは、Gutenberg プロジェクトの一部である、個別パッケージです。このプロジェクトは、monorepo として構成されています。複数の自己完結型ソフトウェアパッケージで構成されており、それぞれが特定の目的を持ちます。この monorepo のパッケージは npm で公開され、WordPress や他のソフトウェアプロジェクトで利用されています。

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

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

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

原文

最終更新日: 2022年4月30日