セットアップ（Setup）

プラグインの作成

私たちはすべての開発をWordPressプラグイン内で行います。まず、ローカルのWordPress環境にwp-content/plugins/my-first-gutenberg-appディレクトリを作成しましょう。そのディレクトリ内に4つのファイルを作成する必要があります：

• my-first-gutenberg-app.php – 新しい管理ページを作成するため
• src/index.js – JavaScriptアプリケーション用
• style.css – 最小限のスタイルシート用
• package.json – ビルドプロセス用

次のスニペットを使用してこれらのファイルを作成してください：

src/index.js:

import { createRoot } from 'react-dom';
function MyFirstApp() {
   return <span>Hello from JavaScript!</span>;
}
const root = createRoot( document.getElementById( 'my-first-gutenberg-app' ) );
window.addEventListener(
   'load',
   function () {
   root.render(
   <MyFirstApp />,
   );
   },
   false
);

style.css:

.toplevel_page_my-first-gutenberg-app #wpcontent {
   background: #fff;
   height: 1000px;
}
button .components-spinner {
   width: 15px;
   height: 15px;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: 0;
}
.form-buttons {
   display: flex;
}
.my-gutenberg-form .form-buttons {
   margin-top: 20px;
   margin-left: 1px;
}
.form-error {
   color: #cc1818;
}
.form-buttons button {
   margin-right: 4px;
}
.form-buttons .components-spinner {
   margin-top: 0;
}
#my-first-gutenberg-app {
   max-width: 500px;
}
#my-first-gutenberg-app ul,
#my-first-gutenberg-app ul li {
   list-style-type: disc;
}
#my-first-gutenberg-app ul {
   padding-left: 20px;
}
#my-first-gutenberg-app .components-search-control__input {
   height: 36px;
   margin-left: 0;
}
#my-first-gutenberg-app .list-controls {
   display: flex;
   width: 100%;
}
#my-first-gutenberg-app .list-controls .components-search-control {
   flex-grow: 1;
   margin-right: 8px;
}

my-first-gutenberg-app.php:

<?php
/**
 * Plugin Name: My first Gutenberg App
 *
 */
function my_admin_menu() {
   // Create a new admin page for our app.
   add_menu_page(
   __( 'My first Gutenberg app', 'gutenberg' ),
   __( 'My first Gutenberg app', 'gutenberg' ),
   'manage_options',
   'my-first-gutenberg-app',
   function () {
   echo '
   <h2>Pages</h2>
   <div id="my-first-gutenberg-app"></div>
   ';
   },
   'dashicons-schedule',
   3
   );
}
add_action( 'admin_menu', 'my_admin_menu' );
function load_custom_wp_admin_scripts( $hook ) {
   // Load only on ?page=my-first-gutenberg-app.
   if ( 'toplevel_page_my-first-gutenberg-app' !== $hook ) {
   return;
   }
   // Load the required WordPress packages.
   // Automatically load imported dependencies and assets version.
   $asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
   // Enqueue CSS dependencies.
   foreach ( $asset_file['dependencies'] as $style ) {
   wp_enqueue_style( $style );
   }
   // Load our app.js.
   wp_register_script(
   'my-first-gutenberg-app',
   plugins_url( 'build/index.js', __FILE__ ),
   $asset_file['dependencies'],
   $asset_file['version']
   );
   wp_enqueue_script( 'my-first-gutenberg-app' );
   // Load our style.css.
   wp_register_style(
   'my-first-gutenberg-app',
   plugins_url( 'style.css', __FILE__ ),
   array(),
   $asset_file['version']
   );
   wp_enqueue_style( 'my-first-gutenberg-app' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_scripts' );

package.json:

{
  "name": "09-code-data-basics-esnext",
  "version": "1.1.0",
  "private": true,
  "description": "My first Gutenberg App",
  "author": "The WordPress Contributors",
  "license": "GPL-2.0-or-later",
  "keywords": [
   "WordPress",
   "block"
  ],
  "homepage": "https://github.com/WordPress/gutenberg-examples/",
  "repository": "git+https://github.com/WordPress/gutenberg-examples.git",
  "bugs": {
   "url": "https://github.com/WordPress/gutenberg-examples/issues"
  },
  "main": "build/index.js",
  "devDependencies": {
   "@wordpress/scripts": "^24.0.0"
  },
  "scripts": {
   "build": "wp-scripts build",
   "format": "wp-scripts format",
   "lint:js": "wp-scripts lint-js",
   "packages-update": "wp-scripts packages-update",
   "start": "wp-scripts start"
  }
}

ビルドパイプラインの設定

このチュートリアルは、読者がESNext構文とビルドツール（webpackなど）の概念に精通していることを前提に進めます。それが混乱を招く場合は、まずJavaScriptビルドセットアップの開始を確認してください。

ビルドツールをインストールするには、ターミナルを使用してプラグインディレクトリに移動し、npm installを実行します。

すべての依存関係が整ったら、残るのはnpm startを実行するだけです。すると、ターミナルでウォッチャーが実行されます。その後、テキストエディタで編集を行うことができ、各保存後に自動的にビルドされます。

動作確認

今、プラグインページに移動すると、My first Gutenberg Appというプラグインが表示されるはずです。これを有効化してください。My first Gutenberg appというラベルの新しいメニュー項目が表示されるはずです。それをクリックすると、Hello from JavaScript!と表示されるページが見えます：

おめでとうございます！これでアプリの構築を始める準備が整いました！

次は何ですか？

• 前の部分: はじめに
• 次の部分: 基本的なページのリストを構築する
• （オプション）完成したアプリをブロック開発の例リポジトリで確認してください