ワードプレス　初めてのブロックエディター（編集画面の各機能）

2020年9月9日

ワードプレスの標準エディターであるブロックエディターの編集画面各機能について紹介します。

記事の作成の前に知っておくべき基本的な知識として活用ください。

テーマは、Twenty Twentyを使用します。

※この記事は、2020年8月のワードプレスversion5.5へのアップデートにより、2020年9月にリライトしました。

まずはブロックエディターを開けてみる

投稿機能を使ってブロックエディターを開くには、ダッシュボードメニューの投稿＞新規追加　と進めればOKです。デフォルト設定のワードプレスであれば、自動的にブロックエディターが開きます。

しかしクラシックエディターを標準設定にしてある場合はクラシックエディターが開くことになります。ダッシュボードメニューの設定＞投稿設定　で、ブロックエディターをデフォルト設定に戻してから投稿画面を開くようにしましょう。

このあたりの情報は次の記事も参照ください。

また、いったんクラシックエディターで作成した記事をブロックエディターで編集する場合は、次の記事がおすすめです。

開いたブロックエディターを見てみる

ブロックエディターの編集画面は下記のように、非常にシンプルになっています。

一番上が記事タイトル入力欄（”自動下書き”とあるところ）、その下のエリアが本文入力欄です。本文入力欄には、１つ目のブロック（”文章を入力、または／でブロックを選択”とあるところ）が表示されています。

この画面の各機能については、後ほど詳しく解説していきますが、まずは簡単に記事の投稿方法を説明しておきましょう。

記事タイトル欄に『新しい記事のタイトル』を入力（”自動下書き”はバックスペースで消去して入力します）した後、記事本文入力欄の１つ目のブロックにカーソルを置いて『これは新規作成の記事です。』を入力しているのが下記の画像です。

入力中のブロックの情報が、右側の設定パネルに自動的に表示されます。パネル内の一番上に”段落”と書かれているので、今現在、このブロックが段落ブロックであることがわかります。

段落ブロックの場合この設定パネル内で、ブロックごとの文字サイズや、文字色などを編集することができます。

１つ目のブロックの入力が終わって、[Enter]キー（リターン）を押すと２つ目のブロックに移ります。

ブロック要素の切り替え・選択方法

ブロックは特に指定しなければ、自動的に段落ブロックとなります。これを別のブロック要素に変更するには次のように進めます。

1. ブロック内の+マークをクリック
2. 表示された一覧からブロックを選んでクリックする

ただし、ここで表示されているのは”よく使うブロックだけ”で、ユーザーの使用状況に応じて変化していきます。

もし、使いたいブロックがこの中になければ、”すべて表示”をクリックすれば、下記のように画面左に全ブロック要素が表示されます。

画面左の全ブロック一覧をスクロールすればさまざまなブロックが表示されるので、目的のブロックを選択すればよいでしょう。

このように、ブロックエディターは、ブロック毎に要素を選択して、記事（コンテンツ）を構築していく、という考え方で記事を編集していきます。

ブロックエディター編集画面　各機能の解説

それでは、編集画面の各機能について解説していきましょう。もう一度編集画面に戻ります。

左上にツールバー、右上に制御ボタン、そしてその下に関連情報パネルが並んでいます。

この３つについて順番に解説していきましょう。

ツールバー　について

ツールバーは、左から

となっています。

ブロック追加は、+マークであることから予測できますが、先に説明したブロック内の+マークのクリックと同じく、ブロック一覧を表示させます。ブロック内の+マークでは、”よく使うブロックのみ”表示されましたが、このツールバー内の+マークでは、全ブロック一覧が表示されます。

ブロックの編集・選択の切り替えは、あまり使うことはないと思いますので割愛します。

元に戻す・やり直す　も、その通りの機能なので説明は省略します（ワードなどと同じく、作業を１つ戻したり、いったん戻した作業を再度進めるボタン）。

コンテンツ構造とブロックナビゲーションについてもう少し説明しましょう。
（※ブロックナビゲーションは現在ではリスト表示と呼ばれています）

下記のような記事の構成内容であった場合の、コンテンツ構造とナビゲーションの表示例を示します。

コンテンツ構造は、文章を構成する各要素の種類とその数およびその構成、を表示しています。また、上記の例のように、見出し(h2)の下には本来小見出しh3を使用すべきところにh4が使用されている場合、その要素の背景がオレンジ色となり、『（見出しレベルに間違いがあります）』とメッセージも表示されます。

要素の使用方法に間違いがある場合も警告表示してくれるのです。

ブロックナビゲーション（リスト表示）は、各ブロックの要素が順番に表示されます。クリックするとそのブロックに飛ぶこともできます。

制御ボタン　について

制御ボタンは、左から

となっています。

下書き保存、プレビュー、公開ボタンは、クラシックエディターと同様、名称通りの機能ですので説明を省力します。ただし、プレビューも公開も、いきなり進むのではなく、いったん１クッション置いて、再度クリックする、という方式です。

設定、ツールと設定　のボタンは下記の通りです。

設定は、クリックで、その下の情報パネルの表示・非表示を切り替えることができます。

ツールと設定は、クリックするとメニュー画面が開きます。このメニューの中で、特に重要と考えられるは、エディター（ビジュアルエディターとコードエディター）およびオプションです。

コードエディターへの切り替え

ツールと設定を開いたメニューの中のビジュアルエディターとは、通常使用している状態のエディターのことです。コードエディターを選ぶと、HTMLで入力していく方式のエディターとなります。クラシックエディターではテキストエディターと呼ばれていたものです。

下記が切り替え例です（画面右上の3点メニューを開けて切り替えます）。

上記画像右側のコードエディターを見てみると、通常のHTML（段落タグ<p></p>、見出しタグ<h2></h2>など）に加えて、<!– wp:paragraph –>のような記述が挿入されています。これは、このブロックエディター特有のコメントタグとなっており、通常のHTML以外の記述ルールがあります。

したがって、ブロックエディターのコードエディターでHTML入力していくことは、ルールに則ってコメントタグも挿入する必要があり、難易度が高くなってしまいました。クラシックエディターのテキストエディターでは、純粋にHTML入力でよかったのですが。

HTML入力したい場合

もしブロックエディターでHTML入力の必要がある場合は、コードエディターではなく、次の２つのいずれかの方法を使うとよいでしょう。

①各ブロックを入力するときの要素にカスタムHTMLを選択する

カスタムHTMLは、+マークからすべてのブロック一覧を表示させれば、”ウィジェット”というグループの中にあります。

②ブロックの詳細設定（ブロック内の3点メニュー）で、HTMLとして編集　と選ぶ

HTMLとして編集したいブロック内の3点メニューを開けて、”HTMLとして編集”をクリックすればHTMLでの編集が可能となります。もう一度3点メニューから”ビジュアル編集”をクリックすると、元のビジュアルモードに戻ります（下記画像参照）

ツールと設定メニューのオプション

ツールと設定ボタンをクリックして表示されるメニュー内のオプションをクリックすると、文章パネル（編集画面右のパネルで文章タブ選択時）に表示されるカテゴリー、タグ、ディスカッションなどの項目の表示・非表示が選択できます。

これらの項目は、人によって使用の有無がありますので、使用するものは表示させておくとよいでしょう。

情報パネル　について

編集画面右に表示される情報パネルは、タブの切り替えによって文章パネルとブロックパネルとに分かれます。

文章パネル

文章パネルの中には、

といった項目が並んでいます。ほとんどが、クラシックエディターと同様の機能内容となっていますので、ここでは、『ステータスと公開状態』について、下記画像で説明します。

文章パネルのステータスと公開状態をクリックすると、公開状態などが表示されるようになります。

公開、非公開、パスワード保護が選択できます。いったん公開しても、非公開にすることもできますし、パスワード保護を選択してパスワードを設定してやれば、ページを閲覧時にパスワードの入力を要求されるようになります。

また、公開の今すぐのところでは、予約公開ができるようになっています。

ブロックパネル

ブロックに入力を始めると（入力するブロックにカーソルを置くと）、自動的にそのブロックに対応するブロックパネルに切り替わります。

下記は、ブロックが段落・見出し・画像の場合のそれぞれのブロックパネルの表示を表したものです。

編集中のブロックの要素によって、ブロックパネルでできる機能は異なりますが、ほぼ直感的に理解できる編集機能と言えるでしょう。

ブロックのプレビュー機能とパターン選択機能

最後にワードプレス5.5から追加された2つの機能を紹介します。

ブロック要素単独のプレビュー

下記画像のような手順でプレビューできます。

①+マークをクリックしてブロック一覧を表示
②プレビューしたいブロックにマウスオーバーする（この例では”カバー”ブロックにマウスオーバー）
③一覧表のすぐ右にプレビュー表示される

パターン選択機能（より複雑なブロックの組み合わせを選ぶ）

ブロックエディターでは画像やテキストのブロックを組み合わせることで、クラシックエディターでは表現できなかったさまざまなコンテンツが作成できるようになりましたが、慣れないと難しいですね。

そこで、コンテンツ例を提供してくれるPatternsというタブが準備されています。

下記のように、ブロック一覧表のタブを”パターン”に切り替えれば、さまざまなパターンのコンテンツが表示され、クリックすれば本文に挿入されます。この例では、２ボタンをクリックして本文に挿入しました。

まとめ

以上、ブロックエディターの編集画面での各機能について解説してきました。

記事の入力をしていく前に、ツールバー、制御ボタン、情報パネルのそれぞれが、どのような役割を持つのかを知っておけば、効率よく記事の入力・編集ができるでしょう。

また、ツールバーを始め、クラシックエディターにはないブロックエディターならではの機能も存在しています。

注意点としては、クラシックエディターのテキストエディターに相当するコードエディターでは、HTML入力時に、ブロックエディター特有のコメントタグも入力していく必要があります。したがって、コードエディターでのHTML入力は、難易度が高いものと言えるでしょう。

そこで、HTML入力は、コードエディターではなく、ブロック要素の中のカスタムHTMLを使用するか、ブロックの詳細設定でHTMLとして編集を使用することがお勧めです。

これらの機能を理解し、徐々にブロックエディターを使いこなせるようにしていきましょう。