WordPress5.9 RC1 が 公開されました。 WordPress5.9 は 2022年1月25日に リリースされる予定なので いろいろチェックをしています。
その中の WordPress5.9 で気がついたところを取り上げていきます。
これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。
WordPress5.9の紹介
https://wordpress.org/news/2021/11/a-look-at-wordpress-5-9/
リリースまでのスケジュールは WordPress 5.9 Development Cycle に載っています。
WordPress 5.9 Beta1 https://wordpress.org/news/2021/11/wordpress-5-9-beta-1/
WordPress 5.9 Beta2 https://wordpress.org/news/2021/12/wordpress-5-9-beta-2/
WordPress 5.9 Beta3 https://wordpress.org/news/2021/12/wordpress-5-9-beta-3/
WordPress 5.9 Beta4 https://wordpress.org/news/2021/12/wordpress-5-9-beta-4/
WordPress 5.9 RC1 https://wordpress.org/news/2022/01/wordpress-5-9-rc-1/
WordPress 5.9 RC2 https://wordpress.org/news/2022/01/wordpress-5-9-rc-2/
WordPress 5.9 RC3 https://wordpress.org/news/2022/01/wordpress-5-9-rc3/
2022/01/26 リリースされました。
WordPress 5.9 https://wordpress.org/news/2022/01/josephine/
新しいデフォルトテーマ「Twenty Twenty-Two」
新しいデフォルトテーマ「Twenty Twenty-Two」がリリースされました。
「Twenty Twenty-Two」はWordPress 5.9の新しい機能「フルサイト編集(FSE)」で動作します。
「Twenty Twenty-Two」のように フルサイト編集(FSE)で編集するテーマを「ブロックテーマ」、従来のテーマを「クラシックテーマ」と呼ばれるようになっています。
Introducing Twenty Twenty-Two
https://make.wordpress.org/core/2021/10/06/introducing-twenty-twenty-two/
「Twenty Twenty-Two」と「フルサイト編集(FSE)」についてはこちらでも紹介していますのでご覧ください。
WordPress5.9 新デフォルトテーマ Twenty Twenty-Two と フルサイト編集(FSE) をチェックしています
フルサイト編集(FSE)
新しい機能「フルサイト編集(FSE)」が使えるようになりました。
この機能を使うにはブロックテーマでないと使えません。
サイトエディタするには「外観」→「Editer」をクリックしてください。
ブロックテーマは今回の「Twenty Twenty-Two」だけではなく他にもありますのでチェックしてみてください。
https://wordpress.org/themes/tags/full-site-editing/
【参考】Block Theme
https://developer.wordpress.org/block-editor/how-to-guides/themes/block-theme-overview/
サイトエディタはテーマフォルダに「block-templates/index.html」または「templates/index.html」があるとサイトエディタが使えるようになっています。
クラシックテーマでも「templates/index.html」がある場合(ありそう)は外観メニューに「エディタ」がでてきます。
Gutenberg ブロックエディタ
WordPress5.8では「Gutenbergプラグインver10.7」でしたが WordPress5.9では「Gutenbergプラグイン(ver11.9)」が組み込まれました。
これらGutenbergプラグインの過去のバージョンの記事を見る事で 何が変更して追加されたか を見る事ができます。
グーテンベルクの新機能 ver11.9 グーテンベルクの新機能 ver11.8
グーテンベルクの新機能 ver11.7 グーテンベルクの新機能 ver11.6
グーテンベルクの新機能 ver11.5 グーテンベルクの新機能 ver11.4
グーテンベルクの新機能 ver11.3 グーテンベルクの新機能 ver11.2
グーテンベルクの新機能 ver11.1 グーテンベルクの新機能 ver11.0
グーテンベルクの新機能 ver10.9 グーテンベルクの新機能 ver10.8
WordPress5.9リリースが延長されたせいか「Gutenbergプラグイン(ver12.3)」までの一部の機能も入ってるもようです。
グーテンベルクの新機能 ver12.3
グーテンベルクの新機能 ver12.2
グーテンベルクの新機能 ver12.1
グーテンベルクの新機能 ver12.0
リストビューの機能強化
リストビューのネスト部分を閉じたり展開したりができるようになって複雑な入れ子のブロックも見やすくなりました。(10.9)
【参考】List View: allow expanding and collapsing of nested blocks #32117
https://github.com/WordPress/gutenberg/pull/32117
リストビューのブロックをドラッグアンドドロップで簡単に並べ替えできるようになりました。(11.1)
【参考】Enable drag and drop in List View, fix performance issues #33320
https://github.com/WordPress/gutenberg/pull/33320
リストビュー各ブロック右端の省略記号(3点リーダー)からメニューを表示できるようになりました。(11.8)
【参考】Show ellipsis menu in the List View #35170
https://github.com/WordPress/gutenberg/pull/35170
ブロックマネージャー
ブロックマネージャーが「設定」に統合されました。(10.9)
【参考】Absorb block manager within blocks preferences #32166
https://github.com/WordPress/gutenberg/pull/32166
フルスクリーンパターンエクスプローラーモーダル
ブロックパターンの[参照]ボタンをクリックすると大きな画面でブロックパターンを探す事ができるようになりました。(11.9)
【参考】[Patterns]: Browse Patterns in a Modal #35773
https://github.com/WordPress/gutenberg/pull/35773
タイポグラフィツール
段落、リスト、引用、整形済みテキスト、プルクオート、テーブル、カバー、メディアとテキスト、投稿カテゴリー等、テキスト入力部分で「タイポグラフィツール」を利用する事で 文字装飾が設定できるようになりました。(11.9)
タイポグラフィツールでは、「大文字小文字(text-transform)」「letter-spacing」が設定できます。
また、theme.json の設定によっては「フォント(font-style)」「行の高さ(line-height)」「外観(font-weight)」が設定できるようになります。
※タイポグラフィツールの項目は最初は隠れてるので右の「+」マーク(又は3点リーダー)をクリックして表示する項目を追加してください。
【参考】Typography block support: add typography support and defaults #34064
https://github.com/WordPress/gutenberg/pull/34064
検索ブロック
検索ブロックのボタンの色を変更できるようになりました。(11.2)
ボタン部分をクリックすると文字色と背景色を変更できるようになります。
【参考】[Search Block]: Add color support to search button #32416
https://github.com/WordPress/gutenberg/pull/32416
グループブロック
グループブロック内のブロックのレイアウトを設定できるようになりました。
現在のところ幅だけですが 将来フレックスレイアウト内の方向、配置、位置合わせ、および間隔を変更するためのオプションを提供する予定だそうです。(11.2)
※theme.jsonが無いとでてきません。
【参考】Add flex layout support to the block editor #33359
https://github.com/WordPress/gutenberg/pull/33359
リンクURLプレビュー
エディターで設置したリンクをクリックすると、リンク先のプレビューを表示できるようになりました(10.9)
【参考】Enhance link control UI with rich URL previews #31464
https://github.com/WordPress/gutenberg/pull/31464
投稿のアイキャッチ画像ブロック
WordPress5.8で「投稿のアイキャッチ画像ブロック」が追加されましたが WordPress5.9で 高さ、幅、縮尺のコントロールが追加されました。(11.3)
【参考】[Block Library – Post Featured Image]: Add basic dimension controls #31634
https://github.com/WordPress/gutenberg/pull/31634
また画像に「Duotoneフィルター」をかけれるようになりました
【参考】Add duotone to Post Featured Image block #34113
https://github.com/WordPress/gutenberg/pull/34113
見出しブロック
見出しブロックのHTMLアンカーを自動的に生成して追加するようになりました。(11.8)
また、アンカーはリスト表示にも表示されます。
※既に設置している見出しブロックをコピーして再利用する場合はアンカーもコピーされますので注意してください。
これは 時期 WordPressバージョンで登場するだろう の「目次ブロック」の為だそうです。
【参考】Autogenerate heading anchors #30825
https://github.com/WordPress/gutenberg/pull/30825
カバーブロック
カバーブロックでは背景色を使用したときに不透明度を設定するオプションが追加されました。(11.8)
【参考】Cover block: add option to set opacity when background colour used #35065
https://github.com/WordPress/gutenberg/pull/35065
カテゴリブロック
階層化している場合、トップレベルのカテゴリのみを表示できるようになりました。(11.8)
【参考】[Block Library – Categories]: Add support for showing only top level categories #35726
https://github.com/WordPress/gutenberg/pull/35726
ボタンブロック
フレックスレイアウトと新しいレイアウトタイプが追加されました。
【参考】Add flex layout to Buttons block and new layout type. #35819
https://github.com/WordPress/gutenberg/pull/35819
プルクオートブロック
プルクオートブロックにborderサポートが追加されました。
幅、スタイル、色、角丸 等を設定できるようになります。
ギャラリーブロック
ギャラリーブロックは改修され、画像ブロックをベースに利用するようになりました(11.4)
個々の画像は画像ブロックの設定であんな事やこんな事ができるようになります。
以前の形式のギャラリーブロックがある場合は、管理画面で開いた時に新しいギャラリーブロックに自動で変換するようになっています。
【参考】Gallery Block Refactor Dev Note
https://make.wordpress.org/core/2021/08/20/gallery-block-refactor-dev-note/
※テーマやプラグインの開発者は確認してね て書いてます。
【参考】Gallery: Convert Gallery block to use Image blocks instead of having its own nested image format #25940
https://github.com/WordPress/gutenberg/pull/25940
【参考】Upcoming Gallery Block improvements
https://wordpress.org/news/2021/09/upcoming-gallery-block-improvements/
スポンサードリンク
新しく追加されたブロック
特にブロックテーマで利用する為のプロックが追加されました。
【デザインカテゴリ】
| Row(行) | Blocks shown in a row. |
【テーマカテゴリ】
| Navigation(ナビゲーション) | 訪問者がサイト内を移動できるようにするブロックのコレクション。 |
| Site Logo(サイトロゴ) | このサイトを表すグラフィックを表示します。更新すると、このブロックが使用されているすべての場所で変更が適用されます。これはサイトのアイコンとは異なる小さな画像で、ダッシュボードやブラウザのタブなどに表示されて、ユーザーによるサイトの認識に使用されます。 |
| Site Title(サイトのタイトル) | このサイトの名前を表示します。ブロックを更新すると、ブロックが使われているすべての場所で変更が適用されます。ブラウザのタイトルバーや検索結果にも表示されます。 |
| Site Tagline(サイトのキャッチフレーズ) | 簡潔にサイトを説明してください。キャッチフレーズは、テーマのデザインで非表示でも、検索結果やソーシャルネットワークでの共有で使用されます。 |
| Query Loop(クエリーループ) | 異なるクエリーパラメータやビジュアル構成に基づいて投稿タイプを表示できる、高度なブロックです |
| Post List(投稿一覧) | Display a list of your most recent posts,exclding sticky posts. |
| Template Part(テンプレートパーツ) | サイトのヘッダー、フッター、サイドバーなど、異なるグローバルな領域を編集するか、独自のものを作成します。 |
| Hader | ヘッダーテンプレートは一般にタイトル、ロゴ、メインナビゲーションを含むページエリアを定義します。 |
| Footer | フッターテンプレートは一般にクレジット、ソーシャルリンク、またはその他のブロックの組み合わせを含むページエリアを定義します。 |
| Post Title(投稿タイトル) | 投稿、固定ページ、その他のコンテンツタイプのタイトルを表示します。 |
| Post Excerpt(投稿の抜粋) | 投稿の抜粋を表示します。 |
| Post Featured Image(投稿のアイキャッチ画像) | 投稿のアイキャッチ画像を表示します。 |
| Post Content(投稿コンテンツ) | 投稿または固定ページの内容を表示します。 |
| Post Auther(投稿者) | 投稿の投稿者を追加します。 |
| Post Date(投稿日) | 投稿の日付を追加します。 |
| Post Categories(投稿カテゴリ) | 投稿のカテゴリーを表示します。 |
| Post Tags(投稿タグ) | 投稿のタグを表示します。 |
| Next Post(次の投稿) | 現在の投稿に続く、次の投稿へのリンクを表示します。 |
| Previous Post(前の投稿) | 現在の投稿に先行する、前の投稿へのリンクを表示します。 |
| Post Comments(投稿コメント) | 現在の投稿に先行する、前の投稿へのリンクを表示します。 |
| Login/out(ログイン/ログアウト) | ログインとログアウトのリンクを表示します。 |
| Term Description(タームの説明) | アーカイブを表示する際、カテゴリー、タグ、カスタムタクソノミーの説明を表示します。 |
| Archive Title(アーカイブタイトル) | クエリーしたオブジェクトに基づきアーカイブタイトルを表示します |
【埋め込みカテゴリ】
| Meetup.com | 廃止 |
| Embed Pinterest pins, boards, and profiles. | |
| Wolfram Cloud | Embed Wolfram Cloud notebook content. |
行(Row)ブロック
グループブロックのバリエーションで「行(Row)ブロック」が追加されました。(11.5)
グループブロック内のインナーブロックが横方向へ展開するようになっています。
行(Row)ブロックは さっそく「Twenty Twenty-Two」のヘッダーやフッターで使われています。
【参考】Group block: Add a row variation #34535
https://github.com/WordPress/gutenberg/pull/34535
Navigationブロック
クラシックテーマでヘッダーに埋め込まれる「メニュー」の代わりのブロックになります。
追加・変更にあたってはNavigation用のブロックが出てますのでこれらを利用することになります。
【参考】The new Navigation block
https://make.wordpress.org/core/2022/01/07/the-new-navigation-block/
ウィジェットグループブロック
WordPress5.8でのウィジェットブロックではクラシックウィジェットの時のようにウィジェットのタイトルはつけれませんでした。
WordPress5.9からウィジェットグループブロックとしてブロックのグループにタイトルを追加できるようになりました。(11.5)
【参考】Core Editor Improvement: Introducing the Widget Group Block
https://make.wordpress.org/core/2021/09/22/core-editor-improvement-introducing-the-widget-group-block/
【参考】Add ‘Widget Group’ block to widgets screens #34484
https://github.com/WordPress/gutenberg/pull/34484
スポンサードリンク
theme.json
「theme.json」が WordPress5.9から version:2 になり 本格的に使えるようになりました。
現在利用しているテーマに「theme.json」ファイルを設置する事で、レイアウト構成、ブロックサポート、カラー パレット等の制御および構成が追加できるようになりました。
ブロックテーマだけではなくクラシックテーマでも使えますが add_theme_support( ‘align-wide’ ) が効かなくなりますので theme.json の layout で指定しないといけなくなる罠があります。
【参考】Updates for Settings, Styles, and theme.json
https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/
【参考】Global Settings & Styles (theme.json)
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
borderサポート
theme.jsonファイルで「border」を有効にするとサポートするブロック(グループブロックや検索ブロック等)での borderの 幅、スタイル、色、角丸 等を設定できるようになります。(11.1)
※theme.jsonに以下のような記述が必要です。
"settings": {
"border": {
"customColor": true,
"customRadius": true,
"customStyle": true,
"customWidth": true
}
}
【参考】Block Support: Update border support UI #31585
https://github.com/WordPress/gutenberg/pull/31585
【参考】Search Block: Add border color support #31783
https://github.com/WordPress/gutenberg/pull/31783
また、カスタムボーダーユニットのサポートを追加されています。
【参考】Border Support: Add support for custom border units #33315
https://github.com/WordPress/gutenberg/pull/33315
margin/paddingサポート
対応するブロックでmargin/paddingサポートが追加されました。
【paddingサポート】
グループブロック、行ブロック、投稿のアイキャッチ画像、ボタンブロック、および サイトタイトルブロック
【marginサポート】
タイトルブロック、投稿のアイキャッチ画像、ボタンブロック(上下のみ)、カラムブロック、ソーシャルアイコンブロック、および サイトタイトルブロック、見出しブロック
※theme.jsonに以下のような記述が必要です。
"spacing": {
"customMargin": true,
"customPadding": true,
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
},
【参考】[Button Block]: Add padding block support #31774
https://github.com/WordPress/gutenberg/pull/31774
【参考】Columns block: Enable blockGap and vertical margin support #34630
https://github.com/WordPress/gutenberg/pull/34630
ブロックの間隔(blockGap)サポート
ユーザーがブロック内のアイテム間の距離を選択できるようにする「ブロックの間隔(blockGap)」機能が追加されました。(11.5)
ボタンブロック、ソーシャルアイコンブロック、カラムブロック、および ナビゲーションブロック等で利用できます。
※theme.jsonに以下のような記述が必要です。
"settings": {
"spacing": {
"blockGap": true
}
}
【参考】Block Support: Add gap block support feature #33991
https://github.com/WordPress/gutenberg/pull/33991
【参考】Use blockGap between Columns blocks #34456
https://github.com/WordPress/gutenberg/pull/34456
【参考】Navigation: Use gap instead of margin. #32367
https://github.com/WordPress/gutenberg/pull/32367
appearanceTools
theme.jsonファイルで「appearanceTools」を有効にすると 上記の border・margin/padding・border・blockGap等 を設定しなくても 対応しているブロックでそれぞれ borderのcolor/radius/style/width・リンク色 ・blockGap・margin・padding・lineHeight 等一括で有効にする事ができます。
※theme.jsonに以下のような記述が必要です。
"settings": {
"appearanceTools": true
}
カスタムフォントサポート
リストブロック、ボタンブロツク、サイトタイトルブロツク 等でカスタムフォントのサポートが追加されました。(10.8)
※theme.jsonに以下の例のようにテーマが登録しているフォントを宣言する記述が必要です。
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
}
]
}
}
【参考】List Block: Add font family to the list block #27510
https://github.com/WordPress/gutenberg/pull/27510
ログイン画面
ログイン画面に言語選択フォームが付きました。
言語を選択して「Change」ボタンを押すとログイン画面がその言語に切り替わります。
※言語を変更しても、ログイン後の言語とは関係ないようです。(謎)
※Cookieに「wp_lang」として保持されます。日本語の場合はvalue「ja」になります。
以下のフィルターで非表示にする事もできます。
add_filter( 'display_login_language_dropdown', '__return_false' );
【参考】Introducing new language switcher on the login screen in WP 5.9
https://make.wordpress.org/core/2021/12/20/introducing-new-language-switcher-on-the-login-screen-in-wp-5-9/
スポンサードリンク
開発者向け
WordPress5.9 ではいろいろな機能やアクションフィルターが追加されています。
そのなかで ぉ! と思ったのを紹介します。
新しいフィルター
is_post_type_viewable,is_post_status_viewable,post_thumbnail_url,post_thumbnail_id等が追加されました。
【参考】Posts, Post types and Taxonomy changes in WordPress 5.9
https://make.wordpress.org/core/2021/12/13/posts-post-types-and-taxonomy-changes-in-wordpress-5-9/
register_taxonomy
register_taxonomyに新しいラベルが使えるようになまりした。
【参考】register taxonomy should accept a label to affect the description under each field on the Add Tag form
https://core.trac.wordpress.org/ticket/43060
ウィジェットブロック
ウィジェットブロックのウィジェットの内部の表示方式が変わりました。
各ウィジェットエリアには data属性でウィジェットエリア名がつくようになりました。
また5.8は普通の iframe の方法でを表示していましたが 5.9からはiframe内のHTMLを(REST APIで取ってきて) srcdoc で展開するようになりました。
これにより、ウィジェットエリアごとに 何かしたくなった場合、CSSやjsをあてれるようになりました。
【参考】Adds auxiliary class names for editor styles in the widgets editor #33388
https://github.com/WordPress/gutenberg/pull/33388
ブロックCSS
複数のブロックスタイルシートを使えるようになりました。
ブロックごとに複数のスタイルシートをenqueueできるようにできます。
【参考】Block API: Allow more than 1 block stylesheets #32510
https://github.com/WordPress/gutenberg/pull/32510
【参考】Using multiple stylesheets per block
https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/
wp_is_block_template_theme
ブロックテーマかどうかを判定する関数が追加されました。
テーマに block-templates/index.html か templates/index.html があるかどうかで true/false を返します。
【参考】theme.php
/**
* Returns whether the current theme is a block-based theme or not.
*
* @since 5.9.0
*
* @return boolean Whether the current theme is a block-based theme or not.
*/
function wp_is_block_template_theme() {
return is_readable( get_theme_file_path( '/block-templates/index.html' ) ) ||
is_readable( get_theme_file_path( '/templates/index.html' ) );
}
core/pattern
patternブロックがこっそり(?)設置されています。
「Twenty Twenty-Two」の テンプレートパーツ で使用されています。
header-small-dark.html
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-bird"} /--></div>
header-large-dark.html
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-heading-and-bird"} /--></div>
footer.html
<!-- wp:pattern {"slug":"twentytwentytwo/footer-default"} /-->
これは管理画面にそういうブロックはありません、どうやらテンプレート直書きでブロックパターンを直接指定して使うやつ みたいです。
wp_omit_loading_attr_threshold
遅延読み込みを制御できる「wp_img_tag_add_loading_attr」や「wp_iframe_tag_add_loading_attr」フィルターがありますが、「wp_omit_loading_attr_threshold」フィルターも追加されました。
サイトの構成にあわせて最初のいくつかの画像を遅延読み込みしないという設定ができるようです。
【参考】Enhanced lazy-loading performance in 5.9
https://make.wordpress.org/core/2021/12/29/enhanced-lazy-loading-performance-in-5-9/
スポンサードリンク
WP Multibyte Patch
毎回 言いますが WordPress5.0から 必須のプラグインで 日本語版パッケージに 付属してた「WP Multibyte Patchプラグイン」は含まれなくなっています。
だいたい いけるようにはなってますが 日本語で使う場合は やっばり必ず 最新版をインストール → 有効化 してくださいね。
【参考】WordPress 5.0 利用開始前に知っておくべきこと
https://ja.wordpress.org/2018/11/04/things-to-know-before-using-wordpress-5-0/
WP Multibyte Patch プラグイン
https://ja.wordpress.org/plugins/wp-multibyte-patch/
WP Multibyte Patch – EastCoder;
https://eastcoder.com/code/wp-multibyte-patch/
本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。英語圏で作られた WordPress を日本語環境で正しく動作させるために必要となる機能を網羅していますので、なんらかの対策を行っていない場合は導入をおすすめします。
バックアップとってね
メジャーアップデートでは必ずバックアップをとるようにしましょう。ファイルとデータベースのバックアップは必ずとるようにしてください。
【参考】
WordPress のバックアップ – WordPress Codex 日本語版
http://wpdocs.osdn.jp/WordPress_%E3%81%AE%E3%83%90%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97
BackWPup – WordPress Backup Plugin
https://wordpress.org/plugins/backwpup/
できれば 本番のバックアップから テスト環境 を作って動作テストをする事をお勧めします。
ダウングレード
新しいメジャーバージョンのWordPressがリリースされて すぐにバージョンアップしても、今使ってるテーマやプラグインが対応していなくて なんかおかしい場合がよくあります。
こんな時は、対応してくれるまで ひとまず変更前のバージョンのWordPressに戻す という方法もあります。
※今使ってるWordPressのバージョンくらいは覚えといてくださいね。
【参考】WP Downgrade | Specific Core Version
https://ja.wordpress.org/plugins/wp-downgrade/
