よくある質問

この質問の最初の版は Gutenberg プロジェクトがまだ初期の段階で作られました。その後の質問については Matt の 2018年11月の投稿を参照してください。WordPress 5.0: Gutenberg FAQ

Gutenberg (グーテンベルク) とは ?

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

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

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

  • リッチなレイアウトの投稿を作成できることは WordPress の大きな強みです。
  • ブロックをインタラクションのための枠組みとして採用することにより、複数の異なるインターフェースをひとつに統合できます。ショートコードとカスタム HTML の記述方法や、メディアを埋め込むための URL を貼り付けたりする方法を学ぶ代わりに、あらゆる種類のコンテンツを挿入するための共通で安定したフローが確立されます。
  • 「謎に包まれた」とは、ユーザーが発見する必要があるソフトウェアにおける隠し機能のことを指しています。WordPress はすでに多数のブロックと30種類以上の埋め込みをサポートしていますので、これらを表に出していきましょう。

Gutenberg は GitHub で WordPress organization のプロジェクトとして開発されており、今すぐ使うことができます。プラグインディレクトリで入手できます

いつ Gutenberg は WordPress に取り込まれますか ?

Gutenberg は2018年12月にリリースされた WordPress 5.0 で取り込まれました。

このプロジェクトへのアプローチ方法を知らせるため、デザイン、計画、プロトタイプ作成そしてテストに焦点を当てて、2017年の初めに3ヶ月かけて開始されました。リポジトリからインストールできる実際のプラグインは、6月の WordCamp Europeで提供が開始されました。

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

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

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

これらを分かりやすく一貫性のあるものにするにはどうすればよいかを考える過程で、「ブロック」というコンセプトを擁するようになりました。ブロックの概念はとても強力であり、よく考えて設計しさえすれば、優れた編集と公開のエクスペリエンスを提供できます。

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

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

入力

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

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

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

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

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

機能説明Linux/WindowsmacOS
キーボードショートカットを表示Shift+Alt+H⌃⌥H
変更を保存Ctrl+S⌘S
最後の変更を取り消すCtrl+Z⌘Z
最後の取り消しをやり直すCtrl+Shift+Z⇧⌘Z
設定サイドバーの表示・非表示Ctrl+Shift+,⇧⌘,
ブロック移動メニュー表示Shift+Alt+O⌃⌥O
エディターの次の部分へ移動Ctrl+`⌃`
エディターの前の部分へ移動Ctrl+Shift+`⌃⇧`
エディターの次の部分へ移動(別の方法)Ctrl+Alt+N⌃⌥N
エディターの前の部分へ移動(別の方法)Ctrl+Alt+P⌃⌥P
最も近いツールバーへの移動Alt+F10⌥F10
ビジュアールエディターとコードエディター間の切替Ctrl+Shift+Alt+M⇧⌥⌘M

選択ショートカット

機能説明Linux/WindowsmacOS
入力時、全てのテキストを選択。もう一度押すと、全てのブロックを選択Ctrl+A⌘A
選択を解除EscEsc

ブロック用のショートカット

機能説明Linux/WindowsmacOS
選択したブロックの複製Ctrl+Shift+D⇧⌘D
選択したブロックの削除Shift+Alt+Z⌃⌥Z
選択したブロックの前に新規ブロックを挿入Ctrl+Alt+T⌥⌘T
選択したブロックの後に新規ブロックを挿入Ctrl+Alt+Y⌥⌘Y
新規段落追加後のブロックタイプ変更//

テキスト書式

機能説明Linux/WindowsmacOS
選択したテキストを太字に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

Markdown 記法

キーボードショートカットとは異なりますが、編集画面で以下の文字列を入力した後にスペースを入力、または Enter キーを押すと自動的に対応するブロックに変換されます。

文字列ブロック
##見出し H2
###見出し H3
####見出し H4
- (マイナス) または *箇条書きのリスト
1.番号付きのリスト
>引用
`` で囲むインラインのコード
``` に続けて Enterソースコード
--- に続けて Enter区切り線

Gutenberg は TinyMCE 上で構築されていますか ?

いいえ。TinyMCE は「クラシック」ブロックのみで使用されます。

Gutenberg はどのブラウザをサポートしていますか ?

Gutenberg はモダンブラウザーおよび Internet Explorer 11 で動作します。

Make WordPress handbook に対応ブラウザーの一覧があります「モダンブラウザー」とは、一般にメジャーなブラウザーの最新および過去の2バージョンを意味します。

自分のブロックを作るには、どうすればよいですか ?

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

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

いいえ。当面は投稿やページの編集画面の代替として Gutenberg をデザインしています。とは言え、フロントエンド編集は、フロントエンドとまったく同じに見えるエディターとよく混同されます。将来的にはテーマが個々のブロックをカスタマイズし、エディターにスタイルを提供することで、Gutenberg でもそうした編集が可能になるでしょう。コンテンツはデスクトップやモバイルから全文フィード、配信記事プラットフォームまで多くの異なるエクスペリエンスにわたって配布できるよう設計されています。このため、ただ1つのフロントエンドでの編集から種々の投稿を作成、デザインできるはずだと考えています。

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

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

参照: PR #2804

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

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

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

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

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 を使わないようにすることはできますか ?

ブロック形式であること以外、事実上従来のエディターと同じ「クラシック」ブロックがあります。

従来のエディターに戻す Classic Editor プラグイン もあります。詳細についてはプラグインのページを参照してください。WordPress コアチームは Classic Editor プラグインを2021年12月までサポートすることをコミットしました。

カスタム 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 = parse_blocks( $post_content );

リリース後、なぜ使うべきなのですか ?

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

ローンチ時にはどういった機能が利用できる予定ですか ? ローンチ後のロードマップは ?

2017年のエディターのフォーカスの一部として、カスタマイズとサイト構築が次のステップです。キックオフ時の投稿より:

このカスタマイザーでは最初にエディターを支援します。次にこれらの基本的な構築ブロックを、サイドバーや場合によってはテーマ全体を含む post_content などの「(枠にとらわれない) ボックスの外」のカスタマイズを可能にするために移行します。

このエディターによって、ページの構築とカスタマイズにおけるより大きなものの基礎を築きます。

多くの機能が計画中ですが、ここにすべて書くには多すぎます。詳しくは Gutenberg のロードマップをご覧ください。

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

オープンソースプロジェクトとして、WordPress は革新を続け、すべてのユーザーにとってコアエクスペリエンスを直感的で楽しめるものにするために努力し続けることが重要であると考えています。コミュニティプロジェクトとして、Gutenberg はまさにそれを実行できる可能性があり、この目標を一緒に追求することにワクワクしています。テスト、貢献、フィードバックなどをここへどうぞ

最新英語版 最新英語版

Top ↑

問い合わせ先 問い合わせ先

ハンドブックへのコメントは WordPress の 日本語 Slack 内の #docs チャンネル、または フォーラム > その他 へお願いします。

最終更新日: