Edited at

WP ZoomUP #9 / ブロックエディタ―は、沢山ブロックが出てきて戸惑ってしまうと言われたので、シンプルにカスタマイズした話(2019/1/25 wpzoomup)


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