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

これでいけたっぽい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

よく読まれている記事

タグリスト

Advanced Custom Fields bbPress Bogo CSS Googleストリートビュー https Instagram Graph API JavaScript jQuery Lazy Blocks Scratch ScratchJr Shopify Viscuit WordPress カスタムブロック サーバ サーバー ドメイン フリーランス プラグイン プログラミング教育 マルチサイト 仕事場 在宅