Gutenberg についてのよくある質問

Gutenberg とは ?

“Gutenberg” とは、WordPress の新しいエディター体験を作り出すためのプロジェクト名です。このプロジェクトのゴールは、誰でもリッチな投稿のレイアウトができるような、ブログ投稿や固定ページ編集における新しい体験を作ることにあります。キックオフ時のゴールは以下のようなものでした。

このエディターは、ブログ投稿や固定ページ編集における新しい体験を作るために努力します。そこでは、リッチな投稿を楽に書くことができ、現在ショートコードやカスタム HTML、「謎に包まれた」埋め込みの検知によって実現されていることを「ブロック」を使って簡単にします。

重要な点として、以下のようなことが挙げられます。

  • リッチなレイアウトの投稿を作成できることが、WordPress の強みである。
  • ブロックをインタラクションのパラダイム (枠組み) として受け入れることによって、複数の異なるインターフェースをひとつにまとめることができる。ショートコードやカスタム HTML の書き方や、メディアを埋め込むために URL をペーストすることを学ぶ代わりに、どんな種類のコンテンツを挿入する際にも共通の安定したフローがある。
  • 「謎に包まれた」とは、ユーザーが発見する必要があるソフトウェアにおける隠し機能のことを指している。WordPress はすでに多数のブロックと30種類以上の埋め込みをサポートしているので、これらを表に出していく。

Gutenberg は GitHub で WordPress オーガニゼーションのプロジェクトとして開発されており、WorPress 5.0 以降のバージョンにアップグレードするか、プラグインレポジトリで入手できる開発版を手に入れることで今すぐ試すことができます。

訳注: このページの内容は WordPress 5.0 リリース前に公開された原文を訳したもので、一部古くなっている部分もあります。

「ブロック」とはなんですか ? なぜこれを使うのですか ?

現在の WordPress 編集画面はオープンなテキストウィンドウです。これまではずっと、執筆向けのすばらしい空白のキャンバスでしたが、画像やマルチメディア、ソーシャルメディアからの埋め込みコンテンツ、投票、その他の要素を含むブログ投稿や固定ページを作る場面では、必ずしも直感的とは言えない異なるアプローチの混在が必須でした。

  • 画像、マルチメディア、承認された種類のファイルに対しては、メディアライブラリ/HTML。
  • 埋め込みにはリンクのペースト。
  • プラグインからの特別なアセットには shortcode
  • 投稿やページ上部の画像にはアイキャッチ画像。
  • 副見出しには抜粋。
  • ページのサイドにあるコンテンツにはウィジェット。

これらについて、一目瞭然で一貫性があるものにするためにはどうすればいいのかと考えるにつれ、「ブロック」というコンセプトを受け入れ始めるようになりました。上記のすべての項目はブロックにできます。簡単に検索・理解でき、ページ内で動的に入れ替えるのも簡単です。ブロックというコンセプトはとてもパワフルで、もししっかり配慮してデザインすれば、優れた編集とパブリッシングの体験を提供することができます。

執筆はどのように行うのですか ?

私たちにとっての Gutenberg のゴールは、シームレスな投稿・ページ構築の体験を作り出すことだけではありません。同時に、執筆もシームレスにできるようにしたいのです。個別の文章 (パラグラフ) はそれぞれ「ブロック」になりますが、これらのブロックの作成や編集は現在の WordPress エディターの使い心地と同じか、それ以上にシンプルなものになるようデザインしています。こちらは、Gutenberg での執筆体験を示す短いアニメーションです。

Typing

Gutenberg にキーボードショートカットはありますか ?

はい、たくさんあります。利用できるすべてのキーボードショートカットを表示するヘルプのモーダル画面も用意しています。

新エディターの右上にあるメニューに行って「キーボードショートカット」をクリックすれば、全一覧を見ることができます (または、Linux/Windows では Shift+Alt+H キー、macOS では ⌃⌥H というキーボードショートカットで表示することもできます)。

こちらが、キーボードショートカットの標準的な一覧です。

エディターショートカット

ショートカットの説明Linux/Windows ショートカットmacOS ショートカット
キーボードショートカットを表示する。Shift+Alt+H⌃⌥H
変更を保存する。Ctrl+S⌘S
最後の変更を取り消す。Ctrl+Z⌘Z
最後に取り消した変更を再実行する。Ctrl+Shift+Z⇧⌘Z
設定サイドバーを表示・非表示。Ctrl+Shift+,⇧⌘,
ブロックナビゲーションメニューを開く。Shift+Alt+O⌃⌥O
エディターの次の部分に移動する。Ctrl+`⌃`
エディターの前の部分に移動する。Ctrl+Shift+`⌃⇧`
エディターの次の部分に移動する (代替版)。Shift+Alt+N⇧⌥N
エディターの前の部分に移動する (代替版)。Shift+Alt+P⇧⌥P
一番近いツールバーに移動する。Alt+F10⌥F10
ビジュアルエディターとコードエディターを切り替える。Ctrl+Shift+Alt+M⇧⌥⌘M

選択ショートカット

ショートカットの説明Linux/Windows ショートカットmacOS ショートカット
入力中にすべてのテキストを選択する。もう一度押すと全ブロックを選択。Ctrl+A⌘A
選択部分をクリアする。EscEsc

ブロックショートカット

ショートカットの説明Linux/Windows ショートカットmacOS ショートカット
選択したブロックを複製する。Ctrl+Shift+D⇧⌘D
選択したブロックを削除する。Shift+Alt+Z⌃⌥Z
選択したブロックの前に新しいブロックを追加する。Ctrl+Alt+T⌥⌘T
選択したブロックの後に新しいブロックを追加する。Ctrl+Alt+Y⌥⌘Y
新しいパラグラフを追加した後にブロックタイプを変更する。//

テキスト整形

ショートカットの説明Linux/Windows ショートカットmacOS ショートカット
選択したテキストを太字にする。Ctrl+B⌘B
選択したテキストをイタリック体にする。Ctrl+I⌘I
選択したテキストに下線を付ける。Ctrl+U⌘U
選択したテキストをリンクに変換する。Ctrl+K⌘K
リンクを削除する。Ctrl+Shift+K⇧⌘K
選択したテキストに打ち消し線を追加する。Shift+Alt+D⌃⌥D
選択したテキストを等幅フォントで表示する。Shift+Alt+X⌃⌥X

こちらは、キーボードショートカットを見つけて使う方法を示した短いアニメーションです。

GIF showing how to access keyboard shortcuts

Gutemberg は TinyMCE 上で構築されているのですか ?

違います。TinyMCE は、ウェブ上でリッチテキストを有効化するための最適なツールのひとつです。Gutenberg 内では、TinyMCE はまさにそれを行います。ほぼすべてのテキストフィールドは、TinyMCE によってリッチテキストを使えるように拡張されています。テキスト、リスト、または単に1個の画像キャプションであっても、テキストをリッチに拡張するためにブロック内で TinyMCE を呼び出せます。

Gutenberg はどのブラウザーに対応しますか ?

Gutenberg はモダンブラウザーおよび Internet Explorer 11 で動作するようになります。

Make WordPress handbook に対応ブラウザーの一覧があります。私たちの言う「モダンブラウザー」とは、ほとんどの場合、各メジャーなブラウザーの最新および過去2バージョンのことを意味しています。

どうやって自分でブロックを作成できますか ?

ブロック作成用の API は、このプロジェクトの重要な側面です。ドキュメンテーションとチュートリアルの改善に努力しています。スタートするには、ブロックタイプの作成セクションをご覧ください。

Gutenberg にはフロントエンドからの投稿・ページ編集も含まれますか ?

いいえ。私たちは Gutenberg を主に編集画面での投稿・ページ編集の置き換えとして設計しています。とは言うものの、フロントエンド編集は、フロントエンドとまったく同じに見えるエディターとよく混同されます。これは、テーマが各ブロックをカスタマイズしてフロントエンドと同じスタイルを提供することによって Gutenberg が可能にすることでもあります。コンテンツはデスクトップ、モバイル、全文フィード、配信記事プラットフォームなど複数の異なるエクスペリエンスにわたって

Gutenberg は JavaScript で構築されていますが、過去のメタボックス (PHP) はどのように作動しますか ?

インターフェースを拡張する新しい方法を提供するのと同時に、既存のメタボックスのサポートも継続していく予定です。

参照: PR #2804

プラグインは Gutenberg UI をどうやって拡張できますか ?

現在力を入れている主な拡張ポイントは、新規ブロックの作成です。その他の JS で構築された UI を拡張する方法についてはまだ作業中です。こちらでトラッキングしています。Issue #1352

カスタム投稿タイプには対応予定ですか ?

もちろんです。カスタム投稿タイプが Gutenberg を活用できる方法はいくつもあります。計画としては、カスタム投稿タイプがどのブロックをサポートするかを指定できるようにし、投稿タイプごとにデフォルトブロックを定義できるようにするということを考えています。現在はこのようにはなっていませんが、投稿タイプがコンテンツフィールドを無効にすれば、下部の「上級者向け」セクションがページを埋めるようになります。

カラムの導入予定はありますか ?

カラム対応を検討する前に、ブロックの基礎をしっかり固めることがメインゴールです。

参照: Issue #219

入れ子ブロックの導入予定はありますか ?

現在、入れ子ブロックサポートに向けたインフラを実装中です。これにより、さらにカスタマイズの機会が開かれることを期待しています。ブロック作成者はさらに、構築の際にコンポーネンツと HTML を別のブロックの中に入れ子にすることができるようになります。入れ子ブロックを操作する UI はまだ改善を重ねているところで、タイミングによっては最初のバージョンの Gutenberg には含まれないでしょう。

こちらもご覧ください: Issue #428

ブロックの再配置にドラッグ & ドロップが使われる予定はありますか ?

Gutenberg の重要なバリューとして、ドラッグ & ドロップを「追加の補強要素」として見る、というものがあります。明示的な操作 (クリックまたはタブ + スペース) が存在している場合、ドラッグ & ドロップをその上に補強として付け加えることができます。ということで、現在はドラッグ & ドロップは Gutenberg の一部ではありませんが、将来的にはそうなることを期待しています。

テーマがブロックにスタイルを追加できますか ?

はい。ブロックは独自のスタイルを提供でき、テーマはそれに追加したり、それを上書きしたりできます。またはブロック自体はスタイルをまったく提供せず、テーマが用意したものに完全に依存することもできます。

ブロックスタイルはフロントエンドとバックエンドでどう動作しますか ?

ブロックはベースの構造的 CSS スタイルを提供することができ、テーマはそれにスタイルを追加できます。例えば区切り線 (<hr/>) のような一部のブロックにはフロントエンドスタイルが必要ないかもしれませんが、ギャラリーのようなその他のブロックにはいくらか必要になるでしょう。

その他の機能、例えば新しい「幅広」と「全幅」配置オプションは、単にブロックに適用され、この配置を提供する CSS クラスです。例えば add_theme_support などを使ってテーマがこの機能にオプトインする方法を模索中です。

参照: テーマサポート

エディタースタイルはどう動作しますか ?

通常のエディタースタイルはオプトイン方式であり、ほとんどのケースで動くでしょう。以下のフックを使い、テーマが追加スタイルシートを読み込むこともできます。

function gutenbergtheme_editor_styles() {
    wp_enqueue_style( 'gutenbergtheme-blocks-style', get_template_directory_uri() . '/blocks.css');
}
add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );

参照: エディタースタイル

Gutenberg が自分のプラグインを時代遅れにするかもしれないという心配をすべきですか ?

Gutenberg のゴールは、誰かを失職させることではありません。ゴールは、WordPress を進化させ、将来的にすべての人により多くの仕事を生み出すことです。

リッチな投稿とページ構築体験を可能にすること以外に、メタ的なゴールはプラットフォームとしての「WordPress を前進させること」です。UI をモダン化するだけではなく、基盤もモダンなものにすることによってです。

これが大きな変更であることは分かっています。同時に、プラグインに多くの新しい機会がもたらされるだろうとも思います。WordPress には様々な基本的なブロックが含まれる見込みですが、特定の状況に高度に対応したプレミアムプラグインが既存のブロックを拡張したり、新しいブロックを追加したりするための余地もあるでしょう。

自分のサイトで Gutenberg からオプトアウトすることはできますか ?

Gutenberg を多くの事例に合わせて設定可能にする方法を検討しています。その中にはブロック、パネルなどといった異なる要素を無効化するということも含まれています。

さらに、ほぼ現在のエディターと同様の「クラシック」ブロックも存在します。異なる点は、ブロック形式となっていることです。また、公式レポジトリに Gutenberg をクラシックエディターと置き換える人気のプラグインが登場する可能性も高いでしょう。

カスタム TinyMCE ボタンは Gutenberg 内で動作しますか ?

カスタム TinyMCE ボタンは「クラシック」ブロックでは動作するでしょう。これは、ブロック版の現在のクラシックエディターです。

(Gutenberg には新しい共通の挿入ツールが含まれ、これを使って利用可能なすべてのブロックにアクセスしたり、検索して最近の利用やカテゴリーでソートできます。このツールはエディターにコンテンツを追加するすべてのプラグインに対して条件を平等にし、使い方を習得する単一のインターフェイスを提供します)

Gutenberg ではショートコードはどう動作しますか ?

ショートコードはこれまでと同じように動作します。

ただし、私たちはブロックを [shortcode] の進化系として見ています。コードをタイピングする代わりに、共通の挿入ツールのトレーを使ってブロックを選び、設定やプレビューのためのリッチな UI を手に入れられます。将来的には開発者の皆さんがショートコードをブロックにアップグレードすることをおすすめします。

ショートコードをコンテンツブロックに移行すべきですか ?

そうすべきだと思います。ブロックは最終的な外観を描写するものとして設計されています。これが、ユーザーがコンテンツを発見したり挿入したりする際に期待する形となる可能性が高いでしょう。

Gutenberg は適切にアクセシビリティに対応する予定ですか ?

アクセシビリティは後から付け足すものではありません。現在、Gutenberg のすべての側面がアクセシブルであるとは言えず、イシューの記録はこちらで確認できます。WordPress はすべての人のためのものであることを理解しており、アクセシビリティとはインクルージョンのことです。これは、私たちにとって重要な価値観です。

Gutenberg のアクセシビリティに貢献したい方は、テストの実施をしたりコードを書いてくれる人を常に募集していますのでぜひご参加ください。

データはどのように保存されていますか ? HTML コメントを見かけましたが、この目的はなんでしょう ?

私たちのアプローチ (技術概要のイントロで概説しています) は、15年間 WordPress で積み重ねられてきたコンテンツを壊さない方法で既存のデータ形式を拡張することです。つまり、人間の可読性 (web 上の HTML ドキュメント) とどこでも簡単にレンダリングできることを優先し、編集のコンテキストに主にメリットが有る機械が容易に読み取れるファイル (post-meta 内の JSON) の優先度を下げる形式が最適となることを意味しています。

このことにより、コンテンツストリームからは本質的に切り離されたブロック (ウィジェットや小さな投稿タイプの要素) を他の場所に保存し、配置用のトークンリファレンスのみを保っておくという柔軟性が可能になります

プロジェクトのこの部分のことをより深く理解するには、Gutenberg キーコンセプトに目を通すことをおすすめします。

投稿コンテンツを PHP または JS でパースして返すにはどうすればよいですか ?

JS の場合:

var blocks = wp.blocks.parse( postContent );

PHP の場合:

$blocks = gutenberg_parse_blocks( $post_content );

なぜ使うべきなのですか ?

ブロックはおそらく、ユーザーの皆さんがコンテンツの操作をする主な方法になるでしょう。ユーザーの方は、新しい共通挿入ツールを使って機能を発見することになるはずです。このツールには、レイアウトをさらに拡張できるこれまでよりリッチなブロック UI が含まれます。

WordPress はすでに世界で最も人気のパブリッシングプラットフォームです。どうしてエディターを変えるのですか ?

オープンソースプロジェクトとして、WordPress がイノベーションを続けることは大事だと考えています。また、コア体験をすべてのユーザーにとって直感的で楽しいものにするために努力を続けることもです。コミュニティプロジェクトとして、Gutenberg にはそれらを実現できる可能性があり、このゴールを皆さんと一緒に追うことにワクワクしています。テスト、貢献、フィードバックをしてくださる場合は、こちらで歓迎します