WordPress 6.3 で気になる新機能・ブロックエディタ周りのアレコレ


  1. Staff Blog
  2. WordPress
  3. WordPress 6.3 で気になる新機能・ブロックエディタ周りのアレコレ

2023年8月8日にリリース予定 WordPress 6.3 の一部をご紹介

たくさんある新機能の追加、強化、修正などの中から気になる機能をピックアップしてご紹介します。また、この記事を読むことで、WordPress のリリースに関する基本的なことや、ここ最近のテーマに関する情報も知ることができます。

※この記事は、WordPress 6.3 ベータ 3 を元に書いています。

WordPress のリリースについて

最初に、WordPress のリリースについて基本的なことをまとめてみました。すでに知っている方は読み飛ばしてください。

メジャーリリースとマイナーリリース

WordPressには、メジャーリリースとマイナーリリースの2つあります。バージョン番号で区別できます。

  • メジャーリリース:6.0、5.9、5.8のように小数点がひとつ。新機能の追加や変更を含む大きなリリース。
  • マイナーリリース:6.0.3、6.0.2、6.0.1のように小数点が2つ。バグやセキュリティを修正するためのリリース。

なお、1つ目の数字に特に重みはなく、5.9から6.0のように5から6に上がっても、特別に大きいアップデートが行われるわけではありません。

執筆時点では以下がそれぞれの最新です。

  • メジャーリリース:WordPress 6.2(2023年3月30日)
  • マイナーリリース:WordPress 6.2.2(2023年5月24日)

次に予定されているメジャーリリースが、WordPress 6.3です。2023年8月8日にリリース予定となっています。

バージョン番号やリリースについては、WordPress.org の日本語による公式ローカルサイトも参考にしてください。

また、これまでのリリース一覧は、以下にて確認できます。

なお、メジャーリリースには、ジャズミュージシャンの名前がつけられています。

WordPress のリリース情報

WordPressのリリース情報は、日本語ローカルサイトの「ニュース」で入手できます。

https://ja.wordpress.org/news/

記事のカテゴリー「Releases」を参考にするとよいでしょう。

https://ja.wordpress.org/category/releases/

リリースサイクル

正式版リリースまでは、以下の流れで行われているようです。

  • フェーズ1: 計画とチームのリード役の確保
  • フェーズ2: 開発作業開始
  • フェーズ3: ベータ版公開
  • フェーズ4: リリース候補版公開
  • フェーズ5: 正式版リリース

現在、WordPress 6.3 リリース候補版 1が公開されています。

ベータ版やリリース候補版を試す方法

いくつか方法がありますが、プラグイン WordPress Beta Tester を利用すれば簡単です。WordPressの管理画面からインストールできます。

本番環境ではなく、必ずテスト環境でお試しください。テスト環境の構築には「Local」が使いやすくてオススメです。

最近のテーマに関する予備知識

次に、最近のテーマに関する予備知識を簡単にまとめました。こちらもすでに知っている方は読み飛ばしてください。

フルサイト編集(サイトエディター)

Full Site Editing、略すとFSE。WordPress 5.9 から実装された機能です。フルサイト編集に対応したテーマであれば、外観 > エディターから編集できます。ヘッダーやフッターなど今までカスタマイズが難しかったエリアも、ブロックで簡単・柔軟に構築できます。

ヘッダーの編集

補足

WordPress6.3へアップデートしても、ベクトル製テーマ「Lightning」や「Katawara」 では、フルサイト編集に関連する機能は有効化されないようになっています。

ブロックテーマ

フルサイト編集に対応したテーマのことをブロックテーマと呼びます。WordPress 6.1で導入されたデフォルトテーマ「Twenty Twenty-Three」や、ベクトル製であれば「X-T9」がブロックテーマです。

クラシックテーマ

従来からあるテーマのことをクラシックテーマと呼びます。ベクトル製テーマ「Lightning」や「Katawara」 はクラシックテーマとなります。

theme.json

ファイル名「theme.json」。テーマフォルダ直下にあり、テーマを構成するファイルのひとつです。theme.jsonはブロックテーマで使われています。テーマで使用する主にブロックエディタの設定やスタイルなどをJSON形式で記述したものです。クラシックテーマでも、WordPress5.8以降でtheme.jsonに対応していれば、機能を利用できます。

WordPress公式ハンドブック:グローバル設定とスタイル (theme.json)

Lightningはバージョン15.0.0 よりtheme.json に対応しています。

WordPress 6.3の気になる新機能

それでは本題です。WordPress 6.3 ベータ 3 を元に、気になった機能などをピックアップしてご紹介します。

また、以下の動画もあわせてご覧いただくと分かりやすいと思います。
2023年7月27日(木) に実施した「VWS製品アップデート情報と質問相談会」では、最新の WordPress バージョン 6.3 についても触れました。当日ライブ配信した「WordPress6.3 インプレッション」のアーカイブ動画です。

ブロックエディター

ササキ

ここでは「Lightning」でも活用できる機能や、知っておくと良さそうな変更内容などを中心にまとめてみました。

プレビューがアイコン表示に

編集画面のプレビューがアイコン表示に変わっています。

WordPress 6.3 beta 3
WordPress 6.2.2

ページを表示するボタンが追加

プレビューの並びに、ページを表示するアイコンが追加されます。

下書き切り替えが「概要」へ移動

「下書きへ切り替え」は、設定サイドバーの「概要」へ移動するようです。

WordPress 6.3 beta 3
WordPress 6.2.2

再利用ブロックが「同期パターン」に

再利用ブロックの名前が「同期パターン」に変更になるようです。パターンとして登録する際に、非同期・同期のオプションを選べます。

WordPress 6.3 beta 3
WordPress 6.2.2

「Keep all pattern instances in sync(パターンの同期を維持する)」をオンにすると、サイト全体で再利用するブロックを同期パターンとして登録できます。

登録した同期パターンは、ブロックインサーターでは、これまで再利用ブロックが表示されていたタブにて確認できます。紫色で表示されるのは再利用ブロックと同じですね。

同期パターン

非同期パターンは、パターンタブの「My patterns」でから呼び出せるようです。

同期しないパターン

パディングやマージンなどのUIが変更

設定サイドバーの「サイズ」で設定できるパディング、マージン、ブロックの間隔などのUIがまた変わるようです。

たとえば、カラムブロックだとこんな感じです。

WordPress 6.3 beta 3
WordPress 6.2.2

上下で同時、左右で同時に設定できるのは便利ですね。

WordPress 6.3 beta 3

上下左右をそれぞれ個別に設定することもできます。

WordPress 6.3 beta 3
WordPress 6.2.2

画像ブロックでアスペクト比を変更して画像のフィット・トリミングができる

画像ブロックで、設定サイドバーからアスペクト比を変更して、画像のフィット・トリミングが簡単にできるようになります。

そのかわり、パーセントでの表示サイズの縮小はなくなるみたいです。

WordPress 6.3 beta 3
WordPress 6.2.2

画像の置き換えがドラッグアンドドロップでできる

挿入済みの画像ブロックに対して、ブロックインサーターのメディアから画像をドラッグアンドドロップで置き換えができるようになります。WordPress6.2では置き換わらず、異なる画像ブロックとして挿入されます。

外部URLの画像を記事に挿入すると公開時にメッセージが表示

以前からある機能で、画像ブロックは外部URLの画像を挿入できます。


WordPress6.3で追加されるのは、外部URLの画像を設置したページを公開するタイミングで、その画像をメディアにアップロードするかどうかのメッセージが表示されるという機能です。その画面から、簡単にメディアにアップロードできるようになります。

脚注を追加できる

脚注を追加したいときにFootnoteを選ぶと、ページの下部にブロックが追加されます。そのブロックに出典や説明文などを書くことができます。

ページの下部に設置されるFootnote

文字の方向を指定する機能が追加

ヘブライ語やアラビア語など、右から左に文字を書き進める言語が段落の一部に含まれるときなどに利用します。
言語属性を入力し、左から右、または、右から左を指定することで、文字の方向を指定する<bdo>が追加されます。

Detailsブロックが追加

Detailsブロックが新しく追加されます。クリックで開閉するアコーディオンメニューができるんですね。ちなみに、VK Blocks Proには以前からアコーディオンブロックがあります。

コマンドパレットが追加

編集画面上で以下のキーボードショートカットを使えば、コマンドパレットが開きます。設定サイドバーを切り替えたり、ブロックテーマであれば、スタイルやテンプレートなどを素早く開くことができます。

  • Windows:ctrl + K
  • Mac:command + K

ブロックテーマ向け

ササキ

ここからは、主にデフォルトテーマ「Twenty Twenty-Three」やベクトル製テーマ「X-T9」向けの内容になります。

サイトエディターのUIが変更・新機能が追加

外観 > エディター の左サイドバーのメニューが増えて、ここからできることが大幅に増えました。以下の構造になっています。

WordPress 6.3

  • ナビゲーション
  • スタイル
  • ページ
  • テンプレート
  • パターン
    同期 / 非同期パターン
    テンプレートパーツ
WordPress 6.3 beta 3

WordPress 6.2

  • テンプレート
  • テンプレートパーツ
WordPress 6.2.2

順番に見ていきましょう。

ナビゲーション

WordPress 6.2 では、ホームなどのテンプレートを選んでまず編集画面に入り、ヘッダーにあるナビゲーションを編集していました。

WordPress 6.3 からは、左サイドバーからナビゲーションの項目の並び替えがドラッグアンドドロップでできたり、ナビゲーションの複製や削除などもできるようになるため、より使いやすくなると思います。

左サイドバーにナビゲーションの項目が表示される
ドラッグアンドドロップで並び替えができる
ナビゲーションの編集画面

スタイル

WordPress 6.3 からは、左サイドバーからすぐにテーマのスタイルを選べます。
また、スタイルブックもここから表示できるため、確認・編集しやすそうです。スタイルの編集画面への移動もしやすくなります。

ここからスタイルを選べる
スタイルブックも編集しやすくなる
ここをクリックするとスタイルの編集へ

ページ

WordPress 6.3 からは、左サイドバーから固定ページの新規作成、編集、削除などができるようになります。

+マークをクリックし、ページタイトルを入力して下書きを作成します。

固定ページの編集画面が表示されます。下書きから公開などにステータスを変更できます。

ヘッダーやフッターなどのテンプレートの部分を編集する場合は、「Edit Template」をクリックします。

テンプレートの編集画面になります。

テンプレート

テンプレートは大きな変更はなさそうです。

パターン

作成した同期パターンと非同期パターンは、ここから確認、編集、削除などができます。

同期パターン
非同期パターン

そして、テンプレートパーツはここに移動しています。

以上、一部ですが、気になった機能をピックアップしてご紹介しました!

参考資料

この記事を書いた人

ササキ カオリ
ササキ カオリ
株式会社ベクトルでリモートワークしながら某レンタルサーバー会社にも時々勤務しているパラレルワーカーです。WordCamp Osaka 2019登壇しました。フジロックが好き。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。


このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP