WordPress5.0以前は「ビジュアルエディタ（TinyMCE）」が標準エディタでした。
よって記事投稿画面とHTML表示を一致させる事が比較的容易でした。
しかし、2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ（Gutenberg）」に変更になりました。
その結果、記事投稿画面とHTML表示を一致させる事より、ドキュメント構造が重視されるようになりました。
プロの方は「ブロックエディタ」の方が良いとの意見もありますが、素人には「ビジュアルエディタ」の方が判り易いと思います。
私は「ビジュアルエディタ」時代にWordPressを始めたので問題なく理解できましたが、今、WordPressを始める人は、「あれ！どの様に文書を書いたら良いのか？」でつまずくのではないか？と心配しています。
そこで私は、WordPressは最新版を使うが、エディタは「ビジュアルエディタ」を使い続けたいと思っています。
そこでこれらの「エディタ」の現状を色々調べた結果を下記に報告します。
1.WordPressのデフォルトテーマでのエディタの取り扱い
＜テーマ毎のビジュアルエディタ一覧＞
| テーマ名 | 年度 | editor-style.cssの場所 | クラス |
| twentytwelve | 2012年版 | テーマディレクトリの直下 | .entry-content |
| twentythirteen | 2013年版 | CSSフォルダの中 | .entry-content |
| twentyfourteen | 2014年版 | CSSフォルダの中 | .entry-content |
| twentyfifteen | 2015年版 | CSSフォルダの中 | .entry-content |
| twentysixteen | 2016年版 | CSSフォルダの中 | .entry-content |
| twentyseventeen | 2017年版 | assets/cssフォルダーの中 | .entry-content |
| twentynineteen | 2019年版 | ビジュアルエディタのファイル名が「style-editor.css」に変更になりました。
場所はテーマディレクトリの直下 |
.entry-content |
| twentytwenty | 2020年版 | ビジュアルエディタのファイル名が「editor-style-classic.css」に変更になりました。
場所はassets/cssフォルダーの中 |
.entry-content |
解説
従来のビジュアルエディタのCSSファイル名は「editor-style.css」でした。
しかし「twentynineteenテーマ」や「twentytwentyテーマ」ではCSSのファイル名が変更されました。
ビジュアルエディタが無くなった訳ではありません。
確認方法：何が使われているのか？はfuncitions.phpを「add_editor_style()」で検索すると判ります。
またビジュアルエディタのCSSに対応するhttp表示のCSSは「style.css」で、クラスは全テーマで「entry-content」です。
確認方法：ビジュアルエディタで作成されたコンテンツがどの様なクラス名で表示されているのかは「EmEditor」の「ファイルからの検索」で「the_content()」で検索すると判ります。
一方、旧テーマでもブロックエディアが使える様にする為に「editor-blocks.css」というCSSファイル名が追加されました。
しかし「twentynineteenテーマ」や「twentytwentyテーマ」は上記と異なり下記になります。
■twentynineteen：style-editor-customizer.css
■twentytwenty：editor-style-block.css」
確認方法：何が使われているか？はfuncitions.phpを「wp_enqueue_style()」で検索するとが判ります。
いづれにしても、WordPressのデフォルトテーマは「ビジュアルエディタ」でも「ブロックエディタ」でも使える様になっています。
1.ビジュアルエディタ（TinyMCE）のみを利用する方法
ビジュアルエディタを使うか？否かは、下記のプラグインを入れるか？否かで決まります。
入れた場合は「ビジュアルエディタ（TinyMCE）」、入れない場合は「ブロックエディタ（Gutenberg）」になります。
■Classic Editorプラグインをインストールする。
下記のプラグインをインストールして有効化して下さい。
■ビジュアルエディタのCSSをカスタマイズする方法
①ビジュアルエディタのCSSを親テーマから子テーマにコピーする
項番１の表に記載したCSSファイルを子テーマフォルダにフォルダ構造毎コピーします。
②ビジュアルエディタの修正
このCSSを修正すると、ビジュアルエディタの表示が変わります。
例）
p{font-size: 16px;}
③http表示のCSSの修正
子テーマの「style.css」に上記の修正内容を追加します。
クラスは「.entry-content」です。
例）
.entry-content p{font-size: 16px;}
以上でhttp表示もビジュアルエディタと同様に修正されます。
2.TinyMCE Advancedを追加利用する場合
TinyMCE Advancedを利用する場合、親テーマが「editor-style.css」か否かで使い方が異なります。
親テーマの種類により下記ドキュメントを参照してください。
