thumbnail

【Gutenberg】ブロックエディタに任意の要素を追加する

基本はReact

ブロックエディタは React なので、ブロックエディタの持っている情報などを利用するには React を使用したほうがよいです。

コンポーネントを作成

通常通りにコンポーネントを作成します。

data.select などを使用してブロックエディタの情報を利用することも可能です。

コンポーネントを挿入するためのDOM挿入

ブロックエディタの準備完了時に何か動作させるための wp.domReady を使用してコンポーネント挿入用のDOMを用意します。

エディタのトップの文書ツールあたりに要素を追加したい場合は .edit-post-header-toolbar が利用できます。

wp.domReady( function() {
	document.querySelector( '.edit-post-header-toolbar' ).insertAdjacentHTML( 'beforeend', '<div class="test"></div>' );
} );

コンポーネントを render

前項で作成したコンポーネントを TestComponent とすると、以下のような React 標準の書き方でコンポーネントが表示されるようになります。

wp.element.render(
  <TestComponent />,
  document.querySelector('test')
);

実装例

const { Fragment } = wp.element;
const { render } = wp.element;

wp.domReady( function() {
	document.querySelector( '.edit-post-header-toolbar' ).insertAdjacentHTML( 'beforeend', '<div class="test"></div>' );
	render(
		<Fragment>
			Hallo world!
		</Fragment>,
		document.querySelector( '.test' ),
	);
} );

注意

内部の状態で表示を出し分けしている箇所の場合、一度非表示になった後に再度挿入しなおさないと消えてしまいます。

内部の状態の変化を監視する方法はブロックエディタには用意されています。


prev articleprev thumbnail
composerのscriptsで作業効率化
【Laravel】Laravel Dusk時に使用される .env ファイル
next thumbnailnext article
arrow