開発プラットフォーム

Gutenberg プロジェクトは、より良い WordPress エディターを作るだけでなく、その上で構築するプラットフォームの作成を目指しています。プラットフォームは JavaScript パッケージとツールから構成され、Web アプリケーションで利用できます。npm で利用可能なパッケージのリストを参照してください。

WordPress コンポーネントパッケージ にはユーザーがプロジェクトで利用可能な一連の UI コンポーネントが含まれています。コンポーネントと設定のインタラクティブなガイドについては WordPress Storybook サイト を参照してください。

プロジェクト内から wp-scripts を使用する簡単な例を示します。

まず、依存をインストールします。

npm install --save @wordpress/components

React での使用方法は次のとおりです。

import { Button } from '@wordpress/components';

function MyApp() {
	return <Button>Hello Button</Button>;
}

多くのコンポーネントはスタイルの追加のために CSS を含むため、コンポーネントを正しく表示するには追加が必要です。コンポーネントのスタイルシートは node_modules/@wordpress/components/build-style/style.css にあります。直接リンクするか、プロジェクトにコピーして include してください。

@wordpress/scripts パッケージは JavaScript 開発用の再利用可能なスクリプト集です。ビルド、lint、テスト用のスクリプトが含まれ、すべてのスクリプトで追加の構成ファイルは不要です。

プロジェクトで wp-scripts ツールを使用する簡単な例を示します。

まず、依存をインストールします。

npm install --save-dev @wordpress/scripts

次に package.json ファイルに scripts セクションを追加します。

	"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:js": "wp-scripts lint-js",
		"start": "wp-scripts start"
	}

これで npm run build と実行すると、構成済みのすべてのデフォルトの webpack 、たとえばフォーマットや lint を実行してプロジェクトをビルドします。start コマンドは開発モードで使用します。完全なドキュメントについては @wordpress/scripts パッケージを参照してください。

詳細については「ブロックエディターハンドブック」の「JavaScript ビルド環境のセットアップ」を参照してください。

@wordpress/block-editor パッケージ を使用するとスタンドアロンのブロックエディターを作成し、使用できます。

詳細については チュートリアル – カスタムブロックエディターの構築 を参照してください。

原文

最終更新日: 2023年12月30日