Gutenbergになってから、カテゴリー選択項目のDOM操作

Question

Gutenberg投稿画面のDOM操作をするにあたり、
調べたところ、“wp.domReady”を使えば可能と書かれていましたが、
投稿画面、“文書”エリアの中にある「カテゴリー」項目内には効きませんでした。

もし原因がわかるかたがいらっしゃいましたら、ご教授してもらえれば幸いです。
書いたコードは以下になります。

【function.php】

function add_my_block_editor() {
	wp_enqueue_script(
		'block-script',
		get_template_directory_uri() . '/js/my-gutenberg.js',
		array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
		'1.0.0',
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'add_my_block_editor' );

　
【my-gutenberg.js】

wp.domReady(function () {
  // editor root
  const target = document.getElementById('editor');

  // visual editor
  const editor = target.getElementsByClassName('editor-post-taxonomies__hierarchical-terms-choice');
  Array.prototype.forEach.call(editor, e => e.classList.add('domChange'));
});

Answer 1

Gutenbergのエディタを構成する要素はすべからくReactコンポーネントであり仮想DOMであり
随時更新がかかるため、直接的なDOM操作はすぐに上書きされてなかったことにされます

WP本体と同様にGutenbergのコンポーネントには
各所で色々とフィルタフックが設定されてるので
それで色々と操作することもできますが
修正したいところにフィルタフックがなかったらどうしようもないですかね

gutenbergにはこれといった公式の開発者向けドキュメントがなく更新頻度がかなり高いので
Githubでソースを追うのが一番いいかもしれません

Github gutenberg

多分エディタのサイドバーのコンポーネントはこの辺

Github gutenberg edit-post/src/components/sidebar

Comments

[akiyum]

ご回答ありがとうございます。
該当部分、アコーディオンになっているので、展開したときに
おそらく上書きされるのでしょうね。

いただきました、参考URLをおってそれらしきものを探してみようと思います。
助かります。