開発プラットフォームとしての Gutenberg

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

UI コンポーネント

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 してください。

開発スクリプト

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

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

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

npm install --save-dev @wordpress/scripts

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

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

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

wp-scripts パッケージの使用法の完全な説明についてはJavaScript ビルド環境のセットアップを参照してください。

ブロックエディター

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

詳細については チュートリアル “Building a custom block editor” を参照してください。

最終更新日: