LoginSignup
25
25

More than 3 years have passed since last update.

@Fujix

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

Last updated at Posted at 2018-08-13

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

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

更新履歴

2020/08/20 - WP v5.5.0 での見出しブロックの仕様変更に伴う更新。[data-type="core/heading"] h* をh*[data-type="core/heading"] に変更。
2020/05/25 - WP v5.4.0 での見出しブロックの仕様変更に伴う更新。.wp-block-heading を [data-type="core/heading"] に変更。
2020/05/24 - ブロックスタイルの削除について追記。
2019/12/20 - WordPress 5.3でギャラリーやテーブルがfigureでラッピングされたので更新。
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に、その他のセレクタは、.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-ホニャララを指定し、内部要素にスタイルを当てる形式です。以下のセレクタでスタイルを当てることができます。

WordPress 5.4.1 更新: 以前は .wp-block-heading 配下でしたが気がついたら無くなってましたので、data 属性ベースに変更しました。

WordPress 5.5.0 更新: [data-type="core/heading"] h* が h*[data-type="core/heading"] にさらに変更されています。

editor-style.scss
// 見出し
h2[data-type="core/heading"] {
  border-bottom: 5px solid #4b85ce;
  line-height: 1.8;
  letter-spacing: .1em;
  font-family: $f_base;
  font-weight: bold;
  font-size: 1.5em;
}
h3[data-type="core/heading"] {
  border-left: 4px solid #888;
  padding-left: 20px;
  font-size: 1.3em;
  font-family: $f_base;
  font-weight: bold;
  line-height: 1.8;
}
h4[data-type="core/heading"] {
  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;
}

追記(2020/05)
区切りや画像のブロックにはデフォルトでいくつかの「ブロックスタイル」が設定されています。これは、選択すると特定のクラスが付与され、予め仕込んでおいたスタイルが適用されるというものです。不要の場合は削除できます。こちらの記事でやり方を説明しています。

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;
}

// 見出し
h2[data-type="core/heading"] {
  border-bottom: 5px solid #4b85ce;
  line-height: 1.8;
  letter-spacing: .1em;
  font-family: $f_base;
  font-weight: bold;
  font-size: 1.5em;
}
h3[data-type="core/heading"] {
  border-left: 4px solid #888;
  padding-left: 20px;
  font-size: 1.3em;
  font-family: $f_base;
  font-weight: bold;
  line-height: 1.8;
}
h4[data-type="core/heading"] {
  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> のように、要素に直接クラスが付くものが混在しているので注意が必要です。

なお、WordPress 5.2 まではギャラリーとテーブルがラッパー無しで出力されていましたが、5.3 からそれぞれ、<figure class="wp-block-gallery"> と <figure class="wp-block-table"> でラッピングされるようになり、少し自由度が向上しました。

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

25
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
25
25