WordPress 5.9 をチェックしています

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 に載っています。

新しいデフォルトテーマ「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プラグインの過去のバージョンの記事を見る事で何が変更して追加されたかを見る事ができます。

リストビューの機能強化

リストビューのネスト部分を閉じたり展開したりができるようになって複雑な入れ子のブロックも見やすくなりました。(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	廃止
Pinterest	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/

スポンサードリンク

新しいデフォルトテーマ「Twenty Twenty-Two」

フルサイト編集(FSE)

Gutenberg ブロックエディタ

リストビューの機能強化

ブロックマネージャー

フルスクリーンパターンエクスプローラーモーダル

タイポグラフィツール

検索ブロック

グループブロック

リンクURLプレビュー

投稿のアイキャッチ画像ブロック

見出しブロック

カバーブロック

カテゴリブロック

ボタンブロック

プルクオートブロック

ギャラリーブロック

新しく追加されたブロック

行(Row)ブロック

Navigationブロック

ウィジェットグループブロック

theme.json

borderサポート

margin/paddingサポート

ブロックの間隔(blockGap)サポート

appearanceTools

カスタムフォントサポート

ログイン画面

開発者向け

新しいフィルター

register_taxonomy

ウィジェットブロック

ブロックCSS

wp_is_block_template_theme

core/pattern

wp_omit_loading_attr_threshold

WP Multibyte Patch

バックアップとってね

ダウングレード

関連記事

WordPress 6.5 をチェックしています

WordPress6.4 を チェックしています

WordPress 6.3 を チェックしています

WordPress 6.2 をチェックしています

WordPress 6.1 をチェックしています

WordPress6.4 をチェックしています

WordPress 6.3 をチェックしています