about

GutenbergのエディタにCSSを適用するための一番簡単なカスタマイズ方法

Gutenbergの出力結果と同じようにエディタ側もCSSを適用したい所。しかし、このエディタの特性上全く見た目が同じようにするのは大変です。そこで、ブロック単位で見た目がそれなりに、編集結果がある程度想像できるような編集画面の作成を行う事にします。

まずはfunction.phpに適用させたいCSSをセットする。

旧エディタと同じように、CSSの適用を行うにはfunction.phpに書き込む必要があります。

//Gutenberg CSS
function my_gutenberg() {
    wp_enqueue_style( 'gutenberg-editor', get_stylesheet_directory_uri() . '/css/editor-style.min.css' , false, '1.0', 'all' );
}
add_action('enqueue_block_editor_assets', 'my_gutenberg');

function.phpに上記のfunctionとadd_actionを追加します。functionの中身は、テーマフォルダ内に置かれたエディタ用のCSSを読むための物になります。(CSSの場所やファイル名に合わせて変更してください。)

それをadd_actionで適用すれば、エディタ編集画面にエディタ用のCSSが適用されるようになります。次はそのCSSの作成に移りましょう。

CSSの設定

CSSの設定ですが、編集フォームの該当場所にCSSをセットすることによって見た目を変えていきます。(まるごとざっくりとCSSを変更すると意図しない所に問題が発生することがありますので今回は、ピンポイントで見た目を変更しています)

body.gutenberg-editor-page div.editor-block-list__block-edit div.editor-post-title textarea {
    /* h1見出し */
}

body.gutenberg-editor-page div.editor-block-list__layout h2 {
    /* h2見出し */
}

body.gutenberg-editor-page div.editor-block-list__layout h3 {
    /* h3見出し */
}

body.gutenberg-editor-page div.editor-block-list__layout table {
    /* テーブル table */
}
body.gutenberg-editor-page div.editor-block-list__layout table td {
    /* テーブル td */
}
body.gutenberg-editor-page div.editor-block-list__layout ul {
    /* リスト ul */
}
body.gutenberg-editor-page div.editor-block-list__layout ol {
    /* リスト ol */
}
body.gutenberg-editor-page div.editor-block-list__layout .wp-block-quote {
    /* 引用 */
}
body.gutenberg-editor-page div.editor-block-list__layout .wp-block-quote p {
    /* 引用本文 */
}
body.gutenberg-editor-page div.editor-block-list__layout .wp-block-quote cite {
    /* 引用元 */
}

body.gutenberg-editor-page div.editor-block-list__layout .wp-block-pullquote {
    /* リードコラム */
}
body.gutenberg-editor-page div.editor-block-list__layout .wp-block-pullquote cite {
    /* リードコラム引用元 */
}

body.gutenberg-editor-page div.editor-block-list__layout .wp-block-preformatted {
    /* 整形済みテキスト */
}

body.gutenberg-editor-page div.editor-block-list__layout .wp-block-verse {
    /* 詩 */
}

body.gutenberg-editor-page div.wp-block-code textarea {
  /* コード */
}

body.gutenberg-editor-page div.editor-writing-flow textarea {
    /* 段落 */
}

※ざっくりと調べた程度ですが、 上記のclass名の場所が各フォームの表示クラスになっていますので、そこにスタイルシートを適用すればその部分の見た目が実際の表示に近づく事になります。

(おまけ)現在学習した範囲で思った事


現在、GutenbergのエディタでカスタムHTMLを使用している場合、プレビュー部分への独自CSSを適用する方法が今の所見つからないので、カスタムHTMLを利用する場合がちょっと難しいです。今の所、カスタムHTMLのプレビューを見ても「何のプレビューだよ!」って感じになってて使い勝手が悪いです。

カスタムHTMLのプレビューに独自CSSを自由に当てられるようになれば普通のページへの対応等も旧エディタよりは使い勝手の良いものになりそうではあります。

また、旧エディタよりも編集画面の見た目が投稿画面と合わせづらいので、その部分をこれからどうしようかなと思います。これで十分な場合もあると思いますが、細かい所が気になる方には「見た目が違うから旧エディタより劣化してる」と感じてしまうかもしれません。まだまだ調整やカスタマイズを進める必要があると思います。

最後に

Gutenbergを一通り触ってみた感じとしては、結構WordpressがLPやブログ寄りに舵を切って来たなぁと言う印象を受けました。ある程度の見た目の整った投稿を量産するLPや雑誌みたいな投稿記事がメインのサイトやブログ等のツールとしては、とても使いやすくて良い仕組みだと思います。また、そのためにスマホやタブレット等で編集しやすいスタイルにしているのだと思います。

また、小規模な企業やお店のホームページとして使う場合、お客様に使ってもらうためのカスタマイズがちょっと大変な気がします。
そのため、エディタ部分はなるべくカスタマイズするのではなく、このエディタをうまく使っていく必要が今後出てくるのかなと言う印象です。

ブログメインではない、企業やお店のホームページを作る場合でカスタマイズしたい場合は、baserCMS等の「各ページがそれぞれ独立したレイアウトを持つホームページの制作に適したCMS」等を使う方が良いのかなって思います。

とはいえ、まだまだこれから使い勝手が良くなっていくと思います。まずはこの辺りから始めて、徐々に自分好みにカスタマイズしていきましょう。