WordPress5.7の変更点をチェック！

了 2021/02/24に更新

このスクラップについて

2021/03/09にリリースされる予定のWordPress5.7について、β版・RC版・正式リリース版と順にチェックしながら、個人的に気になった変更点をここにまとめていこうかなと思います。

（基本は公式のドキュメントを参考にしながら、触っていて気づいた細かい変更点などを雑に列挙していきます。）

▼ 関連公式ドキュメント

▼ Gutenbergリリースノート

WP5.7では、Gutenberg 9.3 ~ 9.9 までの内容がマージされる予定（参考: Gutenberg Versions in WordPress）みたいです。

▼ β版・RC版をテストする方法

「WordPress Beta Tester」というプラグインを使います。

了 2021/02/16に更新

iframe タグにも loading="lazy" 属性が付く

5.6からは画像にloading="lazy"が付与されるようになっていましたが、5.7ではiframeにも対応するみたいです。

画像と同様、以下のコードで無効化できます。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

以下のようなコードでiframeだけ無効にすることも可能。

add_filter( 'wp_lazy_loading_enabled', function ( $bool, $tag_name ) {
	if ( 'iframe' === $tag_name ) {
		return false;
	}
	return $bool;
}, 10, 2 );

了 2021/02/24に更新

HTTP から HTTPS への移行が簡単になる

「ツール」＞「サイトヘルス」のページに「HTTPSステータスチェック」が追加されており、そこから簡単にhttps化（SSL化）できるようになるみたいです。

※ ローカル環境でテストしているからか、5.7 RC1 の段階では表示されず検証できておりません...。

了 2021/02/16に更新

管理画面のCSSが調節されたっぽい

可読性やアクセシビリティを考慮して色々調整が入ってるみたいです。

▼ とりあえずパッと気づいた点

管理メニューの色味とかホバーエフェクトが変わってる

了 2021/02/24に更新

新しいロボット APIの追加

詳細 : https://make.wordpress.org/core/2021/02/19/robots-api-and-max-image-preview-directive-in-wordpress-5-7/

5.7から、

<meta name="robots" content="max-image-preview:large" />

がデフォルトで出力されるようです。

これはwp_robots()という新しい関数が'wp_head'フックで実行されることで出力されており、以下のコードでオフにすることができます。

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

また、'wp_robots'フックを活用することで出力内容のカスタマイズも可能になっています。

非推奨になった関数

今回の変更により、以下の関数が非推奨になっています。

noindex()
wp_no_robots()
wp_sensitive_page_meta()

▼ 新しい関数での代替方法

// noindex() → wp_robots_noindex()
add_action( 'wp_head', 'noindex' );
// ↓
add_action( 'wp_robots', 'wp_robots_noindex' );


// wp_no_robots() → wp_robots_no_robots()
add_action( 'wp_head', 'wp_no_robots' );
// ↓
add_action( 'wp_robots', 'wp_robots_no_robots' );


// wp_sensitive_page_meta() → wp_strict_cross_origin_referrer() & wp_robots_sensitive_page()
add_action( 'wp_head', 'wp_sensitive_page_meta' );
// ↓
add_action( 'wp_head', 'wp_strict_cross_origin_referrer' );
add_action( 'wp_robots', 'wp_robots_sensitive_page' );

了 2021/02/16に更新

ブロックインサーターボタンが発見しやすくなった

ブロックとブロックの間に出てくる「＋」アイコンのボタンが、以前より出現しやすくなったというか、視覚的に見つけやすくなっています。

実際にクリックできる範囲はこれまでと同じっぽいですが...。

以前は中央の「+」ボタン付近でしか出現しない & 出現するまで謎のラグがある、みたいな感じだったのでこれはすごく嬉しいアップデートです。

「カラム」などの横並び系ブロックも楽々追加できるように！

すげーいい！と初見では思ったんですが、しばらくいじってみると、今まで親ブロック選択するためにこのブロックの間をクリックすることが多かったので、慣れるまで逆に使いづらくなりそうです。笑

了 2021/02/16

カバーブロック周りの変更点

画像ブロックからの変換がより簡単に。

画像ブロックに新しいツールボタンが追加されていました。

すぐにカバーブロックとして編集できるようになっています。

全高表示機能が追加

なんと呼べばいいか分かりませんが、ブラウザの高さいっぱいに広がるように表示できるツールボタンが追加されています。

これにより、ブロックの「全幅」表示機能と合わせることで、フルスクリーン表示が簡単にできるようになりました。

了 2021/02/16

ボタンブロックで縦並び表示が可能に。

ボタンブロックに「バリエーション」が追加され、デフォルトの横並びとは別に縦並び表示も可能になりました。

了 2021/02/17に更新

サイドバーで「ブロックバリエーション」の切り替えが可能に。

さきほどのボタンブロックのGif動画にも映っていますが、ブロック説明欄の下部に「バリエーションの変換」というドロップダウンメニューが追加されています。

ここから、ブロックバリエーションの切り替えが可能になっています。

開発者としては、今後は「ブロックスタイル」にするか「バリエーション」にするかの悩みポイントが増えましたね...笑

ブロックにバリエーションを追加する方法

ブロックスタイルのstylesのように、registerBlockType()にvariationsを配列形式で指定してあげればいいだけっぽいですね。

バリエーションの実装周りも以前と比べてだいぶ変わった気がします。

参考：コアのbuttonsブロックのソースコード

classNameじゃなくて任意のattributesキーで状態を管理できるのが個人的にすごくいいなと思います。

了 2021/02/17に更新

ブロックの追加がドラッグでできるようになった！

これは見てもらうのが早いです。

通常のブロックだけでなく、ブロックパターンもドラッグで好きな位置に挿入できるようになっています。

この方法だと、左側のインサーターパネルを開きっぱなしでブロック追加できる！

上記の動画を見て気づいた人もいるでしょう。
なんと、左側のインサーターパネルがブロック追加後も閉じていません...！

（また正式リリースでボツになったりする可能性もありますが...）

※ これまで通り、普通にクリックして追加するとパネルは閉じられます。

了 2021/02/17に更新

ソーシャルリンクブロックの変更点

ツールバーに「サイズ」設定が追加

サイドバーに「色設定」が追加

（これ、各種ロゴの利用規約？的なやつを考えるとアウトな気がするんだけどどうなんだろう...）

li.wp-social-link直下のaタグにはこれまでクラスが何もついていなかったですが、
WP5.7からは.wp-block-social-link-anchorというクラスがついています。

See: https://github.com/WordPress/gutenberg/pull/28494/files

（ボタンブロックなどと揃えてwp-block-social-link__anchorとかでよかったんじゃ...と個人的には思います。CSSの命名規則が謎...。）

了 2021/02/17に更新

再利用ブロックの保存が投稿の保存と同時に行われるようになる

投稿の「更新」を押すと、次のように再利用ブロックの変更内容も同時に保存するかどうかが選べるようになっています。

※ 「投稿内に再利用ブロックを使用していて、かつ、その再利用ブロックが編集されている時」だけ、上記のパネルが更新前に表示されます。

了 2021/02/16

「フォントサイズ」を設定できるブロックが増えた

これまで段落ブロックや見出しブロックで利用可能だった「フォントサイズ」の設定項目が、

リストブロック
コードブロック

の２つでも利用可能になっています。

了 2021/02/24に更新

カスタムスペース機能

テーマ側でadd_theme_support( 'custom-spacing' );を追加してあげることで、カスタムスペース機能がオンになるように。

いくつかのブロックのサイドバーに「間隔」パネルが追加され、paddingをブロックごとに細かくカスタマイズすることが可能になります。

現状この設定が使えるのは以下の２つっぽい？（全ブロックは確認できていないです）

グループブロック
カバーブロック

了 2021/02/17

p:emptyに対して::before が付くように

コア側が読み込む、ブロックエディター用のCSSに次のようなコードが追加されます。

p:empty::before{
    content: "";
}

フロント側全てのp:emptyに影響するので、困る人はめちゃくちゃ困るかも。

これは空の段落ブロックをスペーサーとして利用できるようにするためのアップデートっぽい(#27995)ですが、
逆に言うとこれまで「空のpタグが挿入されてしまっていることに気づいてない部分」にも全て余白が生まれてしまいます。

ブロックエディターでは結構気づかないうちに段落ブロックが入り込んでしまうので、WordPress5.7にした途端に記事中に変な余白が出現してしまう可能性があります。

了 2021/02/17に更新

ブロックエディター周りの細かい変更点など

個別に5.7単体でのテストなどはしてないですが、5.7にて取り込まれる予定のGutenbergバージョン（9.9.3）までに行われているアップデートの中から個人的に気になったものをまとめておきます。

ToggleControl と FormToggle コンポーネントで diabled 属性がサポート

See: #28531

スペーサーブロックがホバー時にも半透明で視覚化

See: #28129

※ 5.7 beta3 ではまだ反映されてなかった

disabledなコンポーネントを囲むTooltipが反応するようになった (?)

ヘルプテキストなどを表示させる時に<Tooltip>は使われるのですが、disabledなボタンなどをホバーしてもイベントが全て無効化されてしまってヘルプテキストの表示すらできなかったのが、修正された...みたいな感じのやつ（たぶん）

See: 27529

個人的に別の用途で<Tooltip>を使ってるのであまり関係ないですが、なんか挙動が変になったかも？という時はチェックしてみてください。

<Grid>コンポーネントとやらが使えるように

See: #28228

アンカー設定の説明文が新しくなった

アンカー設定は今ではいろんなブロックで利用できますが、最初は「見出しブロック」だけの設定だったため、ここの説明文がずっと当初の「見出しブロックであることを前提とした説明」になってたんですよね。

それがやっと改善されたっぽいです。

了 2021/02/17に更新

エディターの基本フォントがシステムフォントに変更

See: https://github.com/WordPress/gutenberg/pull/26822

例えば日本語環境だと

▼ 5.6まで

.editor-styles-wrapper {
    font-family: 'Noto Serif JP';
}

▼ 5.7から

.editor-styles-wrapper {
    font-family: var(--global--font-secondary);
}

に変わっていて、この変数は次のように定義されています

--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);

基本的にはそのテーマで設定されているフォントがエディター上にも反映されているケースが多いとは思いますが、デフォルト状態の明朝体のまま放置されているようなテーマでは、5.7から急にフォントが変わってしまうということになります。（エディター上だけの話）

了 2021/02/17

i18n関数にフィルターフックが通るようになった

今のところ使うことはなさそうなので詳細まではみてないですが、翻訳関数からのreturn値をフィルターできるようになったっぽいです。

（たぶんPHPでできていたようなことのJS版が実装された）

See: https://github.com/WordPress/gutenberg/pull/27966

了 2021/02/25に更新

Block Variations API の変更点

Block Variations API 自体は WordPress 5.4 からあったのですが、今回のアップデートでさらに使いやすく改良されています。

5.4時の記事 : https://make.wordpress.org/core/2020/02/27/introduce-block-variations-api/
5.7での新機能に関する記事 : https://make.wordpress.org/core/2021/02/22/new-block-variation-apis-in-5-7/

新機能として解説記事が上がっているのは、現段階で以下の2点について。

isActiveプロパティが追加された
useBlockDisplayInformationフックが追加された

この2点については個人的にはまだよくわかっておらず、具体的な活用法も見出せていません。

しかし、解説記事に書かれていない変更点もいくつかあるみたいで、

categoryを上書き指定できるようになった
scope: ['transform']が使えるようになった。

などの変更もあります。
この2点の方が個人的にはめちゃくちゃ神アップデートだと感じています。

了 2021/02/24に更新

特定のブロックに対する`'render_block'`フックが追加された

詳細: https://make.wordpress.org/core/2021/02/18/wordpress-5-7-a-new-dynamic-hook-to-filter-the-content-of-a-single-block/

'render_block_{block_name}'という新しいフックが追加されたみたいです。
（例えば段落ブロックの出力をフックで変更したい時は、'render_block_core/paragraph'となります。）

これは便利ですね。

例 : 段落ブロックの出力をdivで囲む (詳細記事に書いてるやつ)

add_filter( 'render_block_core/paragraph', function ( $block_content, $block ) {
	$content = '<div class="my-custom-wrapper">' . $block_content . '</div>';
	return $content;
}, 10, 2 );

こうすることで、単純なpじゃなくdiv.my-custom-wrapper > pの構造になります。

例2 : コアのリストブロックにis-core-listというクラスを付与する

add_filter( 'render_block_core/list', function ( $block_content, $block ) {
	$block_content = preg_replace_callback(
		'/^<(ul|ol)([^>]*)>/im',  // 最初の ul, ol を抜き出す
		function( $matches ) {
			$tag   = $matches[1];
			$props = $matches[2];

			// クラスの追加 (すでに他のクラスを持っているかで処理を分岐)
			if ( strpos( $props, 'class=' ) === false ) {
				$props .= ' class="is-core-list" ';
			} elseif ( strpos( $props, 'is-core-list' ) === false ) {
				$props = str_replace( 'class="', 'class="is-core-list ', $props );
			}

			return '<' . $tag . $props . '>';
		},
		$block_content
	);
	return $block_content;
}, 10, 2 );

了 2021/02/24

REST APIの変更点

今回もREST API周りは色々変わっているみたいです。

個人的にはあまり使わないので詳細は割愛しますが、気になる方は以下の記事をご覧ください。

詳細 : https://make.wordpress.org/core/2021/02/23/rest-api-changes-in-wordpress-5-7/

了 2021/02/24に更新

Inner Blocks API が変わった！

詳細 : https://make.wordpress.org/core/2021/02/23/inner-blocks-api-changes/

これまでは「インナーブロックを持つブロック」を設置した時、自動で子ブロックにフォーカスがあたってすぐ編集できるようになっていたけど、

5.7からはtemplateInsertUpdatesSelection をセットしないと同じ挙動にはならなくなったっぽい。

その代わり、5.7からのデフォルトでは「親ブロックにフォーカスされた状態になる」ようになっています。

▼ 5.6までのフォーカスの挙動

▼ 5.7からのフォーカスの挙動（デフォルト）

また、replaceInnerBlocksアクションがなんか変わったみたいなことも書かれてますが、ちょっとこの辺はなんのことかまだよくわかっていません。

了 2021/02/24に更新

ユーザー管理周りの変更点

管理者がユーザーへ「パスワードリセット」のリンクを送信できるようになった

ユーザー管理ページに「パスワードのリセット」という項目が追加されており、管理者であればそこからパスワードをリセットするためのリンクをメールで送信できるようになっています。

これに伴い、retrieve_password()関数が wp-login.php から wp-includes/user.php に移動されるという地味な変更もあるみたいです。

詳細 : https://make.wordpress.org/core/2021/02/22/send-reset-password-links-in-wordpress-5-7/

パスワードリセットページのUI改善

これまでは、リセット画面にアクセスするとすでに新しいパスワードが自動で提案されており、「パスワードのリセット」と書かれたボタンがあるだけでした。

そのボタン部分が少し変わり、「パスワードの生成」ボタンと「パスワードの保存」ボタンが並ぶようになっています。

「今表示されているパスワードで新しく "保存" するよ〜」というのが分かりやすくなりましたね。

詳細 : https://make.wordpress.org/core/2021/02/16/login-registration-screens-changes-in-wordpress-5-7/

`'login_site_html_link'`フックの追加

ログインページのフッターに表示される「サイトへ移動」リンクを調整するためのフックです。

詳細 : https://make.wordpress.org/core/2021/02/16/login-registration-screens-changes-in-wordpress-5-7/

例として紹介されているコードを引用しておきます。

function wporg_login_site_html_link( $link ) {
        return '<a href="' . esc_url( home_url( '/' ) ) . '">' . __( 'Back to the website', 'text-domain' ) . '</a>';
}
add_filter( 'login_site_html_link', 'wporg_login_site_html_link', 10, 1 );

了 2021/02/24

jQueryの更新

WordPress 5.5から段階的に進められていたjQueryのバージョン更新作業の最終段階として、jQuery Migrateが削除されました。

WordPressバージョン	jQueryバージョン
WordPress.5.4	jQuery 1.12 + jQuery Migrate 1.4 + jQuery UI 1.11
WordPress.5.7	jQuery 3.5 + jQuery UI 1.12

このスクラップについて

▼ 関連公式ドキュメント

▼ Gutenbergリリースノート

▼ β版・RC版をテストする方法

iframe タグにも loading="lazy" 属性が付く

HTTP から HTTPS への移行が簡単になる

管理画面のCSSが調節されたっぽい

新しいロボット APIの追加

非推奨になった関数

ブロックインサーターボタンが発見しやすくなった

「カラム」などの横並び系ブロックも楽々追加できるように！

カバーブロック周りの変更点

画像ブロックからの変換がより簡単に。

全高表示機能が追加

ボタンブロックで縦並び表示が可能に。

サイドバーで「ブロックバリエーション」の切り替えが可能に。

ブロックにバリエーションを追加する方法

ブロックの追加がドラッグでできるようになった！

この方法だと、左側のインサーターパネルを開きっぱなしでブロック追加できる！

ソーシャルリンクブロックの変更点

ツールバーに「サイズ」設定が追加

サイドバーに「色設定」が追加

aタグにwp-block-social-link-anchorクラスが付くように。

再利用ブロックの保存が投稿の保存と同時に行われるようになる

「フォントサイズ」を設定できるブロックが増えた

カスタムスペース機能

p:emptyに対して::before が付くように

ブロックエディター周りの細かい変更点など

ToggleControl と FormToggle コンポーネントで diabled 属性がサポート

スペーサーブロックがホバー時にも半透明で視覚化

disabledなコンポーネントを囲むTooltipが反応するようになった (?)

<Grid>コンポーネントとやらが使えるように

アンカー設定の説明文が新しくなった

エディターの基本フォントがシステムフォントに変更

i18n関数にフィルターフックが通るようになった

Block Variations API の変更点

特定のブロックに対する'render_block'フックが追加された

REST APIの変更点

Inner Blocks API が変わった！

ユーザー管理周りの変更点

管理者がユーザーへ「パスワードリセット」のリンクを送信できるようになった

パスワードリセットページのUI改善

'login_site_html_link'フックの追加

jQueryの更新

特定のブロックに対する`'render_block'`フックが追加された

`'login_site_html_link'`フックの追加