WordPress5.3「Kirk」リリース ブロックの改良や画像の自動リサイズなどができるように
本日WordPressがアップデートされバージョンが5.3になっています。5.x系がリリースされてそろそろ1周年ということで、早いものですね。
今回のアップデートではサイトヘルスの改良、ブロックの追加や改良、アップロード画像の児童リサイズなどが盛り込まれています。開発者用の項目もありますが、今回はざっくり主な変更点を見ていきましょう。
WordPress5.3「Kirk」リリース
バージョンアップはダッシュボードから行います。自動アップデートが有効になっている場合は既にアップロードが完了しているかもしれませんが、私の場合はまだだったので手動でアップデートしました。
アップデート自体はそれほど時間がかからず1分くらいです。
アップデート後のダッシュボード。
気のせいかもしれませんが、何となくスッキリしたような感じが。多分レイアウトとかは変わっていないと思うので、枠の色……かな？ まぁ実用上はどうということはないのですけど、私はこっちの方が好きかな。
アップロード画像の自動リサイズ
スマホなどで撮影した画像をそのままWordPressにアップロードすると、サーバ容量を圧迫しますし閲覧時にもサイトを重くする要因になったりします。5.3からは大きな画像を自動的にリサイズしてくれる機能が付いたようです。例えば元画像6MBをアップロードすると
ファイル名に「-scaled」という文字列が追加されリサイズされていることが分かります。ただファイルサイズは表示読みで5MBとそれほど変わってないんですよね。
ただ私の場合は生画像をそのままアップロードするということはないため、どっちでもよかったりします。MacやiPhoneなどでの画像のリサイズなどは以下のページを参照なさって下さいね。
https://textfield.net/blog/picture-compression
ブロックプレビュー
あまりないとは思うんですが、ブロックを挿入する際に「あれ、このブロックって何だったっけ？」ということもあるかもしれません。これまではとりあえず挿入してみて確認するしかなかったのですけど、5.3からは事前にプレビューが表示されるようになりました。
ただしひとつだけ盲点があり、これは左上にある「+」ボタンからしか動作しないんですよね。段落の左にある「+」ボタンではプレビューは見ることができません。
例えばリストの項目にマウスカーソルを当てると（マウスホバーさせると）その右にプレビューが出てきます。
見出しの色が変えられるように
これまで見出しのスタイルを触るには「style.css」などで行う必要がありました。今回からは文字色をメニューから変更できるようになっています。
ただ私の環境では（テーマ：Luxeritas使用）なぜかH2の文字色が黒くなるんですよね。スタイルシートで文字色を白に指定していて、プレビューで見るとちゃんと白くなるんですけど、編集時だけ黒くなってしまいます。
H2のスタイル自体は当たっているようなので、どこかで競合しているのかも。それほど致命的ではありませんので、これは少し後回しです。
カラムが少しだけ便利に
使っている方をあまり見たことがないんですが、カラムブロックが少しだけ改良されています。
正直前のがどんなのだったか覚えていないんですが、カラムレイアウトが選べるようになっているのは多分新しい機能だと思われます。選択後、サイズの調整なども行えるようになっているようです。
新ブロック？「Group」
多分前にはなかったと思うんですが、新しいブロック「Group」が登場しています。これはひとつの親ブロックの中に、複数の小ブロックを追加することができるというもののよう。既にテーマ「Luxeritas」では搭載されているものですね。
少し違うのは親ブロックの背景色を指定できるところでしょうか。上のように親ブロック内にH2、リスト、段落と3つの小ブロックを設置し、親ブロックに赤を設定することが可能です。
小ブロックごとに設定することも可能なので、カラフルなBoxを作ることも可能……なんですけど、これどういうときに使うんでしょうか？
Grouopブロックはレイアウト要素に格納されています。
ちなみにこういうブロックを使うと、親ブロックを選択しにくくなるんですよね。具体的には「小ブロックばかり選択されて『親ブロックを選択→ブロックを削除』がやりにくくなる」というわけです。
その場合にはトップツールバーにあるBlock navigationをクリックすると、一覧が表示されますので親ブロックを簡単に選択することができます。
このBlock navigationにはキーボードの「control+opion+o」でアクセスすることが可能なので「マウスは使いたくないマン」な方は、便利かもしれません。私はマウスに手を伸ばした方が簡単だと思う派なので、あまり活用していませんけど。
現時点でのエラーもしくは不明な点
WordPress5.3にアップデート後、エラーっぽいのをまとめておきます。ちなみにテーマは上に書いたようにLuxeritas3.7.2を使用しています。
まず画像ブロックを挿入後、画像を指定してやると以下のようにプレビューエラーが出てしまいます。
この状態でページプレビューを行うとちゃんと反映されているので、あくまでも編集ページのプレビューがエラーになっている模様。ただしこのエラーはChromeのみで発生しており、SafariやFirefoxでは問題ありません（ただし上記のH2文字色はどのブラウザでも共通して黒くなる）。
上記現象はブラウザキャッシュを全消去することで解決しました。初歩的なことでした。
ただH2の文字色は相変わらず。色々原因を考えたんですが、よく分からない……まぁ実害はないので、当分見なかったことにしておきます。
また画像ブロックを選択時に右に出ているメニューに以前表示されていた「リンク設定」がなくなっています。
これはブロックを選択したときにブロック上部に表示されるツールバーに移動しています（トップツールバー設定をしている場合は、画面の上部）。
やり方自体は以前と同じなのですが、どうしてここに移動したのでしょうか？ はっきり言って改悪だと思うんですけどねぇ。
それ以外では
- サイトヘルスの表示が変わった
- 画像アップロード時Exif情報がある場合、画像が正しい方向へ自動回転するようになった
- 6ヶ月ごとに管理者メールへメールアドレスの確認メールが届くようになった
というのがあるようです。PHPは「7.4を完全サポートすることを目指す」という記述があるので、完全サポートはまだと見るべきでしょうか。どっちにしてもサーバーが対応してない気もしますが。
まとめ
久々の大きなアップデートということもあり、まだこれからバグ取りなどが行われていくのだとは思います。
ただちょっと全体的に「使いやすくなった！」とか「これは便利だ！」という機能がない気もしないでもないんですよね。
5.0がリリースされたときに感じたのは「これで初心者でも簡単に、WordPressで見栄えのよい記事を作成できるようになる」と思っていたのですけど、まだ道半ばといったところでしょうか。むやみにブロックを増やすよりも、ブロックのカスタマイズを簡単にする方向に行って欲しいと思います。
個人的なことを言えば、以前から問題だった「SafariでWordPressを更新するとメモリがモリモリ消費する問題」が、いつの間にか解決していたのは新しい発見でした。WordPressの問題だったのか、Safariの問題だったのかは分かりませんが、この記事を書いている段階ではメモリ使用量はそれほどおかしなことにはなっていない感じです。
後、今回ブロックプレビューを見てて初めて気づいたのですが、ブロックの頭に「/」（半角スラッシュ）を入力することで、ブロックの一覧を表示させることができるんですね。
全てのブロックではなく主要なものだけに限られていますが、これは結構便利かもしれません。
特に見出しやリストなどは、マウスに触ることなく挿入することが可能ですからね。ただスラッシュは半角のみなので、英字モードにするか日本語入力から「/」に変換してやる必要がありますけど。
デフォルトでスラッシュキーを「/」になるように設定しておくと良いかもしれません。
そう言えば、おま環かもしれませんけど「リストの1行目を入力中にDeleteで文字を消すと、リストが解除されてしまう」という不具合があったのですが、これは5.3にしたところ解消されていました。
結構面倒だったんですよね。
そんな感じで、まだまだ問題もあるかもしれませんが、着実に進化していると言えるのではないかと思います。個人的には画像のリンク設定さえ直してくれたら100点に近いかなぁって感じですね。
アップデートには必ずバックアップを取った上で行って下さいね。mixhostのように自動バックアップ機能付きのサーバなら気にすることはありませんが、そうでない場合は特に注意です。