基礎編 新ブロックエディター調整方法【Gutenberg】

どうも、Tommy(@SitommyBlog)です。

今回は、WordPressの新エディター『Gutenberg』の調整方法（基礎編）について書いていこうと思います。

私自身、カスタムブロックを使用するためにいろんなサイトやWP公式サイトを見ました。
まだまだ勉強中ではありますが、少しでもOUTPUTしたいのと同じ悩みで行き詰まっている人に共感していただけたらと思い書いていこうと思います。

今回の目的とは？

基礎編ということなので、今回はブロックエディターの調整をするところまで書いていこうと思います。

『調整とは？』

• エディター側にもCSSを使ってよりリッチに見せる
• そのCSSでサイト側の表示とエディター側の表示を一緒にする

こうすることで、プレビューをしなくてもエディター側でどういう風にサイト側で表示されるかわかるようにするということです。

事前準備

エディター側にCSSを読み込まさないといけません。

そのためには、『functions.php』に以下のコードを追加する必要があります。

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

こうすることで、『editor.css』がエディター側のスタイルとして効いてくるようになりました。

ただ一つ注意点があります。

それは、サイト側は『style.css』を読み込んでスタイルが付与されています。

そして、エディター側は『editor.css』を読み込んでスタイルが付与されるということなので、『editor.css』にスタイルを記述しても、実際サイト側ではスタイルが付与されていない状態になります。

エディター側とサイト側では別々のCSSが読み込まれているため、このようになってしまいます。

今回の目的は『サイト側の表示とエディター側の表示を一緒にする』なので、
headエリアに『editor.css』をlink設定させることで『editor.css』に記述したものもサイト側に反映されます。

調整開始

私のサイトの場合、最大コンテンツ幅が『約905px』なのでエディター側も同じように広げたいと思います。

エディター側のデフォルト幅は『580px』なので同じように広げます。

エディター側で、デベロッパツールを開いて幅指定しているクラスを探しましょう。

.editor-styles-wrapper .wp-block{
 max-width: 905px;
}

これで、エディター側の幅も『約905px』に調整することができました。

まとめ

上記で説明してきたのは、あくまでも私がやっているものなので正しいかどうかは正直わかりません。

また、もっといいやり方があるかもですが今のところはこんな感じでってことで！
私自身も、勉強中ですので完了をどんどんしていきたいと思っています！

今回は、基礎編としてエディター側の調整をしましたが今後はカスタマイズなどの記事も書いていきたいと思っています。