WordPressでブロックエディター（Guternberg）のコンテンツ幅を広くする方法

WordPress5から実装された新ブロックエディター、Guternbergですが、個人的にエディターの横幅が小さすぎる。

そこで、ブロック入力エリアの横幅をもっと広くして記事を書きやすいようにカスタマイズしてみました。

Guternbergのコンテンツ幅を広くする方法１

まずはブロックエディタに適用されるCSSファイルを読み込むため、functions.phpに以下のコードを記述します。

function add_my_assets_to_block_editor() {
    wp_enqueue_style( 'my-gutenberg-style', get_stylesheet_directory_uri() . '/assets/css/my-gutenberg-style.css');
}
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );

CSSファイルへのパス（'/assets/css/my-gutenberg-style.css'）は適宜書き換えてください。

ちなみに、この方法は以下の記事で紹介した方法です。

あわせて読みたい

WordPress5の新ブロックエディターGutenbergの編集画面に適用されるCSSやJSを読み込む方法 Classic Editor（旧エディタ）では、投稿編集画面にスタイルを適用させたい場合、add_editor_style()を使ってCSSを読み込んでいました。 しかし、新しいブロックエディ...

さて、このようにして読み込んだmy-gutenberg-style.cssにて、以下のようにスタイルを指定します。

.wp-block {
    max-width: 800px;  /* 好きな幅で */
}

これだけ！

ちなみに、デフォルトではmax-widthが610pxしかありませんでした。

Guternbergのコンテンツ幅を広くする方法２

いちいちファイルを用意するのは面倒臭いよ。って人は、admin_headアクションフック で直に<style>タグを吐き出してもOKです。

add_action( 'admin_head', function() {
  echo '<style>.wp-block{max-width: 800px !important}</style>'."\n";
});