# VWS勉強会#32「便利なブロック徹底解説」本編アウトライン ## ざっくりアウトライン ## Lightning で使う主なブロックの構成 * コア(WordPress 本体)が提供 * プラグイン VK Blocks / VK Blocks Pro が提供 * プラグイン VK All in One Expansion Unit が提供 --- ## WordPress コアのブロックはどれ? * プラグインを停止しても使えるWordPress標準のブロック * VK アイコンのないブロック コアのブロックで足りない部分を VK Blocks などで追加しています まずコアのブロックで組む → 物足りないところ、もっと違うことをしたい時に VK Blocks/VK Blocks Pro で補う --- ## VK Blocks と ExUnit で混在している問題 * VK Blocks があるのに ExUnit でもブロックを搭載してしまっている → もともと ExUnit にあった機能のブロック版を追加したため ブロックは VK Blocks に集約したいとは考えている --- ## テーマ Lightning はなぜブロックを持っていないのか? Lightning はブロックを持っていない * テーマに同梱されたブロックを使ってしまうとテーマを切り替えられない * 上記理由で公式ディレクトリ登録テーマではテーマにブロックを実装する事は禁止されている --- ## VK Blocks Pro の入手方法 VK Blocks Pro を使うには、G3 Pro Pack かKatawaraの購入が必要 予告 * 近い将来 VK Blocks Pro のアップデートもライセンスキーの入力が必要になります。 ※ Katawara で利用している分にはライセンスキーの入力は不要でアップデート可能 * ライセンスキーの入力がない場合はFSE向けのブロックが利用できません --- # 便利ブロック紹介 --- * コアのボタン と VK Blocks ボタン の使い分け * コアの見出し と VK Blocks の見出しの使い分け * コアのカラム と グリッドカラム、グリッドカラムカードの使い分け * コアのカバーブロックと Pro版Outerブロック の使い分け * 投稿リストブロック * 子ページリストと子ページ一覧 * アイコンブロック * PRブロックよりこっち使ってね * 今後なくなる可能性ありのブロックの説明(PRブロック、PR Content、スタッフとか。) * 固定ページ本文ブロック * 選択投稿リストブロック * FAQ * フローブロックとステップブロック * 枠線ブロック * シェアボタン --- ## ボタンブロックの使い分け ### VK Blocks の ボタンブロックの機能 * アイコンフォントが利用できる * サブテキストが使用できる → コアでもできるようになっちゃった... → アイコンを使う場合以外は不要に... (´;ω;`) ### コアの方が良い機能 * 複数配置した時に幅が揃えられる → VK Blocks でも実装予定 --- ## 見出しブロックの使い分け ### VK Blocks の 見出しブロックの機能 * アイコンフォントが利用できる * 余白指定ができる → ブロック共通の余白指定機能を実装したので既に不要 * サブテキストが使用できる → 共通の余白指定機能を実装したので見出しの下に段落ブロックを置けば同じ → アイコンを使う場合以外は不要に... (´;ω;`) --- ## カラムブロックの使い分け * コアのカラムブロック * グリッドカラムブロック * グリッドカラムカードブロック → 等幅カラムなら最新グリッドカラムカードがおすすめ --- ## カラムブロック(コア) ### 短所 * ブレイクポイントが制御できない ### 長所 * 等幅じゃないレイアウトが可能 * ボタンを配置しても下端揃えにならない → レイアウト用のブロックは VK Block Pro で開発中 --- ## グリッドカラムブロック(VK Blocks Pro) ### 長所 * ブレイクポイント毎にカラム数を指定できる ### 短所 * 等幅でしか使えない * ボタンを配置しても下端揃えにならない --- ## グリッドカラムカード(VK Blocks Pro) ### 長所 * カラム指定が楽 → 保持したいサイズを指定する * ボタンの位置が揃う * 画像の比率指定可能 備考 * 画像の非表示はcssでhiddenにするだけ --- ### グリッドカラムカードの登場で微妙になるブロックのみなさん * グリッドカラム * カードブロック * アイコンカードブロック --- ## カバーブロック と Outer ブロック ### Outerブロックでできる事 * 背景画像を画面サイズ毎で切り替え * 区切り効果 ### カバーブロックでできる事 * 焦点ピッカー * ディオトーン * フルハイト * コンテンツ位置 * 動画背景 → まぁ..画面サイズ毎の切り替えしないのであればカバーで良いのではないでしょうか... --- ## 投稿リストブロック(VK Blocks Pro) * アーカイブページはブロック使わなくても標準で出力されるよ あくまでLPなどページの一部に埋め込みたい場合につかって * 関連記事とか表示したい場合に使える --- ## 子ページリスト(VK Blocks Pro)と子ページ一覧(ExUnit) * どちらも下階層の固定ページを表示する事ができる * ExUnit にもともとあった機能のブロック版 * 単純に見た目の好みで決めれば良いのでは... ### 子ページリスト(VK Blocks Pro) * 表示要素・レイアウトの設定が可能 * 表示中のページの除外が可能 --- ## 固定ページ本文 * 同じ内容を複数で使いまわしたい (再利用ブロックでも可) * 単一ページにあまりたくさん詰め込み過ぎるとトラブルの元になる --- ## 選択投稿リスト(VK Blocks Pro) * 見せたいページを埋め込める 「ブログカードブロック」と呼んだ方が使い方がイメージしやすいかも --- ## FAQ ### 新旧ブロックの違い * 新版はQ部分がインナーブロックになっている * なんとなく新版推奨 ## フローブロックとステップブロック * フロー ( ExUnit ) * ステップ ( VK Blocks Pro ) 最後のブロックの矢印や線は無しにしてやで パターンから引っ張ってもええんやで --- ## 枠線ブロック * 再利用ブロックは / で呼び出せる → 解除しないとあられもない事に * パターンは + からしか呼び出せない --- ## シェアボタン LPやブロックテーマで