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

gutenberg WordPress

基本は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' ),
	);
} );

注意

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

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

Gutenbergのビジュアルエディタとコードエディタの切り替えなどを検出する方法
ブロックエディタには「ビジュアルエディター」と「コードエディター」の二種類のエディタが用意されており、気軽に切り替えることができます。ビジュアルエディターコードエディターエディタにデザインを適用させるためにクラスを付与していたのですが、エデ

コメント

タイトルとURLをコピーしました