WordPressワードプレス)のブロックエディタGutenberg)とは、WordPress 5.0 以降で標準搭載されているエディタ(記事を編集する画面)です。ブロックエディタの最大の特徴は、コンテンツを「ブロック」単位で挿入することです。

ブロックエディタ(Gutenberg)とは

ブロックエディタとは、WordPress バージョン5.0 以降で標準搭載されているエディタ(記事を編集する画面)です。

「Gutenberg(グーテンベルク)」という名前は、活版印刷技術の発明者といわれるJohannes Gutenberg(ヨハネス・グーテンベルク)にあやかって付けられています。

ブロックエディタの特徴

ブロックエディタの最大の特徴は、コンテンツを「ブロック」単位で挿入することです。

ブロックエディタと旧エディタを比較

ここで、WordPress 5.0 よりも古いバージョンで搭載されていたエディタ(以下、旧エディタ)と、ブロックエディタとを見比べてみることにしましょう。

旧エディタは、記事本文中の見出しや段落、画像などのコンテンツを1つの大きな領域内で編集していました。

旧エディタ(ビジュアルエディタ)の表示例
旧エディタ(ビジュアルエディタ)の表示例

一方のブロックエディタでは、記事タイトル、見出し、段落、画像などを個別のブロックに分けて編集します。つまり、複数のブロックを組み合わせることによって1つの記事ページを完成させるわけです。

ブロックエディタの表示例
ブロックエディタの表示例
旧エディタと新しいブロックエディタとでは使い勝手が全く異なるため、古くからのWordPress利用者にとっては、ブロックエディタは使いにくいという声もあるようです。そこでWordPressでは、旧エディタ環境に戻すためのプラグイン「Classic Editor」が用意されています。

ブロック単位で編集するメリット

ブロックエディタでは、選択するブロックに応じて、設定に関する表示内容が切り替わるようになっています。

例えば「見出し」ブロックを選択した状態の画面と、「段落」ブロックを選択した状態の画面とを見比べてみましょう。明るく表示されている部分に注目してみてください。

ブロックエディタ 見出しブロックと段落ブロックの画面を比較

選択するブロックごとに、設定に関する表示が変化していることがわかります。しかも、各ブロック近くには設定に必要なボタン類が表示されるため、効率的な編集が可能になりました。

旧エディタでは、設定用の表示が画面上部に固定されており、特にコンテンツ量が多い記事ではマウス操作に手間がかかるという欠点がありました。また、1か所にたくさんの設定ボタンがあるため、必要なボタンを見つけにくいという不便さもあったのです。

旧エディタ 設定用の表示が固定

ブロックエディタの画面構成と使い方

あらためて、ブロックエディタの画面構成を見ていきましょう。下の図は、WordPress管理画面[投稿]>[新規追加]をクリックした直後の画像です。

ブロックエディタ 新規投稿を追加画面

ブロックエディタの画面は、次の4つの領域があります。

  • ツール
  • 保存/公開、各種設定
  • コンテンツ編集
  • 設定パネル

それぞれの領域で表示される内容は、記事の編集状況によって変化します。

使用しているテーマやプラグインによっては、表示内容が追加されることもあります。

さて、ブロックエディタで見出し、段落、画像などの各種コンテンツを記事内に挿入するためには、コンテンツ編集領域内でコンテンツの数だけブロックを追加する必要があります。

そこで、ブロックエディタの使い方をマスターする第一歩として、まずはブロックを追加する方法を紹介します。

ブロックを追加する

ブロックエディタでブロックを追加する方法として、次の5つを紹介します。

新しいブロックを追加する5つの方法
  1. ブロックエディタ画面左上の[ブロックの追加]アイコン[ブロックの追加]をクリック
  2. ブロックの上部または下部をマウスオーバーして中央の[ブロックの追加]アイコン[ブロックの追加]をクリック
  3. 空っぽのブロックを選択して左側にある[ブロックの追加]アイコン[ブロックの追加]をクリック
  4. ブロックを選択して[Enter(またはReturn)キー]を押す
  5. 既存のブロックを選択してブロック 詳細設定アイコン[詳細設定]をクリックし、追加操作を選択

方法1~3では、ブロックの種類を指定した上で追加することができます。しかし方法4~5では、ブロックを追加した後で種類を変更しなければなりません。くわしくは、下記ページをご覧ください。

よく使うブロックの使い方

一般的なサイトを制作するうえで使用頻度が高いと思われるブロックの使い方を、下記ページで紹介しています。

ブロックを並べ替え/削除する

ブロックエディタでは、コンテンツの並べ替えや削除の操作も、ブロック単位で簡単に行うことができます。

ブロックの並べ替え
ブロックの並べ替え
ブロックの削除
ブロックの削除

くわしくは、下記をご覧ください。