日本語翻訳に関する情報については後半を参照してください。
ブロックエディターハンドブックへようこそ。
ブロックエディターは、WordPress のサイト構築と公開のためのモダンなパラダイムです。コンテンツの構成とフォーマットに、「ブロック」によるモジュラーシステムを採用しウェブサイトやデジタル製品用の、リッチでフレキシブルなレイアウト作成を念頭に設計されています。
ブロックエディターは下図に示すいくつかの主要な要素で構成されています。
ハイライトされている要素は、
- インサーター: コンテンツキャンバス内にブロックを挿入するためのパネル
- コンテンツキャンバス: コンテンツエディター。ブロックで作成されたコンテンツを保持
- 設定パネル: ブロックが選択された際のブロックの設定や、投稿の設定を構成するパネル
ブロックエディターではブロックを使用して、モジュール的にコンテンツを作成します。WordPress ではデフォルトで多くのブロックを利用でき、また自分でも作成できます。
ブロックは、段落、見出し、メディア、埋め込みなどの個別の要素です。各ブロックは独立した要素として扱われ、個別の編集や書式の制御が可能です。これらの要素をすべてつなぎ合わせて固定ページや投稿のコンテンツとなり、WordPress のデータベースに保存されます。
ブロックエディターは、WordPress の編集体験に革命を起こすことを目的とした Gutenberg プロジェクトで行われた作業の成果です。
ブロックエディターはビジュアルコンテンツ作成ツールを介して、拡張された編集体験を提供するだけでなく、豊富な API 機能セットによって、無数の方法で操作、拡張できる強力な開発者プラットフォームです。
ハンドブックの歩き方
このハンドブックはブロック開発に焦点を当てていて、大きく5つのセクションに分かれます。
- はじめに: これからブロック開発を始める方はこのセクションで開発環境をセットアップし、ブロック開発の基本原理 を学習できます。クイックスタートガイド、およびチュートリアル: はじめてのブロック作成は、ブロック開発の学習を始めるにあたっての素晴らしいスタート地点です。
- 開発ガイド: 「はじめに」のセクションで学んだことをベースに、特定の問題の解決方法を学びます。チュートリアルやプロジェクト内で再利用可能なサンプルコードも含まれます。例えば、WordPress のデータの操作 や ユーザーインターフェースの制限 など。
- リファレンスガイド: このセクションがこのハンドブックの心臓部です。作業中あるいは調査中に細かな部分まで調べたり、特定の API の詳細を調べる際に利用できます。ブロック API リファレンス は、ブロックで実行したいほぼすべてのトピックをカバーしています。また、各 コンポーネント と パッケージ もここでドキュメント化されています。なおコンポーネントは、Storybook 経由でもドキュメント化されています。
- コントリビュータガイド: Gutenbergはオープンソースソフトウェアであり、誰でもこのプロジェクトに貢献できます。このセクションではコード、デザイン、ドキュメント、その他の貢献方法を詳しく説明します。
その他の情報
このハンドブックは、ブロック開発に関連するすべての情報の正規のリソースです。しかし、他にも参考になる資料があります。
- WordPress 開発者ブログ: ここにはブロック開発に関連する特定のトピックやさまざまなユースケースをカバーする技術記事が日々アップされています。また WordPress の最新動向を知るための優れたリソースでもあります。
- Learn WordPress: 学習リソースのための WordPress ハブです。コースには「Introduction to Block Development: Build your first custom block (ブロック開発入門: 最初のカスタムブロックを構築する)」、「Converting a Shortcode to a Block (ショートコードをブロックに変換する)」、「Using the WordPress Data Layer (WordPress データレイヤーの使用)」など。
- WordPress.tv: WordPress コミュニティが監修した WordPress 関連動画のハブです。WordCamp でのセッションからオンラインワークショップの録画まで。ブロック開発やブロックエディターの学習に役立つ情報も見つかるはずです。
- Gutenberg リポジトリ: ブロックエディタープロジェクトの開発は、この GitHub リポジトリで行われています。このリポジトリには
block-library(コアブロック) やcomponents(共通 UI 要素) などの興味深いパッケージのコードが含まれています。block-development-examples リポジトリも有用なリファレンスです。 - エンドユーザードキュメント: エンドユーザー (開発者でなく) をターゲットとしたドキュメントサイト。ここにはブロックエディターやブロックの操作に関するドキュメントがあります。
正しいハンドブックを見ていますか ?
ブロックエディターハンドブックは、ブロックエディター用の作成、開発を目指しているしかし、Developer Resourcesには、他にも複数の有益なハンドブックが用意されていることに留意してください：
- Theme Handbook
- Plugin Handbook
- Common APIs Handbook
- Advanced Administration Handbook
- REST API Handbook
- Coding Standards Handbook
ブロックエディターハンドブック日本語版
問い合わせ先
ブロックエディターハンドブックの内容やサンプルへのコメント、問題報告は Gutenberg GitHub リポジトリ へお願いします。
日本語訳については 日本語版リポジトリ、または WordPress の 日本語 Slack 内の #docs チャンネルへお願いします。
参照
ブロックエディターハンドブック日本語版翻訳者
| GitHub Username | WordPress.org Username |
|---|---|
| @naokomc | @nao |
| @ixkaito | @ixkaito |
| @ryo-utsunomiya | |
| @mypacecreator | @mypacecreator |
| @takepo | @taisuke |
| @atachibana | @atachibana |
| @miminari | @mimitips |
| @shizumi | @Shizumi |
| @arm-band | @armband |
| @kurudrive | @kurudrive |
| @t-hamano | @wildworks |
| @tecking | @tecking |
| @s56bouya | @s56bouya |
| @qoorus | @qoorus |
| @fumikito | @takahashi_fumiki |
主な変更
2025/3/29
- Styles in the Editor – __experimentalSkipSerialization に戻す #68163
- プラグイン用サイドバー – PluginSidebar を @wordpress/editor に移動 #60815
- theme.json – 要素疑似セレクタに:focus-visibleを追加 #68521
- 登録 – ブロックフックは静的テーマ要素のみをサポートという注釈を削除 #65455
- バリエーション – PHP でのバリエーション登録 #63182
- コアブロックリファレンス – 結果なし Ancestor #48348、投稿テンプレート Ancestor #67657、margin と spacing #64425、クエリー総数 追加 #67629、interactivity #69661、詳細 allowedBlocks #68489、name #56971、placeholder #68917、RSS color #66419、spacing #66411、openInNewTab #69641、固定ページリスト color #66430、コンテンツ color.heading #67783、カテゴリー color #68686、アーカイブ color #68685、ソーシャルアイコン html 削除 #69374、アバターなど filter.duotone #58241、目次 maxLevel #69063
- API リファレンス – withSyncEvent #68097、splitTask #69602
- 外部プロジェクトテンプレート – プラグインヘッダーと readme の追加 #68193
- @wordpress/env – phpMyAdmin サポート #67588、#68125、マルチサイトサポート #68792、lifecycleScripts #68724
2024/12/5
- エディター内のブロックなど多数 – __nextHasNoMarginBottom, __next40pxDefaultSize #66745
- クエリーループブロックの拡張 – format、parents の追加 #67529
- エディター機能の無効化 – 見出しレベルの管理 #66076
- Bindings – 新規
- API リファレンス – getServerContext、getServerState #66104
- グローバルステート、ローカルコンテキスト、派生ステートの理解 – getServerContext、getServerState #66104
- コアブロックリファレンス – カバー sizeSlug #62926、コンテンツ margin #66366、詳細 anchor #66734、固定ページリスト spacing #66385、区切り tagName #67530
2024/10/11
- Interactivity API について – 翻訳
- よくある質問 – 翻訳
- コアコンセプト – 翻訳
2024/9/29
- スタイルとスタイルシートの利用 – css/scss のインポートの注記 #61252
- API バージョン – iframe の条件 #65375
- block.json のメタデータ – PHPによるバリエーションリスト #62092 コアブロックリファレンス – 画像 blob #63076、margin #63546、動画 blob #63238、音声 blob #63257、ファイル blob #63282、グループ shadow #63295、ターム一覧 label, showLabel #56364、引用 margin, padding #63545、align #64188、ボタン color, padding #63538、検索 margin #63547、最新のコメント color #63419、見出し levelOptions #63535、ログイン / ログアウト color #63550、サイトのキャッチフレーズ levelOptions #64113、サイトのタイトル levelOptions #64111、クエリータイトル levelOptions #64107、コメントタイトル levelOptions #64103、タイトル levelOptions #64106、リスト 説明 #64025、リスト項目 説明 #64025、anchor #48758、タグクラウド 説明 #64151、 サブメニュー typography #65060、カテゴリー一覧 -> ターム一覧 #65272
- Interactivity API リファレンス – interactivity の追加 #64061
- Core Concepts – 新規
- Server-side rendering: Processing directives on the server – 新規
- The Reactive and Declarative mindset – 新規
- Understanding global state, local context and derived state – 新規
- Using TypeScript – 新規
- Interactivity API FAQ – Alpine vs Prect #63593
- API リファレンス – getContext の名前空間引数 #63411、wp_interactivity_state #64356
- SlotFill リファレンス – 条件付きのレンダー #64807
- theme.json リファレンス – background backgroundAttachment #61382、構成変更 #63591、#63868
2024/7/7
- エディター機能の無効化 – RichText の例 #63065
- theme.json – spacing の説明の削除 #61842、editor-spacing-sizes #62252
- サポート – splitting #63016
- バリエーション – isActive でのドット表記 #62088、getActiveBlockVariation の戻り値 #62031、Version 6.6の変更明記 #62399
- SlotFill リフレンス – サンプル更新 #62271
- コアブロックリファレンス – 詩 background, dimensions #62498、引用 background, dimensions #62497、 投稿コンテンツ background #62499、 リスト項目 color #59892
- Interactivity API Reference – API の追加方法 #63493
- API Reference – wp-on-async #62663、toMainThread -> splitTask #62665 #62759、data-wp-run の ref #62835、data-wp-class ではケバブ #62817
- theme.json – defaultSpacingSizes #61842、グローバルスタイル background #60100
- theme.json の新しいバージョンへの移行 – defaultSpacingSizes #61842
- @wordpress/env – mysqlPort #61057
2024/5/26
- TOP – 全面改訂 #58652、sidebar -> panel #57546
- Coding Guidelines – className -> clsx #61138、process.env -> globalThis #61486
- End-to-End Testing – playwright キーワード削除 #60376
- パフォーマンス – コードバイタルとリファレンスコミット追記 #58927
- はじめに – 全面改訂 #58624
- よくある質問 – キーボードショートカットのリスト削除 #61591
- Static or Dynamic rendering of a block – 校正 #58681
- ブロックコントロール: ブロックツールバーと設定サイドバー – 削除
- ネストしたブロック: InnerBlocks の使用 – allowedBlocks 追加 #58262
- 基本的なブロックの作成 – 削除
- フィルターとフック – エディター設定 #61597、ブロックフィルター #61771
- パターン – theme.json v3 対応 #58409
- theme.json – Version 3 #61221
- フィーチャーフラグ – process.env -> globalThis #61486
- プラグイン用サイドバー – PluginSidebar を @wordpress/editor に移動 #60815
- Propagating updates for block types – reusable block -> synched pattern #58633
- theme.json – aspectRatio #56897、backgroundSize #59165、textAlign #59531、Version 3 #61221、defaultSpacingSizes #61842、editor-spacing-sizes #62252
- テーマサポート – wp-block-styles の明確化 #58915、Version 3 #61221
- block.json のメタデータ – allowedBlocks #58262、viewStyle #56492、viewScriptModule #58731 登録 – allowedBlocks #58262
- サポート – defaultStylePicker 削除 [#58930]、interactivity #59152、background, color.button, color.enableContrastChecker, color.heading, renaming, shadow #59862、textAlign #59531
- バリエーション – isActive 補筆 #60801 #62088
- コアブロックリファレンス – グループ aspectRatio 削除 #58414、ページネーション parent 削除 #58602、interactivity #58132、パターン overrides -> content #58596、カラム、画像 shadow #57982、ancestor #59390、Allowed Blocks #59424、引用 align -> textAlign、メディアとテキスト useFeaturedImage #51491、アイキャッチ画像 shadow #59616、filter #60184、サイトのキャッチコピー label #59654、リスト html 無効化 #55656、ボタン、見出し、リスト項目、段落 splitting #54543、リスト className #56469、カバー shadow #61883
- Interactivity API Reference – 新規
- Quick start guide – 新規
- API Reference – 新規
- About the Interactivity API – 新規
- Frequently Asked Questions – 新規
- SlotFill リフレンス – PluginPostStatusInfo を edit-post から editor へ #60814
- theme.json リファレンス – Version 3 追加 #61221 theme.json バージョン2 リファレンス – 新規
- theme.json v3 – fontFamilies preview 削除 #58395、defaultFontSizes 削除 #58456、backgroundSize #59127 #59165、appearanceTools 説明 #59499、color.caption #60017、textAlign #59531、blockGap & fluid #61024、defaultFontSizes & V3 #58409 #61221、aspectRatios #47271
- theme.json の新しいバージョンへの移行 – defaultFontSizes #58409、V3 #61221
- コンポーネントリファレンス – TypeScript #60350
- @wordpress/create-block – node 20.10.0、npm 10.2.3 #61430
- 外部プロジェクトテンプレート – variants #60095、transformer #60445
2024/1/27
- Documentation Contributions – 動画の追加方法 #58029
- クイックスタートガイド – wp-env セクション追加 #57559、動画追加 #57834
- Static or Dynamic rendering of a block – 新規
- クエリーループブロックの拡張 – key の追加 #58119
- テーマサポート – 外観ツール aspectRatio #56897
- コアブロックリファレンス – ギャラリー randomOrder #57477、アイキャッチ画像 useFirstImageFromPost #56573、検索 buttonBehavior 削除 #53467、投稿ナビゲーションリンク taxonomy #48912、プルクオート spacing #45731、パターン overrides #58102、カバー、グループ aspectRatio #56897、クエリーループ interactivity #58316
- theme.json バージョン2 – typography defaultFontSizes #56661、appearanceTools、dimensions aspectRatio #56897
2024/1/26
- 用語集 – 翻訳
2024/1/24
- チュートリアル: はじめてのブロック作成 – 翻訳
- エディター内のブロック – 翻訳
- ブロックのマークアップ表現 – 翻訳
2023/12/29
- コアブロックリファレンス – グループ backgroundSize #57005
- ユーザーインターフェースのカスタマイズ – 以下のファイルに分割 #57289
- Block Locking API – 新規
- パターン – 新規
- theme.json – 新規
- フィルターとフック – 新規
- エディター機能の無効化 – 新規
2023/12/24
- コードによるコントリビューション入門 – Node.js v20 と npm v10 #56331
- コアブロックリファレンス – グループ backgroundSize #57005
- The block in the Editor – 新規
- Markup representation of a block – 新規
- Tutorial: Build your first block – 新規
- ブロックの作成 チュートリアル – ディレクトリ以下削除 #56931
- 属性と編集可能フィールド – 削除 #57120
- ブロックサポート – 削除 #57120
- ダイナミックブロック内のブロックサポート – 削除 #57120
- WP-CLI を使用したブロックの生成 – 削除 #57120
- ブロックエディターでの JavaScript の使用方法 – ディレクトリ以下削除 #57166
2023/12/22
- ユーザーインターフェースの制限 – 翻訳
- エディターでのアセットのエンキュー – 翻訳
2023/12/2
- Gutenberg Release Process – 対象ブランチの説明 #56183、トラブルシューティング #56436
- wp-scripts 入門 – 例の追加 #56298
- ブロック開発の基本原理 – 翻訳
- ブロックのファイル構成 – 翻訳
- block.json – 翻訳
- ブロックの登録 – 翻訳
- ブロックラッパー – 翻訳
- ブロックエディターでの JavaScript の利用 – 翻訳
- Gutenberg Dataを使用したアプリの作成 – Playgrond のデモ #56292
- サポート – allowCustomContentAndWideSize #56236
- コアブロックリファレンス – 引用 blockGap #56064、allowEditing 削除 #55240、画像 align #55954、interactivity #56143、カスタムリンク renaming 削除 #56425、リスト項目 magin, padding #55874
2023/11/21
- 削除ボタンの追加 – 翻訳
- ブロックサポート – 翻訳
- クイックスタートガイド – 翻訳
- クエリーループブロックの拡張 – 翻訳
- セレクタ – 翻訳
2023/11/11
- 多数 – JSXを使用しないサンプルの削除
- 多数 – サンプルリポジトリを変更 block-development-examples
- ブロックの作成チュートリアル – クイックスタート部分を「クイックスタートガイド」に移動
- クイックスタートガイド – 新規
- コアブロックリファレンス – フォーム内のコンポーネントの自由度を上げる #55758、引用 blockGap #56064、allowEditing 削除 #55240
2023/11/4
- create-block 入門 – 翻訳
- wp-scripts 入門 – 翻訳
2023/11/2
- React Native mobile editor – Appium 2 移行 #55166
- Getting Started for the React Native based Mobile Gutenberg – Appium 2 移行 #55166
- wp-env 入門 – ダイアグラム追加 #55381
- Get started with create-block – 新規
- Get started with wp-scripts – 新規
- ネストしたブロック: InnerBlocks の使用 – デフォルトブロック #55375
- ページ作成フォームの構築 – 翻訳
- theme.json – background: backgroundImage #55376
- コアブロックリファレンス – パターン、ナビゲーション、パターンプレースホルダー、テンプレートパーツ renaming 削除 #54426、フォーム、フォーム入力フィールド、フォーム送信通知、フォーム送信ボタン experimental #55187、タームの説明 コアでも利用可 #55669
2023/10/8
- Getting Started for the React Native based Mobile Gutenberg – Demo editor setup #54957
- ブロック開発環境 – 全面改定 #54395
- Node.js 開発環境 – 「開発環境」から分離、補筆 #54395
- wp-env 入門 – 「開発環境」から分離、補筆 #54395
- How to setup local WordPress environment on Ubuntu – 削除
- フルサイト編集 – 削除
- プラグイン用サイドバー – @wordpress/element を react で置換 #54908
- コアブロックリファレンス – ナビゲーション ariaLabel #54418、見出し __unstablePasteTextInline #54301、カバー isUserOverlayColor #54054、ログイン / アウト spacing #45147、フォーム、入力フィールド、フォーム送信通知、フォーム送信ボタン #44214、脚注 inserter 削除 #55058
- コンポーネントリファレンス – tooltip は popver を使わない #54707
2023/9/19
- トップページ – よくある質問、Glossary の位置をはじめにに #54117、#54120
- デザインのコントリビューション – ロゴ追加、Future Opportunities 削除 #51065
- Design > Reference – 削除 Triage – 全面改訂 #54258
- History – 改訂 #54314
- はじめに – 改定 #54314
- カスタムブロックエディターの構築 – BlockCanvas 追加 #54149
- Enqueueing assets in the Editor – 全面改訂 #54125
- 属性 – multiline 削除 #54310
- block.json のメタデータ – ブロックフック #54293
- 登録 – ブロックフック #54293
- コアブロックリファレンス – ボタン tagName, type #54206、ファイル、ナビゲーション、検索 interactivity #54297、#53343、グループ background #53934、コンテンツ blockGap #54282、画像 behaviors 削除 #53851、lightbox #54509、見出し __unstablePasteTextInline #54301、ナビゲーション ariaLabel #54418
- theme.json – background #53934、behaviors 削除 #538551、lightbox #54509
2023/9/4
- コードによるコントリビューション入門 – Node v16 & npm v8 #53912
- ネストしたブロック: InnerBlocks の使用 – parent、ancester の説明を改定 #53855
- 基本的なブロックの作成 – プロジェクトの作成を追加 #53689
- カスタムブロックエディターの構築 – Popover.Slot 削除 #53889、ObserveTyping 削除 #53875、SlotFillProvider 削除 #53940
- Enqueueing assets in the Editor – 新規
- block.json のメタデータ – render.php の例 #53973
- バリエーション – 全面改訂 #53817
- コアブロックリファレンス – ブロック名から post 削除 #53492、ページ番号 midSize #51216、クエリーループ enhancedPagination #53812、グループ button #53667、カラム button、heading #54104
2023/8/14
- Gutenberg Release Process – 全面改訂 #52955
- よくある質問 – 複数ブロックにわたるテキスト選択のショートカット Shift + 矢印 #43164
- 開発環境 – Node v14 -> v16 #53523
- カスタムブロックエディターの構築 – 全面改訂 #53159
- Curating the Editor Experience – スターターパターン #53398
- theme.json – blockGap のサポート要件を明確化 #53254
- API バージョン – バージョン3 #53046
- コアブロックリファレンス – 脚注 color #52897、カバー enableContrastChecker 削除 #53080、見出し __unstablePasteTextInline 削除 #48254、ファイル spacing #45107、詳細 layout、blockGap #53282、脚注 spacing, typography #53044、投稿コンテンツ color #51326
- theme.json バージョン2 – layout allowEditing #53378
2023/7/29
- Getting Started for the React Native based Mobile Gutenberg – npm run test:native #51869
- Setup guide for React Native development (macOS) – 同上
- Gutenberg Release Process – Creating a minor release for previous stable releases 追加 #49968
- Scripts – nux #52455
- Testing Overview – npm run test:native #51869 WordPress に組み込まれたバージョン – 6.3 #51984 Entities and Undo/Redo. – Transient -> Cached #51644
- Styles – layout 更新 #52316
- theme.json – link-color #51775、border #51777
- テーマサポート – link-color #51775、border #51777、外観ツールの dimensions、position #52785
- リファレンスガイド – nux #52455
- サポート – layout #52673
- データモジュールリファレンス – nux #52455
- コアブロックリファレンス – タームの説明 fse #51053、多数 color – heading #49131、脚注 inserter #52445、パターン reusable block -> pattern #52010、整形済みテキスト spacing #45196
- theme.json バージョン2 – typography writingMode #50822、behaviors #51156