diff --git a/docs/README.md b/docs/README.md index 78a08aa4c57411..3be20c0de354da 100644 --- a/docs/README.md +++ b/docs/README.md @@ -311,6 +311,9 @@ Everything you need to know to [start contributing to the block editor](/docs/co ### 主な変更 +2023/11/21 +- [削除ボタンの追加](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/5-adding-a-delete-button/) - 翻訳 + 2023/11/11 - 多数 - JSXを使用しないサンプルの削除 - 多数 - サンプルリポジトリを変更 [block-development-examples](https://github.com/WordPress/block-development-examples) diff --git a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md index 713dc504646ffb..0c1279942b8af9 100644 --- a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md +++ b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md @@ -184,8 +184,6 @@ registerBlockType( 'gutenberg-examples/example-dynamic', { ``` diff --git a/docs/how-to-guides/data-basics/1-data-basics-setup.md b/docs/how-to-guides/data-basics/1-data-basics-setup.md index 8b8cea055dc854..c844f4f7ce5074 100644 --- a/docs/how-to-guides/data-basics/1-data-basics-setup.md +++ b/docs/how-to-guides/data-basics/1-data-basics-setup.md @@ -256,15 +256,15 @@ Congratulations! You are now ready to start building the app! -## 次のステップ +## 次は ? -- 前のステップ: [はじめに](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/) -- 次のステップ: [簡単なページリストの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/2-building-a-list-of-pages) -- (オプション) gutenberg-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 +- 前のパート: [はじめに](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/) +- 次のパート: [簡単なページリストの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/2-building-a-list-of-pages) +- (オプション) block-development-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 [原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/data-basics/1-data-basics-setup.md) diff --git a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md index 24fba902257503..c9a84ee915d167 100644 --- a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md +++ b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md @@ -18,7 +18,7 @@ Let’s see how we can get there step by step. -## ステップ 1: PagesList コンポーネントの構築 +## ステップ1: PagesList コンポーネントの構築 -## ステップ 2: データの取得 +## ステップ2: データの取得 -## ステップ 3: テーブルの中へ +## ステップ3: テーブルの中へ ```js function PagesList( { pages } ) { @@ -211,7 +211,7 @@ function PagesList( { pages } ) { -## ステップ 4: 検索ボックスの追加 +## ステップ4: 検索ボックスの追加 -## ステップ 5: インジケータのロード +## ステップ5: インジケータのロード -## 次のステップ +## 次は ? -* **前のステップ:** [セットアップ](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/1-data-basics-setup) -* **次のステップ:** [編集フォームの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/3-building-an-edit-form) -* (オプション) gutenberg-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 +* **前のパート:** [セットアップ](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/1-data-basics-setup) +* **次のパート:** [編集フォームの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/3-building-an-edit-form) +* (オプション) block-development-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 [原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md) diff --git a/docs/how-to-guides/data-basics/3-building-an-edit-form.md b/docs/how-to-guides/data-basics/3-building-an-edit-form.md index 969a874b448085..4e752a0abf8a8b 100644 --- a/docs/how-to-guides/data-basics/3-building-an-edit-form.md +++ b/docs/how-to-guides/data-basics/3-building-an-edit-form.md @@ -13,7 +13,7 @@ This part is about adding an *Edit* feature to our app. Here's a glimpse of what -### ステップ 1: 「編集」ボタンの追加 +### ステップ1: 「編集」ボタンの追加 -### ステップ 2: 「編集」フォームの表示 +### ステップ2: 「編集」フォームの表示 -### ステップ 3: フォームへのページの詳細の挿入 +### ステップ3: フォームへのページの詳細の挿入 -### ステップ 4: ページのタイトルフィールドを編集可能に +### ステップ4: ページのタイトルフィールドを編集可能に -### ステップ 5: フォームデータの保存 +### ステップ5: フォームデータの保存 -### ステップ 6: エラー処理 +### ステップ6: エラー処理 -### ステップ 7: ステータスインジケータ +### ステップ7: ステータスインジケータ -## 次のステップ +## 次は ? -* **前のステップ:** [ページリストの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/2-building-a-list-of-pages) -* **次のステップ:** 新規ページフォームの構築 (近日公開) -* (オプション) gutenberg-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 +* **前のパート:** [ページリストの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/2-building-a-list-of-pages) +* **次のパート:** 新規ページフォームの構築 (近日公開) +* (オプション) block-development-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 [原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/data-basics/3-building-an-edit-form.md) diff --git a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md index 1ccef1a9f8a753..cf6f6cedd368cb 100644 --- a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md +++ b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md @@ -473,15 +473,15 @@ All that’s left is to refresh the page and enjoy the form: -## 次のステップ +## 次は ? -* **次のステップ:** [削除ボタンの追加](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/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 +* **次のパート:** [削除ボタンの追加](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/) +* (オプション) block-development-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 [原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/data-basics/3-building-an-edit-form.md) diff --git a/docs/how-to-guides/data-basics/5-adding-a-delete-button.md b/docs/how-to-guides/data-basics/5-adding-a-delete-button.md index e0a0b0d1e93370..4176bb4e247311 100644 --- a/docs/how-to-guides/data-basics/5-adding-a-delete-button.md +++ b/docs/how-to-guides/data-basics/5-adding-a-delete-button.md @@ -1,16 +1,32 @@ + +# 削除ボタンの追加 + +[前のパート](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/4-building-a-create-page-form/)では、新しいページの作成機能を追加しました。このパートではアプリケーションに「削除」機能を追加します。 + +これから構築する機能は以下のようになります。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/delete-button/delete-button.png) + +### ステップ1: 「削除」ボタンの追加 + +まず `DeletePageButton` コンポーネントを作成し、`PagesList` コンポーネントのユーザーインターフェースを更新します。 + +```js +import { Button } from '@wordpress/components'; +import { decodeEntities } from '@wordpress/html-entities'; + +const DeletePageButton = () => ( + +) + +function PagesList( { hasResolved, pages } ) { + if ( ! hasResolved ) { + return ; + } + if ( ! pages?.length ) { + return
No results
; + } + + return ( + + + + + + + + + { pages?.map( ( page ) => ( + + + + + ) ) } + +
TitleActions
{ decodeEntities( page.title.rendered ) } +
+ + {/* ↓ 以下が PagesList コンポーネント内で唯一の変更 */} + +
+
+ ); +} +``` + + +これで PagesList は以下のようになります。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/delete-button/delete-button.png) + +### ステップ2： ボタンと削除アクションの接続 + +Gutenberg のデータでは、WordPress REST APIから `deleteEntityRecord` アクションを使用してエンティティレコードを削除します。アクションはリクエストを送信し、結果を処理し、Redux ステート内にキャッシュされたデータを更新します。 + +以下はブラウザの開発ツール内でエンティティレコードの削除を試す方法です。 + + +```js +// deleteEntityRecord を呼び出すには有効なページ ID が必要。getEntityRecords を使用して最初の利用可能なページ ID を取得する。 +const pageId = wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )[0].id; + +// そのページを削除する。 +const promise = wp.data.dispatch( 'core' ).deleteEntityRecord( 'postType', 'page', pageId ); + +// API リクエストの成功または失敗により、promise は resolved または rejected を取得する。 ``` + +REST API リクエストが終了すると、ページの一つがリストから消えていることが分かります。これは、そのリストが `useSelect()` フックと `select( coreDataStore ).getEntityRecords( 'postType', 'page' )` セレクタによって生成されているためです。ベースとなるデータが変更されるたびに、リストは新しいデータで再レンダーされます。これはかなり便利です ! + +`DeletePageButton` がクリックされたときに、アクションをディスパッチします。 ```js const DeletePageButton = ({ pageId }) => { @@ -92,11 +184,20 @@ const DeletePageButton = ({ pageId }) => { } ``` + +### ステップ3： 視覚的なフィードバックの追加 + +「Delete」ボタンをクリックした後、REST API リクエストが終了するまで少し時間がかかるかもしれません。このチュートリアルの以前のパートで実行したのと同様に、`` コンポーネントでそれを伝えます。 + +これには `isDeletingEntityRecord` セレクタが必要です。このセレクタは[パート3](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/3-building-an-edit-form/)で紹介した `isSavingEntityRecord` セレクタに似ています。`true` または `false` を返しますが、決して HTTP リクエストは発行しません。 ```js const DeletePageButton = ({ pageId }) => { @@ -119,28 +220,54 @@ const DeletePageButton = ({ pageId }) => { ); } ``` - + +実際の動作の様子です。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/delete-button/deleting-in-progress.png) + +### ステップ4： エラー処理 + +ここまでは楽観的に「削除」操作は常に成功すると仮定しました。しかし、残念ながら実際には REST API リクエストは、さまざまな理由で失敗します。 + +* ウェブサイトはダウンする可能性がある。 +* 削除リクエストは正しくないかもしれない。 +* ページは処理中に誰かに削除されるかもしれない。 + +こうしたエラーが発生した際にユーザーに伝えるには、`getLastEntityDeleteError` セレクタを使用して、エラー情報を取り出す必要があります。 + +```js +// 「9」を実際のページ ID で置換すること +wp.data.select( 'core' ).getLastEntityDeleteError( 'postType', 'page', 9 ) ``` + +これを以下のように `DeletePageButton` に適用します。 + +```js +import { useEffect } from 'react'; +const DeletePageButton = ({ pageId }) => { + // ... + const { error, /* ... */ } = useSelect( + select => ( { + error: select( coreDataStore ).getLastEntityDeleteError( 'postType', 'page', pageId ), + // ... + } ), + [pageId] + ); + useEffect( () => { + if ( error ) { + // エラーの表示 + } + }, [error] ) + // ... +} +``` + + +`error` オブジェクトは `@wordpress/api-fetch` から来たもので、エラーに関する情報を含みます。以下のプロパティを持ちます。 + +* `message` - `Invalid post ID` のような人間が読めるエラーメッセージ。 +* `code` - `rest_post_invalid_id` のような文字列ベースのエラーコード。すべてのエラーコードを調べるには、[`/v2/pages` エンドポイントのソースコード](https://github.com/WordPress/wordpress-develop/blob/2648a5f984b8abf06872151898e3a61d3458a628/src/wp-includes/rest-api/endpoints/class-wp-rest-revisions-controller.php#L226-L230) を参照する必要があります。 +* `data` (オプション) - エラーの詳細。失敗したリクエストの HTTP レスポンスコードを含む `code` プロパティを含む。 + +このオブジェクトをエラーメッセージに変換する多くの方法がありますが、このチュートリアルでは `error.message` を表示します。 + +WordPress ではステータス情報を表示するパターンが確立されており、`Snackbar` コンポーネントを使用します。たとえば **ウィジェットエディター**では、以下のようになります。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/delete-button/snackbar-example.png) + +同じタイプの通知をプラグインで使用しましょう。これには2つのパートがあります。 + +1. 通知の表示 +2. 通知のディスパッチ + +#### 通知の表示 + +アプリケーションはページを表示する方法のみを知っていて、通知を表示する方法は知りません。それを教えてあげましょう ! + +便利なことに WordPress では、通知のレンダーに必要なすべての React コンポーネントが提供されています。[`Snackbar` コンポーネント](https://wordpress.github.io/gutenberg/?path=/story/components-snackbar--default)は、単一の通知を表現します。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/delete-button/snackbar.png) + +しかし、`Snackbar` は直接使わず、`SnackbarList` コンポーネントを使用します。`SnackbarList` コンポーネントはスムーズなアニメーションで複数の通知を表示し、数秒後に自動的に消えます。実際、WordPress ではウィジェットエディターやその他の管理画面のページで同じコンポーネントを使用しています。 + +それでは独自の `Notifications` コンポーネントを作成します。 + +```js +import { SnackbarList } from '@wordpress/components'; +import { store as noticesStore } from '@wordpress/notices'; + +function Notifications() { + const notices = []; // すぐにここに戻ってきます ! + + return ( + + ); +} ``` + +基本的な構造はできていますが、レンダーする通知のリストが空です。どうすればいいのでしょうか ? WordPressと同じパッケージ [`@wordpress/notices`](https://github.com/WordPress/gutenberg/blob/895ca1f6a7d7e492974ea55f693aecbeb1d5bbe3/docs/reference-guides/data/data-core-notices.md) に頼ってみましょう。 + +以下がその方法です。 ```js import { SnackbarList } from '@wordpress/components'; @@ -243,14 +450,27 @@ function MyFirstApp() { } ``` + +このチュートリアルはページの管理に重点を置いているため、上のスニペットについては詳しく説明しません。もし `@wordpress/notices` の詳細に興味があれば、[ハンドブックページ](https://developer.wordpress.org/block-editor/reference-guides/data/data-core-notices/) から始めると良いでしょう。 + +これで、発生した可能性のあるエラーをユーザーに伝える準備ができました。 + +#### 通知のディスパッチ + +SnackbarNotices コンポーネントを配置し、いくつかの通知をディスパッチする準備が整いました。以下がその方法です。 + +```js +import { useEffect } from 'react'; +import { store as noticesStore } from '@wordpress/notices'; +function DeletePageButton( { pageId } ) { + const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); + // コールバックの代わりにストアハンドルを渡すと、useSelect はセレクタのリストを返す: + const { getLastEntityDeleteError } = useSelect( coreDataStore ) + const handleDelete = async () => { + const success = await deleteEntityRecord( 'postType', 'page', pageId); + if ( success ) { + // 操作が成功したことをユーザーに伝える: + createSuccessNotice( "The page was deleted!", { + type: 'snackbar', + } ); + } else { + // deleteEntityRecord が失敗した*後で*、直接セレクタを使用して新しいエラーを取得する。 + const lastError = getLastEntityDeleteError( 'postType', 'page', pageId ); + const message = ( lastError?.message || 'There was an error.' ) + ' Please refresh the page and try again.' + // 具体的にどのように操作に失敗したかをユーザーに伝える: + createErrorNotice( message, { + type: 'snackbar', + } ); + } + } + // ... +} +``` + +素晴らしい ! これで `DeletePageButton` は、完全にエラーを認識するようになりました。エラーメッセージを実際に見てみましょう。無効な削除をトリガーして失敗させます。これを行う1つの方法として、`pageId` に大きな数を掛けます。 ```js function DeletePageButton( { pageId, onCancel, onSaveFinished } ) { @@ -290,22 +540,41 @@ function DeletePageButton( { pageId, onCancel, onSaveFinished } ) { } ``` + +ページを更新し、「Delete」ボタンをクリックすると、次のようなエラーメッセージが表示されるはずです。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/delete-button/snackbar-error.png) + +最高です ! では、`pageId = pageId * 1000;` の行を削除しましょう。 + +そして、実際にページを削除してみます。ブラウザをリフレッシュして「Delete」ボタンをクリックすると、以下のように表示されます。 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/delete-button/snackbar-success.png) + +以上です。 + +### すべてをひとつに + +これですべてのピースがそろいました。この章で行ったすべての変更が以下になります。 + +```js +import { useState, useEffect } from 'react'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { Button, Modal, TextControl } from '@wordpress/components'; + +function MyFirstApp() { + const [searchTerm, setSearchTerm] = useState( '' ); + const { pages, hasResolved } = useSelect( + ( select ) => { + const query = {}; + if ( searchTerm ) { + query.search = searchTerm; + } + const selectorArgs = ['postType', 'page', query]; + const pages = select( coreDataStore ).getEntityRecords( ...selectorArgs ); + return { + pages, + hasResolved: select( coreDataStore ).hasFinishedResolution( + 'getEntityRecords', + selectorArgs, + ), + }; + }, + [searchTerm], + ); + + return ( +
+
+ + +
+ + +
+ ); +} + +function SnackbarNotices() { + const notices = useSelect( + ( select ) => select( noticesStore ).getNotices(), + [] + ); + const { removeNotice } = useDispatch( noticesStore ); + const snackbarNotices = notices.filter( ( { type } ) => type === 'snackbar' ); + + return ( + + ); +} + +function PagesList( { hasResolved, pages } ) { + if ( !hasResolved ) { + return ; + } + if ( !pages?.length ) { + return
No results
; + } + + return ( + + + + + + + + + { pages?.map( ( page ) => ( + + + + + ) ) } + +
TitleActions
{ page.title.rendered } +
+ + +
+
+ ); +} + +function DeletePageButton( { pageId } ) { + const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); + // コールバックの代わりにストアハンドルを渡すと、useSelect はセレクタのリストを返す: + const { getLastEntityDeleteError } = useSelect( coreDataStore ) + const handleDelete = async () => { + const success = await deleteEntityRecord( 'postType', 'page', pageId); + if ( success ) { + // 操作が成功したことをユーザーに伝える: + createSuccessNotice( "The page was deleted!", { + type: 'snackbar', + } ); + } else { + // この時点で、直接セレクタを使用してエラーを取得する。 + // 仮に、以下のようにエラーをフェッチしたとする。 + // const { lastError } = useSelect( function() { /* ... */ } ); + // このとき lastError は handleDelete 内部で null になる。 + // 何故か ? それは handleDelete の呼び出しまえに計算されたバージョンを参照するため。 + const lastError = getLastEntityDeleteError( 'postType', 'page', pageId ); + const message = ( lastError?.message || 'There was an error.' ) + ' Please refresh the page and try again.' + // 具体的にどのように操作に失敗したかをユーザーに伝える: + createErrorNotice( message, { + type: 'snackbar', + } ); + } + } + + const { deleteEntityRecord } = useDispatch( coreDataStore ); + const { isDeleting } = useSelect( + select => ( { + isDeleting: select( coreDataStore ).isDeletingEntityRecord( 'postType', 'page', pageId ), + } ), + [ pageId ] + ); + + return ( + + ); +} +``` + + +## 次は ? + +* **前のパート:** [ページ作成フォームの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/4-building-a-create-page-form/) +* (オプション) block-development-examples リポジトリ内の [完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) を参照 + +[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/data-basics/5-adding-a-delete-button.md) \ No newline at end of file diff --git a/docs/how-to-guides/data-basics/README.md b/docs/how-to-guides/data-basics/README.md index 5d23fca7e10b44..d8b2bdefa3db2c 100644 --- a/docs/how-to-guides/data-basics/README.md +++ b/docs/how-to-guides/data-basics/README.md @@ -13,7 +13,7 @@ This tutorial aims to get you comfortable with the Gutenberg data layer. It guid -gutenberg-examplesリポジトリで、[完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8)を確認できます。 +block-development-examples リポジトリで、[完成したアプリ](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8)を確認できます。 セットアップのリファレンスとして、[完全な書式 API サンプル](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/format-api-f14b86) を参照してください。 diff --git a/docs/how-to-guides/javascript/js-build-setup.md b/docs/how-to-guides/javascript/js-build-setup.md index 3e39a96d62dd82..c523cab8e96ca3 100644 --- a/docs/how-to-guides/javascript/js-build-setup.md +++ b/docs/how-to-guides/javascript/js-build-setup.md @@ -51,13 +51,11 @@ ESNext を使用し、さらに追加の変換手順を実行するのにはい ## クイックスタート -すぐに始めたいという方は以下の手順を省略し、[Block Development Examples リポジトリー](https://github.com/wordpress/block-development-examples/) のサンプルを使用してください。Examples リポジトリーのそれぞれのサンプルの `-esnext` ディレクトリ下に ESNext や JSX の動作に必要なファイルが含まれています。 +すぐに始めたいという方は以下の手順を省略し、[Block Development Examples リポジトリ](https://github.com/wordpress/block-development-examples/) のサンプルを使用してください。Examples リポジトリーのそれぞれのサンプルの `-esnext` ディレクトリ下に ESNext や JSX の動作に必要なファイルが含まれています。 -完全なサンプルについては [blocks in the block-development-examples リポジトリ](https://github.com/WordPress/block-development-examples) を参照してください。 +完全なサンプルについては [block-development-examples リポジトリ内のブロック](https://github.com/WordPress/block-development-examples) を参照してください。 これで `npm run build` と実行すると、構成済みのすべてのデフォルトの webpack 、たとえばフォーマットや lint を実行してプロジェクトをビルドします。`start` コマンドは開発モードで使用します。完全なドキュメントについては [`@wordpress/scripts` パッケージ](https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/README.md)を参照してください。 diff --git a/docs/japanese-changelog.md b/docs/japanese-changelog.md index 210573a23fad73..1beb9efc008b95 100644 --- a/docs/japanese-changelog.md +++ b/docs/japanese-changelog.md @@ -2,6 +2,9 @@ 翻訳の進捗や、最新の英語版で同期した際に気づいた箇所をメモしています。 +2023/11/21 +- [削除ボタンの追加](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/5-adding-a-delete-button/) - 翻訳 + 2023/11/11 - 多数 - JSXを使用しないサンプルの削除 - 多数 - サンプルリポジトリを変更 [block-development-examples](https://github.com/WordPress/block-development-examples)