WordPress5.4ブロックエディタの使い方(1)

2018年の暮れ、ワードプレス5.0がリリースされて標準エディタが変わりました。
約1年半が経ち、新エディタも進化して使いやすくなったみたいですね。
そろそろClassic Editorのプラグインを外して新しいエディタを使ってみませんか？
通称Gutenberg(グーテンベルク)エディタのブロックを解説していきます。

標準搭載のブロック要素 wordpress5.4

◆よく使うブロック

よく使うブロックは、見出しや文章、画像など一般的に使用頻度の高いブロックや過去利用したブロックが表示されます。

◆一般ブロック

段落： 通常の文章を入力する際に利用します。最も使用頻度の多いブロックの一つです。
画像 ：画像を挿入する際に利用します。最も使用頻度の多いブロックの一つです。
見出し： 見出しを挿入する際に利用します。最も使用頻度の多いブロックの一つです。
ギャラリー： 横並びの画像を利用する際に利用するブロックです。
リスト： リスト(箇条書き)を作る際に利用します。使用頻度の高いブロックの一つです。
引用 ：引用blockquoteを挿入します。
音声： 音声ファイルをアップロードできます。
カバー： 画像の上に簡単にテキストを載せることができ、コンテンツの見た目を変えられるます。
ファイル：　PDFなどの任意のファイルをアップロードするためのブロックです。
動画： mp4などの動画ファイルをアップロードするためのブロックです。

◆フォーマット

ソースコード： 何かのソースコードを利用したいときに挿入するブロックです。利用頻度は低いでしょう。
クラシック： 従来のエディター(クラシックエディター)を利用したいときに挿入するブロックです。
カスタムHTML： HTMLで記述したいときに挿入するブロックです。
整形済み： 整形済みテキスト(preタグ)を利用したいときに挿入するブロックです。利用頻度は低いでしょう。
ブルクオート： 引用にさらに装飾をしたブロックです。利用頻度は低いでしょう。
テーブル： 表を挿入したいときに利用するブロックです。

◆レイアウト要素

ボタン： ボタンリンクを入力する際に利用します。VK blocksのボタンと同じ？
カラム： 2カラム(2列横並び)のブロックを使用する際に利用します。3,4カラムも作れます。
メディアと文章： 2カラム(2列横並び)で左側を画像、右側を文章にしたい場合に利用します。
続きを読む： 「続きを読む」の表示にしたい場合に利用します。
改ページ： 改ページにする際に利用します。
区切り： 区切り線hrタグを挿入します。
スペーサー： 縦の余白(スペース)を作りたい場合に利用します。

◆ウィジェット

ショートコード： 任意のショートコードを入力したい場合に利用するブロックです。
アーカイブ： 日付別アーカイブを入力したい場合に利用するブロックです。
カレンダー： カレンダーを挿入したい場合に利用するブロックです。
カテゴリー： 投稿のカテゴリーを挿入したい場合に利用するブロックです。
最新のコメント： 最新のコメントを挿入したい場合に利用するブロックです。
最新の記事： 最新の投稿記事を挿入したい場合に利用するブロックです。
RSS： RSSフィードを挿入したい場合に利用するブロックです。
検索： 検索ボックスを挿入したい場合に利用するブロックです。

◆埋め込み

埋め込み： 埋め込みを挿入する際に利用するブロックです。
Twitter：　Twitterの埋め込みを挿入する際に利用するブロックです。
Youtube： Youtubeの埋め込みを挿入する際に利用するブロックです。
Facebook： Facebookの埋め込みを挿入する際に利用するブロックです。
Instagram： Instagramの埋め込みを挿入する際に利用するブロックです。
WordPress： WordPressの埋め込みを挿入する際に利用するブロックです。

テーマ独自ブロック要素 Lighthing4.4.1

◆VK blocks

PR Blocks：　3列のPRボックスを表示します。丸の中は画像でもフォントオーサムの記号でもOK。
PR Content：画像と文章　左右の組み合わせ
スタッフ：自己紹介、スタッフ紹介
見出し：デザインが可能な見出し
アラート：各種背景色つきテキスト
フキダシ：吹き出しを表示します。
ボタン：ボタンにテキスト記入してリンクを張る。デザイン可能
質問と解答：よくあるご質問、Q-A
フロー：題目とその説明、画像を右側に表示できる。手順などをフローを示す際に使える
Share botton：フェイスブック、ツイッター、はてな、ポケットのシェアボタン表示
投稿リスト（Pro）：投稿をアイキャッチ画像と並べて縦3列に表示できます。
カード（Pro）：画像とそのタイトル、説明を3列でカード状に表示
子ページリスト（Pro）：固定ページの子ページで指定した記事をカード状に2列で表示
目次（Pro）：見出しを自動的に目次表示
ステップ（Pro）：丸の中の数字で、ステップ１、２，３と各行で順に表示。手順のようなステップ表示する際に便利
タイムライン（Pro）：時刻の数字で、6:00am、7:30am，8;00amと各行で順に表示、沿革などのような表示する際にも便利

◆VK blocksレイアウト

Outer（Pro）：幅いっぱいの背景色の帯中に文字を書き込めます。（全幅）
レスポンシブ・スペーサー：ブラウザサイズに合わせた高さ(余白)を設定するブロック

テーマ独自ブロック要素 Cocoon2.0

吹き出し:バルーンの色を変更できます。
白抜き:白抜きボックス色もある程度変更できます。
ボタン:背景色・文字色・ボーダー色と文字サイズを変更できます。
囲みボタン:背景色・文字色・ボーダー色・文字サイズを変更できます。
アイコンリスト:背景色と文字色が変更できます。
タブボックス:枠線の色に加えて、背景色文字色を変更できます。
タイムライン:タイムラインは、ポイント色や、背景色、文字色、ボーダ色まで変更できます。
トグルボックス:枠の色、背景色、文字色に対応しています
見出しボックス:枠の色、背景色、文字色に対応しています。
タブ見出しボックス:枠の色、背景色、文字色に対応しています。
ラベルボックス:枠の色、背景色、文字色に対応しています。
マイクロバルーン:アイコンがつけられ、背景色、文字色、ボーダー色が変更できます。
マイクロテキスト:アイコン選択ができ、文字色が変更でます。

テーマ独自ブロック要素 ルクセリタス3.6

アコーデオン：折り畳み式。アイコン、枠の太さ、入れ子など設定項目が豊富です。サイドバーでデザイン確認可
シンタックスハイライター：サイドバーから言語を選択しコードを記述する。
ブログカード：URLとリンク文字列を入力するだけ。
区切り線：てんてんてん
枠線ブロック：アイコン、枠の太さ、入れ子など設定項目が豊富です。
トピック：タイトルが左上にタブみたいにつく。アイコンも豊富。
紹介文：この記事を書いた人などとして紹介文を作成。デザインの設定が豊富。
定型型テキストエディタ：登録した定型文を挿入。
縦書き：細かい設定が可能。
吹き出し：デザインは無限。