ブロックエディターハンドブック
Topics
日本語版の情報については末尾を参照してください。
こんにちは 👋 ブロックエディターハンドブックへようこそ。
ブロックエディターは、WordPress のサイト構築と公開のためのモダンな最新パラダイムです。コンテンツの構成とフォーマットにブロックによるモジュラーシステムを採用し、ウェブサイトやデジタル製品用のリッチでフレキシブルなレイアウトを作成できるようにデザインしました。
エディターは下図に示すいくつかの主要な要素で構成されています。
図中にハイライトされている要素は、
- インサーター: コンテンツキャンバス内にブロックを挿入するためのパネル
- コンテンツキャンバス: コンテンツエディター。ブロックで作成されたコンテンツを保持
- 設定サイドバー: ブロックの設定を構成するサイドバーパネルなど
ブロックエディターではブロックを使用して、モジュール的にコンテンツを作成します。すぐに使用できる多くのコアブロックがあり、自分でもオリジナルのブロックを作成できます。
ブロックは、段落、見出し、メディア要素、埋め込みなどの個別の要素です。各ブロックは独立した要素として扱われ、個別の編集や書式の制御が可能です。これらの要素をすべてつなぎ合わせてコンテンツとなり、WordPress のデータベースに保存されます。
ブロックエディターは、WordPress の編集体験に革命を起こすことを目的とした Gutenberg プロジェクトで行われた作業の成果です。
ブロックエディターはビジュアルコンテンツ作成ツールを介して、拡張された編集体験を提供するだけでなく、豊富な API 機能セットによって、さまざまな方法で操作、拡張できる強力な開発者プラットフォームです。
ハンドブックの歩き方
このハンドブックはブロック開発に焦点を当てています。5つのセクションに分かれていて、それぞれに異なる目的があります。
これからブロック開発を始める方はこのセクションで開発環境をセットアップし、ブロック開発の基礎を学習できます。また、用語集や よくある質問では、頻出の質問に対する答えを得られます。
「はじめに」のセクションで学んだことをベースに、開発中に出会うさまざまな問題の解決方法を学びます。またチュートリアルや再利用可能なサンプルコードも取得できます。例えば、フル機能のブロックの作成、WordPress のデータの操作など。さらに、ブロックエディターでJavaScriptを使用する方法も学べます。
このセクションがこのハンドブックの心臓部です。作業中あるいは調査中に細かな部分まで調べたり、特定の 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.org コミュニティが監修した WordPress 関連動画のハブです。WordCamp でのセッションからオンラインワークショップの録画まで。ブロック開発やブロック編集の学習に役立つ情報も見つかるはず。
- Gutenberg リポジトリ – ブロックエディタープロジェクトの開発は、このGitHubリポジトリで行われています。このリポジトリには
block-library(コアブロック) やcomponents(共通 UI 要素) などの興味深いパッケージのコードが含まれています。gutenberg-examples リポジトリも有用なリファレンスです。
正しいハンドブックを観ていますか ?
このハンドブックはブロックエディター関連の開発を目指す方を対象としています。developer.wordpress.org にはこの他にもいくつかの WordPress 開発者向けのハンドブックがあります。
- /themes – テーマハンドブック
- /plugins – プラグインハンドブック
- /apis – 共通 API ハンドブック
- /advanced-administration – 高度な管理ハンドブック
- /rest-api – REST API ハンドブック
- /coding-standards – WordPress 開発者向けのベストプラクティス
ブロックエディターハンドブック日本語版
問い合わせ先
ブロックエディターハンドブックの内容やサンプルへのコメント、問題報告は 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 |
主な変更
2023/12/2
- Gutenberg Release Process – 対象ブランチの説明 #56183、トラブルシューティング #56436
- wp-scripts 入門 – 例の追加 #56298
- ブロック開発の基礎 – 翻訳
- File structure of a block – 新規
- block.json – 新規
- Registration of a block – 新規
- The block wrapper – 新規
- Working with Javascript for the Block Editor – 新規
- 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
2023/6/24
- パターン – source 追加 #51672
- サポート – anchor ダイナミックブロックでは未サポート #51288
- コアブロックリファレンス – 投稿の抜粋 -> 抜粋 #50167、画像 lightbox #51232、多数 anchor 削除 #51288、多数 layout 追加 #51434、再利用ブロック -> パターン、パターン -> パターンプレースホルダー #51144、パターンプレースホルダー syncStatus 削除 #51719、画像 aspectRatio、scale 追加 #51545、脚注 追加 #51201
- Coding Guidelines – lock-unlock #51322
- React Native Integration Test Guide – waitfor -> findxxx #46735
2023/6/4
- 多数 – apiVersion: 3 #48286
- Block Grammer – 削除
- Upcoming Projects & Roadmap – 削除
- Entities and Undo/Redo. – 新規
- スタイルとスタイルシートの利用 – iframe の注意 #50091、iframe #48286
- コアブロックリファレンス – カラム design に #46048、parent、experimental 追加 #48269、画像 behaviors #49972、詳細 experimental 削除 #50997、ページネーション showLabel #50779、タイトル #50147、投稿テンプレート blockGap、クエリーループ displayLayout 削除 #49050、検索 buttonBehavior、isSearchFieldHidden #50487
- @wordpress/env – ライフサイクルスクリプト #50570、run の整理 #50559、ローカルパッケージの使用 #50980
2023/05/23
- 変換 – ungroup 追加 #50385
- コアブロックリファレンス – ログイン / ログアウト typography #49160、パターン syncStatus #50533、コード align (wide) #50710
- @wordpress/env – composer、phpunit、wp-cli、.htaccess #50490
2023/05/03
- トップ – 全面改訂
- キーコンセプト – 全面改訂 #49184
- プラグイン用サイドバー – カスタムフィールド表示時の注意 #49622
- theme.json – variations 追加 #49826
- block.json のメタデータ – editorStyle 削除 #49393
- サポート – color.__experimentalDuotone -> filter.duotone #49423
- コアブロックリファレンス – 所要時間 multiple: false の削除 #49253、spacing 追加 #49392、color 追加 #49496、引用 html 削除 #49426、投稿テンプレート full、wide 追加 #49411、画像 duotone #49423、詳細、詳細コンテンツ、詳細要約追加 #45055、埋め込み spacing 追加 #39384、グループ allowedBlocks 追加 #49128、メディアとテキスト allowedBlocks 追加 #49981
- バージョン 2 (現在のリファレンス) – customTemplates、templateParts、Pattern 追加 #48250
- @wordpress/env – –env-cwd 追加 #49908、afterSetup 追加 #50196、パーマリンクの変更 #50251
2023/03/25
- Gutenberg Release Process – NPMへの発行 #46555、RCパッチ作成 #47372
- End-to-End Testing – 新規
- Migration guide – 新規
- Overusing snapshots – 新規
- よくある質問 – IE削除 #46296、複数選択削除のショートカット追加 #44968
- スタイルとスタイルシートの利用 – 依存関係を追加 #45604
- ネストしたブロック: InnerBlocks の使用 – react フックの使用 #46407
- theme.json – typography に fluid 追加 #45705、dimensions.minHeight 追加 #47475、typography に textColumns 追加 #33587、appearanceTools に position 追加 #48763、pseudo-selectors に :active、:link、:any-link 追加 #49202
- 非推奨プロセス – omit 削除 #46674、isEligible に追加 #48815
- block.json のメタデータ – Selectors、Editor Selectors 追加 #46496
- 登録 – ancestor 追加 #45832
- サポート – リンクの色の修正 #46405、dimensions、position #48057
- パターン – templateType 追加 #45814
- Selectors – 新規
- コアブロックリファレンス – 複数ブロック anchor 追加 #44771、ボタン align 削除 #45663、shadow 追加 [#46502]、html 削除 #49097、(https://github.com/WordPress/gutenberg/pull/46502)、最近の投稿 color 追加 #41874、固定ページリスト parentPageID 追加 #45967、typography 追加 #43316、isNested 追加 #46414、ページリスト項目 追加 #45776、投稿テンプレート color 追加 #46147、クエリーループ color 削除 #46147、グループ position 追加 #46142、カバー tagName 追加 [#46969]、blockGap 追加 #47952、text color 追加 #41572、(https://github.com/WordPress/gutenberg/pull/46969)、ファイル color 追加 #41870、投稿の抜粋 excerptLength 追加 #44964、投稿のアイキャッチ画像 aspectRatio 追加 #47854、最新のコメント typography 追加 #43310、所要時間 追加 #43403、typography 追加 #49257、カラム templateLock 追加 #49132、
- Available Styles Options – 新規
- バージョン 2 (現在のリファレンス) – CSS 追加 #46255、fluid undefined/false #42489、border radius #46375、Object タイプ #45897、shadow 追加 #46813、#47272、#49204、dimensions 追加 #47475、position 追加 #48057、textColumns 追加 #33587、position と dimensions 追加 [#48948]
- @wordpress/create-block – 使用可能なコマンドの整理 #45636、全体的な更新 #45676
- @wordpress/env – データベース認証情報 #47940
2022/11/4
- ページリストの構築 – サンプルの修正 #43633
- 書式ツールバー API – ステップ5 ドロップダウン外へのボタンの追加 #43581
- theme.json – spacing プリセット #43349、appearance-tools #43337
- テーマサポート – 外観ツール #43337、ブロックテンプレートパーツ #44009
- block.json のメタデータ – render の追加 #42430、複数スクリプトのサポート #44155、アセットに渡せるものの説明の追加 #44199
- コアブロックリファレンス – カラム typography 追加 #43253、#43252、カテゴリー一覧 typography 追加 #43254、アーカイブ spacing、typography 追加 #43350、#43935、音声 spacing 追加 #43351、ページ番号 typography 追加 #43289、ページネーション typography 追加 #43287、#43552、カバー typography 追加 #43298、コメントテンプレート typography、spacing 追加 #43266、#45101、ギャラリー color、margin、padding 追加 #43294、#43965、目次 color、spacing、typography 追加 #43363、#43368、#43509、スペーサー spacing 追加 #43366、クエリータイトル showPrefix、padding 追加 #42594、#43458、コメント typography、spacing 追加 #43286、#45102、投稿テンプレート typography 追加 #43342、テーブル spacing 追加 #43370、タームの説明 spacing 追加 #43372、タグクラウド spacing、typography 追加 #43367、#43452、メディアとテキスト typography、spacing 追加 #43314、 #43456、段落 spacing 追加 #43455、見出し padding 追加 [#43454]、(https://github.com/WordPress/gutenberg/pull/43454)、 投稿日 spacing 追加 #43406、動画 spacing 追加 #43365、詩 margin 追加 #43461、区切り enableContrastChecker 無効 #43357、投稿タイトル padding 追加 #43457、ソーシャルアイコン color、padding、rel 追加 #43293、#43885、#45469、リスト spacing 追加 #43402、結果なし typography 追加 #43551、ホームへのリンク typography 追加 #43307、最新の投稿 typography、spacing 追加 #43540、#45110、ペジネーション typography 追加 #43552、コメント返信リンク spacing 追加 #43658、コメント日付 spacing 追加 #43656、コメント編集リンク spacing 追加 #43657、ナビゲーション icon、templateLock 追加、anchor 削除 #43654、 #44739、#44721、投稿コンテンツ typography、dimensions 追加 #43339、#45300、アバター padding 追加 #43519、カテゴリー spacing 追加 #43647、サイトロゴ spacing 追加 #43520、ボタン typography 追加 #43934、カレンダー typography、color 追加 #43969、#42029、検索 typography 追加 #43499、カスタムリンク typography 追加 #44005、投稿のアイキャッチ画像 gradient overlay 等追加 #43838、クエリーループ namespace 追加 #43632、投稿ナビゲーションリンク arrow 追加 #40684、コメントの前ページ、ページ番号、次ページの名前変更 #44287、コメントのページ番号 color、spacing 追加 #43902、#45150、投稿タグ spacing 追加 #43646、投稿者 isLink, linkTarget 追加 #42670、固定ページリスト __unstableMaxPages 削除 #44415、リスト項目 typography 追加 #43312、投稿コメントリンク spacing 追加 #45184、投稿コメントフォーム spacing 追加 #45091、最新のコメント spacing 追加 #45110、グループ dimensions 追加 #45300
- theme.json – fluid 追加 #39529、useRootPaddingAwareAlignments 追加 #43463、shadow 追加 #41972、outline 追加 #43526、border 変更 #44252
- @wordpress/create-block – –no-plugin 追加 #41642、–variant 追加 #41289
- 外部プロジェクトテンプレート – 新規作成 React Native Integration Test Guide – getByA11yLabel -> getByA11yText #45454
- Testing Overview – .firstChild 削除 #45419 Documentation Contributions – Documenting Packages 追加 #43750 Styles – Layout 追加 #42619
- 執筆エクスペリエンス – useBlockProps 追加 #44607
- ブロックコントロール: ブロックツールバーと設定サイドバー – source: ‘children’ -> ‘html’ #44265
- ブロックサポート – source: ‘children’ -> ‘html’ #44265
- Extending the Query Loop Block – 新規
- 属性と編集可能フィールド – source: ‘children’ -> ‘html’ #44265
- Curating the Editor Experience – コンテンツのみ編集 #44908
- Propagating updates for block types – 新規
- サポート – ariaLabel 追加 #45006
- ブロックテンプレート – template_lock=contentOnly 追加 #43977、#44131
最終更新日: