From 18529617abe08862c32082b12723850923b8159a Mon Sep 17 00:00:00 2001 From: Akira Tachibana Date: Tue, 31 Oct 2023 00:24:43 +0900 Subject: [PATCH] Translated Building a Create page form --- .../getting-started-with-code-contribution.md | 4 +- .../4-building-a-create-page-form.md | 97 ++++++++++++++++++- docs/reference-guides/core-blocks.md | 4 +- 3 files changed, 100 insertions(+), 5 deletions(-) diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md index 5af289b6fc1598..bebdbeb13228d1 100644 --- a/docs/contributors/code/getting-started-with-code-contribution.md +++ b/docs/contributors/code/getting-started-with-code-contribution.md @@ -36,8 +36,8 @@ We recommend using the [Node Version Manager](https://github.com/nvm-sh/nvm) (nv > Note: To install Docker on Windows 10 Home Edition, follow the [install instructions from Docker for Windows with WSL2](https://docs.docker.com/docker-for-windows/wsl/). --> - [推奨] Docker Desktop: - ローカルでの WordPress 環境の設定には、[wp-env パッケージ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/)の使用を推奨します。「wp-env」を使用するには、Docker のインストールが必要です。詳細については [開発環境チュートリアル](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/) を参照してください。 - > 注意: Windows 10 Home Edition に Docker をインストールするには、[install instructions from Docker for Windows with WSL2](https://docs.docker.com/docker-for-windows/wsl/) に従ってください。 + ローカルでの WordPress 環境の設定には、[wp-env パッケージ](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/)の使用を推奨します。「wp-env」を使用するには、Docker のインストールが必要です。詳細については [開発環境チュートリアル](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/) を参照してください。
+ **注意**: Windows 10 Home Edition に Docker をインストールするには、[install instructions from Docker for Windows with WSL2](https://docs.docker.com/docker-for-windows/wsl/) に従ってください。 +# ページ作成フォームの構築 + +[前のパート](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/3-building-an-edit-form)では、*ページの編集* 機能を作成しました。このパートでは、*ページの作成* 機能を追加します。これから構築するフォームは以下のようになります。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/create-form-with-text.png) + +### ステップ1: 「Create a new page」ボタンの追加 + +まず、_ページの作成_ フォームを表示するボタンを作成します。これは[パート3](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/3-building-an-edit-form)で作成した _edit_ ボタンと同様です。 ```js import { useDispatch } from '@wordpress/data'; @@ -40,7 +52,10 @@ function CreatePageForm() { ``` + +素晴らしい ! では、`MyFirstApp` で、このピカピカの新しいボタンを表示してみましょう。 ```js function MyFirstApp() { @@ -57,15 +72,27 @@ function MyFirstApp() { } ``` + +次のようになるはずです。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/create-button.png) + +### ステップ2: 制御された PageForm の抽出 + +ボタンを設置したので、フォームの作成に集中できます。このチュートリアルはデータ管理が目的のため、完全なページエディターは作成しません。代わりに、フォームには1つのフィールド「投稿タイトル」のみを含めます。 + +幸運なことに[パート3](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/3-building-an-edit-form)で作成した `EditPageForm` が、全体の80%をすでに達成しています。ユーザーインターフェースの大部分を利用可能で、`CreatePageForm` 内でもこれを再利用します。フォームの UI を別のコンポーネントに抽出することから始めましょう。 ```js function EditPageForm( { pageId, onCancel, onSaveFinished } ) { @@ -122,15 +149,27 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc } ``` + +このコードの変更は、既存のアプリケーションの動作については影響を与えないはずです。念のため、ページを編集してみましょう。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/edit-page-form.png) + +素晴らしい ! 編集フォームはそのままで、新しく `CreatePageForm` を作成する構築要素ができました。 + +### ステップ3: CreatePageForm の構築 + +`CreatePageForm` コンポーネントに残る唯一の作業は、`PageForm` コンポーネントのレンダーに必要な、以下の7つのプロパティの提供です。 * title * onChangeTitle @@ -140,13 +179,21 @@ The only thing that `CreatePageForm` component must do is to provide the followi * onCancel * onSave + +それぞれ見ていきましょう。 #### Title, onChangeTitle, hasEdits + +`EditPageForm` は Redux のステートに存在する既存のエンティティレコードを更新し、保存しました。そのため、`editedEntityRecords` セレクタに依存していました。 + +しかし `CreatePageForm` の場合、既存のエンティティレコードはありません。空のフォームがあるだけです。ユーザーがタイプした内容はフォームに対してローカルのため、React の `useState` フックを使用して追跡できます。 ```js function CreatePageForm( { onCancel, onSaveFinished } ) { @@ -165,19 +212,34 @@ function CreatePageForm( { onCancel, onSaveFinished } ) { #### onSave, onCancel + +`EditPageForm` では、`saveEditedEntityRecord('postType', 'page', pageId )` アクションをディスパッチして、Redux ステート内の編集内容を保存しました。 + +しかし、`CreatePageForm` では、Redux のステートに編集内容はありません。`pageId`もありません。この場合、ディスパッチが必要なアクションは [`saveEntityRecord`](https://developer.wordpress.org/block-editor/reference-guides/data/data-core/#saveentityrecord) (名前に _Edited_ はありません) で、`pageId` の代わりに、新しいエンティティレコードを表すオブジェクトを受け取ります。 + +`saveEntityRecord` に渡されたデータは、適切な REST API エンドポイントへの POST リクエストとして送信されます。例えば、以下のようなアクションをディスパッチします。 ```js saveEntityRecord( 'postType', 'page', { title: "Test" } ); ``` + +[`/wp/v2/pages` WordPress REST API](https://developer.wordpress.org/rest-api/reference/pages/) のエンドポイントに対して、リクエストボディに単一フィールド `title=Test` を指定して、POST リクエストをトリガーします。 + +これで `saveEntityRecord` の詳細が分かったので、`CreatePageForm` 内で使用してみます。 ```js function CreatePageForm( { onSaveFinished, onCancel } ) { @@ -203,7 +265,10 @@ function CreatePageForm( { onSaveFinished, onCancel } ) { } ``` + +もう一つ、詳細を触れなければならない点があります。新規に作成したページは、`PagesList` にまだ登録されていません。REST API のドキュメントによると、`/wp/v2/pages` エンドポイントはデフォルトで `status=draft` のページを作成 (`POST` リクエスト) しますが、`status=publish` のページを _return_ (`GET` リクエスト) します。解決策は `status` パラメータを明示的に渡すことです。 ```js function CreatePageForm( { onSaveFinished, onCancel } ) { @@ -229,13 +294,22 @@ function CreatePageForm( { onSaveFinished, onCancel } ) { } ``` + +この変更をローカルの `CreatePageForm` コンポーネントに適用します。残りの2つのプロパティを片付けましょう。 #### lastError, isSaving + +`EditPageForm` は `getLastEntitySaveError` セレクタと `isSavingEntityRecord` セレクタを使用してエラーと進行状況の情報を取得しました。どちらの場合も、3つの引数 `( 'postType', 'page', pageId )` を渡しました。 + +しかし、`CreatePageForm` には `pageId` がありません。ではどうするか ? id のないエンティティレコードの情報の取得には、`pageId` 引数を省略できます。これが新しく作成されたものになります。結果、`useSelect` の呼び出しは、 `EditPageForm` での呼び出しと非常に似たものになります。 ```js function CreatePageForm( { onCancel, onSaveFinished } ) { @@ -261,15 +335,23 @@ function CreatePageForm( { onCancel, onSaveFinished } ) { ); } ``` - + +以上です ! 新しいフォームは以下のようになります。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/create-saving.png) ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/created-item.png) + +### すべてを一つに + +この章で構築したすべてを一つにまとめます。 ```js function CreatePageForm( { onCancel, onSaveFinished } ) { @@ -381,12 +463,25 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc } ``` + +あとはページを更新してフォームを楽しむだけです。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/create-form-with-text.png) + +## 次のステップ + +* **次のステップ:** [削除ボタンの追加](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/5-adding-a-delete-button) +* **前のステップ:** [編集フォームの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/3-building-an-edit-form/) +* (オプション) gutenberg-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) を参照 + +[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/data-basics/3-building-an-edit-form.md) \ No newline at end of file diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 973f69ad508a42..1878b408620350 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -950,12 +950,12 @@ Display post author details such as name, avatar, and bio. ([Source](https://git -## Author Biography / 投稿者の経歴 +## Author Biography / 投稿者のプロフィール情報 -作者の経歴。([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author-biography)) +投稿者のプロフィール情報。([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author-biography)) - **Name:** core/post-author-biography - **Category:** theme - **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)