【WP Gutenberg】カスタムブロックを使用して吹き出しと人物が表示できるようにしたい

Question

段落を指定すると吹き出しと人物が表示されるカスタムブロックを制作したいです。
具体的には段落内が<span>で囲まれるようにすると完成なのですが、カスタムブロックで自動で<span>を追加する方法をご教示ください。

元のブロック

<p>あいうえお</p>

Gutenberg内に読み込むjs

(function () {
    var blocks = wp.blocks;
    blocks.registerBlockStyle('core/paragraph', {
        name: 'woman',
        label: '会話形式-女性'
    });

Gutenberg内に読み込むcss

.is-style-woman{
    padding-left: 84px;
    padding-right: 0;
    background: url(../images/qa/icon_woman.gif) no-repeat top left;
}
p span{
	display:block;
	position:relative;
	padding:24px 18px;
	border:1px solid #999999;
	border-radius:18px;
}
.is-style-woman span:before{
    content: '';
    border: 10px solid transparent;
    border-right: 15px solid #555555;
    position: absolute;
    right: 100%;
    top:18px;
}
.is-style-woman span:after{
    content: '';
    border: 10px solid transparent;
    border-right: 15px solid white;
    position: absolute;
    right: calc(100% - 1px);
    top:18px;
}

jsとcssでダッシュボード内にカスタムブロックを生成するためfunction.phpに追加する記述

/*------------
Gutenbergに対応したエディター独自タイル追加
------------*/
function add_my_assets_to_block_editor() {
    wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/gutenberg/block_style.css' );
    wp_enqueue_script( 'block-custom', get_stylesheet_directory_uri() . '/gutenberg/block_custom.js',array(), "", true);
}
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );

ひとまず追加したカスタムブロックを指定するとHTMLが以下のように変更されるのは出来ました。

<p class="is-style-woman">あいうえお</p>

↓カスタムブロックを指定しただけでspanで囲われた状態↓にしたいのですが、どのようにすれば良いのでしょうか？

<p class="is-style-woman"><span>あいうえお</span></p>

自分の知識ですと、single.php　 内で　.wrapInner　を使用して<span></span>を追加してあげるjavascriptを書くのが限界で、恐らく表示される時に時差が出来るかと思うので、出来れば素直に最初から<span>を付与してあげたいです。

どのようにすればよいのでしょうか？
よろしくお願いいたします。

Answer 1

ひとまず本文中にもある思いついた解決方法。

	$('.is-style-woman').wrapInner('<span />');