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


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

2022年1月25日にリリース予定 WordPress 5.9 の一部をご紹介

たくさんある新機能の追加、強化、修正などの中から気になる機能をピックアップしています。Vektorの各種製品でどこまで対応するかはまだ検討・調整中ですので、ご了承ください。

ハイライト

5.8で搭載された機能と5.9で新たに搭載された機能を組み合わせることにより、「フルサイト編集(FSE、Full Site Editing)」が実現可能となってきました。ノーコードでもタイポグラフィからカラーパレット、ナビゲーションブロックなどの編集が可能となっています。

フルサイト編集機能は、「ブロックテーマ」と呼ばれるフルサイト編集に対応したテーマを有効化した時のみ利用可能となります。このブロックテーマという呼称に対して、ベクトル製テーマの「Lightning」 や「Katawara」はクラシックテーマと呼ばれるものになります。「Lightning」 や「Katawara」をご利用のままWordPress5.9へアップデートしていただいても、フルサイト編集に関連する機能は有効化されません。

受託制作などで、現在運用中の「Lightning」 や「Katawara」をご利用のサイトで、「5.9にアップデートしたらクライアントが自由にフルサイト編集をしてしまってサイトが崩れた!」などということは発生しませんので、その点はご安心いただけたらと思います。

フルサイト編集に対応した新しいブロックテーマ関連製品については現在テスト・開発を開始しておりますが、フルサイト編集機能自体がまだまだ発展途上のため、WordPress 5.9 の状態で実案件でフルサイト編集の機能を使うのは時期尚早という見解です。
ただ、今後リリースするフルサイト編集に関する新製品も G3 Pro Pack のライセンスで利用可能にしますので、現行ユーザー及びご購入を検討されている方はご安心いただければと思います。

そのあたりの情報もオンライン勉強会などでも取り上げていきますので、ぜひconnpassのご登録や、Slackにご参加のうえ情報をキャッチアップしてください!

WordPressテーマの未来を一緒にのぞいてみませんか?

2022年1月21日(金) 20時〜オンライン開催のVWS勉強会で、開発リーダー石川がデモ画面を交えてブロックテーマについてお話しする予定です。これからWordPressテーマ開発や受託開発のフローなどがどうなっていくのか聞いてみたいという方はぜひお気軽にご参加ください。ご参加は無料です。

WordPress5.9の気になる新機能

さて、フルサイト編集の機能以外にも、WordPress本体やブロックエディタ関連でいろんな新機能が追加されています。

Gutenberg バージョンそれぞれの公式ブログ記事がこちら(英語):

ということで、機能の一部となりますが、気になったポイントをピックアップしてみました!

ログイン画面に言語スイッチャーの導入

WordPress管理画面のログインに言語スイッチャーが追加されています。言語の違うユーザーが想定される場合に、それぞれに合った言語を選択してログイン画面、パスワードリセット画面、登録画面を利用できるようになります。

利用者が日本人だけだと、あまり使う必要はないかもしれません。
言語スイッチャーを完全に削除する login_display_language_dropdown というフィルターも用意されています。

使用例: add_filter( 'login_display_language_dropdown', '__return_false' );

遅延読み込みパフォーマンスの向上

5.5 から実装された画像の遅延読み込み、そして5.7で実装されたiframeの遅延読み込みですが、2021年の調査でファーストビューにこれらの遅延読み込みが含まれていると、「ページの表示速度」や「読み込み時間」を示す指標であるLCP(Largest Contentful Paint)でパフォーマンスへの影響が判明したとのこと。このため、5.9では機能向上の改善点として、シングルページとアーカイブページの最初に出てくる画像とiframeの遅延読み込みはされないように微調整されました。これによりパフォーマンスの向上が見込まれるということです。

Gutenberg 10.8

再利用可能ブロックの省略メニューに「通常のブロックへ変換」が追加(32310

再利用ブロックを通常のブロックに変換する時のアイコンがあるにはあるのですが、ちょっと分かりずらかったんですよね。3点の省略メニュー内に文字でも「通常のブロックへ変換」と表示されるようになりました。「あれ、ナイぞナイぞ…」となりがちでしたが、これで迷わなくなりそうですね。

Gutenberg 10.9

リッチなURLプレビュー(31464

編集画面で設置したリンクにカーソルを合わせると、アイキャッチ画像とプレビューが表示されます。
(Googleドキュメントも同様のプレビュー機能がありますね。)

リスト表示:ネストされたブロックの展開と折りたたみを許可(32117

「リスト表示」で入れ子になっている要素が折り畳めるようになり、開閉して見やすくなりました。

Gutenberg 11.0

再利用ブロック選択時にオーバーレイの効果が追加されました(31109)

再利用ブロックにカーソルを合わせると、うっすらブルーのオーバーレイの効果が出現するようになりました。これで、再利用ブロックかどうかに気付きやすくなったのではないでしょうか。

メディアテキストブロックで、ドラッグアンドドロップでメディア置換が可能に(29710

すでに画像を設定しても、後から、自分のローカルPCにある画像ファイルをドラッグアンドドロップで置換できます。

Gutenberg 11.1

リスト表示でのドラッグアンドドロップが可能に(33320

リスト表示でドラッグアンドドロップを使用して、ブロックを直感的に移動および並べ替え可能に。

Gutenberg 11.2

公開パネルに新しいページ/投稿ボタンを追加(33276

複数の記事を連続して書いている場合、1つ公開が終わると、すぐに「新規投稿を追加」ボタンをクリックして次の投稿画面に移動できるようになりました。

Gutenberg 11. 4

ギャラリーブロックは画像​​ブロックを使用するようになりました

画像ブロックに用意されていたさまざまな機能やスタイルがギャラリーブロック内の画像でも使えるようになりました。例えば、画像ブロックで用意されていた「流体シェイプ」スタイルなどが、これまではギャラリーブロックでは使えませんでしたが、このバージョンからは使えるようになります。

そして、ギャラリーブロックならではの画像の移動、ドラッグアンドドロップ、コピー、キーボードナビゲーションなどの標準的な機能はそのまま活用できます。

Gutenberg 11. 5

見出しブロック:見出しレベルのメニュー表示が水平から垂直に(32926

見出しのレベルを変更したい時に表示させるメニュ「H1〜H6」がこれまで水平に表示され、時にはH6まであることに気づかない、なんてことも起きがちでしたが、垂直に表示されることで見やすく、選択しやすくなっています。

Gutenberg 11. 6

非表示のアクティブアイテムの視覚的な手がかり(21892

テキストに適用している、打ち消し線や下付き文字がある場合、下向きのトグルが黒色になり、視覚的にわかりやすくなりました。

Gutenberg 11. 7

インラインリンクUI から固定ページを作成する機能が有効に(35083

もともとは、FSEのナビゲーションブロックのための機能でした。このバージョンからは、投稿の段落ブロックでインラインでリンクを設定するときに、新しい固定ページのURLスラッグを設定してページの生成ができるようになりました。ここから生成したページは、一旦下書きとして生成されるので、その後固定ページの一覧から編集可能です。

記事を書いている途中で、さらに追加で固定ページが生成したくなった場合に便利ですね。固定ページを生成する権限のあるユーザーでのみこの機能が有効となります。

Gutenberg 11. 8

子テーマのtheme.jsonを親テーマのtheme.jsonとマージできるように(35459

theme.json を含む子テーマであれば、親テーマの theme.json で定義されたスタイルの上からスタイルを適用できるようになりました。親テーマの基本のスタイルを維持したまま、自分でカスタマイズしたスタイルを適用できます。もし、子テーマに theme.json が存在しない場合は、親のスタイルが適用され、その逆も同様です。

挿入ポイント、ドロップゾーン、およびその他の要素のアニメーションを追加(33132

ブロックを追加できる挿入ポイント、画像のドロップゾーン、ブロックをドラッグ移動した時など、操作する際のアニメーションが新しく追加されています。

リスト表示で省略記号メニューを表示します(35170

リスト表示の際、右端に3つの点が表示され、クリックすると編集メニューが表示され、そこから削除や編集のアクションができるようになりました。

見出し:見出しアンカーを自動生成します(30825

見出しを設定した場合に、ページ内リンク先の設定として、「高度な設定」>「HTMLアンカー」の欄に、英数字を設定できるようになっています。これまでは手動で設定するようになっていましたが、見出しの文字を自動で取り入れるようになりました。日本語で入力した見出しの文字がそのままHTMLアンカーに反映されます。同じものが続く場合は、末尾に -2 というようにナンバリングされていきます。

Gutenberg 11. 9

パターン一覧をモーダルで画面に大きく表示(35773

これまで少し見づらかったパターンの一覧が、モーダルで画面いっぱいに表示されてより見やすくなりました。パターンのタブから [参照] をクリックすると表示されます。

ドラッグアンドドロップ:ドラッグされているブロックを非表示にする代わりに、ドラッグスロットを表示(33950

ブロックをドラッグアンドドロップすると、ドラッグしているブロックがページから「持ち上げられ」、「元の場所」から削除されて、新しい場所にドロップされます。 この「元の場所」がどこにあったのかがわかるように「スロット」として維持され、ドロップが終了するまで表示されます。

ブロック設定ドロップダウンの「ブロックの削除」メニュー項目でブロックの名前を表示(35872

これまで「ブロックを削除」と表示されていましたが、該当のブロック名を追加して、例えばカラムブロックを削除しようとしている場合には、「カラムを削除」というように、削除しようとしているブロックの名前が表示されるようになりました。

タイポグラフィツールの機能強化(34064

段落、見出し、リストブロックなどのほとんどのテキストベースのブロックで、フォントスタイル、文字間隔、テキスト変換をサポートするようになりました。

以上、一部ですが、大きな変更から細やかな変更までご紹介してみました。

実際の画面を見ながらWordPress 5.9 の新機能を見てみよう!

2022年1月21日(金) 20時〜オンライン開催のVWS勉強会では、この記事で紹介したブロックエディタ周りのアップデート機能を実際の画面を見ながら触っていきますので、「どんな感じかな」と気になる方はぜひご参加ください。

また、開発リーダー石川がデモ画面を交えてブロックテーマについてお話しする予定です。これからWordPressテーマ開発や受託開発のフローなどがどうなっていくのか聞いてみたいという方はぜひお気軽にご参加ください。ご参加は無料です。

この記事を書いた人

KOUNO Chiaki
KOUNO ChiakiMarketer
株式会社ベクトルでリモートワークしながら、香港拠点でお仕事しております。北京語と広東語と英語をいずれも中途半端に操ります。VWS 勉強会の賑やかし担当。WordCamp Asia 2020&2023 実行委員。アジアをうろうろ。
フルサイト編集に対応したブロックテーマ X-T9

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

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

パターンを使って

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

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


PAGE TOP

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