【WordPress】Lazy Blocksプラグインの「Free Content」ブロックをタグで囲んで出力する

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でスタイリング。

これでいけたっぽい。

コメントをどうぞ!

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。承認制のため、反映まで時間がかかることがあります。

CAPTCHA