Lazy Blocksプラグインを使ってテンプレートを作るとき、他のブロックをロックしたとしても自由にブロックを組み込めるブロック「Free Content」。
他のカスタムブロックはブロック名などがクラス名に付いたdivで囲まれて出力されるけど、このFree Contentだけプラグイン独自のクラスやタグは出力されず、見出しならh、段落ならp、というだけで出力されていました。
何にも囲まれないで出力されるとレイアウトするのに逆にちょっと都合が悪かったので、どうにかできないか調べてみました。
【wp-content/plugins/lazy-blocks/assets/js/index.min.js】
(修正前)
save:function(){return wp.element.createElement(r.Content,null)}
(修正後)
save:function(){return wp.element.createElement("div",{className:"lazyblocks-free"},wp.element.createElement(r.Content,null))}
ここの部分の直前のedit:のところが
edit:function(){return wp.element.createElement("div",{className:"lazyblocks-free"},wp.element.createElement(r,{templateLock:null}))},
こんな感じになっていたので、これを利用して前半の部分を差し込みました。
そしたらこんな感じで出力されました。
<div class="wp-block-lazyblock-core-free lazyblocks-free">
<p>ここに文章など</p>
</div>
あとはこのlazyblocks-free
のクラスを利用して、CSSでスタイリング。
これでいけたっぽい。
コメントを残す