Edited at

WordPress 5のブロックエディター(Gutenberg) に独自スタイルを当てる


ブロックエディター(Gutenberg)の編集画面にスタイルを当てたい

WordPress 5から導入されたブロックエディター(Guntenberg)のスタイルをカスタマイズする方法を探り続けています。


更新履歴

2019/7/3 - クラシックブロック用のスタイルについて追加

2018/12/7 - wp multibyte patchの更新に対応

WP-multibyte-patchがイタリックを解除していたバグが修正されたのでその部分を削除。

2018/12/5 - WordPress 5.0RC2 に更新

WordPress 5から「Gutenberg」は「ブロックエディター」に名前が変わるので差し替え。

2018/11/20 - Gutenberg 4.4に対応

add_theme_support( 'editor-styles' );によるエディタスタイルの適用に変更。以前はさらに強いスタイルがあって!important必須でしたが解消したため。

2018/10/10 - Gutenberg 3.9 に対応

初出はGutenberg 3.6で書いていましたが、バージョンの変更に伴い一部互換性がなくなりました。具体的には、


  • 一部の要素のDOM構造が変わった。

  • HTMLに直接書き出される css が変更され、一部の要素で !important が必要になった!

2018/08/18

オフシャルのテーマサポートをもとにした情報に更新しました。特にカラム幅の指定を改良しています。幅広画像や全幅画像にも対応しました。

また、エディタの背景色はテーマサポートでの指定だとフッタ部分がおかしくなるので、独自のクラスに当てています。

なお、フロント側と編集側ではDOM構造やCSSの当たり方が異なるため、フロント専用の調整が必要です。


ブロックエディター(Gutenberg)に独自 css を読み込ませる

対象のcssファイルをfunctions.phpに指定します。


functions.php

  add_editor_style( 'editor-style.css' );

add_theme_support( 'editor-styles' );

これで editor-style.css が取り込まれ、.editor-style-wrapperクラス以下に再構成され、編集画面に直接設定されます。


カスタマイズ


1) エディタの文字色、背景色を変える

以下、editor-style.cssを生成するためeditor-style.scssの編集内容を示していきます。

エディタの文字色や背景色はbodyに対して設定します。ただしブロックエディタは同じHTML内のため競合を防ぐため、実際には.editor-style-wrapperクラスに置換され適用されます。


editor-style.scss

body {

background-color: #eee;
color: #00005d;
}

このように書かれたスタイルシートはWordPress側で、

.editor-style-wrapper {

background-color: #eee;
color: #00005d;
}

に変換され、編集画面に直接埋め込まれます。body以外のセレクタは.editor-style-wapperの以下に配置されます。


2) フォント、文字サイズを変える

デフォルトでは Noto Serif が当たっていますが、これも同様にbodyに指定すればOKです。ただしタイトルだけは別の対応が必要です。


editor-style.scss

// 本文のフォント設定

body {
font-family: Hiragino Sans,"ヒラギノ角ゴシック",Hiragino Kaku Gothic ProN, Roboto,"Droid Sans",YuGothic,"游ゴシック",Meiryo,"メイリオ", sans-serif;
font-weight: 300;
font-size: 18px;
line-height: 2;
}

// タイトルのフォント設定
.editor-post-title__block {
.editor-post-title__input {
font-family: Hiragino Sans,"ヒラギノ角ゴシック",Hiragino Kaku Gothic ProN, Roboto,"Droid Sans",YuGothic,"游ゴシック",Meiryo,"メイリオ", sans-serif;
font-weight: 100;
font-size: 40px;
color: #000;
}
}



3) エディタの幅を変える

ブロックエディターのデフォルトでは編集領域の幅が 610px 固定なんです。これにブロック選択時のパディングを計算すると実質 580px しかありません。今回はそれを実質 800px に拡大してます。

ここでは、さらに幅広と全幅の画像やブロックの幅も指定しています。


editor-style.scss

// メインのカラム幅

// 左右に15pxのpaddingがあるので、コンテンツは830px-30px
.wp-block {
max-width: 830px!important;
width: auto!important;
}

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

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



4) ブロックの上下間隔を調整する

それぞれのブロック同士の上下間隔を変更します。デフォルトは上下32pxです。


editor-style.scss


// ブロック上下隙間
.editor-block-list__layout {
&>.editor-block-list__block>.editor-block-list__block-edit,
&>.editor-default-block-appender__content {
margin-bottom: 50px;
margin-top: 50px;
}
}


5) 見出し、区切り、引用、整形済みテキスト、カバーイメージに独自スタイルを当てる

基本はそれぞのブロックのラッパークラス.wp-block-ホニャララを指定し、内部要素にスタイルを当てる形式です。以下のセレクタでスタイルを当てることができます。


editor-style.scss

// 見出し

.wp-block-heading {
h2 {
border-bottom: 5px solid #4b85ce;
line-height: 1.8;
letter-spacing: .1em;
font-family: $f_base;
font-weight: bold;
font-size: 1.5em;
}
h3 {
border-left: 4px solid #888;
padding-left: 20px;
font-size: 1.3em;
font-family: $f_base;
font-weight: bold;
line-height: 1.8;
}
h4 {
font-family: $f_base;
font-size: 1.2em;
font-weight: bold;
}
}

// 区切り hr
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { // デフォルト(短い線)
max-width: 80%;
}
.wp-block-separator.is-style-wide { // 幅広区切り

}
.wp-block-separator.is-style-dots { // ドット区切り

}

// 引用
.wp-block-quote {
border: none!important;
padding: 2em 3em;
background: #fff;

.editor-rich-text:first-child p {
margin-top: 0;
}
.editor-rich-text:last-child p {
margin-bottom: 0;
}
p {
color: #555;
}
}

// カバーイメージ
.wp-block-cover-text {
font-size: 1.5em;
}



6) クラシックブロックの中にスタイルを当てる

クラシックブロックは基本的なスタイル(文字など)は適用されますが、その内部の個々の要素はブロック用クラスが無いので手付かずの状態です。クラシックブロックには.wp-block-freeformクラスがついていますのでその内部を操作します。

// クラシックブロック用スタイル

.wp-block-freeform {
p {
margin-top: 30px;
margin-bottom: 30px;
}
}

これらのスタイルを当てたところです。

2fb24a83515944bb4694b161d0eb25fe.png

以下は今回使用しているeditor-style.scssです。


editor-style.scss

$px_mainblock_width: 880px + 30px;  // メインカラム最大幅 左右padding 30px

$px_wideblock_width: 1080px + 30px; // 幅広画像最大幅 左右padding 30px
$px_fullside_width: none; // 全幅画像最大幅

$px_block_gap_height: 50px; // ブロック同士の上下マージン

$c_background: #f0f0f0; // 背景色
//$c_blockbg: #fff; // ブロックの背景色

// 本文のフォント
$f_base: Hiragino Sans,"ヒラギノ角ゴシック",Hiragino Kaku Gothic ProN, Roboto,"Droid Sans",YuGothic,"游ゴシック",Meiryo,"メイリオ", sans-serif;
$fw_base: 300;
$lh_base: 2;
$fs_base: 18px;
$c_base: #000;

// タイトルのフォント
$f_title: Hiragino Sans,"ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, Roboto,"Droid Sans",YuGothic,"游ゴシック",Meiryo,"メイリオ", sans-serif;
$fw_title: 100;
$fs_title: 40px;
$c_title: #000;

// ブロックエディタのボディ設定
body {
background-color: #eee;
color: #00005d;
font-family: $f_base;
font-weight: $fw_base;
font-size: $fs_base;
color: $c_base;
line-height: $lh_base;
}

// メインブロック幅
.wp-block {
max-width: $px_mainblock_width;
}

// 幅広ブロックの幅
.wp-block[data-align="wide"] {
max-width: $px_wideblock_width;
}

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

// ブロック上下隙間
.editor-block-list__layout {
&>.editor-block-list__block>.editor-block-list__block-edit,
&>.editor-default-block-appender__content {
margin-bottom: $px_block_gap_height;
margin-top: $px_block_gap_height;
}
}

// タイトル
.editor-post-title__block {
.editor-post-title__input {
font-family: $f_title;
font-weight: $fw_title;
font-size: $fs_title;
color: $c_title;
}
}

// カバーイメージ
.wp-block-cover-text {
font-size: 1.5em;
}

// 見出し
.wp-block-heading {
h2 {
border-bottom: 5px solid #4b85ce;
line-height: 1.8;
letter-spacing: .1em;
font-family: $f_base;
font-weight: bold;
font-size: 1.5em;
}
h3 {
border-left: 4px solid #888;
padding-left: 20px;
font-size: 1.3em;
font-family: $f_base;
font-weight: bold;
line-height: 1.8;
}
h4 {
font-family: $f_base;
font-size: 1.2em;
font-weight: bold;
}
}

// 整形済みテキスト
.wp-block-code,
.wp-block-preformatted pre {
font-family: Menlo,Consolas,monaco,monospace;
font-size: 14px;
color: #23282d;
}

// 区切り hr
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { // デフォルト(短い線)
max-width: 80%;
}
.wp-block-separator.is-style-wide { // 幅広区切り

}
.wp-block-separator.is-style-dots { // ドット区切り

}

// 斜体がadmin.cssでキャンセルされるのを対策
.editor-rich-text {
i, cite, em, var, address, dfn {
font-style: italic!important;
}
}

// 引用
.wp-block-quote {
border: none!important;
padding: 2em 3em;
background: #fff;

.editor-rich-text:first-child p {
margin-top: 0;
}
.editor-rich-text:last-child p {
margin-bottom: 0;
}
p {
color: #555;
}
}

// テーブル
.wp-block-table table {
border-collapse: collapse;
width: 100%;
}

// リスト
.core-blocks-list {
ul {
li {

}
}
}

// クラシックブロック用スタイル
.wp-block-freeform {
p {
margin-top: 30px;
margin-bottom: 30px;
}
}



フロント側はどうすればいいの?

残念ながらフロント用出力と編集画面ではHTMLの構造に互換性はありません。いまのところ、scssの変数を再利用して専用スタイルを地道に当てていくしかないかもしれません。

一番の問題点は、クラス無しでそのまま出力されるブロックがあることです。例えばp, h1, h2, h3, h4, h5, h6, ul, olはラッパーもクラスも無く出てきますが、それらは他のブロック内でも使われていたり、将来新しいブロックを追加したときに競合する可能性があります。

その他のブロックも .wp-block-ホニャララ クラスがラッパーに付くものと、blockquote のようにその要素に直接クラスが付くものが混在しています。特に、ul>liはギャラリーでも使用されているため、素のリスト用スタイルは:notを使って除外していかなければいけません。将来的なことを考えると正直あまり良い設計とは言えません。

ul:not(.wp-block-gallery) {

...
}


編集画面のオプション設定などは、ブロックエディター投稿画面カスタマイズあれこれ にまとめてあります。