thumbnail

Gutenbergエディタとクラシックエディタの判定やCSSの読み込み方法まとめ

エディタの判定


以下の方法でGutenbergエディタ(ブロックエディタ)とクラシックエディタを判定することが可能です。
$current_screen = get_current_screen();
if ( ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) || ( function_exists( 'is_gutenberg_page' ) && is_gutenberg_page() ) ) {
// Gutenberg Editor
} else {
// Classic Editor
}

is_block_editorはWordPress5.0から使用できるメソッドです。

WordPress5.0未満でプラグインを使用してGutenbergエディタを利用している場合は、Gutenbergプラグインが提供しているis_gutenberg_page関数を使用します。

以下の代表的なアクションでは使用できません



  • plugins_loaded

  • setup_theme

  • after_setup_theme

  • init

  • wp_loaded

  • admin_init

  • load-{$page_hook}


以下の代表的なアクション、フィルタでは使用できます



  • admin_enqueue_scripts

  • admin_print_styles

  • admin_head

  • admin_notices

  • admin_title

  • admin_body_class

  • admin_footer


具体的に使用可能になるのは以下のコード以降です。

wp-admin/edit-form-blocks.php
// Flag that we're loading the block editor.
$current_screen = get_current_screen();
$current_screen->is_block_editor( true );

実際に判定を行っている関数


上記の方法は別の個所で行われた判定の結果を使用しているにすぎません。

実際には「use_block_editor_for_post」関数で行います。

$post が取得できる個所では次の関数で判定することができます。
if ( function_exists( 'use_block_editor_for_post' ) && use_block_editor_for_post( $post ) ) {
<span class="hljs-comment">// Gutenberg Editor</span>
} else {
<span class="hljs-comment">// Classic Editor</span>
}

エディタに適用するCSSの読み込み


クラシックエディタ場合は「add_editor_style」にCSSファイル名を指定することで、テーマのCSSをエディタに反映することができました。
add_action( 'after_setup_theme', function () {
add_editor_style( '/css/editor-style.css' );
} );

Gutenbergエディタの場合は大きく2つの方法をとることができます。

クラシックエディタと似た方法


上のクラシックエディタ用のコードだとGutenbergエディタには反映されません。

しかし
<span class="nx">add_theme_support</span><span class="p">(</span> <span class="s1">'editor-styles'</span> <span class="p">);</span>

を追加しておくと反映されるようになります。
add_action( 'after_setup_theme', function () {
<span class="double-underline" data-ma_color="#882">add_theme_support( 'editor-styles' );</span>
add_editor_style( '/css/editor-style.css' );
} );

wp-admin/edit-form-blocks.php
if ( $editor_styles && current_theme_supports( '<span class="double-underline" data-ma_color="#882">editor-styles</span>' ) ) {
foreach ( $editor_styles as $style ) {
if ( preg_match( '~^(https?:)?//~', $style ) ) {
$response = wp_remote_get( $style );
if ( ! is_wp_error( $response ) ) {
$styles[] = array(
'css' => wp_remote_retrieve_body( $response ),
);
}
} else {
$file = get_theme_file_path( $style );
if ( file_exists( $file ) ) {
$styles[] = array(
'css' => file_get_contents( $file ),
'baseURL' => get_theme_file_uri( $style ),
);
}
}
}
}

この方法で追加されたCSSは適切なセレクタで囲う処理がされ、エディタ以外にスタイルが適用されないように自動で処理してくれます。

処理内容を詳しく知りたい方は以下のファイルを「.editor-styles-wrapper」で検索してその周辺を眺めるとよいでしょう。

wp-includes/js/dist/editor.js

ただし「editor_stylesheets」や「mce_css」フィルタを使用して追加されたCSSに関してはこの方法では反映されません。

特にプラグイン開発している場合は注意が必要です。

新しく追加された方法


WordPress5.0から「enqueue_block_editor_assets」というアクションが追加されました。

このアクションは「admin_print_styles」「admin_print_scripts」「admin_print_footer_scripts」よりも前に呼ばれるため、このアクションをフックし、その中で「wp_enqueue_style」や「wp_enqueue_script」でCSSやJSを登録することができます。
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_style( 'my-theme-style', get_theme_file_uri( '/css/block-editor.css' ) );
} );

この方法で追加されたCSSは前述のようなセレクタで囲うような処理をしてくれません

エディタ部分だけにスタイルを当てたい場合は「.editor-styles-wrapper」を付けたほうがよいでしょう。

逆にエディタ部分以外にスタイルを当てたい場合はこちらの方法を使用する必要があります。

GutenbergエディタとクラシックエディタでCSSを分けてadd_editor_styleで登録したい場合


「after_setup_theme」をフックする方法は使えません。
add_action( 'after_setup_theme', function () {
add_theme_support( 'editor-styles' );
add_editor_style( '/css/editor-style.css' );
} );

なぜなら「after_setup_theme」の段階では前述のエディタ判定が使用できないためです。

WordPress4.9から「replace_editor」フィルタが追加され、ここでは「$post」が使用できるため、以下のようなコードでエディタごとに異なるCSSを読み込むことが可能です。
add_action( 'after_setup_theme', function () {
$block_editor = function () {
add_theme_support( 'editor-styles' );
add_editor_style( 'block-editor.css' );
};
$classic_editor = function () {
add_editor_style( 'classic-editor.css' );
};

global $wp_version;
if ( version_compare( $wp_version, '4.9.0', '>=' ) ) {
add_filter( 'replace_editor', function ( $result, $post ) use ( $block_editor, $classic_editor ) {
if ( use_block_editor_for_post( $post ) ) {
$block_editor();
} else {
$classic_editor();
}

return $result;
}, 10, 2 );
} else {
$classic_editor();
}
} );

ただしGutenbergからはクラシックエディタをブロックとして利用できるため、このクラシックエディタブロックにもスタイルが適用されることなどを考慮する必要があります。

上記のように考慮すべきことが増えるだけなのでエディタごとにCSSを分けず、今まで「add_editor_style」していた個所に「add_theme_support( 'editor-styles' )」を追加するのがよいと思います。