WordPress特集 - エディターのUI要素

公開日：2021年11月8日

ブロックエディター Gutenberg を操作する上で必要な UI要素の説明をします。以前のエディターと同じように操作する部分もありますが、ブロックを扱う部分は全く異なります。また Gutenberg は頻繁にアップデートされますので、UI もバージョンによって変わってきます。

【記事執筆時の環境】
WordPress 5.8

【参考ページ】
サポート - WordPress のエディター
 サポート - 新規ブロックの追加
 サポート - ブロックの移動

上部ツールバー

エディター画面の最上部に表示されるツールバーには、編集している文書やエディター自体の設定をするボタンが並んでいます。

ブロック追加ボタン

クリックするとブロックインサーターが表示されます。インサーターが表示されている時は、ボタンアイコンは ✕ に変わります。

モードボタン

ブロックの編集/選択モードを切り替えます。モードの状態によりアイコンが変化します。

編集モードのときにコンテンツエリアでブロックをクリックすると、ブロックの上にはブロックツールバーが表示されブロックを編集できます。
選択モードのときにブロックをクリックすると、ブロック全体が選択され、ブロックツールバーはブロック名が表示されたシンプルなものになります。

編集モードでEscキーを押すと選択モードに切り替わり、選択モードでEnterキーを押すと編集モードに切り替わります。

画像：Gutenbergモードの切り替え

元に戻す/やり直しボタン

元に戻すボタンをクリックすると、直前の操作が取り消され前の状態に戻ります。１回クリックするごとに１段階前の状態に戻ります。
やり直しボタンは逆で、１回クリックするごとに次に操作した状態に進みます。

ショートカットキーは、元に戻す場合は Ctrl + Z、やり直す場合は Ctrl + Shift + Z となります。

詳細ボタン

クリックすると、文書内の文字数・ブロック数などを表示します。

詳細情報パネル

アウトラインボタン

文書内のブロック構成をリストで表示します。ブロック間に階層がある場合は、その構造が分かるように表示します。
リスト上のブロックをクリックすることにより、そのブロックに移動することも可能です。

文書のアウトラインパネル

下書き保存

[下書き保存] をクリックすると、文書は下書きとなり公開されません。下書きの文書は一覧画面では、タイトルの後に「—下書き」の表示がされます。

文書が下書きとなっている一覧

公開した文書の編集画面では、[下書き保存] の文字列が [下書きへ切り替え] と変わり、クリックすると下書きに変更することができます。

プレビュー

[プレビュー] をクリックすると、コンテンツエリアの表示サイズを、デスクトップ/タブレット/モバイルで切り替えることができます。ただし実際のブラウザによるWebページの表示どおりにはなりません。
[新しいタブでプレビュー] をクリックすると、ブラウザにタブが追加され、実際のWebページが表示されます。

プレビューパネル