ブロックエディタ（Gutenberg）は、Wordpress5.0（2018年12月）から、標準搭載された、記事投稿・編集用エディタです。
TinyMCEのような、旧タイプのビジュアルエディタは、シンプルに、「HTMLをプレビューしながら編集する」エディタですが、ブロックエディタは、更に、「ブロック単位で編集する」と言う概念のエディタになります。
最初は操作に手こずるかもしれませんが、慣れれば操作自体は難しくなく、ブロック単位で編集する事により、より高いデザイン性の記事を簡単に管理する事が出来るようになります。
現在のバージョンでも、旧クラシックエディタ（TinyMCE）も需要がある限り使用は可能のようですが、新しい機能の追加や、セキュリティアップデートなどが確実に行われない可能性もあるので、早めにブロックエディタに移行する事をお勧めします。
ブロックエディタ（Gutenberg）の構成
ブロックエディタの構成は、以下の4つのブロックで構成されています。
- インサーター（ブロック一覧）
- エディタ（コンテンツエリア）
- サイドバー（設定パネル / InspectorControls）
- カスタムフィールド（メタボックス）
このほかに、ブロックの上に表示される、ブロックツールバー（BlockControls）があります。
パネルの開閉方法
ビューの切り替え
ブロックエディタの右上にある、PCアイコンをクリック。
エディタ表示のビューを、以下にそれぞれ切替が出来ます。
- デスクトップ
- タブレット
- モバイル
また、「新しいタブでプレビュー」をクリックすると、実際のサイト表示のプレビューを別ウィンドウでで確認する事が出来ます。
AI記事生成
AI記事生成機能アイコンをクリックするとAI記事生成が出来ます。
この機能は、VibeBlocksテーマ特有の機能です。
詳しい使い方はこちらを参考にして下さい。
コードエディタ―
三点をクリックするとメニューが開きます。
「コードエディタ―」をクリック。
このように、HTMLコード表示になります。
クラシックエディタのコードタブと同じで、コードを直接編集したい場合に使います。
右上の、「コードエディタ―を終了」をクリックするとビジュアルエディタに戻ります。
ブロック編集の流れ
編集の流れとしては以下のようになります。
- ブロックの挿入（インサーターから選択）
- インライン編集（ブロックツールバーで書式・配置等）
- 設定編集（サイドバーで詳細設定）
見出しブロック挿入例
見出しブロックの挿入
見出しの文字を打つ
見出し2を見出し3に変更してみる
文字色を変更してみる
見出しブロックを選択し、サイドバーの「テキスト」をクリック。
カラーパレットが開くので赤をクリック。
このような流れでブロックを積み上げていきます。
記事投稿の流れ
記事が出来上がったら、サードバー設定パネルの「投稿」タブをクリック。
「アイキャッチ画像を設定」をクリックしてアイキャッチ画像を設定する。
カテゴリーや、タグを設定する。
「公開」をクリックして投稿完了です。
