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

WordPress5.8 Beta が公開されました。 WordPress5.8 は 2021年7月20日にリリースされる予定なのでいろいろチェックをしています。
その中の WordPress5.8 で気がついたところを取り上げていきます。
これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。

リリースまでのスケジュールは WordPress 5.8 Development Cycle に載っています。

WordPress 5.8 Beta1　https://wordpress.org/news/2021/06/wordpress-5-8-beta-1/
WordPress 5.8 Beta2　https://wordpress.org/news/2021/06/wordpress-5-8-beta-2/
WordPress 5.8 Beta3　https://wordpress.org/news/2021/06/wordpress-5-8-beta-3/
WordPress 5.8 Beta4　https://wordpress.org/news/2021/06/wordpress-5-8-beta-4/
WordPress 5.8 RC1 　https://wordpress.org/news/2021/06/wordpress-5-8-release-candidate/
WordPress 5.8 RC2 　https://wordpress.org/news/2021/07/wordpress-5-8-release-candidate-2/
WordPress 5.8 RC 3　https://wordpress.org/news/2021/07/wordpress-5-8-release-candidate-3/

7/21 リリースされました
WordPress 5.8 　https://wordpress.org/news/2021/07/tatum/

Gutenberg ブロックエディタ

WordPress5.7では「Gutenbergプラグインver9.9」でしたが WordPress5.8では「Gutenbergプラグイン(ver10.7)」が組み込まれました。
Gutenbergの過去のバージョンの記事を見る事で何が変更して追加されたかを見る事ができます。

グーテンベルクの新機能 ver10.7
グーテンベルクの新機能 ver10.6
グーテンベルクの新機能 ver10.5
グーテンベルクの新機能 ver10.4
グーテンベルクの新機能 ver10.3
グーテンベルクの新機能 ver10.2
グーテンベルクの新機能 ver10.1
グーテンベルクの新機能 ver10.0

ブロックツールバー

ブロックツールバーでのツールボックス内のツールが整理され改良されました。

WordPress5.7

WordPress5.8

【参考】Core Editor Improvement: Refining the Block Toolbar
https://make.wordpress.org/core/2021/04/23/core-editor-improvement-refining-the-block-toolbar/

【参考】Core Editor Improvement: Improve your workflow with List View
https://make.wordpress.org/core/2021/06/09/core-editor-improvement-improve-your-workflow-with-list-view/

また、今までは現在選択しているブロックの親ブロックを知るためには選択しているブロックアイコンをオンマウスしなくてはいけませんでしたが、ブロックツールバーに親ブロックのアイコンが常に表示されるようになりました。

WordPress5.7(ブロックアイコンをオンマウスした時の表示)

WordPress5.8

【参考】Make parent block selector visible and offset the toolbar. #28598
https://github.com/WordPress/gutenberg/pull/28598

リストビュー

サイトエディタリストビューのデザインが変更され、オンマウスで該当のブロックをフォーカスされるようになりより扱いやすくなりました。

【参考】List View: Update list view icon size and spacing #30455
https://github.com/WordPress/gutenberg/pull/30455

【参考】List View: Update the hover, focus, select colors #30303
https://github.com/WordPress/gutenberg/pull/30303

グループブロック

グループブロックでは「HTML element」が選択できるようになりました。
今までは「div」だけでしたが、header,main,section,article,aside,footer が選べます。

【参考】Add element-selector to group block #28576
https://github.com/WordPress/gutenberg/pull/28576

段落ブロック

段落ブロックでは「グループ」「見出し」「リスト」「引用」「カラム」「整形済みテキスト」「プルクォート」「詩」に変換できていましたが「ボタン」ブロックも変換できるようになりました。

【参考】Transform paragraph block to buttons block #28508
https://github.com/WordPress/gutenberg/pull/28508

再利用ブロック

再利用ブロックを登録した場合、無条件で「無題の再利用ブロック」という名前がつけられていましたが、登録時に名前を設定できるようになりました。

【参考】Use a modal for the reusable blocks creation flow #29040
https://github.com/WordPress/gutenberg/pull/29040

画像ブロック・カバーブロック

画像部分に「Duo Tone」フィルターをかけれるようになりました。

【参考】Add duotone block supports #26752
https://github.com/WordPress/gutenberg/pull/26752

カバーブロック

画像をローカルからドラッグ-アンド-ドロップで画像の置換えができるようになりました。

【参考】Cover: Allow drag n drop media replacement #29813
https://github.com/WordPress/gutenberg/pull/29813

ソーシャルアイコンブロック・ボタンブロック

ソーシャルアイコンブロック・ボタンブロックでは、ソーシャルリンク・ボタンブロック間および周辺のスペースの配分方法を設定できるようになりました。

【参考】Add Items Justification to Social Links #28980
https://github.com/WordPress/gutenberg/pull/28980

【参考】Buttons: Add space-between justification controls #29160
https://github.com/WordPress/gutenberg/pull/29160

カラムブロック

カラムブロックのカラム(カラムブロック内の1つのカラム)に色とパディング設定ができるようになりました。

【参考】Column Block: Add color and padding support to individual column block #31778
https://github.com/WordPress/gutenberg/pull/31778

ファイルブロック

ファイルブロックではPDF埋め込みのサポートが追加されました。

【参考】File Block: Add support for embedding PDFs #30857
https://github.com/WordPress/gutenberg/pull/30857

テーブルブロック

テーブルブロックにテキスト色と背景色を設定できるようになりました。

テキスト色を変えるとボーダーも色が変わるのでｳﾑﾑですね。

【参考】Table: Add colors block support #30791
https://github.com/WordPress/gutenberg/pull/30791

メディアとテキストブロック

メディアとテキストブロックにメディア幅コントロールが追加されました。

※単位は%です。

【参考】Media & Text: Add media width control #31002
https://github.com/WordPress/gutenberg/pull/31002

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

フルサイト編集(FSE)で利用するであろう用のプロックが追加されました。

【デザインカテゴリ】

「Site Logo」サイトロゴを設置します。
「Site Tagline」ウェブサイトの内容を一言で説明します。
「Site Title」サイトのタイトル。
「Archive Title」
「Post Categories」投稿のカテゴリを表示します。
「Post Tags」投稿のタグを表示します。

【ウィジェットカテゴリ】

「Page List」全ページのリストを表示します。

【テーマカテゴリ】

「Query Loop」クエリの結果としての投稿のリストを表示します。
「Post Title」投稿、ページ、またはその他のコンテンツタイプのタイトルを表示します。
「Post Content」投稿やページの内容を表示します。
「Post Date」投稿の日付を追加。
「Post Excerpt」投稿の抜粋を表示します。
「Post Featured Image」投稿のアイキャッチ画像を表示します。
「Login/out」ログイン/ログアウトのリンクを表示します。
「Posts List」自分の最新の投稿の一覧を表示します。(スティッキーポストを除く)

「Site Logo」「Site Title」「Site Tagline」を投稿ページ等に設置して公開保存するとサイトの「サイトのロゴ」「サイトのタイトル」「キャッチフレーズ」も変わってしまいます。
とうしても使いたい場合は公開時に「保存する変更を選択」が出ますので注意してください。

「Site Title」や「Site Tagline」等サイト全体に関わるブロックは「編集者」「投稿者」「寄稿者」では内容を変更しても反映しなくなってます。
このあたりは、権限(manage_options)が関係しているようなのですが公式アナウンスを待ちたいところです。

　

スポンサードリンク

IE11 サポートの段階的廃止

IE11のサポートが段階的に廃止されます。

どちらにしても以前から管理画面では以下のように警告が出ていましたし、ブロックエディタでは使えなかったのですが、明示された事は大きいですね。

【IE 11 Support Phase Out Plan】
https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/

WebP対応

画像フォーマット「WebP」では今までは「このファイルタイプはセキュリティ上の理由から、許可されていません。」と出て、メディアアップロードできませんでしたが
WordPress5.8から「WebP」に対応するようになりました。

【参考】WordPress 5.8 adds WebP support
https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/

【参考】Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/webp

フルサイト編集(FSE)

WordPress5.7 の時に再延期になって今回 WordPress5.8 でフルサイト編集(FSE)機能が実装される予定でしたが、どうやら一部だけ(準備段階かな?)のようです。
まだ、FSEテーマは使えませんが、フルサイト編集の為だと思われる機能が追加・変更されています。

ウィジェットエディタ

ウィジェットがブロックで設置するタイプに変更されました。これによりウィジェットだけではなく投稿用等のブロックも設置できるようになりました。
※「Legacy Widget block」が追加されて従来のウィジェット(コア以外)をブロックで使えるようになっています。

ウィジェットのプレビューは iframe で公開画面のウィジェット部分だけ表示させてます。
テーマやプラグインによってはウィジェットのCSSを修正しないといけないケースがあります。

【サンプルコード】ウィジェットのマージンを0にする

/**
 * wp58 ウィジェットブロック Fix
 * ver 5.8.0
 */
function nendebcom_wp58_widget_preview_fix() {
	global $pagenow;
	if( is_admin() && $pagenow == 'widgets.php' ){
		echo '<style type="text/css">';
		echo 'body.logged-in.wp-embed-responsive .widget{margin: 0 !important;}';
		echo '</style>';
	}
}
add_action( 'wp_head', 'nendebcom_wp58_widget_preview_fix' );

※betaで検証してるので変わるかもしれません
※また不要なコンテンツが表示されたり(消せてない) するケースもありますので今後の改善を待ちたいところです。

あと、テーマ側で投稿用等のブロックがウィジェットエリアに対応してなかったり、設置するウィジェットが多いと表示が遅くなるのと途中でこけたりします。
また、「検索」や「タグクラウド」等は新しくブロック化されてますのでウィジェット版のとはHTML出力がちょっと違います。
さらに、プラグインやテーマのブロック用CSSの書き出し方によってはウィジェットブロックが非表示になるケースもあるようです。
【参考】Block widgets editor is hidden if a block enqueues ‘wp-edit-post’ stylesheet
https://core.trac.wordpress.org/ticket/53569

Classic Widgets

そういう場合は従来のウィジェットに戻すプラグインがあります。

【Classic Widgets】
https://wordpress.org/plugins/classic-widgets/
「Classic Widgets」をインストールして有効化するだけで従来のウィジェットに戻ります。

【参考】Restoring the classic Widgets Editor
https://developer.wordpress.org/block-editor/how-to-guides/widgets/opting-out/

「Classic Widgets」プラグインを使うとウィジェット画面は従来のウィジェットに戻ります。

「Block」というウィジェットが増えててここでブロックコードを入れる事ができます。

カスタマイザーウィジェットエディタ

ウィジェットがブロック対応になったのを受けてカスタマイザーのウィジェット部分もウィジェットエディタになります。

こちらも「Classic Widgets」をインストールして有効化するだけで従来のウィジェットに戻ります。

フルサイト編集(FSE)てどんなの? て興味がある方は FSE専用の「TT1 Blocks テーマ」「Q テーマ」等がありますので試してみてはいかがでしょうか。
Gutenbergプラグインをインストールしたら使えるようになります。

【参考】TT1 Blocks | WordPress Themes
https://wordpress.org/themes/tt1-blocks/
※TT1 Blocks はデフォルトテーマTwenty Twenty-One の FSE版になります。

【参考】Q: First FSE WordPress Theme Now Live | WordPress Tavern
https://wptavern.com/q-first-fse-wordpress-theme-now-live

【参考】FSE テストのやり方
https://ja.wordpress.org/team/handbook/test/full-site-editing-outreach-experiment/how-to-test-fse/

テンプレート編集モード(テンプレートエディタ)

投稿や固定ページでテンプレートが画面上(ブロックレベル)で作成できるようになりました。
※(追記)デフォルトはオフになっています。
テンプレートの所で「New」をクリックしてテンプレート名をつけて編集していくだけです。

編集モード

※作ったテンプレートは投稿タイプ「wp_template」で postテーブルに入りますのでテーマ自体への変更はいたしません。
※ヘッダーもフッター部分(たぶん)が編集対象になるので素人さんが触るとえらいことになるかもです。
※こちらもブロック同様に「編集者」「投稿者」「寄稿者」ではテンプレートは作れません。

※(追記)テンプレート編集モードを使いたい場合はテーマ側で対応する必要があります。

/**
 * Theme Support
 * By default, the template editor is enabled for all themes, but themes can opt-out of this feature using
 * WordPress5.8
 */
function nendebcom_theme_setup() {
	add_theme_support( 'block-templates' );
}
add_action( 'after_setup_theme', 'nendebcom_theme_setup' );

【参考】Introducing the template editor in WordPress 5.8
https://make.wordpress.org/core/2021/06/16/introducing-the-template-editor-in-wordpress-5-8/

　

スポンサードリンク

ブロックパターンディレクトリ

「ブロックパターンディレクトリ」が WordPress5.8リリース時に登場する予定だそうです。
ユーザーはブロックパターンディレクトリでお好みのブロックパターンを探してそのブロックコードをコピーして自分のサイトへ貼り付けて利用できるようになるもようです。

【参考】Block Pattern Directory Update
https://make.wordpress.org/meta/2021/04/28/block-pattern-directory-update/

【参考】Open Invitation To Contribute to the WordPress Block Pattern Directory
https://wptavern.com/open-invitation-to-contribute-to-the-wordpress-block-pattern-directory

【参考】Gutenberg 10.7 Integrates With the Pattern Directory, Introduces New Block Design Controls
https://wptavern.com/gutenberg-10-7-integrates-with-the-pattern-directory-introduces-new-block-design-controls

開発者向け

WordPress5.8 ではいろいろな機能やアクションフィルターが追加されています。
そのなかでぉ! と思ったのを紹介します。

Legacy Widget block

ウィジェットエディタでは、Core以外(プラグインよテーマ等に入ってる)のウィジェット(従来のウィジェット)をブロックエディタで使えるようにする「Legacy Widget block」が追加されています。
これにより従来のウィジェットをそのままブロックとして利用できるようになっています。

開発者は従来のウィジェットを新しくブロックで作り直さなくてもブロックへ移行する事もできるようです。
【参考】About the Legacy Widget block
https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/

block_categories

block_categoriesフィルターが非推奨になり、 block_categories_allフィルターになり、第2引数も変更されました。
【参考】block-editor.php

		/**
		 * Filters the default array of categories for block types.
		 *
		 * @since 5.0.0
		 * @deprecated 5.8.0 The hook transitioned to support also screens that don't contain the $post instance.
		 *
		 * @param array[] $block_categories Array of categories for block types.
		 * @param WP_Post $post             Post being loaded.
		 */
		$block_categories = apply_filters_deprecated( 'block_categories', array( $block_categories, $post ), '5.8.0', 'block_categories_all' );

オリジナルでブロックカテゴリを作ってる場合は WordPress5.7 と 5.8 で切り替えないといけませんね。
WordPressのバージョン見て切り替えてもいいのですがこちらの方がいいかもしれません。
【サンプルコード】

	// ver5.8.0 block_categories_all
	if ( function_exists( 'get_default_block_categories' ) && function_exists( 'get_block_editor_settings' ) ) {
		add_filter( 'block_categories_all', 'my_block_categories' );
	}else{
		add_filter( 'block_categories', 'my_block_categories' );
	}

※beta用なので変わるかもしれません

allowed_block_types

allowed_block_typesフィルターが非推奨になり、 allowed_block_types_allフィルターになりました。

【参考】block-editor.php

		/**
		 * Filters the allowed block types for the editor, defaulting to true (all
		 * block types supported).
		 *
		 * @since 5.0.0
		 * @deprecated 5.8.0 The hook transitioned to support also screens that don't contain $post instance.
		 *
		 * @param bool|array $allowed_block_types Array of block type slugs, or
		 *                                        boolean to enable/disable all.
		 * @param WP_Post    $post                The post resource data.
		 */
		$allowed_block_types = apply_filters_deprecated( 'allowed_block_types', array( $allowed_block_types, $post ), '5.8.0', 'allowed_block_types_all' );

block_editor_settings

block_editor_settingsフィルターが非推奨になり、 block_editor_settings_allフィルターになりました。

【参考】block-editor.php

		/**
		 * Filters the settings to pass to the block editor.
		 *
		 * @since 5.0.0
		 * @deprecated 5.8.0 The hook transitioned to support also screens that don't contain $post instance.
		 *
		 * @param array   $editor_settings Default editor settings.
		 * @param WP_Post $post            Post being edited.
		 */
		$editor_settings = apply_filters_deprecated( 'block_editor_settings', array( $editor_settings, $post ), '5.8.0', 'block_editor_settings_all' );

【参考】Block Editor API Changes to Support Multiple Admin Screens in WP 5.8
https://make.wordpress.org/core/2021/06/16/block-editor-api-changes-to-support-multiple-admin-screens-in-wp-5-8/

safecss_filter_attr

インラインスタイルをサニタイズする safecss_filter_attr関数では CSSの calc() と var() が許可されました。

【参考】safecss_filter_attr remove styles with calc()
https://core.trac.wordpress.org/ticket/46197
【参考】Block style attribute issue, when using Custom properties/CSS variables
https://core.trac.wordpress.org/ticket/46498

Update URI

自作プラグインが WordPress公式ディレクトリに登録されているプラグイン名とたまたま同じになっていて、自動更新で書き換わってしまうケースがあるようです。
WordPress5.8 からはプラグインのヘッダーフィールドに「Update URI」を追記することで勝手に書き換わらないようになります。
【サンプル】

/*
 * Plugin Name: my-plugin
 * Description: my plugin for WordPress
 * Version:     1.0.0
 * Author:      nendeb
 * Update URI:  https://hogehoge/my-plugin
*/

「Update URI」は「https://wordpress.org/plugins/{$slug}/ 」又は「w.org/plugin/{$slug}」以外でしたら何でもいいぽいです。

【参考】No More Accidental Custom Plugin Overrides, WordPress 5.8 To Allow Developers To Set Plugin Hostname
https://wptavern.com/no-more-accidental-custom-plugin-overrides-wordpress-5-8-to-allow-developers-to-set-plugin-hostname

【参考】Header Requirements
https://developer.wordpress.org/plugins/plugin-basics/header-requirements/

theme.json

テーマ側では、theme.json ファイルを使用して、レイアウト構成、ブロックサポート、カラーパレットなどを含むスタイルを制御および構成できるようになりました。

【参考】Global Settings & Styles (theme.json)
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/

【参考】Global Settings & Styles (theme.json)
https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/themes/theme-json.md

PHPMailer

外部ライブラリの PHPMailer が v6.5.0 へバージョンアップしました。
いちおう「問い合わせ」等のメールテストをしてくださいね。

【参考】Update PHPMailer to 6.5.0 security release
https://core.trac.wordpress.org/ticket/53430

jQuery

jQueryのバージョンが v3.5.1からv3.6.0へバージョンアップされました。

【参考】Update jQuery to version 3.6.0
https://core.trac.wordpress.org/ticket/52707

　

スポンサードリンク

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/

スポンサードリンク

Gutenberg ブロックエディタ

ブロック ツールバー

リスト ビュー

グループブロック

段落ブロック

再利用ブロック

画像ブロック・カバーブロック

カバーブロック

ソーシャルアイコンブロック・ボタンブロック

カラムブロック

ファイルブロック

テーブルブロック

メディアとテキストブロック

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

IE11 サポートの段階的廃止

WebP対応

フルサイト編集(FSE)

ウィジェットエディタ

Classic Widgets

カスタマイザーウィジェットエディタ

テンプレート編集モード(テンプレートエディタ)

ブロックパターンディレクトリ

開発者向け

Legacy Widget block

block_categories

allowed_block_types

block_editor_settings

safecss_filter_attr

Update URI

theme.json

PHPMailer

jQuery

WP Multibyte Patch

バックアップとってね

ダウングレード

関連記事

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

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

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

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

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

ブロックツールバー

リストビュー

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

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