WordPress 5.3からWordPress 5.4にアップデートした時の個人的な対応メモです。
WordPress 5.4でブロックのDOM構成やスタイル名などが変わっているため、十分に検証をしてからのアップデートをおすすめします。
前提の環境情報
利用しているプラグインやスタイル、独自にカスタマイズしている内容によっても影響が違ってきますが、私が利用している環境は次のようになります。
- WordPress 5.3.2（アップデート前のWordPress）
- 記事はGutenbergで編集（Classic Editorなどは使わなくなった）
- 利用テーマはJIN
- コード表示にEnlighter 4.0-BETA1を使用し独自のスタイルを設定
- Gutenbergエディタのスタイルを変更するためにfunctions.phpを少し編集している
影響を受ける場所と対応方法
全てを確認したわけではないので漏れている部分があるかもしれませんが、私の環境では次の部分が影響を受けました。
厳密にはWordPress 5.4で新規に追加された機能（バッジなど）も確認した方が良いのかもしれませんが、今回は今まで使っていた機能で影響を受ける部分に絞って記載しています。
functions.phpの再修正
WordPressのアップデートでfunctions.phpがオリジナルのファイルで上書きされるため、独自にカスタマイズしている場合は、再度functions.phpの編集が必要になります。
私の場合はfunctions.phpでGutenbergエディタ用のcssを読み込む処理を追加しているので、この処理を新しいfunctions.phpに対して再度追加する必要がありました。
Gutenbergエディタ用cssの修正
上記のfunctions.phpから読み込んでいるGutenbergエディタ用のcssですが、WordPress 4.5でブロック構造やスタイルのクラス名が変更されています。
Gutenbergエディタの横幅はeditor-writing-flowに対して設定していましたが、WordPress 5.4からはwp-blockに対して設定するようになります。（!importantも不要になった）
クラス名ではeditor-xxx（xxx部分は任意の文字）がblock-editor-xxxという名前に変更されています。
/* WordPress 5.4 の Gutenberg エディタ用スタイル */
/* -------------------------------- */
/* エディタの横幅指定*/
/* -------------------------------- */
/* WordPress 5.3 */
.block-editor-writing-flow{
max-width: 900px!important;
}
/* WordPress 5.4 */
.wp-block{
max-width: 760px;
}
/* -------------------------------- */
/* 各種ブロックの設定 */
/* -------------------------------- */
/* WordPress 5.3 */
textarea.editor-plain-text{～}
/* WordPress 5.4（block-editor～になる） */
textarea.block-editor-plain-text{～}
JINテーマフォルダ配下の独自テーマを再アップロード
WordPressのバージョンアップに合わせて（？）JINのテーマもバージョンアップしているため、テーマを更新するとthemes/jinフォルダ配下のファイルもリセットされます。
私はEnlighter 4.0-BETA1用の独自テーマを （Enlighterはテーマフォルダ配下のenlighterフォルダから独自テーマを読み込む仕様のため） themes/jin/enlighter配下に格納しているため、テーマのアップデートで削除されたenlighterフォルダを再度アップデートする必要がありました。
ざっと見た感じでは、上記の修正だけでWordPress 5.4へのアップデート対応は問題なく行えているようです。また追加情報があれば、ここに追記していきたいと思います。
