【WordPress】ブロックエディターにJSとCSSを組みこむ方法

更新日：2025/04/28

WordPressのブロックエディターカスタマイズを行うとき、フロントエンドで動作させるJSファイルと、必要によってcssファイルをエディター上に読み込ませる必要があります。
調べてみたところ、いくつかのやり方があるようなので、まとめてみました。

推奨：registerBlockType()を使用する場合

jsファイル内でregisterBlockType()を使ってブロックを登録している場合は、block.jsonファイルでJSファイルとcssファイルを読み込ませる方法が推奨されています。

import { registerBlockType } from "@wordpress/blocks";

registerBlockType( "my-blocks/test-block", {
});

block.jsonは次のように記述する。

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-blocks/test-block",
  "title": "My Block",
  "category": "widgets",
  "editorScript": "my-plugin",
  "editorStyle": "file:./block.css",
  "style": "file:../css/style.css"
}

• "apiVersion" :

  3は、WordPress 6.3から使用可能。それ以前は2を使用する。デフォルトは1。
  ブロックをフルサイト編集（Full Site Editing）に対応させるときは、3にする。

• "name" :

  registerBlockType()の第一引数と一致させる。

• "title"、"category" 等 :

  registerBlockType()側で記述しない場合、こちらが使用される。

jsとcssの指定

jsとcssを指定するプロパティには、php側でwp_register_script()またはwp_register_style()のハンドルを指定する。
または、ファイルのパスを "file:ファイルパス"の形式で指定する。
複数のファイルを配列形式で指定することも可能。

次のプロパティが用意されている。

• "script"、"style" : エディターとページ表示の両方に出力するjsとcssを指定
• "editorScript"、"editorStyle" : エディターに出力するjsとcssを指定
• "viewScript"、"viewStyle" : エディターに出力するjsとcssを指定

@wordpress/scripts環境でビルドする場合、jsファイルの依存関係を自動で処理してくれるためファイルパスでの指定が可能。しかしネイティブなJavaScriptは依存関係を処理できないため、wp_register_script()で依存関係を指定する必要がある。

PHP側

add_action('init', function () {
    wp_register_script(
                'my-plugin',
                 plugin_dir_url(__FILE__).'block/block.js',
                array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' )
            );
    register_block_type(
        plugin_dir_path(__FILE__) . '/block' // block.jsonのあるディレクトリ
    );

});

 

registerBlockType()を使用しない場合

文字装飾やブロックエディターのサイドに管理項目を追加するとき、またはregisterBlockType()を使っていてもblock.jsonを使用しないときはenqueue_block_editor_assetsアクションでファイルをエンキューします。

add_action( 'enqueue_block_editor_assets' , function(){
        wp_enqueue_script(
                'my-plugin',
                 plugin_dir_url(__FILE__).'block/block.js',
                array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' )
            );
        wp_enqueue_style(
                'my-plugin',
                 plugin_dir_url(__FILE__).'block/block.css'
            );
        wp_enqueue_style(
                'my-style',
                 plugin_dir_url(__FILE__).'css/style.css'
            );
} );

ページ表示時にcssを出力する場合は、wp_enqueue_scriptsアクションを使用します。

add_action( 'wp_enqueue_scripts',function(){
        wp_enqueue_style(
                'my-style',
                 plugin_dir_url(__FILE__).'css/style.css'
            );
} );

デフォルトテーマのTwenty Twenty-Fiveなどのフルサイト編集（Full Site Editing）対応テーマは、iframe内にブロックを配置します。
（apiVersionが3未満のプラグインが読み込まれると、iframeが解除されます）

enqueue_block_editor_assetsアクションで出力したcssはiframeの外側に設置されるため、ブロックに適用されません。
この場合は、after_setup_themeアクションでadd_editor_style()を実行します。

add_action( 'after_setup_theme',function(){
    add_editor_style( plugin_dir_url(__FILE__).'css/style.css' );
});

add_editor_style()はクラシックエディター用の関数ですが、FSEのiframe内にcssを出力してくれます。ただし、この機能についての正式なアナウンスがないため、将来は仕様が変更されるかもしれません。

WordPressはHTMやCSSの知識も必要。総合的な知識を身につけよう。



更新日：2025/04/28

書いた人（管理人）：けーちゃん

TOPページ ▶ カスタマイズ ▶ WordPress ▶ 

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。