WordPress Gutenberg：新しいブロックエディターを体験してください

すべての新しいWordPressリリースは大きな熱意を持っており、WordPress5.0「Bebo」も例外ではありません。

実際、WordPress 5.0はそれ以前のどのバージョンよりもはるかに多くの興奮を集めており、その理由は単純です。「ブロック」に基づく新しいWordPressエディターであるGutenbergは、今や人気のCMSの不可欠な部分です。

この記事では、Gutenberg WordPress Editorとは何か、そしてそれを理解する方法について説明します。 始めましょう！

WordPress Gutenbergとは何ですか？

WordPress Gutenbergは、完全に再設計され、再考されたエディターです。 これは、エディターを一連の問題の簡単な修正と見なすWordPressユーザーにとっては素晴らしいおもてなしです。 実際、コンテンツ制作を直接扱うユーザー（ブロガー、編集者、コピーライター）は、グーテンベルクの編集者について良いことしか言えません。

これは、WordPressクラシックエディターであるTinyMCEに置き換わり、WordPress5.0以降のWordPressコアの一部になりました。

Gutenberg WordPress Editorは、投稿やページの作成体験を新しいレベルに引き上げ、コンテンツ作成の体験を豊かにします。 これは、完璧なブログ投稿を作成するために使用できる単純なツールであるだけでなく、強力なビジュアルエディターでもあります。 これは、ユーザーがあらゆるタイプのコンテンツを便利に作成できるようにするブロックアーキテクチャに基づいています。

ショートコードと手動のHTMLブロックを排除し、コンテンツの編集と公開のプロセスを大幅に簡素化するために、グーテンベルクは動的ブロックを提供し、コンテンツの作成とページ管理をよりユーザーフレンドリーにします。

グーテンベルクエディターvs.クラシックエディター

WordPressの新しいエディターに飛び込む前に、まずグーテンベルクブロックエディターとクラシックエディターの違いを比較して理解しましょう。

クラシックWordPressエディターは次のようになりました。

WordPress 5.0にアップグレードすると、新しいブロックエディターは次のようになります。

ご覧のとおり、これらはWordPressでコンテンツを作成するための2つの完全に異なるエディターです。

古いクラシックエディタは、MicrosoftWordと同様の書式設定ボタンを備えたテキストエディタでした。 新しいエディターは、「ブロック」と呼ばれるまったく異なる編集アプローチを採用しています（そのため、ブロックエディターという名前が付けられています）。

段落、画像、ビデオ、ギャラリー、オーディオ、リストなどのブロックを追加できます。 すべての一般的なコンテンツ要素にはブロックがあり、その他はWordPressプラグインを介して、またはコードを介してGutenbergエディターの機能を拡張することで追加できます。

Gutenberg WordPressEditorを使用する理由

• グーテンベルクエディターは視覚的で直感的でクリーンです。
• セクションごとにコンテンツを変更できます。 これにより、明確な画像が表示され、間違いを回避できます。
• ほぼすべてのユースケースに対応する豊富なブロックの選択肢があります。
• ヘッダーとフッターはデフォルトで表示されます。
• WordPress Gutenbergを使用すると、コンテンツのスタイルを設定するために別のビルダーをインストールする必要はありません。
• モバイルデバイスやタブレット向けの優れたユーザビリティ。
• 他のプラットフォームからのコンテンツの簡単で迅速な埋め込み。

プラグインのパフォーマンスはすべてのデバイスで良好であり、Webサイトがどのユーザーにとっても遅くなることはありません。

—出典：GutenbergEditorのWordPress / Performance Benchmark

ただし、WordPressのすべてのものと同様に、Gutenbergプラグインにも裏返しがあります。 今は、コミュニティによるプラグインの採用に悪影響を与えると思うポイントをリストする絶好の機会だと思います。

グーテンベルクワードプレスエディターの短所

コンテンツの編集の問題に加えて、ユーザーはGutenbergEditorを使用するときに問題に直面することがあります。 これが例です！

新しい#WordPressサイトで基本的なタスクを実行する際の問題に定期的に直面します。 今日、まだ保存されていない新しいページのテキストにハイパーリンクを追加し、既存のページを更新するときにブロックエラーを受け取ることに苦労しました。 クラシックエディタの時間かもしれません—もう一度。 #Gutenberg pic.twitter.com/rdUII0OUZF

— Colleen M. Brady（@ColleenMBrady）2019年4月12日

一部のユーザーは、インストールされているプラ​​グインとテーマとの互換性の問題を報告しています。

プラグインの互換性は、グーテンベルクにとって深刻な問題です。 理由は単純です。ほとんどのプラグインはWordPressエディターと直接対話して、新しい機能を追加し、コア機能を拡張するためのショートコードを含めます。

このため、インストールするプラグインはグーテンベルクと互換性がある必要があります。 多くのプラグインはプラグインの互換性を提供しない（または気にしない）ため、これは深刻な問題です。 したがって、プラグインとグーテンベルクの互換性の問題を確認することをお勧めします。

WordPressGutenbergでの作業

ここで、新しいWordPressエディターであるグーテンベルクの主要なブロックを発見しましょう。

グーテンベルクブロックとは何ですか？

ブロックは、コンテンツレイアウトを作成するためにエディターに追加するコンテンツの一部です。 ページまたは投稿に追加する各アイテムはブロックです。

Classic WordPress Editorはすでにこれらの要素をサポートしていますが、Gutenbergを使用すると、コードの記述に関する深い知識がなくても、コンテンツの統合がより簡単で直感的になります。

右側の「+」ボタンは、さらにタブに分割されたタブを開きます。 各タブには、論理的に編成されたブロックのリストが表示されます。 「ブロック」タブには、次のブロックのグループが表示されます。

• 「インライン要素」セクションには現在、インライン画像を挿入するための単一のブロックがあります。
• 「共通ブロック」セクションには、投稿またはページを作成するための段落、画像、見出しなどを含むすべての基本ブロックが含まれています。
• 「フォーマット」セクションには、投稿やページのコンテンツをカスタマイズするためのコード、カスタムHTMLなどのオプションがあります。
• 「レイアウト要素」セクションでは、ボタン、列、グループ、メディア、およびテキストをカスタマイズできます。
• 「ウィジェット」セクションでは、ショートコード、アーカイブ、カレンダー、最新のコメント、投稿、タグクラウドを埋め込むことができます。
• 「埋め込み」セクションでは、追加のプラグインを必要とせずに、Facebook、Twitter、YouTubeなどの外部リソースの統合のサポートが追加されます。

グーテンベルクブロックマネージャー

この機能は、ほとんどのユーザーが使用する予定のないすべてのブロックを表示するのが面倒であるため、常に需要があります。

あなたにやってくる新しいブロックマネージャーで遊んでください＃Gutenberg＃WordPressインストール* SOON *！ 私はこれまでに見たものが好きです。この機能は、ユーザーレベルでブロックのオン/オフを切り替えるのに大きな価値があると思います（ワークショップでこれについてすでに質問がありました！）pic.twitter.com/uZfAMNgF2y

— Monique Dubbelman（@BOEmedia）2019年3月15日

この機能は現在、最新のグーテンベルクバージョンで利用可能であり、WordPress5.2に同梱される予定です。 WordPress 5.0を使用している場合は、Gutenbergプラグインをダウンロードしてください。 すべてのページまたは投稿で縦の省略記号（⋮）で表される「ツールとオプションをさらに非表示」から「ブロックマネージャー」設定を構成できます。

「ブロックマネージャ」をクリックすると、ブロックを有効または無効にするためのメニューがポップアップ表示されます。 無効にするブロックのチェックを外すだけです。

グーテンベルクブロックの作成

グーテンベルクエディターのトップバーは、直感的な投稿管理のための一連のツールを提供します。 ツールバーの下には、コンテンツを作成するための2つの領域と[設定]メニューがあります。

新しいページまたは投稿の編集領域には、タイトルと最初の段落を対象とした2つのデフォルトのブロックと、新しいブロックを追加するためのボタンがあります（以下を参照）。

デフォルトのブロック

記事のブロックが構成可能である場合、段落ブロックには2つのツールバーが用意されています。 最初の左上は、フォーマットツールを提供します。 2つ目は、右側のボタンでアクティブになり、メニュー形式で構成されています。

このメニューから、現在のブロックタイプを変更し、段落をヘッダー、リスト、または引用符に変換することもできます。 メニューはブロックの種類によって異なります。

ツールメニュー

「+」記号の下に隠されているボタンを使用すると、新しいブロックを挿入できます。 マウスにカーソルを合わせると、デフォルトのブロックのショートカットが表示されます。 そして、これらのブロックをクリックすると、使用可能なブロックのパネルが開きます。

埋め込みブロックを追加する

必要なブロックが選択されると、エディターはコードを作成するためのオプションを含むフォームを表示します。 ユーザーはコードを管理する必要がなくなり、ウィザードに従うだけで済みます。 次の例では、YouTubeビデオのURLを入力するだけです。

埋め込みフォームを追加する

「埋め込みブロック」を挿入すると、下の画像に示すように、使用可能なオプションが変わります。

埋め込みブロックを構成する

多くのブロックでは、タイプを変更できます。たとえば、段落からリスト、引用符またはヘッダーに変更できます。 このシンプルな機能がユーザーに提供する自由度を想像することができます。

リストブロック

挿入すると、ブロックをドラッグアンドドロップするか、ブロックの左側にある上/下ボタンをクリックして、ブロックを並べ替えることができます。

ツールバー

新しいエディターのツールバーは、従来のエディターのサイドバーに似ています。 違いはインターフェースにあります。これは使いやすさの原則とより一貫性があり、ユーザーエクスペリエンスを確実に豊かにします。

デフォルトのサイドバー

新しいサイドバーは、「ドキュメント」と「ブロック」の2つのタブに分かれています。

最初のタブには、アコーディオンメニューと同じ方法で圧縮または拡張できるいくつかのウィジェットが含まれています。 ブロックと呼ばれる2番目のタブには、選択したブロックの詳細設定が表示されます。 次の画像では、「段落」ブロックの設定を示しています。

再利用可能なブロックの作成

ブロックの利点の1つは、ブロックを保存して個別に再利用できることです。 これは、パブリケーションに特定のコンテンツフォーマットスニペットを頻繁に使用する必要があるブロガーや編集者にとって特に便利です。

各ブロックのツールバーの右隅にあるメニューボタンをクリックするだけです。 ポップアップ表示されるメニューで、[再利用可能なブロックに追加]オプションを選択します。

再利用可能なブロックの名前を入力するように求められます。 名前を入力し、「保存」ボタンをクリックします。

ブロックエディタは、それを再利用可能なブロックとして保存します。 ブロックを保存したので、再利用可能なブロックをWebサイトの他の投稿やWordPressページに追加する方法を見てみましょう。

グーテンベルクブロックのインポート/エクスポート

再利用可能なブロックを追加するページに移動するだけです。 編集セクションで、「ブロックの追加」ボタンをクリックします。

保存したブロックは[再利用可能]タブにあります。 検索バーに名前を入力して見つけることもできます。

カーソルを合わせると、ブロックの概要をすばやく確認できます。 ブロックをクリックするだけで、ページに挿入できます。

すべての再利用可能なブロックはWordPressデータベースに保存されており、 [すべての再利用可能なブロックを管理する]リンクをクリックしてリストを管理できます。 これにより、「ブロックマネージャー」ページに移動します。 そこから、再利用可能なブロックを編集または削除できます。 再利用可能なブロックをエクスポートして、他のWordPressWebサイトで使用することもできます。

グーテンベルクエディタを無効にする方法は？

新しいWordPressエディターは、これまでで最も物議を醸したWordPress機能の1つです。 幸い、「ブロック」パラダイムに耐えられないユーザーは、いつでも従来のエディターに戻ることができます。 そして、彼らはこれから何年もそれを行うことができます。

@SassCSSまたは@PostCSS（あるいはその両方）をデフォルトの `wp-scripts`ビルドプロセスに含めるべきかどうかについて、＃Gutenbergリポジトリで起こっている興味深い議論。 あなたの入力は貴重です：https：//t.co/qbPmY80NhJ #WordPress

—モーテンはこのすべてからの長い休憩中です（@ mor10）2019年4月4日

Disable Gutenbergは、最も人気のある「Anti-Gutenberg」プラグインの1つです。 ブロックエディターを根絶し、Classic WordPressEditorに置き換える予定です。

プラグインは、5.0より前のバージョンのWordPressに表示された「TryGutenberg」への招待を含め、WordPressからGutenbergトラックを削除する可能性を提供します。 プラグインがインストールされると、「設定」領域の新しいセクションですべてのオプションが使用可能になります（デフォルトで有効になります）。

まとめ！

WordPress Gutenberg Editorを見ると、実際のコンテンツを作成するよりも、ブロックの追加と調整に多くの時間を費やすのではないかと疑問に思われるかもしれません。 さて、新しいブロックエディタは信じられないほど高速で、数分間の非常に基本的な使用でさえ、プラグインをより頻繁に使用するように説得します

この記事に関連するフィードバックがある場合は、以下のコメントセクションを使用してください。