Still not Gutenberg?

WordPress5.3でグーテンベルクがパワーアップ!何がどう変わったのかまとめ

2019年11月13日にワードプレスのコアアップデートがありました。

ヨハネス・G

わしはどんどん進化していくぞ!

くま

恐ろしいジジイやな

現在(2019/11/13)の最新バージョンはWordPress5.3です。アップデートする際は、バックアップをしておきましょう。

今回のアップデートでグーテンベルクがさらに使いやすくなりました

追加された機能まとめ
  1. エディタ画面のデザインがフラット化
  2. 画像ブロックがまぁまぁパワーアップ
  3. カラムブロックが大幅パワーアープ
  4. テーブルブロックがちょっとパワーアップ
  5. ボタンブロックもまぁまぁパワーアップ
  6. 新機能のグループ化ブロックは「神」

文字で説明してもわけわからんと思いますので、画像や動画を使って何がどう変わったのかを説明していきますね。

この記事ではWordPressテーマのSANGOを使って説明しています。

投稿画面がフラットになったよ

アプデ前の投稿画面
アプデ後の投稿画面

よく見ないと分からないレベルですが、上のボタンあたりがフラットなデザインに変更されました。

ここね

ちなみに

「あれれ?ぼくの投稿画面とぜんぜん違うぅぅぇ???」

と思った方は、ちゃんと見てくれてますね。ありがとうございます。

ぼくは投稿画面を使いやすいように見た目をカスタマイズしているので、あしからず。

もしも、真似したい方はこちらの記事を参考にしてください。

書きやすくしよう記事

書きやすくしよう①:記入する幅を広くする
書きやすくしよう②: 背景に色を追加する
書きやすくしよう③: タイトル部分をスッキリ
書きやすくしよう④: プレビューボタンを押しやすくする

menくん

個人的にはフラットな方が見やすくなりました

画像ブロックがパワーアップ

画像ブロック

こちらの画像ブロックに様々な機能が追加されました。

ココが変わった!
  • 画像を丸に切り抜くスタイルが追加
  • ツールバーにリンク設定が追加
  • スタイルのデフォルトを設定できる(
menくん

控えめに言って神アプデですね

画像のブロックスタイルに丸バージョンが追加

ブロックスタイルに新しいスタイルが追加されている

デフォルト

丸バージョン

自動的に丸く切り取ってくれるスタイルが追加されました。

画像の設定がツールバーに追加

アプデ前
アプデ後

画像ブロックのツールバーが進化しています。

ツールバー部分

追加されたのは

  1. 画像の編集ボタン(アイコン変更)
  2. リンク追加ボタン

この2つです。

以前あった「画像の編集ボタン」がなくなりましたね。

そして、右のサイドメニューにあった「リンク設定」がツールバーに移動したようです。

画像変更ボタン

画像の編集ボタンを押したときの設定画面

今までは画像の編集ボタンを押すとメディアライブラリが開きましたが、今回のアップデートからは、画像の下に「アップデート」「メディアライブラリ」「URLから挿入」を選べるようになりました。

リンク追加ボタン

ツールバーにリンク設定ボタンが追加
細かい設定もここからできる

よく使うリンク設定をツールバーに追加してくれたのは嬉しいですね。

デフォルトスタイルを決めれる!(神)

アプデ前

アプデ後

menくん

写真が山なのは後々修正されるでしょう、注目は「Default Style」の部分です!

デフォルトの設定項目

一度ここでデフォルト(初期設定)を選択しておけば、いちいち画像ごとに設定する必要はなくなります

これはくっっっそ便利です。

ぼくはSANGOのオリジナルで用意されている影(小)をよく使うので、めちゃくちゃ助かりました。

ヨハネス・G

よほほほ、細かい変更点だけど粋な計らいでしょ

カラムブロックが大幅アップデート

カラムブロック

よく使うカラムブロックもアップデートでかなり進化しました。

ココが変わった!
  • カラムのレイアウトが5種類から選べる
  • 横幅を自由に変更できる
  • 縦方向の位置も変更できる
  • カラムブロックがひと目で分かるようなった

カラムのレイアウトを5種から選べるように

選べるレイアウト

以前のグーテンベルクでは、カラムブロックを挿入すると

以前のカラムブロック

2カラムが打ち込まれます。

これでも特に問題なかったんですが、今回のアプデを見ると前よりもかなり使いやすく、柔軟なレイアウトが可能になりました。

それぞれを挿入したときを見てみましょう。

50:50のカラム

33:66のカラム

66:33のカラム

33:33:33のカラム

25:50:25のカラム

カラムの横幅の割合を変更できる

右のサイドメニューからカラムの幅を調整できるようになりました。

ここで幅を調整

感覚的に幅を調整することができます。

割合を変更している動画
menくん

感覚的に設定できるのは素晴らしいですね!

縦方向の位置を調整できる

縦方向の調整

いや~これは粋な対応ですね。

  1. 上に寄せる
  2. 真ん中に寄せる
  3. 下に寄せる

この3つから縦方向の位置を選ぶことができます。

実際に使ってみた

これはねグーテンベルク用に作成したアイキャッチ画像です。グーテンさんは髭がトレードマーク。

画像の説明なんかで使うときは、真ん中寄せを使うといい感じですよね。

カラムブロックが見やすくなった

アプデ後

ここはカラムブロックだよ~って言うのがひと目でわかりますね。

これはある意味一番うれしいアプデです。

テーブルブロックもちょっとパワーアップ

テーブルブロック

テーブルブロックもちょこっとだけ進化しました。

ココが変わった!
  • ヘッダーセルthを追加できる
  • セル内を中央寄せできる

ただし、セルの結合はまだ対応していません

グーテンベルクの表についてはこちらの記事で詳しく書いています。

グーテンベルクの「表」への期待!できること、できないことまとめ

thのセルが挿入できるようになった

thを挿入している動画

右側のサイドメニューから簡単にthを挿入できるようになりました。

ついでにフッターにも挿入できるみたいですね。

セル内を中央寄せできるようになった

セルの中を中央寄せにしている動画

地味に嬉しい追加機能ですね。

ボタンブロックも使いやすくパワーアップ

アプデ前のボタン設定
アプデ後のボタン設定

ボタンブロックも柔軟なデザインができるように変更されました。

ココが変わった!
  • ボタンの角の丸みを設定できる
  • リンク設定ができる
menくん

角のボタンが無くなって、自分で設定できるようになったよ

ボタンの丸みを設定

ボタンの丸みを設定する部分

この設定の仕方はWordPressテーマの「JIN」と一緒ですね。

ボタンの角丸を調整している動画

感覚で設定できるのはすごくいいですね。

ボタンのリンク設定

初期の状態
別ダブで開くにした場合
menくん

ボタンのリンク設定も簡単になりましたね

新機能!グループ化ブロックは神

グループ化ブロック

これは今回のアップデートでも目玉となる機能です。

グループ化ブロックって?

ブロックをグループ化(まとめることが)できるブロックです。このグループ化ブロックによって、まとまりごとに移動やカスタマイズできるようになります。

ココがすごい!
  • まとめての移動が簡単
  • 背景色を追加できる
  • カスタマイズがしやすくなる

グループ化ブロックでまとめて移動

複数のブロックを選択して、ツールバーからグループ化することができます。

グループ化して移動している動画

グループ化しても內部のブロックはいつでも変更できます

記事の段落ごとに移動できることで、グーテンベルクが更に使いやすくなりましたね。

グループ化ブロックにも背景色をつけれる

グループ化ブロックを挿入した画面

グループごとに背景色をつけることができます。

背景色をつけている動画

ただし、注意点があります。

背景色を追加できますが、余白がないためこのような感じになります。

グループ化で背景色を追加した場合
menくん

まぁ、ここらへんは後でカスタマイズできるので全然へっちゃら

くま

その考えはまじでヤバいと思うぞ

グループ化ブロックはカスタマイズの味方

グループ化はまじで最強のカスタマイズアイテムになる可能性があります

タイトル

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

こんな感じのボックスが簡単に作れます。

menくん

使用方法は無限大!!!

ぬめっと動く?

今回のアップデートで期待してたのが、ボックスを移動させるときはぬめっと動くアニメーションです。

menくん

あのヌメヌメ感が欲しいんだよぉ

ヨハネス・G

あれれ?君だけかな?それともSANGOだからかな?

とにかく、ぼくのサイトではヌメヌメを実感できませんでした。

誰か教えて下さい|ω・`)

WordPress5.3のグーテンベルク情報まとめ

アプデまとめ
  1. エディタ画面のデザインがフラット化
  2. 画像ブロックがまぁまぁパワーアップ
  3. カラムブロックが大幅パワーアープ
  4. テーブルブロックがちょっとパワーアップ
  5. ボタンブロックもまぁまぁパワーアップ
  6. 新機能のグループ化ブロックは「神」

これだけ一気にグーテンベルクの機能が追加されたので、まとめておきました。

まだまだグーテンベルクには伸びしろがあるので、これからもアップデートが楽しみですね。

menくん

はよはよはよ次のアプデはよ

ヨハネス・G

そう急かすな小僧

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です