2020年3/31にWordPress5.4がリリースされましたね。
すでに変更点などをまとめてくれている記事もたくさんありますが、自分の目で確認しないと気が済まない派なので、実際に触っていきながら変更点についてまとめていこうと思います。
今回のアップデートでもブロックエディター(Gutenberg)がかなり進化しているようなので、特にその辺について詳しく書いていきたいなと。
記事中に使うスクリーンショット画像などはできるだけデフォルトテーマのTwenty Twentyを使って撮影していますが、中にはSWELLを使ったものが混ざってしまうかもです。
![](https://wemo.tech/wp-content/uploads/2019/08/ddryo_icon_600.jpg)
もし間違った情報があれば、コメントかTwitterでお知らせください!
ブロックエディター関連(見た目の話)
まずはユーザーとしてブロックエディターを普通に使う上での変更点をまとめていこうと思います。
内部のコード的な話などはここではあまり触れません。
ウェルカムメッセージがリニューアル
初めてブロックエディターを開いた時のヘルプメッセージみたいなやつが一新されたみたいです。
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_welcome.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_welcome.png)
「編集モード」と「選択モード」の切り替えが可能に
ツールバーの左上に集まっているボタンの中の一番右端に、鉛筆アイコンの見慣れないボタンが追加されています。
![](https://wemo.tech/wp-content/uploads/2020/03/Edit_n_Select_mode-600x330.png)
![](https://wemo.tech/wp-content/uploads/2020/03/Edit_n_Select_mode-600x330.png)
このボタンから、「編集」・「選択」モードの切り替えができるようになりました。
選択モードへは「esc」キーでパッと入ることもできます。
編集モードの状態になっていると、入れ子状態のブロックで親を選択しているのか子を選択しているのかが分かりやすいのと、上下のカーソルキーでブロックごとにポンポン移動していけるのが個人的に便利だなと思いました。
なくても困らない機能ですが、使いこなせれば意外と神機能かもしれません。
エディターの左下で現在編集中のブロックまでの構造が表示されるように
個人的にはこれが今回一番の神アップデートかもしれないです。
ブロックエディターの左下に、以下のようなナビゲーションが表示されるようになっています。
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_block_nav.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_block_nav.png)
現在選択中のブロックがどういう構造の中にあるのかが一目瞭然で、親ブロックをクリックするとそっちにフォーカスさせることもできる!
フルスクリーン表示がデフォルトで有効に
一応、前から「フルスクリーンモード」というのはあったんですが、どうやらそれがデフォルトで有効化されるっぽいです。
![フルスクリーンモード時の編集画面](https://wemo.tech/wp-content/uploads/2020/03/wp54_fullscreen.png)
![フルスクリーンモード時の編集画面](https://wemo.tech/wp-content/uploads/2020/03/wp54_fullscreen.png)
左上のWordPressロゴのボタンの部分は前よりカッコよくなってます。
ソーシャルアイコンブロックが追加
「ウィジェット」カテゴリーの中に追加されています。
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_snsicon_block.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_snsicon_block.png)
実際使ってみるとこんな感じ。↓
初期状態で何種類かのアイコンが薄〜くセットされていますが、URLを入力してはじめて有効化されるみたいですね。
初見だと使いづらいかもしれません。
ちなみに、コアの方で3種類のブロックスタイルが用意されているようです。
![](https://wemo.tech/wp-content/uploads/2020/03/block_styles_of_snsicon.png)
![](https://wemo.tech/wp-content/uploads/2020/03/block_styles_of_snsicon.png)
インラインのテキストカラーを自由に変更できるようになった
結構前から実装するよ〜って話が出てたやつですね。
これを待ってSWELLではずっと実装していなかったのに、なっかなかこないから数ヶ月前に痺れをきらしてSWELLに実装したばかりでした...。笑
グループブロックでテキスト色が設定できるようになった
![WordPress5.4でのグループブロックの色設定](https://wemo.tech/wp-content/uploads/2020/03/wp_54_group_colors.png)
![WordPress5.4でのグループブロックの色設定](https://wemo.tech/wp-content/uploads/2020/03/wp_54_group_colors.png)
これは個人的にけっこう嬉しいです。
今までは中に配置した段落ブロックそれぞれで文字色を変えていかないといけなかったのでかなり面倒だったんですよね。
カラムブロックで文字色・背景色が設定できるようになった
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_columns_colors.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_columns_colors.png)
ボタンブロックの変更点
ボタンブロックは結構変わってますね。
これまでボタンブロックは1つのボタンを設置するだけでしたが、5.4からは一つのボタンブロックの中に何個でもボタンを設置できるようになったみたいです。
HTML構造も変化していて、.wp-block-buttons
というdiv
で囲まれるようになりました。
// いままで
div.wp-block-button
L a.wp-block-button__link
// 5.4 〜
div.wp-block-buttons
L div.wp-block-button
L a.wp-block-button__link
L div.wp-block-button
L a.wp-block-button__link
L ...
さらに、ボタンの色にはグラデーションが設定できるようになっています。
カバーブロックでもグラデーションが可能に
カバーブロックのカラーオーバーレイの色設定でも、グラデーションが利用可能になっています。
グラデーション APIについて
ボタンブロックやカバーブロックで利用可能になったグラデーション機能ですが、選択できるグラデーションのカラーセットを好きにカスタマイズすることが可能です。
雑ですが、こんな感じのコードでカスタマイズできます。
add_theme_support( 'editor-gradient-presets', [/* グラデーション設定の配列 */] );
表ブロックにキャプションが追加できるようになった
表ブロック(テーブル)の下に、画像ブロックなどと同じようなキャプションが設定できるようになるみたいです。
下の画像のように、「キャプションを入力...」という入力エリアが表ブロックに追加されています。
![テーブルブロックのキャプション](https://wemo.tech/wp-content/uploads/2020/03/wp54_table_caption.png)
![テーブルブロックのキャプション](https://wemo.tech/wp-content/uploads/2020/03/wp54_table_caption.png)
![](https://wemo.tech/wp-content/uploads/2019/08/ddryo_icon_600.jpg)
![](https://wemo.tech/wp-content/uploads/2019/08/ddryo_icon_600.jpg)
![](https://wemo.tech/wp-content/uploads/2019/08/ddryo_icon_600.jpg)
5.3で表ブロックがfigure
タグで囲まれるようになったのはこのための準備だったのでしょうか...
メディアと文章ブロックの画像部分がリンク化できるように
以下のような感じで、
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_media_text_link.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_media_text_link.png)
画像の入れ替えボタンがテキスト表示になった
上記のメディアと文章ブロックの画像を見てもらうとわかると思いますが、「置換」と書かれたボタンがありますよね。
画像ブロック系によく出てくるボタンで、画像を変更するためのボタンなのですが、分かりやすく文字で表記されるようになったようです。
WordPress5.3でなぜか「えんぴつ」のアイコンになってものすごく分かりにくかったので、これはすごくいいなと思いました。
ただ、ver 5.4 RC3 時点では日本語環境だと縦書きになってしまって見た目がブサイクになってしまっています。
(issueは投げたので、正式リリースまでに修正されるといいのですが...。)
スマホで見た時、ブロックツールバー上部に固定されるように
これも素晴らしいアップデートだと思います。
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_sp_toolbar.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_sp_toolbar.png)
これまではスマホでもPCと同じようにブロックの位置に合わせてツールバーが出現していた(と思う)のですが、画面上部に固定されるようになりました。
小さい画面でちらちらされると地味に鬱陶しかったんですよね...笑
ブロック開発に関わる変更点
General Block Editor API
ブロック開発してる人たちは多分ガッツリ読んどいたほうがよさそうなやつ。
なんか色々変わりまくってる感じですね。後でちゃんとじっくり読みます。
Buttonコンポーネントの変更点
ボタンコンポーネント( @wordpress/components
の Button
)も色々変わってます。
アイコンが使えるようになった
"Button"コンポーネントと"IconButton"コンポーネントが統合され、"Button"コンポーネントでicon属性の指定が可能になっています。
アイコンの指定がある場合、.components-button
クラスに.has-icon
が付与されます。
サイズが大きくなった
.components-button
の高さが28px
から36px
になっており、これまでのisLarge
をつけていた時の高さと同じサイズになります。
よって、5.4からはisLarge
は特に意味をなさないものとなっています。(.is-large
クラスは付与されるので、自分でCSSを調節すればさらに大きく表示させることが可能)
isDefaultの挙動の変化
これまでは、isLarge
を使用している時はisDefault
の指定がなくても勝手に.is-default
クラスが付与されていましたが、その仕様がなくなったみたいです。(もともとがミスだったのかもしれないですね。)
例えば、以下のようにしてButtonコンポーネントを利用している場合、
<Button isLarge isPrimary={isPrimary} onClick={() => {...}}>
5.3での表示と5.4での表示はそれぞれ以下のようになります。
![](https://wemo.tech/wp-content/uploads/2020/03/wp53_btns.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp53_btns.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_btns.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_btns.png)
このように枠が消えてしまうので、isDefault
をちゃんと書かないといけなくなります。
こう書き換えました
<Button isLarge isDefault isPrimary={isPrimary} onClick={() => {...}}>
※isLarge
は5.3で利用中の人を考慮して残しています。
※ isDefault
はisSecondary
の方がいいかも
.is-default が.is-secondaryに変わった?
isDefault
をつけた時、これまでは.is-default
が付与されていたのですが、.is-secondary
に置き換わっているようです。
というか、ボタンコンポーネントのprops説明ページからisDefault
が消えてるので、isSecondary
を使いなさいということなのかな。
URLInputで placeholder が使えるようになってる!
こういうの!
<URLInput
placeholder='タイトルを入力して記事を検索〜!!'
////
/>
5.3 まで、このplaceholder
が効かなくて不便だったんですよね〜。
(5.0当時は変更できていたような気もするので、もしかすると途中からバグで反映されなくなっていたのかも)
どういうことかというと、これまではURLInput
を使うと、入力エリアには「URLをペーストまたは入力して検索」という文字がプレースホルダーとして出力されていました。
![これまでのプレースホルダー](https://wemo.tech/wp-content/uploads/2020/03/wp_urlinput_placeholder.png)
![これまでのプレースホルダー](https://wemo.tech/wp-content/uploads/2020/03/wp_urlinput_placeholder.png)
この文字を変えることができようになった、というだけの変更なんですが、個人的にこれはめちゃくちゃ嬉しいです。
SWELLの関連記事ブロックでは、内部リンクはURLじゃなくて記事IDを扱うので、URLのペーストはしてほしくなかったんですよね。
なので、タイトルから記事を検索するための機能としてURLInput
を使いたいだけなのに、プレースホルダーには「URLを入力しろ」って書いてあるのがどうも気持ち悪くて。
いつかサポートされるだろうと思ってずっとplaceholder
は書いていたんですが、5.4からそれが反映されていることに気づいてテンション上がりました...!
registerBlockCollection()
ブロックをグループ化して検索しやすいようにできる...?
詳しくはまだ読めていません。
registerBlockVariation()
これもまだ詳しくは読めてませんが、一つのブロックを元にしてバリエーションを増やす機能が実装されたみたいです。
新しく追加された「ソーシャルアイコン」ブロックの各SNS用ブロックはこれで実装されているっぽい...?
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_icon_variations.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_icon_variations.png)
ショートカットキーをカスタマイズできるようになった
詳しく読めてないですが、たぶんショートカットキーが自由にカスタマイズできるようになったっぽいです。
コアのスタイルの変更点
コア側が用意しているスタイルも変わったりしてるので、気づいた点だけまとめておきます。
エディタ側でいうとload-styles
、フロント側でいうと'wp-block-library-css'
。
カラムブロック
毎度お馴染み、カラムブロックくん。5.3の時ほどの変化はないですが、今回も地味に変わっています。
![](https://wemo.tech/wp-content/uploads/2019/08/ddryo_icon_600.jpg)
![](https://wemo.tech/wp-content/uploads/2019/08/ddryo_icon_600.jpg)
![](https://wemo.tech/wp-content/uploads/2019/08/ddryo_icon_600.jpg)
「カラムブロック大調査」がWordPressアップデート時の恒例行事となっています...。
カラムブロックについては、'wp-block-library-css'
についての変更点をまとめます。
大きなポイントはflex-basis
の当て方とメディアクエリの分け方が変化した点でしょうか。
5.3と5.4で変化した部分
/* 5.3 */
@media (min-width:600px) {
.wp-block-column {
flex-basis: calc(50% - 16px);
flex-grow: 0
}
.wp-block-column:nth-child(2n) {
margin-left: 32px
}
}
@media (min-width:782px) {
.wp-block-column:not(:first-child) {
margin-left: 32px
}
}
/* 5.4 */
@media (min-width: 600px) and (max-width:781px) {
.wp-block-column {
flex-basis:calc(50% - 16px)!important;
flex-grow: 0
}
}
@media (min-width: 782px) {
.wp-block-column {
flex-basis:0;
flex-grow: 1
}
.wp-block-column[style] {
flex-grow: 0
}
.wp-block-column:not(:first-child) {
margin-left: 32px
}
}
782px以上でflex-basis:0
となり、カラム幅の設定によって付与されるstyle
があればflex-grow:0
となるように変わっていますね。
また、これらの変更の他、以下のようなスタイルが新たに加わっています。
新規追加されたCSS
.wp-block-columns.has-background {
padding: 20px 30px
}
.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top {
width: 100%
}
テーブルブロック
エディター側だけですが、thead
の下側とtfoot
の上側に3pxのボーダーがつけられています。
.wp-block-table thead {
border-bottom: 3px solid;
}
.wp-block-table tfoot {
border-top: 3px solid;
}
おそらく、編集時にわかりやすいようにガイド線的な意味合いで付けてくれてると思うのですが、テーマによっては邪魔になるかもです。
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_thead_tfoot_boreder.png)
![](https://wemo.tech/wp-content/uploads/2020/03/wp54_thead_tfoot_boreder.png)
ブロックエディターのDOM構造が激変
マジでめちゃくちゃ変わっています。
テーマ開発者さん達はけっこう苦しむんじゃないでしょうか。僕は非常に苦しんでいます。笑
とはいえ、がっつりリファクタリングされてすごくスッキリしたので良い感じにはなってます!
"edit-post-layout__content" が消滅
.editor-styles-wrapper
を囲む.edit-post-layout__content
が消滅しています。
editor- から block-editor- へ完全移行
5.2から、.editor-〇〇
というクラスを.block-editor-〇〇
に置き換えようという話になっていたのですが、今まで新旧どちらのクラスも使用されていました。
それが5.4からは完全に新しい方の.block-editor-〇〇
へ置き換わります。
例えば、インサーター部分は.editor-inserter.block-editor-inserter
という2つのクラスを持っていましたが、.block-editor-inserter
だけになります。
各ブロックの構造がかなりスッキリ
これで、各ブロック(.wp-block[data-type]
)にはたくさんのdivが入れ子状態になっていましたが、それが解消されたようです。
例:これまでの段落ブロックの構造
div.wp-block.block-editor-block-list__block[data-type="core/paragraph"]
<!-- ブロックインサーター -->
div.block-editor-block-list__insertion-point
<!-- ドロップゾーン -->
div.block-editor-block-drop-zone
div.block-editor-block-list__block-edit
<!-- ブロック移動ボタン -->
div.block-editor-block-mover
<!-- ブロックツールバー -->
div.block-editor-block-contextual-toolbar
div[data-block]
div
<!-- リッチテキスト -->
div.block-editor-rich-text
※ editor-
クラスは省略しています。
例:WP5.4の段落ブロックの構造
div.wp-block.block-editor-block-list__block.has-selected-ui[data-block][data-type="core/paragraph"]
<!-- リッチテキスト -->
p.rich-text
まさかの、これだけ。 一瞬目を疑いました。笑
これまでは各ブロック内にブロックツールバーや移動ボタン、インサーターやドロップゾーンが用意されていましたが、それが全部外側に出ているのが大きいですね。
.block-editor-block-list__block-edit
というくそ長ったらしいクラスが付与されていたラッパー要素や、クラスが一切ついていない謎のdiv
タグなども消滅しています。
ブロックエディターの見た目を調整しようとしたことがある人はわかってもらえると思うのですが、あの謎の
.block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks{}
みたいなセレクタたちとおさらばできるのは素晴らしいですね。(おさらばするためにまた多くの時間をかけなくてはいけないわけですが...)
リッチテキストの構造もスッキリ
段落ブロックの構造変化の紹介では、<!-- リッチテキスト -->
として省略していましたが、この中身も結構変わっています。
例:これまでのリッチテキスト(段落ブロックの中)
div.block-editor-rich-text
p.rich-text.block-editor-rich-text__editable.wp-block-paragraph
例:WP5.4のリッチテキスト(段落ブロックの中)
p.rich-text.block-editor-rich-text__editable.wp-block-paragraph
div > p
だったものが、1つの p
だけに統合されています。
.block-editor-rich-text
がなくなって.block-editor-rich-text__editable
だけが残ってるのは個人的に非常に気持ち悪いです。笑
ただ一点疑問なのが、段落ブロックは.rich-text
と一緒に.wp-block-paragraph
というブロックの種類を表すクラス名が付与されているのに対し、見出しブロックにはなぜか.wp-block-heading
クラスがないんですよね。
これは仕様なのかミスなのか、Githubで質問を投げています。
.has-selected-uiとやらがほぼ全ブロックについている
あまり詳しく調査してませんが、ぱっと見、.is-selected
がつく可能性のあるブロックには全て.has-selected-ui
が付与されるているように見えます。
padding & margin地獄が解消された
左右に謎の43pxくらいのpaddingがあったり、そのくせ左右のmarginがマイナスだったり、余白関係のぐちゃぐちゃCSSもすっきりリファクタリングされたようです。
PHPとかのコード的な変更点
カスタマイザークラスの廃止
4.9から非推奨になっていたものが正式に廃止されたようです。
- WP_Customize_New_Menu_Control
- WP_Customize_New_Menu_Section
- wp.customize.Menus.NewMenuControl (これはJSで使えるやつ)
メニュー項目へカスタムフィールドを追加する新しいフック
wp_nav_menu_item_custom_fields
という新しいフックが用意され、メニュー項目へカスタムフィールドを追加するのが簡単になった...?
たぶん、めちゃくちゃありがたいやつ...!
apply_shortcodes()が追加
do_shortcode()
のエイリアス関数としてapply_shortcodes()
が追加されました。
これからはできるだけapply_shortcodes()
使っていってね、とのこと。
do_
という名前なのにecho
しなあかんのかい、的な感じで直されたのかな。
コメント欄を読むと、フックに投げていた'do_shortcode'
もどうやら'apply_shortcodes'
に置き換えれるようです。(たぶん)
//これが
add_filter('the_excerpt', 'do_shortcode');
//こう
add_filter('the_excerpt', 'apply_shortcodes');
カレンダーウィジェットで出力されるHTMLが変更
前後の月へのリンク部分がtfoot
ではなくnav
に置き換わるみたいですね。
REST APIの変更
タクソノミーをOR条件にして取得できるようになったりしてるっぽいです。
その他、地味な変更点など
ドラッグ&ドロップで画像設定できる箇所が増えた
アイキャッチ画像の設定など、ドラッグ&ドロップできるエリアが増えたっぽいです。
![](https://wemo.tech/wp-content/uploads/2020/03/Drag-and-Drop-Images.png)
![](https://wemo.tech/wp-content/uploads/2020/03/Drag-and-Drop-Images.png)
ファビコン処理がなんたらかんたら
ちゃんと読めてなくてまだわかってないけど気になっているもの。
is_favicon()
がどうとかis_robots()
がどうとか。do_favicon()
とかいうのが追加された...?
参考サイト
以下の記事を参考にしながら実際に触って調べています。