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

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

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' );

.editor-styles-wrapper {
  &.block-editor-writing-flow {
    //入力エリア内側の定義
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    width: auto;
    height: auto !important;
    width: 100%;
    max-width: 950px;
    background-color: white;
    margin: 20px auto;
    padding: 25px 0 100px;

    //タイトル系の定義
    h1 {
      
    }
    h2 {
      
    }
    h3 {
      
    }
    h4 {
      
    }

    //リストの定義
    ul {
      li {

      }
    }
    ol {
      li {

      }
    }

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

    //通常の文章とリンクの定義
    p {
     
      a {
        //リンクの定義
        text-decoration: none;
      }
    }

  }
}

.wp-block {
  max-width: 900px;
}

.wp-block-image { //imgを囲うボックス
    
    .components-resizable-box__container {
     height: auto !important; //画像をリサイズしたときに必要
    max-width: 100% !important; //画像をリサイズしたときに必要
    }
   img { //imgの定義
   
  }
}

.editor-post-title__block {
    .editor-post-title__input { //メインタイトルの定義
      
    }
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title {
  margin: 0 auto; //メインタイトル周りの余白の定義
}

function add_block_editor_styles() {
   global $pagenow;
   if ( is_admin() && $pagenow == 'post.php' || $pagenow == 'post-new.php' ) { //投稿画面かどうか判定する
     $posttype = get_post_type(); //投稿タイプを取得

     if($posttype == 'post') { //通常の投稿ページなら以下のスタイルシートを読み込む
     wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/block-style/block_style.css' );
   } elseif ($posttype == 'news') { //カスタム投稿名「news」なら以下のスタイルシートを読み込む
     wp_enqueue_style( 'news-block-style', get_stylesheet_directory_uri() . '/block-style/news-block_style.css' );
   }
 }
}
add_action( 'enqueue_block_editor_assets', 'add_block_editor_styles' );

|_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
   |- …   

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

function add_visual_editor_styles() {
  global $pagenow;
  global $post_type;
  if ( is_admin() && $pagenow == 'post.php' || $pagenow == 'post-new.php' ) {
    if($post_type == 'post') { //投稿ページなら以下
       add_editor_style( 'visual-style/visual_style_post.css' );
    } elseif ($post_type == 'news') { //カスタム投稿名「news」なら以下
       add_editor_style( 'visual-style/visual_style_news.css' );
    }
  }
}
add_action( 'admin_head', 'add_visual_editor_styles' );

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