wordpressのエディター見出しタグを変えたい

wordpressとphpを勉強中のためこの方法が可能なのか知りたいです。
Guternbergで見出しを追加したときにh2・h3と追加されるものを

html
1<h2 class="ttl01"><span>タイトル</span><h2>
2<div class="wrap"><h3 class="ttl02">タイトル<h3></div>
3

<span>をいれたり<div>で囲いクラスをつけたいです。

試したこと

スタイルでクラスを追加してデザインを変えることは
出来たのですがスタイルを選ぶのではなく
見出しのレベルを選んだ時にクラスやspanがつくようにすることは難しいでしょうか。

php
1register_block_style(
2    'core/heading',
3    array(
4        'name'         => 'designh2',
5        'label'        => 'h2',
6        'inline_style' => '',
7    )
8);

どなたかご教授いただければ幸いです。

追記

正規表現で置換してみました！
クラスが存在するかしないかで置換方法をかえているのですが
if分使わずに正規表現でできそうなきもするのですが・・
初心者のためもっとスマートな書き方があれば教えていただきたい。

php
1function wporg_block_wrapper( $block_content, $block ) {
2	if ( $block['blockName'] === 'core/heading' ) {
3		// クラスが元々あるかないかで判定
4		if (preg_match("/class/", $block["innerHTML"])) {
5			$content = preg_replace(
6				'/<h2(.*?)class="(.*?)"(.*?)>(.*?)</h2>/',
7				'<h2$1class="$2 designh2"$3><span>$4</span></h2>',
8				$block_content);
9		} else {
10				$content = preg_replace(
11				'/<h2(.*?)>(.*?)</h2>/',
12				'<h2 class="designh2"$1><span>$2</span></h2>',
13				$block_content);
14		}
15     return $content;
16  }
17  return $block_content;
18}
19 
20add_filter( 'render_block', 'wporg_block_wrapper', 10, 2 );

html
1<h2 class="testadmin designh2" id="anc01"><span>class and id h2</span></h2>
2<h2 class="designh2"><span>simple h2</span></h2>

行動規範の内容に同意します

回答2件

ベストアンサー

既存のブロックの出力されるHTMLの構造を変更するのは難しいです
ブロックがそういうことができるように作られたものでないとできません

見出しブロックの出力のソースコードを見ると非常にシンプルなブロックであることがわかります
クラスを多少弄れるようになってる以外は出力のカスタマイズの余地がありません

~~登録されたheadingブロックタイプにrender_callbackを追加して~~
~~出力時に構造を変更して出力するなんて力技もできなくはないでしょうが~~
そこまでやるならフロント側のjsで処理するか
自分でブロック作った方がいいでしょうね

追記

ちょっと試しにheadingブロックをいじってみようと思ったら
WordPressコアのブロックタイプはそもそもほとんどが
サーバーサイドのregister_block_typeによって登録をされておらず
WP_Block_typeインスタンスも作られてないようなので
どうもrender_callbackを後付けする方法がなさそうです

サーバーサイドで処理するならrender_blockフィルタでしょうかね

このフィルタが用意されてるってことはブロックごとに
出力時にHTMLを改変する使い方も想定してるってことでしょう

フロントのjsで処理するとかよりはrender_blockフィルタを使う方が
WordPressの想定する使い方に沿っているかもしれません

投稿2020/03/24 05:07

編集2020/03/24 16:08