【WordPress】非React(JSX)でのブロックエディターカスタマイズ

更新日：2025/04/28

WordPressのブロックエディターはReactベースのJavaScriptで動作しています。
そのためブロックエディターのカスタマイズは、Reactでの開発が推奨されます。
しかし環境構築に必要な時間とディスク資源コストが大きく、数十行レベルの小規模なカスタマイズでは割に合わないことがあります。

実際には、環境構築をしなくてもネイティブなJavaScriptでカスタマイズを行うことができます。
そこで今回は、ネットで公開されているReactベースのサンプルを、ネイティブに置き換える方法を中心に、ブロックエディターカスタマイズの要点をお伝えします。

 

JSXからネイティブJavaScriptへの置き換え

importの置き換え

@wordpressからのimportは、window.wpオブジェクトからの分割代入に置き換えることができる。

置き換え前

import { RichTextToolbarButton ,BlockControls} from '@wordpress/block-editor';

@wordpress を　wpオブジェクトに置き換え、/ 以降をwpオブジェクトのメンバーとして記述する。

置き換え後

const {RichTextToolbarButton ,BlockControls} = wp.blockEditor;

ハイフンを含む場合、キャメルケース（2番目以降の単語の先頭文字を大文字にして連結）で記述する。
変数に代入しているだけなので、wp.blockEditor.RichTextToolbarButton 等で記述することもできる。

JSXの置き換え

JSXは、window.wp.element.createElement()関数に置き換える。

置き換え前

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

registerBlockType( "my-blocks/test-block",{
	edit: ()=>{
		const idText = "test-id";
		const classText = "test-class";

		return (
			<div
				id={ idText }
				className={ classText }
			>
				<p>
					こんにちは！
				</p>
			</div>
		);
	}
} );

置き換え後

const { createElement } = window.wp.element;
const { registerBlockType } = window.wp.blocks;

registerBlockType( "my-blocks/test-block",{
	edit: ()=>{
		const idText = "test-id";
		const classText = "test-class";

		return createElement(
			"div",
			{
				id : idText ,
				className : className
			},
			createElement(
				"p",
				{},
				[
					"こんにちは！",
				]
			)
		);
	}
} );


createElement( type , props , children )

type:タグ名または要素TextControl等の要素生成モジュール
props: 要素の属性値をセットしたオブジェクト
children: 内側（子）要素

 

jsとcssの読み込み

jsとcssの読み込みは、JSXと同じです。
次のページで解説しているので、読んでみてください。

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

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

更新日：2025/04/28

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

関連記事

スポンサーリンク

記事の内容について

null

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

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

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

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

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

 

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