ブロックエディターハンドブック
Topics
日本語版の情報については末尾を参照してください。
Gutenberg は WordPress サイト構築およびパブリッシングにおけるまったく新しいパラダイムのコードネームです。Gutenberg プロジェクトは、グーテンベルクが印刷業界に果たした影響と同じように、パブリッシング体験全体の革新を目的とします。プロジェクトは現在、WordPress のあらゆる部分を対象とする4つのフェーズ、「編集」「カスタマイゼーション」(これにはフルサイト編集、ブロックパターン、ブロックディレクトリ、ブロックベーステーマが含まれます)「コラボレーション」「マルチリンガル」のうち2番めのフェーズにあり、新しい編集体験、「ブロックエディター」にフォーカスしています。

凡例 :
- ブロックインスペクター
- ブロックエディターコンテンツ領域
- 設定サイドバー
新しいブロックエディターは「ブロック」システムを採用し、コンテンツを組み合わせて整形していきます。ブロックエディターは、Web サイトやデジタル製品用にリッチでフレキシブルなレイアウトを作成できるようデザインされています。コンテンツはブロックのユニットとして作成し、これまでのフリーフォームテキストにメディアやオブジェクトやショートコードを埋め込む方法とは異なります(念のため伝えておくと「ショートコード」ブロックがあります)。
ブロックは、段落、見出し、メディア、埋め込みオブジェクトなどすべてをコンポーネントとして扱い、互いを接続してコンテンツを作成し、WordPress データベース内に保存します。従来のフリーテキストにメディアやショートコードを埋め込むコンセプトは置き換えられした。新しいエディターは漸進的な拡張で設計されていて、すべてのレガシーなコンテンツに対して後方互換性があり、さらにクライアントサイドのパーシングを使用して単純に移行し Classic ブロックに対して、同等のブロックに変換、分割するプロセスを提供します。
ブロックエディターはユーザーにリッチで新しい価値を届けます。ブロックエディターの機能としては、ビジュアルでドラッグアンドドロップ対応の作成ツール、最新のベンダーパッケージを使用したパワフルな開発拡張、再利用可能コンポーネント、カスタムブロックやカスタムブロックスタイル、プラグインを通じたエディターの変更、拡張が可能なリッチな API とフックがあります。
ブロックエディターの使い方を学ぶ では、メディアリッチな投稿やページを作成できます。
クイックリンク
ブロックの作成 チュートリアル
WordPress ブロックエディター用の初めてのブロックの作成方法を学習します。開発環境の構築から、ツール、新しい開発モデルの説明まで、このチュートリアルはブロックエディターでの開発に必要なすべてをカバーします。
ブロックエディターでの開発
ブロックエディターの機能の拡張やプラグインの開発で必要となる基本コンセプト、ブロック API、アーキテクチャに関するすべての情報については、開発者ドキュメントを参照してください。
ブロックエディターへの貢献
ブロックエディターへの貢献を始める場合に必要な情報です。ブロックエディターのデザイン、コード、トリアージュ、ドキュメント、サポート、国際化のどれに興味があっても必要なガイドを入手できます。
ブロックエディターハンドブック日本語版
主な変更
詳細な変更履歴は、こちらを参照してください。
2022/8/13
- theme.json – blockGap の値 #42447、新要素と疑似セレクタ#42412
- theme.json V2 – typography に fluid 追加 #39529
- テーマサポート – disable-layout-styles追加 #42544
- メタデータ – Valiation #425639
- コアブロックリファレンス – コメント legacy 追加、投稿コメント削除 #41807、投稿のアイキャッチ画像 linkTarget, rel 追加 #42853, クエリータイトル showSearchTerm 追加 #42662、アーカイブ showLabel 追加 #43025、投稿日 displayType 追加 #42312、見出しと段落 gradients 追加 #43119
- フックリファレンス – フィルターリファrンスから改名
- @wordpress/create-block、@wordpress/e2e-tests – Node 14 以上 #43141
- @wordpress/env – PHPUnit #41780、WordPress を git から取得 #42826
- Gutenberg Release Process – cherry-picking #42932
2022/7/18
- 基本的なブロックの作成 – 依存関係の追加 #41511
- Curating the Editor Experience – 新規
- セットアップ – CSS の変更 #40940
- 編集フォームの構築 – 「キャンセル」ボタンの追加 #39261
- Part 4: Building a Create page form – 新規
- Adding a delete button – 新規
- theme.json – スタイルの変更に時間がかかる問題の回避方法 #42346
- パターン – postTypes 追加 #41791
- サポート – blockGap 追加 #41225
- 変換 – shortcode に transform 追加 #42001
- コアブロックリファレンス – カテゴリー -> カテゴリー一覧 #39837、コメントの投稿者名、コメント日付、コメント編集リンク、コメント返信リンク fontSize 削除 #41627、コメントクエリーリープ -> コメント #40763、コメントタイトル multipleCommentsLabel, singleCommentLabel 削除 #40817、カバー spacing (margin) 追加 #41963、グループ ariaLabel 追加 #41744、ナビゲーションエリア削除 #40645、投稿ナビゲーションリンク color (background, link, text) 追加 #41378、投稿タグ prefix 追加、検索 query 追加 #40585、目次 headings 追加 #29739
- 非推奨プロセス – サンプルに supports 追加 #41589
- theme.json – typography の fontFamilies に fontFace #41844、filter 追加 #41920、fontSizes に fluid 追加 #39529、spacing に customSpacingSize, spacingSizes, spacingScale 追加 #41527
- パッケージリファレンス – WordPress の特定のメジャーバージョンでの JavaScript コードのテスト追加 #42390
- @wordpress/env – SSH リポジトリ #40451、引数の渡し方 #41179
2022/4/30
- ネストしたブロック: InnerBlocks の使用 – ancestors 追記 #40027
- テーマ – フルサイト編集追記 #39662
- ブロックテーマ – グローバルスタイルプリセット追記 #38800
- theme.json – グローバルスタイルシート #40005
- block.json のメタデータ – ancestor 追加 #40027
- パターン – inserterプロパティ追加 #40425
- サポート – lock 追加 #40145
- テンプレート – 個別ロックのサンプル追加 #40372
- コアブロックリファレンス – No Result #38806、Avatar #38591、Tag Cloudの属性 #37311、Comments Query Loopの属性 #39664、Read Moreのサポート #39796、Page Numbersのサポート #39835、Quoteのサポート #39899、Archivesの属性 #38440、Navigationの属性 #38621、カバーの属性 #39658、Columnのサポート #40122、Comment Author Avatar 非推奨 #40186、Comment Author Name、Comment Date、Comment Edit Link、Comment Reply Linkの属性 #40165、Post Comments非推奨 #40167、Categoriesの属性 #39426、Comments Title追加 #40419、Separatorのサポート #40551
- theme.json V2 – border の変更 #37770、スキーマの説明 #40599
- コンポーネントリファレンス – Popover と Tooltip の注意 #39709
- @wordpress/create-block – npmDevDependencies 追加 #39723
- @wordpress/e2e-tests – Playwright に移行のため非推奨 #38570
- @wordpress/env – 環境変数
WP_ENV_CORE
への言及 #40407
2022/3/26
問い合わせ先
ブロックエディターハンドブックへのコメントは 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 |
最終更新日: