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/