よくある質問

この記事では Gutenberg 開発においてこの2年間に受けた質問と回答をまとめました。追加すべき質問がある場合には GitHub issue を作成してください。喜んで返信し疑問を解消したいと思います。歴史を振り返り返るには Matt の 2018年11月の投稿 WordPress 5.0: A Gutenberg FAQ を参照してください。

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

「Gutenberg」は、WordPress で新しい編集エクスペリエンスを作り出すプロジェクトの名称です。2017年1月にコントリビューションが始まり、この数年の WordPress でもっとも大きな変化の1つとなりました。Gutenberg は投稿やページの執筆やデザインに「ブロック」を使用するというアイデアの上に構築されています。これは投稿やぺーじだけでなく、Web サイト全体のデザインにブロックを使用するという WordPress の未来の改良の基礎となります。最終的なゴールは WordPress の最初のユーザーエクスペリエンス、たとえば執筆、編集、発行、Web ページのデザイン等の簡素化です。編集エクスペリエンスではユーザーに対して、実際の投稿やページの表示と同じように見えるビジュアルな表現を与えることを目的とします。以下は、最初のキックオフ時のゴールです。

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

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

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

Gutenberg WordPress オーガナイゼーションの下、GitHub で開発されています。ブロックエディターは WordPress 5.0 から本体で利用可能です。Gutenberg プロジェクトの予定新機能を試すにはプラグインリポジトリーから利用可能です。

長期のロードマップはありますか ?

公式 WordPress ロードマップによれば Gutenberg には4つのフェーズがあります。この記事を執筆中の現在はフェーズ2にいます。

  1. 編集の簡素化 — すでに WordPress 5.0 のリリース以来利用可能で、今も実装中です。
  2. カスタマイゼーション — フルサイト編集、ブロックパターン、ブロックディレクトリ、ブロックベーステーマ
  3. コラボレーション — より直感的なコンテンツの共同作業
  4. 多言語化 — コアの実装による多言語化サイト

いつ Gutenberg は始まりましたか ?

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

いつ Gutenberg は WordPress に組み込まれましたか ?

Gutenberg は2018年12月にリリースされた WordPress 5.0 で初めて組み込まれました。WordPress 本体リリースに組み込まれた Gutenberg プラグインのバージョンの完全なリストについては「Versions in WordPress」を参照してください。

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

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

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

これらを分かりやすく一貫性のあるものにするにはどうすればよいか考える過程で、「ブロック」というコンセプトを抱くようになりました。上のすべての項目はブロックにできる可能性があり、結果、検索しやすく理解しやすくページ内を動的に移動しやすくなります。ブロックの概念はとても強力で、よく考えて設計すれば、優れた編集と公開のエクスペリエンスを提供できます。最終的にはブロックを用いたアイデアは WordPress を横断する新しい共通言語の作成につながります。ブロックはユーザーとプラグインを結びつける新しい方法です。従来の、理解するには WordPress 固有の概念に精通しなければならないショートコードやウィジェットのような多くの古いコンテンツタイプを置き換えます。

執筆エクスペリエンスはどのようなものですか ?

Gutenberg のゴールはシームレスな投稿やページ構築エクスペリエンスを作り出すだけではありません。同時に、シームレスな執筆エクスペリエンスも提供したいと考えています。是非、デモを試してみてください !

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

あります。たくさんあります ! 利用可能なすべてのキーボードショートカットを表示するヘルプのモーダル画面があります。

エディターの右上にあるメニューで「キーボードショートカット」をクリックすると、完全なリストが表示されます。または、Linux / Windowsでは Shift+Alt+H、macOS では H のキーボードショートカットでも表示できます。

キーボードショートカットの標準的なリストを示します。

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

機能説明Linux/WindowsmacOS
キーボードショートカットを表示Shift+Alt+HH
変更を保存Ctrl+SS
最後の変更を取り消すCtrl+ZZ
最後の取り消しをやり直すCtrl+Shift+ZZ
設定サイドバーの表示、非表示Ctrl+Shift+,,
ブロック移動メニュー表示Shift+Alt+OO
エディターの次の部分へ移動Ctrl+``
エディターの前の部分へ移動Ctrl+Shift+``
エディターの次の部分へ移動 (別の方法)Ctrl+Alt+NN
エディターの前の部分へ移動 (別の方法)Ctrl+Alt+PP
最も近いツールバーへ移動Alt+F10F10
ビジュアールエディターとコードエディターの切り替えCtrl+Shift+Alt+MM
フルスクリーンモードの切り替えCMD+Option+Shift+FF

選択ショートカット

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

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

機能説明Linux/WindowsmacOS
選択したブロックの複製Ctrl+Shift+DD
選択したブロックの削除Shift+Alt+ZZ
選択したブロックの前に新規ブロックを挿入Ctrl+Alt+TT
選択したブロックの後に新規ブロックを挿入Ctrl+Alt+YY
選択したブロックの上への移動Ctrl+Alt+Shift+TT
選択したブロックの下への移動Ctrl+Alt+Shift+YY
新規段落追加後のブロックタイプ変更//
選択した複数のブロックの削除delbackspace

テキスト書式

機能説明Linux/WindowsmacOS
選択したテキストを太字にCtrl+BB
選択したテキストを斜体にCtrl+II
選択したテキストに下線Ctrl+UU
選択したテキストをリンクにCtrl+KK
リンクを削除Ctrl+Shift+KK
選択したテキストに取消し線Shift+Alt+DD
選択したテキストをモノスペースフォントにShift+Alt+XX

キーボードショートカットを見つけて利用する方法を示した簡単なアニメーションを用意しました:

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バージョンを意味します。

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

もっとも良いスタート地点は ブロックの作成 チュートリアル です。

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

いいえ。Gutenberg は主として投稿やページの編集画面の代替としてデザインされています。「フロントエンド編集」はしばしば「フロントエンドとまったく同じように見えるエディター」と混同されます。Gutenberg ではテーマが個々のブロックをカスタマイズしてエディターをスタイリングできます。コンテンツは、デスクトップやモバイル、全文フィード、配信記事プラットフォームなど多くの異なるエクスペリエンス用に配布されるため、1つのフロントエンドエクスペリエンスから投稿を作成したりデザインすることは理想的ではありません。

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

新しいブロックエディターでのメタボックスの使用についての詳細は メタボックスチュートリアル を参照してください。

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

強調したいメインの拡張ポイントは新しいブロックの作成です。ブロックはプラグインを使用してブロックエディターに追加されます。入門としては ブロックの作成 チュートリアル を参照してください。

カスタム投稿タイプはまだサポートされますか ?

もちろんです。カスタム投稿タイプが 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 には新しい共通の挿入ツールが含まれます。利用可能なすべてのブロックにアクセスしたり、検索して最近の利用やカテゴリーでソートできます。この挿入ツールはエディターにコンテンツを追加するすべてのプラグインに対して条件を平等にし、使い方を習得するただ1つのインターフェイスを提供します。

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

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

ただし、私たちはブロックを [shortcode] の進化系として見ています。コードをタイプする代わりに、全体で共通の挿入ツールのトレーを使ってブロックを選択し、設定やプレビューが可能なリッチな UI を手に入れることができます。最終的には、ショートコードをブロックにアップグレードすることを推奨します。

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

さまざまな理由により移行すべきと考えます。理由は以下に限りません。

  • ブロックには組み込みのビジュアルな編集機能があり、サイトの構築においてよりリッチで動的なエクスペリエンスを作成します。
  • ブロックは単純な HTML であり、ブラウザーが理解できないフロントエンド上の何かを求めません。一方、ショートコードは実装するプラグインを無効化するとフロントエンドに奇妙なビジュアル、一般にはプレインテキストで記述されたショートコードが表示されます。
  • ブロックディレクトリーがサポートされると機能を追加したいユーザーはブロックをより簡単に見つけられます。ショートコードでは決して実現できない方法です。

最終的には、ブロックは見た目のビジュアルな表現となるようデザインされています。バージョン 5.5 でサポートされるブロックディレクトリーはユーザーが WordPress でコンテンツを発見し、挿入する際の通常の方法となるでしょう。

Gutenberg は適切にアクセシビリティに対応して作成されていますか ?

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

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

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

技術概要のイントロダクションで解説したように私たちのアプローチは、15年間 WordPress で積み重ねられてきたコンテンツを壊さない方法で既存のデータ形式を拡張します。つまり、主に編集コンテキストで利点のある投稿メタ内の JSON のような機械的に便利なファイルよりも、Web の HTML 文書のように人間の可読性やレンダリングの容易性を優先した形式で最適化します。

これはまた、ウィジェットや小さな投稿タイプ要素の再利用可能なパーツであるコンテンツストリームから本質的にブロックを分離してどこかに保存し、代わりにその場所へトークンリファレンスのみを保持するという柔軟性を与えます

プロジェクトのこの部分がどのように動作するかをより深く理解するには、Gutenberg キーコンセプトを参照してください。

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

JS の場合:

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

PHP の場合:

$blocks = parse_blocks( $post_content );

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

エディターは日々の WordPress の使用においてもっとも多くの操作が行われる場所であり、環境としてブロックエクスペリエンスを改良し、完璧なものにできる場所です。またオープンソースプロジェクトとして、WordPress は革新を続け、すべてのユーザーにとってコアエクスペリエンスを直感的で楽しめるものにするために努力し続けることが重要であると考えています。コミュニティプロジェクトとして、Gutenberg はまさにそれを実行できる可能性があり、この目標を一緒に追求することにワクワクしています。テスト、貢献、フィードバックがあれば、GitHub での共有を歓迎します。

問い合わせ先

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

参照

原文

最終更新日: