[WordPress5 Tutorial]開発者ツールにログを出力するPluginを作る

Gutenbergで新規投稿の画面を開いたら、Devtoolのconsoleに「hello gutenberg block」ってログを出力してみます。

参考にしたサイトは、ここ「Loading JavaScript」です。

今回作るPluginはBlockとして選んだりすることはできません、ただ、ロードされた時にログを出力するだけです。ブラウザのDevtoolsを開いてから、新規投稿画面を開くとこんな感じにログが表示されます。（下の画像で赤枠で囲ったところ）

ファイル構成

今回は、これを wp-content/plugins/ ディレクトリの下に配置してください。

my-block.php

add_actionで、hook「enqueue_block_editor_assets」を一つ目の引数に指定して、二つ目の引数は、jsファイルを指定した関数を入れています。hookに付いては、Gutenberg BlockのREADMEにこんな感じで書いてあります。

The enqueue_block_editor_assets hook is only run in the Gutenberg editor context when the editor is ready to receive additional scripts and stylesheets.

<?php
/*
Plugin Name: Javascript console log Plugin
*/

function myguten_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        plugins_url( 'myguten-script.js', __FILE__ )
    );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

myguten-script.js

このファイルは一行、console.log を書くだけです。

console.log('hello gutenberg block');

動作確認

WordPressの設定画面 – Pluginsを開いて「Javascript console log Plugin」が一覧に表示されていたらActivateします。

Activateしたら、DevtoolでJavascriptのコンソールを開いた状態で、新規投稿の画面を開きます。そこでログが確認できたら今回のPluginは完成です。