WordPress コードエディターのカスタマイズ

テーマのCSSを投稿画面に適用する

editor-style.css の読み込み（functions.php に追記）

/**
* 投稿画面にオリジナルのスタイルを適用
*/
add_theme_support( 'editor-styles' );
add_editor_style("editor-style.css");

//add_editor_style("style.css");    // メインのCSS
//add_editor_style("css/style.css");    // こうやって色々読み込めます

editor-style.css（内容はテーマに合わせる）

@charset "UTF-8";
/*------------------------------------------------------
# Normalize
------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, font,
ins, kbd, q, s, samp, small, strike, strong, sub, sup,
tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*!
* Bootstrap Grid v4.2.1 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

h1 { font-size: 2.441em; }
h2 { font-size: 1.953em; }
h3 { font-size: 1.563em; }
h4 { font-size: 1.25em; }

p { margin-bottom: 1rem; }
~~~~ 省略 ~~~~
.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.3333333333%;
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.6666666667%;
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}
~~~~ 省略 ~~~~
/*------------------------------------------------------
body
------------------------------------------------------*/
body {
  background: url("../images/common/bg.png");
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 500;
}
~~~~ 省略 ~~~~

尚、ここで読み込まれたCSSは、WordPress で変換された後、投稿画面の html 内に出力されます。

body {
  background: url("../images/common/bg.png");
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 500;
}

　↓

.editor-style-wrapper {
  background: url("../images/common/bg.png");
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 500;
}

h1 { font-size: 2.441em; }

　↓

.editor-style-wrapper h1 { font-size: 2.441em; }

h2 { font-size: 1.953em; }

　↓

.editor-style-wrapper h2 { font-size: 1.953em; }

h3 { font-size: 1.563em; }

　↓

.editor-style-wrapper h3 { font-size: 1.563em; }

h4 { font-size: 1.25em; }

　↓

.editor-style-wrapper h4 { font-size: 1.25em; }

デフォルトのエディタ幅をテーマに合わせる（functions.php に追記）

// admin_style.css の読み込み
function load_custom_wp_admin_style() {
	global $current_screen;
	wp_enqueue_style( 'custom_wp_admin_css', get_theme_file_uri('/css/admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

admin_style.css（内容はテーマに合わせる）

/* メインのカラム幅をテーマに合わせる
 * 左右に15pxのpaddingがあるので、コンテンツは 766px-30px
 */
.wp-block {
	max-width: 766px;
}

/* 「幅広」ブロックの幅、コンテンツは1080px-30px */
.wp-block[data-align="wide"] {
	max-width: 1080px;
}

/* 「全幅」ブロックの幅 */
.wp-block[data-align="full"] {
	max-width: none;
}

.editor-block-list__layout .editor-block-list__block[data-align=left] .editor-block-list__block-edit {
	margin-right: 1em;
}
.editor-block-list__layout .editor-block-list__block[data-align=right]>.editor-block-list__block-edit {
	margin-left: 1em;
}

管理者以外で表示ブロックを絞り込む

functions.php に追記する場合

allowed_block_types にフック
ホワイトリストなので、表示するブロックを全てリストアップ

/**
 * 必要なブロックのみ表示
 */
add_filter( 'allowed_block_types', 'custom_allowed_block_types' );
function custom_allowed_block_types( $allowed_block_types ) {
    // 管理者ではない場合
	if ( !current_user_can( 'administrator' ) ) {
		$allowed_block_types = array(
			// 一般ブロック
			'core/paragraph',           // 段落
			'core/heading',             // 見出し
			'core/image',               // 画像
			'core/gallery',             // ギャラリー
			'core/list',                // リスト
			'tadv/classic-paragraph',   // TinyMCE Advanced

			// レイアウト要素
			'core/columns',             // カラム
			'core/separator',           // 区切り
			'core/spacer',              // スペーサー
		);
		return $allowed_block_types;
	}
}

プラグインを使用する場合

Advanced Gutenberg でもユーザープロファイルごとに各ブロックのアクティブ化を選択できます。
https://wordpress.org/plugins/advanced-gutenberg/

日本語への翻訳は途中です。
https://translate.wordpress.org/locale/ja/default/wp-plugins/advanced-gutenberg

Classic Editorプラグインを使わずにブロックエディターを無効化

functions.php に追記する場合

サイト全体

add_filter( 'use_block_editor_for_post', '__return_false' );

管理者以外

function disable_blockeditor( $is_enabled ) {
    //管理者以外の場合
	if ( ! current_user_can( 'administrator' ) ) return false;
	return $is_enabled;
}
add_filter( 'use_block_editor_for_post', 'disable_blockeditor' );

プラグインを使う場合

Disable Gutenberg

Classic Editorプラグインと同じように機能しますが、もっと多くのことができます。
https://wordpress.org/plugins/disable-gutenberg/#description

まだ日本語には翻訳されていません。
https://translate.wordpress.org/locale/ja/default/wp-plugins/disable-gutenberg