こんにちは、みみです。
4/4に行ったTokyo WordPress Meetup オンライン: バージョン 5.4 ブロックエディターの主な変更点 | Meetup での発表資料として、こちらの記事を公開します。デモをしながらという想定の文章なのでそのままだとちょっと微妙だと思います、何卒ご了承ください。
余力があれば後日公開記事用にリライトしたいと思いますが、取り急ぎ同じものを公開させていただきます。
以下本文です。
5.4のリリース日は3/31（日本だと4/1）でした。
すでにさわられた方いらっしゃいますか？
今日のお話は基本的に公式のWordPress 5.4 Field Guideを元にしています。
目につきやすそうな、一般的な変更から説明していきます。
1. フルスクリーンモードがデフォルトになりました。
一番目につくのは、最初からフルスクリーンモード、というところかと思います。画面が広くなって使いやすいので良いですね。
記事一覧とかに戻るボタンはどこ？と思うかもしれませんが、左上のWのアイコンを押すと戻ります。記事を保存してなければちゃんとアラートしてくれるので安心です。
これは右上の3つの点のアイコンの、「ツールと設定をさらに表示」ボタンを押して、フルスクリーンモードのチェックを外すと通常のモードになります。
参照：
https://make.wordpress.org/core/2020/03/03/fullscreen-mode-enabled-by-default-in-the-editor/
2. ウェルカムガイドが新しくなりました。
アップデートもしくは新規に5.4をインストールすると自動で最初に出てくる説明が、新しくウェルカムガイドというものになりました。2回め以降は、これも右上の「ツールと設定をさらに表示」ボタンを押して、ウェルカムガイドを選ぶと確認できます。
（ハンズオン）
3. 新しいブロックが2つできました。
新しいブロックというとちょっと語弊がある気がしますが、2つ新規のブロックが確かに追加されています。
3-1. ソーシャルアイコンブロック
各種SNSサービスへのリンクを貼れるブロックです。
ブロックの出し方は追加ボタンを押して、ウィジェットの中にあります。デフォルトでボタンが6つ出てきますが、他にも沢山あります。さらに、ブロックのスタイルは3つから選べるようになっています。（デモ）
ひとつ注意なのですが、このブロックに似た機能が、実はGutenbergプラグインとしては、ソーシャルリンクブロックとして以前から存在していまして、多分、あんまりいらっしゃらないとは思うのですが、Gutenbergプラグインを使って使用されていた方がもしいらっしゃるなら確認したほうが良いかもしれません。とはいえ、下位互換性があるので何か変更されない限り問題は起きないはずですし、5.4にアップデートして該当部分を更新すれば、自動でアップデートされるはずです。
3-2. ボタンブロック
ボタンブロックは前からあったのですが、1ブロックの中に複数のボタンが作成できるブロックに代わりました。ボタンリンクは良く複数で使うケースが多いため、対応したそうです。とはいえ、こちらのほうは以前のボタンブロックもそのまま動きますのでご安心を。
こちらも、先に説明したソーシャルアイコンブロックと同じように、縦ではなくて横に要素（インナーブロック）が増えるという新しいUIとなっています。試しに一個ボタンを増やしてみます。（デモ）
そして、ボタンのデザインもかなり自由に変えられるようになりました。グラデーションを使うこともできます。角丸のサイズもスライダーで自在に変更できます。ボタンの並び替えも簡単です。
参照: https://make.wordpress.org/core/2020/02/27/new-or-updated-blocks-in-wordpress-5-4/
ちなみに、このグラデーションは、カバー画像などいくつかのブロックでも使えるようになっています。（デモ）
カバー画像
4. インラインの文字色の変更が出来るようになりました。
これ知らないと見つけにくいアップデートだと思うのですが、ブロックの中で、一部だけ色を変えるということが標準のブロックでも出来るようになりました。（デモ）
好きな色に変えられるようになっています。
5. 投稿一覧にアイキャッチ画像が表示されるようになりました。
「最新の記事」ブロックで投稿一覧が表示できるのですが、そこにアイキャッチ画像を表示できるようなりました。まだ細かいクエリの操作などはできませんが、今後のアップデートに期待ですね。（デモ）
- パイナップルもスイカもただ好きに食べたいだけなんだ
X（Twitter）を止めて2ヶ月が経った。とても快適である。 情報が入って来なくなるかなあと心配したけれど、… Read more: パイナップルもスイカもただ好きに食べたいだけなんだ - My Experience as an Organizer at WordCamp Asia 2024
日本語版はこちら Looking back, it was a lot of fun! I fell in l… Read more: My Experience as an Organizer at WordCamp Asia 2024 - WordCamp Asia 2024 のオーガナイザーをやってみた
English Version is here. 終わってみればとても楽しかった！チームはもちろん、街で出会っ… Read more: WordCamp Asia 2024 のオーガナイザーをやってみた - There and Back Again – My first week in Community Summit and WCUS 2023: Part 1
This is my first post in English. “Hi, I’m … Read more: There and Back Again – My first week in Community Summit and WCUS 2023: Part 1 - 岡山WordPress Meetupで「そのデザイン、どうやってWordPressに落とし込んでる？」 という話をしてきました
こんにちは、mimiです。 今日は、先日、岡山WordPress Meetupでお話してきたらとても楽しかった… Read more: 岡山WordPress Meetupで「そのデザイン、どうやってWordPressに落とし込んでる？」 という話をしてきました
6. ブロックパンくずリストと「編集」/「移動」モード
画面下側に現在居るブロックのパンくずリストが表示されるようになりました。一個上に移動したい時はクリックすると戻れます。（デモ）
デモ用の段落ブロック。
デモ用の引用ブロック。
また、編集モードと移動モードがわかるアイコンが画面上部に表示されるようになりました。切り替えも可能です。（デモ）
一般の方向けの変更点としては大きくこの6つとなります。ココまででなにかご質問等ありますか？
質問コーナー 1
続いての部分は徐々に開発者向けの変更点になるかと思います。
ココからの変更点は私のほうで詳しい検証まで出来ていない箇所も多いのでご了承ください。聞き慣れない専門用語がバシバシ出てくるかもしれません。眠くなったらごめんなさい。でも処々、使っていて変わったなと思った理由が分かったりとかする部分もあると思うので良かったら引き続き御覧ください。
7. テーマでグラデーションをカスタム出来るようになりました。
グラデーションをカスタム
テキストサイズや通常のカラーと同様に、グラデーションのパレットもテーマでカスタム出来るようになりました。editor-gradient-presets を使用します。
また、グラデーションの機能が必要ない場合は、オフにすることもできます。
add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );参照: https://make.wordpress.org/core/2020/03/02/new-gradient-theme-apis/
8. メニューのカスタムフィールドに新しいフックが追加されました。
外観 > メニューでカスタムが出来るメニューに、
wp_nav_menu_item_custom_fields , wp_nav_menu_item_custom_fields_customize_template というフックが追加されました。
これらの新しいアクションフックは、これまでナビゲーションメニューに使用していたコードから置き換えることができます。既存のコードをチェックして、置き換えたほうがいい場所があるかどうか確認する必要があります。と書いてありました、該当される方はご検証ください。
9. プライバシー関連のアップデート
プライバシーツールにいくつかの改善が加えられ、ユーザーエクスペリエンスが向上し、個人データのエクスポートで提供されるデータが拡張されています。
個人データのエクスポートには、セッショントークン、コミュニティイベントの場所、カスタムユーザーメタが含まれるようになりました。
参照: https://make.wordpress.org/core/2020/03/02/privacy-updates-in-5-4/
10. キーボードショートカットをカスタムできるようになりました。
@ wordpress / keyboard-shortcutsと呼ばれる新しいパッケージが導入され、ブロックエディター画面で使用可能なキーボードショートカットの登録/削除とドキュメントをこれで一元化するようになりました。
コード書く必要がありますが、キーボードショートカットをカスタムしたい要望は結構ある気がするので便利ではないでしょうか。
参照: https://make.wordpress.org/core/2020/02/19/block-editor-keyboard-shortcuts-in-wordpress-5-4/
11. マークアップとスタイル関連の変更
今回、DOM構造が大幅に見直されているので、いくつかのクラスが廃止されたり、マージンが修正されたりしています。エディタースタイルをカスタムしている人は要確認かな、と思います。
11-1. マージンの簡素化
CSSを根本的にシンプルにするために、組み込みまれたパディングと負の余白が存在しないようにリファクタリングが行われました。
ブロックまたはエディターのスタイルの以前のマージンやパディングをカスタムして補正したりしている場合、5.4で少し外れて見えるかもしれません。もしそうなら、書いたスタイルを取り除くようにしてください。とのことです。
11-2. “editor-” クラス、”edit-post-layout__content” div、他いくつものクラスが廃止
ブロックエディタのDOM構造をシンプルにするために、block-editor-rich-textクラスは実質使えなくなっているようです。編集可能な要素のラッパーが本当に必要な場合は、独自の要素を作成することをお勧めします、とのことです。
また、ブロックIDを含むdata-block属性は、外側のブロックラッパー要素に再配置されました。block-editor-block-list__block-editクラス（長過ぎ！）は完全になくなりました。 div要素も同様です。.wp-block> .block-editor-block-list__block-edit> [data-block]などのセレクターは機能しなくなります。代わりに.wp-blockまたは[data-type]属性のみを使用してください。
という感じでかなりがっつりDOMが変わっています。ちょっとお見せしますね。（デモ）
といっても以前のDOMを見ていない人には違いが分からないと思うのですが、かなりスッキリしています。ちなみに今出ている最新のGutenbergだともっとスッキリしています。お楽しみに！
12. Block Collection
registerBlockCollection でブロックコレクションをカスタムできるようになりました。つまり、categoryに関係なく、特定のブロックタイプをグループ化して、エディターの[挿入]メニューに表示することができます。いくつもカスタムブロックを作成している方や、特定のブロックのみ使用するケースなどに便利だと思います。
参照: https://make.wordpress.org/core/2020/02/27/block-collections/
13. ブロックエディタAPIの更新
このセクションは私には正直まだ良くわかっていないことが多いので、なるべく質問しないでくださいｗ
参照: https://make.wordpress.org/core/2020/03/02/general-block-editor-api-updates/
13-1. metaが非推奨に
post_metaの扱い方が変わったよ、というお話です。
以前のやり方も廃止にはなっていないのですが、メタの値を取得したり変更するにはuseEntityPropを使って欲しいとのことです。
これについては、メタブロックについてのチュートリアルが最近更新されていたのでそちらを参照すると良いかもです。
13-2. ショートコードのtransformにisMatch がサポートされました
transformとは、例えば段落ブロックではココの部分のブロック変換をする機能のことなのですが（デモ）、ショートコードブロックのtransformで、特定のショートコードの場合にのみブロック変換を発火させることが出来るようになったよう？です。たぶん。これ意外と有用かも？
[sample]
13-3. AsyncModeProvider API登場
非同期処理関連で新しいAPIが出来たそうです。
エディタでの入力が遅くなるのを防ぐためにブロックエディターが採用している非同期レンダリングモードを（データモジュールを使用している場合に限り）、開発者独自の React ステートツリーで活用できるようになりました。
ここほんと全然分かってないので下手な説明はしません。以下のブログが詳しいそうです。
リアドさんの個人ブログ：https://riad.blog/2020/02/14/a-journey-towards-a-performant-web-editor/
13-4. media upload handlerを設定からカスタムできるようになりました
GutenbergのPlaygroundのように、WordPressを離れても、ブロックエディタ（wordpress/block-editor）はスタンドアローンで実装できるのですが、そういうときに特に関連がある新機能として、メディアアップローダーのhandlerを設定からカスタムできるようになったそうです。
…なんだか、凄いマニアックなアップデートな気がするんですが、少なくとも1人が切望している機能だとか書いてありました。気になる人はチェックしてみてください。
13-5. ドラッグアンドドロップがより簡単に
実はdorpzoneを無くしたとのことです。なので、より広いエリアにドラッグアンドドロップ出来るようになっているので、ユーザーからの苦情が無くなるだろう、とのこと。
同時に、editor.BlockDropZone も無くなっているので、使用していた人で何か不具合があったら報告ください、とのことです。
13-6. フォーカスの挙動が変わりました
Richtextにおけるインラインの色変更などの複雑なUI操作に対応するために、フォーカスの挙動が変わりました。
これは、フォーカスが直ぐに戻らなくなった代わりに、フォーカスを元に戻したい場合、たとえばボタンをクリックした後、フォーマットタイプを登録するときに積極的にそれを行わなければならないことを意味します。そのために、onFocus ファンクションが追加されています。
13-7. 新しい Guide コンポーネントが追加されました
モーダル画面を表示して、ステップ・バイ・ステップのチュートリアルなどのガイドがより簡単に作れるGuideコンポーネントが追加されました。
13-8. wordpress/nuxが非推奨に
これまで、新規ユーザーのためのチュートリアルガイドに使われていた @wordpress/nux パッケージ (wp.nux) と DotTip コンポーネントが非推奨になり、 代わりに Guide へ移行することが推奨されるようになりました。
14. block variations API
ブロックにバリエーションが追加できる、block variations APIが追加されました。例えば、ソーシャルアイコンのブロックが良い例です。ソーシャルアイコンブロックにWordPressやTwitterなどのバリエーションを設定して、複数のスタイルを実現しています。
参照: https://make.wordpress.org/core/2020/02/27/introduce-block-variations-api/
15. カスタムブロック製作者に朗報！ @wordpress/create-block
ブロック開発の足場づくりツールがいくつかこれまで出ていますが、今後はこれだけで済みます。（時間あればデモ）
npm init @wordpress/block YouWantMakeBlockName
参照: https://make.wordpress.org/core/2020/02/28/new-wordpress-create-block-package-for-block-scaffolding/
15. カスタマイザーで非推奨となったクラスがあります
16. REST APIの変更点
16-1. “OR” がサポートされました
以前は、and文しか受け付けませんでしたが、or文が可能になりました。例えば以下の場合、idが1のタグとidが2のカテゴリに含まれている全ポストが取得できます。
/wp/v2/posts?tags=1&categories=2&tax_relation=OR16-2. 埋め込まれる情報を選択できるようになりました
以前は_embedのみでいろんな情報が埋め込まれていたのですが、それが選択できるようになりました。例えば以下の場合、authorの情報のみを埋め込んだ情報が返ってきます。
/wp/v2/posts/?_embed=author16-3. WP_REST_Serverのメソッドが変更されました
WP_REST_Serverを拡張してメソッドをオーバーライドする・している開発者は、PHPの警告を回避するために、コードを更新する必要があります。
参照: https://make.wordpress.org/core/2020/02/29/rest-api-changes-in-5-4/
17. do_shortcodeの代わりにapply_shortcodesを
apply_shortcodes（）という新しい関数が導入されました。これは、現在のdo_shortcode（）関数のエイリアスです。apply_shortcodesのほうが意味的により正しいためです。do_shortcodeは多数のテーマやプラグインで使用されているため当面、非推奨にはなりませんが、今後はapply_shortcodesを使ってね、ということらしいです。
以上、駆け足で5.4の変更点をご紹介しました！
後半のお話についてのご質問に私は答えられないかもしれませんが、参加者の何方かが答えていただけると信じて質問タイムに入ります。
