VWSオンライン勉強会 #034 「WordPress最新バージョン6.0を触ってみよう」振り返り

5/27(金)にVWSオンライン勉強会 #034「WordPress最新バージョン6.0を触ってみよう」を開催しましたので、振り返ってみたいと思います。リンク情報や動画アーカイブもこちらでご紹介しております。

VWSオンライン勉強会 #034
「WordPress最新バージョン6.0を触ってみよう」
はじまりましたー！#wpvektorhttps://t.co/1fOrmzxxYi

— 株式会社ベクトル / Vektor,Inc. WordPress Solutions (@vektor_inc) May 27, 2022

Lightning やプラグインの新機能、新製品・新サービス紹介

VWS勉強会では、まず最初に、最近追加した機能や仕様変更事項などについて紹介しています。

VK Blocks Pro 1.33.0 からアップデートにライセンスキーの入力が必要になります（Katawara除く）

VK Blocks Pro 1.36.0 で横並びボタンのギャップサイズを指定できるようになりました

また、VK Blocksについては、以下の対応・調整をしています。

• リストブロクのアイコンの色（カスタムカラーパレット）指定対応しました
• 段落タグからVKボタンブロックへの変換をサポート
• スライダーブロック（Pro）で高さが自動で揃うように調整

VK Filter Search / VK Filter Search Pro 関連

VK Filter Search / VK Filter Search Pro 1.9.0 でブロックテーマに対応しました

VK Filter Search Pro で検索結果の並び替えができるようになりました

本編：WordPress最新バージョン6.0を触ってみよう

本編の内容については、この後で紹介する動画でぜひご確認ください。主に以下の変更項目について解説しています。

スタイルのプレビューがかわった

編集画面でスタイルのプレビュー表示方法が変わっています。まず、気づきやすいところだと思います。

グループブロックの縦積み・横並びに変換

通常のグループと違う点

• Flexになるので、中の要素の margin が効かない
• 余談 : 縦積みなら縦積みようのCSSクラスが付くわけではなく、ブロックに対して直接flex指定される

• ブロックのロック（移動と削除の無効化が出来るようになった）

ボタンブロック（コア）

• ボタングループ内で新規追加した時に、既存のボタンデザインを引き継ぐ
• （複製でいいのかも？）

その他

• 公開前のカテゴリーやタグの提案
• リストビューで「複数選択しての」ドラッグ＆ドロップ
• [[ で既存ページを呼び出せる
• 段落ブロックをコードブロックに変換

Lightning では現状使えないアップデート

※ Lightningでも子テーマに theme.json を入れると使えます（ただ、現時点では一部壊れるので注意が必要）

• グループブロックの margin
• ギャラリーのギャップ指定が出来るようになった
  • theme.json で Gap 指定が有効になってないと使えない

なお、Lightningにtheme.jsonを標準で入れるかどうかについては、ただいま調整中です。

フルサイト編集向けの機能

• コードエディタが利用可能に
• カバーブロックの背景でアイキャッチが指定
• テーマファイル全体がエクスポート可能に
• テーマに patterns フォルダに入れればパターンが認識されるようになりました
  https://github.com/WordPress/gutenberg/pull/36751
• 新規テンプレート追加時にテンプレートタイプが指定
  https://github.com/WordPress/gutenberg/pull/39353 → まだ作ってないテンプレートが候補に出てくる
• クエリーループの追加時の改善（なんとなくプレビューが出るようになった）
• タグクラウドブロックの文字サイズ指定機能
• ブロック追加
  • アバター
  • 続きを読む
  • 投稿者の経歴
  • 投稿コメントフォーム
• ブロック変換
  • カテゴリー（一覧）ブロックがタグブロックに変換
  • カレンダーブロックをアーカイブブロックに変換
• スタイルセット
  https://gist.github.com/kjellr/1307387f8d97e84662c4b07af873a896

• ウェブフォントを利用できるように（ローカルフォントしか使えないので日本語環境だと微妙）
  • 【参考】Webfonts API ＃37140
    https://github.com/WordPress/gutenberg/pull/37140
  • 【参考】Webfonts: Add internal-only theme.json webfonts handler – WP 6.0 stopgap #40493
    https://github.com/WordPress/gutenberg/pull/40493
  • 【参考】Theme.json typography options
    https://fullsiteediting.com/lessons/theme-json-typography-options/

WordPress6.0の変更点をより詳しく知りたい人は、チーム・ベクトルのエンジニアしもむらさんが、Zenn（エンジニア向けの情報共有コミュニティ）でまとめています。ぜひ参考にしてください。

動画アーカイブ

上記でご案内したスライドとともに、本編の動画も合わせてご覧ください。目次となるタイムスタンプを設置しています。

VWS の Slack にご参加いただきますと、過去の動画アーカイブや関連リンクが見れます。無料でどなたでもご参加いただけますので、ぜひお気軽にご参加ください。

オンライン勉強会の動画を一般公開中！

2021年1月〜10月開催分を「VWSオンライン勉強会アーカイブス」で一般公開しています。見逃した回ありませんか？ ぜひご覧ください。

次回のVWS勉強会は2022/06/23(木)予定

次回の勉強会は6月23日木曜日に開催予定です。connpassよりお申込みください。すでに多くの方よりお申し込みいただいています！

勉強会の開催は connpass でいち早くお知らせしています

勉強会については connpass やSNSにてお知らせしています。グループ「Vektor,Inc. Web Solutions」のメンバーになると、イベントが作成された時にメール通知が届きますので、ぜひご登録ください。興味ある勉強会を見逃すことなく参加できます。