• 最終更新日:

【Gutenberg】ブロックエディタの編集画面と、実際の表示画面を同じ見た目にする設定方法

【Gutenberg】ブロックエディタの編集画面と、実際の表示画面を同じ見た目にする設定方法

今回はWordPressのGutenbergで編集画面と実際の表示画面を同じ見た目にする設定方法について説明します。

説明する環境は以下

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.46.1

Gutenbergの編集画面と表示画面を同じ見え方にする設定方法

WordPressのGutenbergではブロックエディタが使われており、独自のテーマを作った場合、編集画面と実際の表示画面は同じ見え方になっていません。

同じ見た目にするためには、編集画面用のstyleシートを作成して読み込ませる必要があります。

編集画面用のstyleシートを作成する

まずはブロックエディタ編集画面用のstyleシートを作成します。home.phpやsingle.phpと同じ階層に【block-style】の名前でフォルダを作成して、その中にblock_style.cssを作成します。Sassを使って書く場合はblock_style.scssも作成しましょう。

|_demo-site/
   |- block-style/
   |   |- block_style.css
   |   |- block_style.scss
   |   
   |- home.php
   |- front-page.php
   |- single.php
   |- …   

作成したstyleシートを読み込む

functions.phpから作成したblock_style.cssを読み込みます。これでブロックエディタの編集画面でblock_style.cssが読み込まれるようになります。

function add_block_editor_styles() {
    wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/block-style/block_style.css' );
}
add_action( 'enqueue_block_editor_assets', 'add_block_editor_styles' );

styleシートに書くこと

ご自身の編集画面に合わせてstyleシートに書いていきます。表示に重要なクラス名は以下の通り。必要だと思われるプロパティも簡単に書いておきました。数値は例になります。ご自身の環境に合わせて追加、変更してください。

.editor-styles-wrapper { //入力エリアの外側の定義
   background-color: gray;
   padding: 0 10px;
}

.block-editor-writing-flow { //入力エリアの定義
   font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;;
   width: auto;
   height: auto;
   max-width: 850px;
   background-color: white;
   margin: 20px auto;
   padding: 25px 0 100px;
}
.wp-block-paragraph{ //p(段落)の定義
    font-size: 15px;
  a{ //リンクの定義
   text-decoration: none;
  }
}
.wp-block-image { //imgを囲うボックス
    height: auto;
    max-width: 100%;
    .components-resizable-box__container {
      height: auto !important;
      max-width: 100% !important;
    }
   img { //imgの定義
    height: auto;
    max-width: 100%;
  }
}
.editor-post-title__block {
    .editor-post-title__input { //h1の定義
      font-size: 29px;
    }
}
.wp-block-heading{ //タイトル系の定義
   h2{
     font-size: 23px;
   }
   h3{
     font-size: 20px;
   }
   h4{
     font-size: 17px;
   }
}
.block-library-list{ //リストの定義
   ul{
       li{
       }
   }
   ol{
       li{
       }
   }

}
.wp-block-table__cell-content { //テーブルの定義
   padding: 0;
}
.wp-block-table { //テーブルの定義
   width: 100%;
   max-width: 100%;
   tbody {
      tr {
          td {    
          }
      }
      td {
      }
    }
}

※注意点について
上下のmarginやline-heightは指定しないようにしましょう。表示が崩れたり、入力した内容が消えることがあります。

おまけ - ビジュアルエディタの編集画面の場合は?

ビジュアルエディタの編集画面と実際の表示画面を同じにする場合も、編集画面専用のstyleシートを読み込ませる必要があります。

visual-styleフォルダを作成してvisual_style.cssを作成します。

|_demo-site/
   |- block-style/
   |   |- block_style.css
   |   |- block_style.scss
   |   
   |- visual-style/
   |   |- visual_style.css
   |   |- visual_style.scss
   |
   |- home.php
   |- front-page.php
   |- single.php
   |- …   

作成したvisual_style.cssをfunctions.phpから読み込みます。

function add_visual_editor_styles() {
    add_editor_style( 'visual-style/visual_style.css' );
}
add_action( 'admin_init', 'add_visual_editor_styles' );

styleシートに書くときにはid名tinymceを使って書いていくことになります。

#tinymce { //この#tinymceが重要
  p{
    font-size: 16px;
   }
  h2{
    font-size: 23px;
  }
  h3{
    font-size: 20px;
  }
}

投稿タイプによって、読み込ませるstyleシートを変更する方法は、以下を参考にしてみてください。

さいごに

今回はブロックエディタの編集画面と、実際の表示画面を同じ見た目にする設定方法について説明しました。

旧エディタは2021年末でサポートが終了します。直前で慌てないように今のうちからGutenbergのブロックエディタで作業できる環境を整えておきましょう。

すでにブロックエディタ用の便利なプラグインも多く開発されています。例えば「Lazy Blocks」はオリジナルのブロックを簡単に作ることが可能です。以下に使い方を書いたので参考にしてみてください。