• 最終更新日:

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

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

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

説明する環境は以下

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.46.1
  • wordpress v5.6.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 !important;
    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; //メインタイトル周りの余白の定義
}

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

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

投稿タイプによってstyleシートを分ける場合は?

通常の投稿タイプと、カスタム投稿タイプで適用させたいstyleシートを分けたい場合はfunctions.phpに以下のように書きます。

以下は通常の投稿タイプと、カスタム投稿名「news」を使った例です。

function add_block_editor_styles() {
   if ( is_admin() || $pagenow == 'edit.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' );

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

ビジュアルエディタの編集画面と実際の表示画面を同じにする場合も、編集画面専用の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」はオリジナルのブロックを簡単に作ることが可能です。以下に使い方を書いたので参考にしてみてください。

Advanced Custom FieldsのPro版でもカスタムブロックは作る場合は以下です。