From bd8a5f54d8e15fe599736464227ffa5fab1c282c Mon Sep 17 00:00:00 2001 From: Akira Tachibana Date: Wed, 22 Nov 2023 09:07:38 +0900 Subject: [PATCH] Translated Block Supports. Fixed minor typos --- docs/README.md | 1 + .../block-supports-in-static-blocks.md | 33 ++++++++++++++++++- .../writing-your-first-block-type.md | 2 +- docs/japanese-changelog.md | 1 + .../block-api/block-variations.md | 4 +-- 5 files changed, 37 insertions(+), 4 deletions(-) diff --git a/docs/README.md b/docs/README.md index 3be20c0de354d..ceef83589bfa2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -313,6 +313,7 @@ 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/) - 翻訳 +- [ブロックサポート](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/block-supports-in-static-blocks/) - 翻訳 2023/11/11 - 多数 - JSXを使用しないサンプルの削除 diff --git a/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md b/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md index 47fa3a86b75eb..ec6e1ba757d26 100644 --- a/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md +++ b/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md @@ -1,13 +1,27 @@ + +# ブロックサポート + +コアブロックを含む多くのブロックには、同じようなカスタマイズオプションがあります。たとえば背景色の変更、文字色の変更、パディングの追加、マージンのカスタマイズオプション等々。 + +ブロックの中で同じロジックを何度も何度も繰り返すのを避け、ブロックの動作をコアブロックに合わせるには、さまざまな `supports` プロパティを利用できます。 + +[前の章](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/) (例3) で作成したブロックを、たった1行のコードで、テキスト、リンク、背景色のカスタマイズに対応します。 + +以下は、前の章でブロックを登録するのに使用したコードとまったく同じものです。 ```jsx import { registerBlockType } from '@wordpress/blocks'; @@ -62,7 +76,10 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', { } ); ``` + +では、ブロックの block.json ファイルを変更し、サポートキーを追加します。(block.json ファイルを使用していない場合は、`registerBlockType` 関数呼び出しにキーを追加できます) ```json { @@ -82,11 +99,25 @@ Now, let's alter the block.json file for that block, and add the supports key. ( } ``` + +以上です。上の「supports」キーの追加により、自動的にブロックに以下の変更が加えられます。 + +- ブロックに `style` 属性を追加し、リンク、テキスト、背景の色を保存する。 +- ブロックエディターのサイドバーに「色」パネルを追加し、ユーザーがテキスト、リンク、背景の色を調整できるようにする。 +- 自動的に `theme.json` の構成を使用する。色を無効にしたり、パレットを継承したり... +- ユーザーが色を変更したときに、自動的に適切なスタイルを注入し、それらをブロックラッパーに適用する。 + +ブロックサポートについての詳細と、自身のブロックで有効にできるすべての利用可能なプロパティを見るには、[supports documentation](/docs/reference-guides/block-api/block-supports.md) を参照してください。 + +[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md) \ No newline at end of file diff --git a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md index 10654290cc6a9..79f84fd4b702f 100644 --- a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md +++ b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md @@ -34,7 +34,7 @@ This guide takes you through creating a basic block to display a message in a po -ブロックには大きく分けて静的ブロックとダイナミックブロックがありますが、このガイドでは静的ブロックに焦点を当てます。静的ブロックは、HTML コンテンツを投稿に挿入し、投稿と一緒に保存するために使用されます。ダイナミックブロックは、フロントエンドでレンダーれる際に、その場でコンテンツを構築します。[ダイナミックブロックガイド](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/)を参照してください。 +ブロックには大きく分けて静的ブロックとダイナミックブロックがありますが、このガイドでは静的ブロックに焦点を当てます。静的ブロックは、HTML コンテンツを投稿に挿入し、投稿と一緒に保存するために使用されます。ダイナミックブロックは、フロントエンドでレンダーされる際に、その場でコンテンツを構築します。[ダイナミックブロックガイド](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/)を参照してください。 -これを解決するには `isDefault` でバリエーションを登録する前に、他のバリエーションの登録を解除します。この解決策、前述した、バリエーションには常に一意の `name` をつける推奨を裏付けるものです。一意の名前でなければ、バリエーションを登録解除できません。 +これを解決するには `isDefault` でバリエーションを登録する前に、他のバリエーションの登録を解除します。この解決策は前述した推奨「バリエーションには常に一意の `name` をつける」を裏付けるものです。一意の名前でなければ、バリエーションを登録解除できません。 -両方のバリエーションの `isActive` チェックでは `textColor` がテストされますが、それぞれのバリエーションでは `vivid-red` が使用されます。`paragraph-red` バリエーションが最初に登録されるため、`paragraph-red-grey` バリエーションがエディタに挿入されると、タイトルは `Red/Grey Paragraph` ではなく、`Red Paragraph` になります。エディターは一致するものを見つけるとすぐにチェックをやめます。 +両方のバリエーションの `isActive` チェックでは `textColor` がテストされますが、それぞれのバリエーションでは `vivid-red` が使用されます。`paragraph-red` バリエーションが最初に登録されるため、`paragraph-red-grey` バリエーションがエディターに挿入されると、タイトルは `Red/Grey Paragraph` ではなく、`Red Paragraph` になります。エディターは一致するものを見つけるとすぐにチェックをやめます。