Ryunosuke
あなたはWordPressを使っていますか?
世界のおよそ3割がWordPressで作られているといわれています。
そして、GutenbergはWordPressの次期標準エディターです。
「Gutenberg使い始めたけどまだ慣れない」
「Gutenbergアップデートされたけど、何が変わったかよく分からない…」
そんなあなたに向けて、Gutenberg使いのムラマツがGutenberg4.0の新機能をご紹介します。
この記事のもくじ
- 1 Gutenberg 4.0新機能をご紹介
- 1.1 カバー画像のオーバーレイカラーを変更可能になった
- 1.2 『段落』でのフォントサイズを「プルダウン」から選択可能に
- 1.3 再利用可能ブロック選択時にプレビュー追加
- 1.4 ネストされた子リスト(リスト内リスト)が白丸に
- 1.5 再利用可能ブロックのJSONインポート・エクスポートが可能に
- 1.6 公開前のチェックを無効化して即公開できるように
- 1.7 「コードエディターを終了」ボタンが追加された
- 1.8 カテゴリー選択部分の高さが制限され、検索可能に
- 1.9 クラシックブロックに「メディアを挿入」が追加された
- 1.10 埋め込みブロックで、自動縮尺(レスポンシブ)を選択可能になった
- 1.11 ブロック削除のショートカットキーが変更された
- 2 まとめ
Gutenberg 4.0新機能をご紹介

僕もGutenbergを極めているわけではないので、今回4.0のアップデートをした時はどこが変わったのか、最初は正直よくわかりませんでした。
しかし、やっぱりGutenbergを使いこなしたい思いもありますし、同じく困っているライターのかたの一助になればと思い、新機能を調べてみました。
なぜかというと「キャッシュ」がブラウザに残っていたのですね。キャッシュを削除したら新機能が使えるようになりました。
Chromeなら「F12」で開発者ツールをONにして、左上の「再読み込みボタン」を右クリックしてキャッシュを削除して更新しましょう!
それでは、順不同でまいります。
カバー画像のオーバーレイカラーを変更可能になった
百獣の王
↑こちらのカバー画像には赤い色を乗せています。

もちろん透過率で色の強さを調整可能です。
おしゃれな文字入り画像を簡単に使うことができますね。
『段落』でのフォントサイズを「プルダウン」から選択可能に

プルダウンメニューから「小さい〜特大」を選択可能になりました。
代わりにスライダーでのフォントサイズ調整がなくなっています。

再利用可能ブロック選択時にプレビュー追加

右側に中身のプレビューが表示されるようになりました。
「[ / ]ショートコード」という表示が横幅を取っていて見づらいですが、無いよりは選びやすいですね。
(これ改善しないのかな?上に配置すれば良いのに)
ネストされた子リスト(リスト内リスト)が白丸に
- 親リスト(順番あり)
- ネストされた箇条書きリスト
- 以前は黒丸だったが、白丸に変更された
意識して使ってなかったので、以前の色を記憶にはありませんが、公式を翻訳した限りではこういうことでした。
再利用可能ブロックのJSONインポート・エクスポートが可能に

画面右上の「詳細」ボタンを押すと「すべての再利用ブロックを管理」があります。

または再利用可能ブロック選択画面の最下部にもリンクがあります。
このボタンを押すと、再利用可能ブロックが一覧できます。
さらに、「JSONファイル」での取り込みと出力が可能になっています。
これからいろいろなサイトで「便利な再利用可能ブロック」が配布されていきそうですね!
公開前のチェックを無効化して即公開できるように

「公開前チェックを有効化」というオプションが追加されました。
以前のGutenbergでは公開前に1ステップ確認が必要で、間違えて押してもすぐには公開となりませんでした。
しかし、このオプションを無効化することで確認なしで即公開することが可能になります。
せっかちな方にはオススメかもですね。
「コードエディターを終了」ボタンが追加された

Gutenbergには通常の「ビジュアルエディター」とコードを直接編集できる「コードエディター」があります。
コードエディターに切り替えると、画面右上に「コードエディターを終了」というボタンが表示されるようになりました。
あくまで「コードエディター」は一時的に使って、ビジュアルエディターに戻りたいときに便利になりましたね。
カテゴリー選択部分の高さが制限され、検索可能に

カテゴリーが多い場合、縦に長く伸びていた「カテゴリー選択」部分ですが、縦幅が固定されました。
選びにくくはなりましたが、検索(フィルター)機能が追加されています。
文字を入力すると絞り込めるので、使い方によっては以前より素早く選べますね。
クラシックブロックに「メディアを挿入」が追加された

これにより、クラシックエディターでも画像を使えます。
埋め込みブロックで、自動縮尺(レスポンシブ)を選択可能になった

埋め込みブロックは使ったことがなかったのですが、レスポンシブかそうでないか選べるようになったみたいです。
スマホ対応のために、通常は「自動縮尺」ONのままが無難ですね。
ブロック削除のショートカットキーが変更された

Macの場合は「control + option + Z」でブロックを削除できるようになった。
これでは使い勝手がとても悪いですね。
片手で押しやすい配置にはなったけど、日本語入力環境では辛いですね。
Windows環境では「かな入力」時でも問題ないのでしょうか?
まとめ

Gutenbergの進化が早いですね。
今後もそのアップデート速度に追いつきながら、使いこなしていきたいです。
ゆくゆくはGutenbergが主流になるでしょうからね。
古いプラグインの使用にこだわらない方にはオススメです。
一歩、先に使って次世代エディターに慣れておきましょう!
より詳しい情報を見たい方は、こちらの公式ページ(英語)でご覧ください。
参考 Call for Testing: Gutenberg 4.0 Pre-release – Make WordPress TestMake WordPress Testそれでは良きWordPressライフを!