グーテンベルクプロジェクト

グーテンベルクとは何ですか?

「グーテンベルク」は、WordPressの新しいエディター体験を作成するためのプロジェクトの名前です。貢献者たちは2017年1月からこのプロジェクトに取り組んでおり、WordPressにとって数年ぶりの最も重要な変更の一つです。「ブロック」を使用して投稿やページを書くこととデザインすることを基本に構築されています。これは、投稿やページをデザインするだけでなく、全体のサイトをデザインするための将来の改善の基盤となります。全体の目標は、WordPressの初めてのユーザー体験を簡素化することです。これは、ウェブページを作成、編集、公開、デザインする人々のためのものです。編集体験は、ユーザーが公開ボタンを押したときに自分の投稿やページがどのように見えるかをより良く視覚的に表現することを意図しています。元々、これが開始目標でした:

エディターは、リッチな投稿を簡単に書ける新しいページと投稿の構築体験を作成することを目指し、今日ではショートコード、カスタムHTML、または「ミステリーミート」埋め込みの発見が必要なことを簡単にするための「ブロック」を持っています。
主なポイントは以下の通りです:

  • リッチにレイアウトされた投稿の作成は、WordPressの重要な強みです。
  • ブロックをインタラクションパラダイムとして受け入れることで、複数の異なるインターフェースを一つに統合できます。ショートコードやカスタムHTMLを学ぶ代わりに、メディアを埋め込むためのURLを貼り付ける代わりに、あらゆる種類のコンテンツを挿入するための共通で信頼できるフローがあります。
  • 「ミステリーミート」とは、ソフトウェアの隠れた機能、つまり発見しなければならない機能を指します。WordPressはすでに多くのブロックと30以上の埋め込みをサポートしているので、それらを表に出しましょう。

グーテンベルクはGitHubでWordPress組織の下で開発されています。ブロックエディターは、WordPress 5.0以降のコアに利用可能です。グーテンベルクプロジェクトの今後の機能をテストしたい場合は、プラグインリポジトリで利用可能です。

長期的なロードマップには何がありますか?

グーテンベルクには4つのフェーズがあり、公式WordPressロードマップで見ることができます。この記事を書いている時点で、私たちは現在フェーズ2にいます:

  • 1. 編集の簡素化 — すでにWordPress 5.0から利用可能で、継続的に改善されています。
  • 2. カスタマイズ — フルサイト編集、ブロックパターン、ブロックディレクトリ、ブロックベースのテーマ。
  • 3. コラボレーション — コンテンツを共同執筆するためのより直感的な方法
  • 4. 多言語 — 多言語サイトのためのコア実装

グーテンベルクはいつ始まりましたか?

エディターの焦点は2017年初頭に始まり、最初の3ヶ月はこのプロジェクトに取り組む方法を明確にするために設計、計画、プロトタイピング、プロトタイプのテストに費やされました。最初のプラグインは2017年6月のWordCamp Europeで発表されました。

グーテンベルクはいつWordPressに統合されましたか?

グーテンベルクは2018年12月にWordPress 5.0に最初に統合されました。WordPressコアリリースに統合されたグーテンベルクプラグインのバージョンの完全なリストについては、WordPressページのバージョンを参照してください。

WordPressはすでに世界で最も人気のある出版プラットフォームです。なぜエディターを変更する必要があるのですか?

エディターはWordPressの日常使用において最も多くのアクションが行われる場所であり、ブロック体験を洗練し、完璧にすることができる環境でした。さらに、オープンソースプロジェクトとして、WordPressが革新を続け、すべてのユーザーにとってコア体験を直感的で楽しいものにすることが重要だと考えています。コミュニティプロジェクトとして、グーテンベルクはまさにそれを実現する可能性を秘めており、この目標を共に追求できることに興奮しています。テスト、貢献、フィードバックを提供したい場合は、GitHubで見つけたことを共有することを歓迎します

編集体験

「ブロック」とは何ですか?なぜそれを使用するのですか?

従来のWordPressエディターはオープンなテキストウィンドウです。常に書くための素晴らしい白紙のキャンバスでしたが、画像、マルチメディア、ソーシャルメディアからの埋め込みコンテンツ、投票、その他の要素を使用して投稿やページを構築する際には、常に直感的ではないさまざまなアプローチの組み合わせが必要でした:

  • メディアライブラリ/HTMLは画像、マルチメディア、承認されたファイル用。
  • 埋め込み用のリンクを貼り付け。
  • プラグインからの特殊な資産用のショートコード。
  • 投稿やページの上部に表示される画像用のフィーチャー画像。
  • サブヘッディング用の抜粋。
  • ページの側にコンテンツを表示するためのウィジェット。

これらの使用法を考え、明確で一貫性のあるものにする方法を考えた結果、「ブロック」の概念を受け入れることになりました。上記のすべての項目はブロックとして扱うことができ、簡単に検索でき、理解でき、ページ上で動的に移動させることができます。ブロックの概念は非常に強力であり、慎重に設計されると、優れた編集および公開体験を提供できます。最終的に、ブロックのアイデアは、WordPress全体で新しい共通言語を作成し、ユーザーをプラグインに接続する新しい方法を提供し、通常はWordPressの特異性を理解するために熟知している必要がある古いコンテンツタイプ(ショートコードやウィジェットなど)を置き換えることです。

執筆体験はどのようなものですか?

グーテンベルクの目標は、シームレスな投稿およびページ構築体験を作成するだけではありません。シームレスな執筆体験を提供することも目指しています。これを自分でテストするには、このデモにアクセスして試してみてください!

グーテンベルクはTinyMCEの上に構築されていますか?

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

グーテンベルクにはキーボードショートカットがありますか?

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

新しいエディターの右上隅のメニューに移動し、「キーボードショートカット」をクリックすることで、全リストを見ることができます(または、Linux/Windowsではキーボードショートカット
Shift+Alt+H、macOSではHを使用します)。

キーボードショートカットを見つけて使用する方法を示す簡単なアニメーションがあります:

キーボードショートカットにアクセスする方法を示すGIF

グーテンベルクはカラムをサポートしていますか?

はい、グーテンベルクにはカラムブロックが利用可能です。

グーテンベルクはネストされたブロックをサポートしていますか?

はい、サポートされています。複数のレベルのネストが可能です – ブロック内のブロック内のブロック。詳細については、ネストされたブロックチュートリアルを参照してください。

ドラッグアンドドロップでブロックの順序を変更できますか?

はい、ブロックをドラッグアンドドロップして順序を変更できます。

開発体験

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

最初に始めるのに最適な場所は、ブロックを作成するチュートリアルです。

グーテンベルクはフロントエンドでの投稿/ページの編集を含みますか?

いいえ、私たちは主に投稿とページの編集画面の代替としてグーテンベルクを設計しています。ただし、フロントエンド編集は、フロントエンドとまったく同じように見えるエディターと混同されることがよくあります。そして、それはテーマが個々のブロックをカスタマイズし、そのスタイルをエディターに提供することを可能にするものです。コンテンツは、デスクトップやモバイルからフルテキストフィードやシンジケートされた記事プラットフォームに至るまで、さまざまな体験に分配されるように設計されているため、単一のフロントエンド体験から投稿を作成または設計することは理想的ではないと考えています。

グーテンベルクはJavaScriptで構築されているため、古いメタボックス(PHP)はどのように機能しますか?

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

プラグインはどのようにグーテンベルクUIを拡張できますか?

私たちが強調したい主な拡張ポイントは、新しいブロックを作成することです。ブロックはプラグインを使用してブロックエディターに追加されます。最初のブロックを作成するチュートリアルを参照して、始めてください。

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

確かに。カスタム投稿タイプはグーテンベルクを活用するための複数の方法があります。計画は、サポートするブロックを指定できるようにし、投稿タイプのデフォルトブロックを定義することです。現在はそうではありませんが、投稿タイプがコンテンツフィールドを無効にすると、ページの下部にある「詳細」セクションが埋まります。

スタイル

テーマはブロックのスタイルを設定できますか?

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

ブロックスタイルはフロントエンドとバックエンドの両方でどのように機能しますか?

ブロックは基本的な構造CSSスタイルを提供でき、テーマはこれにスタイルを追加できます。一部のブロック(セパレーター(<hr/>)など)は、フロントエンドスタイルを必要としない可能性がありますが、ギャラリーのような他のブロックは少し必要です。

新しいワイドおよびフルワイドアライメントオプションのような他の機能は、単にこのアライメントを提供するためにブロックに適用されるCSSクラスです。テーマがこの機能をオプトインする方法を検討しています。たとえば、add_theme_supportを使用します。

これは現在進行中の作業であり、ブロックベースのテーマドキュメントを確認して詳細を学ぶことをお勧めします。

ブロックのバリエーションとは何ですか?それはブロックスタイルと同じですか?

いいえ、ブロックのバリエーションは、単一の基本ブロックの異なるバージョンであり、機能は似ていますが、実装や設定(属性、InnerBlocksなど)にわずかな違いがあります。ブロックのバリエーションはユーザーにとって透明であり、登録されたブロックのバリエーションがあると、新しいブロックとして表示されます。たとえば、embedブロックは特定のプロバイダーからコンテンツを埋め込むための異なるブロックのバリエーションを登録します。

一方、ブロックスタイルは、既存のブロックに代替スタイルを提供することを可能にし、ブロックのラッパーにclassNameを追加することで機能します。ブロックがブロックスタイルを登録すると、ブロックスタイルセレクターがサイドバーに表示され、ユーザーは異なる登録スタイルの中から選択できます。

エディタースタイルはどのように機能しますか?

通常のエディタースタイルはオプトインであり、ほとんどの場合そのまま機能します。テーマは次のフックを使用して追加のスタイルシートを読み込むこともできます:

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

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

互換性

グーテンベルクはどのブラウザをサポートしていますか?

グーテンベルクは最新のブラウザで動作します。

サポートされているブラウザのリストはMake WordPressハンドブックで見つけることができます。「最新のブラウザ」という用語は、一般的に各主要ブラウザの現在および前の2バージョンを指します。

WordPress 5.8以降、グーテンベルクはInternet Explorerのいかなるバージョンもサポートしなくなりました。

グーテンベルクが私のプラグインを時代遅れにすることを心配するべきですか?

グーテンベルクの目標は、誰かをビジネスから排除することではありません。すべての人にとって将来のビジネスが増えるようにWordPressを進化させることです。

リッチな投稿およびページ構築体験を可能にすることに加えて、メタ目標はWordPressを前進させることです。UIを現代化するだけでなく、基盤を現代化することによって。

大きな変化であることは理解しています。また、プラグインにとって多くの新しい機会があると考えています。WordPressは基本的なブロックの範囲を持って出荷される可能性が高いですが、既存のブロックを補強したり、新しいブロックを追加したりするための高度にカスタマイズされたプレミアムプラグインの余地はたくさんあります。

私のサイトでグーテンベルクをオプトアウトすることは可能ですか?

「クラシック」ブロックがあり、これは現在のエディターとほぼ同じですが、ブロック形式です。

また、以前のエディターを復元するクラシックエディタープラグインもあります。詳細についてはプラグインを参照してください。WordPressコアチームは、2021年12月までクラシックエディタープラグインをサポートすることを約束しています。

カスタムTinyMCEボタンはグーテンベルクでどのように機能しますか?

カスタムTinyMCEボタンは「クラシック」ブロックで機能し、これは現在知っているクラシックエディターのブロックバージョンです。

グーテンベルクには新しいユニバーサルインサーターツールが付属しており、利用可能なすべてのブロックにアクセスでき、検索可能で、最近のものやカテゴリ別に整理されています。このインサーターツールは、エディターにコンテンツを追加するすべてのプラグインに対して公平な競争の場を提供し、使用方法を学ぶための単一のインターフェースを提供します。

ショートコードはグーテンベルクでどのように機能しますか?

ショートコードは現在と同じように機能し続けます。

ただし、ブロックは[shortcode]の進化と見なしています。コードを入力する代わりに、ユニバーサルインサータートレイを使用してブロックを選択し、ブロックの構成とプレビューのためのリッチなインターフェースを得ることができます。最終的には、ショートコードをブロックにアップグレードすることをお勧めします。

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

私たちはそう考えています。理由はいくつかありますが、以下に示します:

  • ブロックには視覚的な編集が組み込まれており、サイト構築のためのよりリッチでダイナミックな体験を生み出します。
  • ブロックは単なるHTMLであり、ブラウザがフロントエンドで理解できないものを持続しません。比較すると、ショートコードを支えるプラグインを無効にすると、フロントエンドで奇妙なビジュアルが表示されます(しばしばショートコードがプレーンテキストで表示されます)。
  • ブロックは、ブロックディレクトリの立ち上げにより、ショートコードが決してできなかった方法で、より多くの人々がより多くの機能を得ることを可能にします。

最終的に、ブロックは最終的な外観を視覚的に表現するように設計されており、5.5でのブロックディレクトリの立ち上げにより、ユーザーがWordPressでコンテンツを発見し挿入する期待される方法になります。

その他

グーテンベルクは適切にアクセシブルに作られていますか?

アクセシビリティは後回しにされていません。現在、グーテンベルクのすべての側面がアクセシブルであるわけではありません。ログされた問題はこちらで確認できます。私たちは、WordPressはすべての人のためのものであり、アクセシビリティは包括性に関するものであることを理解しています。これは私たちの重要な価値です。

グーテンベルクのアクセシビリティに貢献したい場合は、テストや貢献を行うための人々が常に必要です。

データはどのように保存されますか?HTMLコメントを見たことがあります。それらの目的は何ですか?

私たちのアプローチは、技術的概要の紹介に概説されているように、WordPressが提供するコンテンツの15年以上の基盤を壊さない方法で既存のデータ形式を拡張することです。言い換えれば、これは人間の可読性(ウェブのHTMLドキュメント)とどこでも簡単にレンダリングできることを優先する形式を最適化し、主に編集コンテキストに利益をもたらす機械に便利なファイル(投稿メタのJSON)を優先することです。

これにより、コンテンツストリームから本質的に分離されたブロック(ウィジェットや小さな投稿タイプ要素など)を他の場所に保存し、その配置のためのトークン参照を保持する柔軟性が得られます。

このプロジェクトのこの側面がどのように機能するかについて詳しく知りたい場合は、グーテンベルクの主要概念を確認してください。

投稿コンテンツをPHPまたはJSのブロックに解析するにはどうすればよいですか?

JSでは:

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

PHPでは:

  1. $blocks = parse_blocks( $post_content );