Zenn
Open24

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

WordPress
Gutenberg
了了

このスクラップについて

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

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

▼ 関連公式ドキュメント

▼ Gutenbergリリースノート

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

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

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

了了

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 );
了了

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

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

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

了了

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

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

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

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

了了

新しいロボット 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' );
了了

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

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

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

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

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

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

了了

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

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

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

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

全高表示機能が追加

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

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

了了

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

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

了了

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

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

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

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

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

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

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

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

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

了了

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

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

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

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

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

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

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

了了

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

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

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

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

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の命名規則が謎...。）

了了

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

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

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

了了

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

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

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

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

了了

カスタムスペース機能

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

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

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

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

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

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

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

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

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

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

了了

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

個別に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

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

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

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

了了

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

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から急にフォントが変わってしまうということになります。（エディター上だけの話）

了了

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

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

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

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

了了

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点の方が個人的にはめちゃくちゃ神アップデートだと感じています。

了了

特定のブロックに対する'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 );
了了

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アクションがなんか変わったみたいなことも書かれてますが、ちょっとこの辺はなんのことかまだよくわかっていません。

了了

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

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

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

これに伴い、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 );
了了

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