段落を指定すると吹き出しと人物が表示されるカスタムブロックを制作したいです。
具体的には段落内が<span>で囲まれるようにすると完成なのですが、カスタムブロックで自動で<span>を追加する方法をご教示ください。
元のブロック
html
1<p>あいうえお</p>
Gutenberg内に読み込むjs
js
1(function () { 2 var blocks = wp.blocks; 3 blocks.registerBlockStyle('core/paragraph', { 4 name: 'woman', 5 label: '会話形式-女性' 6 });
Gutenberg内に読み込むcss
css
1.is-style-woman{ 2 padding-left: 84px; 3 padding-right: 0; 4 background: url(../images/qa/icon_woman.gif) no-repeat top left; 5} 6p span{ 7 display:block; 8 position:relative; 9 padding:24px 18px; 10 border:1px solid #999999; 11 border-radius:18px; 12} 13.is-style-woman span:before{ 14 content: ''; 15 border: 10px solid transparent; 16 border-right: 15px solid #555555; 17 position: absolute; 18 right: 100%; 19 top:18px; 20} 21.is-style-woman span:after{ 22 content: ''; 23 border: 10px solid transparent; 24 border-right: 15px solid white; 25 position: absolute; 26 right: calc(100% - 1px); 27 top:18px; 28}
jsとcssでダッシュボード内にカスタムブロックを生成するためfunction.phpに追加する記述
php
1/*------------ 2Gutenbergに対応したエディター独自タイル追加 3------------*/ 4function add_my_assets_to_block_editor() { 5 wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/gutenberg/block_style.css' ); 6 wp_enqueue_script( 'block-custom', get_stylesheet_directory_uri() . '/gutenberg/block_custom.js',array(), "", true); 7} 8add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );
ひとまず追加したカスタムブロックを指定するとHTMLが以下のように変更されるのは出来ました。
html
1<p class="is-style-woman">あいうえお</p>
↓カスタムブロックを指定しただけでspanで囲われた状態↓にしたいのですが、どのようにすれば良いのでしょうか?
html
1<p class="is-style-woman"><span>あいうえお</span></p>
自分の知識ですと、single.php 内で .wrapInner を使用して<span></span>を追加してあげるjavascriptを書くのが限界で、恐らく表示される時に時差が出来るかと思うので、出来れば素直に最初から<span>を付与してあげたいです。
どのようにすればよいのでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。