この記事は最後に更新してから1年以上経過しています。

Gutenbergエディターのフォントを変える

説明

Gutenbergエディターを試していてしっくりこないのが、編集時とそれを投稿した際の見た目の違い。GutenbergエディターとテーマTwenty Seventeenとではまったく異なるタイプのフォントが適用されていることが大きな理由である。

font-familyの違いを確認

まずはそれぞれにどんなフォントが指定されているのか確認していこう。Gutenbergエディターでは編集要素が細分化されているが、デモページで多数出現するタイトルと本文部分のfont-familyはどちらも「"Noto Serif",serif」が指定されている。

// 以下font-familyのみ抜粋
.editor-post-title__block .editor-post-title__input {
    font-family: "Noto Serif",serif;
}

.editor-block-list__block {
    font-family: "Noto Serif",serif;
}

これに対してテーマTwenty Seventeenでは、主要部分のfont-familyが「sans-serif」となっている(要素別に個別指定もある)。

Twenty Seventeenの主要部分は「sans-serif」
// 以下font-familyのみ抜粋
html {
    font-family: sans-serif;
}

Gutenbergエディターのfont-familyを変える

異なる系統のfont-familyが指定されていることがわかったところで、Gutenbergエディターの指定を変更し、「しっくりこない」感を緩和しようと思う。Gutenbergエディターのcssを調整する際に利用できるアクションはいくつか存在しているが、ここではGutenbergエディター自身がJavaScriptやCSSファイルの読み込みを行うgutenberg_editor_scripts_and_styles関数(/gutenberg/lib/client-assets.php)が最後に実行するenqueue_block_editor_assetsアクションを利用する。テーマのfunctions.php向けのサンプルは次の通り。

add_action( 'enqueue_block_editor_assets', 'set_mytheme_font_family' );

function set_mytheme_font_family() {
	$inline =
".gutenberg-editor-page .editor-post-title__block,
.gutenberg-editor-page .editor-post-title__input,
.gutenberg-editor-page .editor-block-list__block {
    font-family: %s;
}";
	wp_add_inline_style( 'wp-edit-post', sprintf( $inline, 'sans-serif' ) );
}

Gutenbergエディターの表示は次のように変わる。

Gutenbergエディターのタイトルと共通ブロックに「sans-serif」を適用

フォントサイズや領域の違いはあるが、違和感はかなり和らいだと思う。

おまけ

さてgutenberg_editor_scripts_and_styles関数の中身を見てみると、block_editor_settingsフィルターが気になった。

$editor_settings = apply_filters( 'block_editor_settings', $editor_settings, $post );

パラメータ$editor_settingsは連想配列で、エディターに関連するさまざまな設定を調整できるようになっている。

キー内容
alignWidefalse
availableTemplates連想配列(キーがテンプレートファイル名、値がテンプレート名)
allowedBlockTypestrue
disableCustomColorsfalse)
disablePostFormatsfalse
titlePlaceholder"タイトルを追加"
bodyPlaceholder"本文をここに書く"
isRTLfalse
autosaveInterval10
maxUploadFileSize※環境依存値
allowedMimeTypes連想配列(キーがファイル拡張子、値がそのMIMEタイプ名)
stylesスタイル要素を含んだ配列

$editor_settingsの内容はこのフィルターの実行後にインラインスクリプトとして出力されるようになっており、Gutenbergエディターをカスタマイズする際には活用できそうだ。


最終更新 : 2018年10月16日 13:17


お勧め

get_next_post(2018年5月27日 更新)

object get_next_post( [ bool $in_same_cat$in_same_term = false [ , string $excluded_categoriesmixed $excluded_terms = '' [ , string $taxonomy = 'category' ] ] ] )
1つ後の投稿情報を取得する。

wp_loginout(2018年5月27日 更新)

void wp_loginout( [ string $redirect = '' ] )
閲覧者がログインしているかどうかを調べ、ログインしていなければログインページのリンクを、ログイン済みならばログアウトページのリンクを表示する。

get_terms(2020年12月14日 更新)

array get_terms( mixed $args = array(), mixed $deprecated = '' mixed $taxonomies, [ mixed $args = '' ] )
条件を指定してタクソノミー情報を検索し、マッチしたすべてのデータを取得する。

wp_localize_script(2018年5月27日 更新)

bool wp_localize_script( string $handle, string $object_name, array $l10n )
スクリプト向けの変数を追加する。

get_post_status_object(2014年10月9日 更新)

object get_post_status_object( string $post_status )
投稿ステータス情報を取得する。