よくある質問

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

「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. 多言語化 — コアの実装による多言語化サイト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

はい。「カラム」ブロックを利用可能です。

はい、サポートします。複数レベルの入れ子もサポートします。たとえばブロックの中のブロックの中のブロック。詳細については チュートリアルのネストしたブロック を参照してください。

はい。ブロックをドラッグ & ドロップして並べ替えることができます。

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

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

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

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

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

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

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

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

現在も作業中です。詳細についてはブロックベーステーマのドキュメントのレビューを推奨します。

違います。ブロックバリエーションは、単一のベースとなるブロックの異なるバージョンです。同じような機能を共有しますが、実装や設定 (属性、InnerBlock 等) は、かなり異なります。ブロックバリエーションをユーザーが意識することはなく、登録されたブロックバリエーションは新しいブロックとして出現します。たとえば embed ブロックは、複数の特定プロバイダーからのコンテンツを埋め込むために、異なるブロックバリエーションを登録します。

一方、ブロックスタイル を使用すると既存のブロックに代替のスタイルを提供できます。これは、ブロックのラッパーに classsName を追加することで動作します。ブロックに登録済みのブロックスタイルがあると、サイドバーにブロックスタイルセレクタが表示され、ユーザーは異なる登録済みスタイルを選択できます。

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

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 はモダンブラウザーで動作します。

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

WordPress 5.8以降、Gutenberg は Internet Explorer のどのバージョンもサポートしなくなりました。

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

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

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

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

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

カスタム TinyMCE ボタンは「クラシック」ブロックで動作します。「クラシック」ブロックは従来のクラシックエディターのブロック版です。

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

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

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

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

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

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

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

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

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

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

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

JS の場合:

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

PHP の場合:

$blocks = parse_blocks( $post_content );

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

• 英語版ブロックエディターハンドブック
• 英語版リポジトリ
• 日本語版リポジトリ

原文

最終更新日: 2023年9月18日