いつもKARTE Blocksをご活用いただきましてありがとうございます。ブロックを追加する際に、指定したエリアの前後にブロックを追加できるようになりました。

このページでは、具体的な変更点について説明させていただきます。

どのように変わるのか?

変更前

ブロックタイプ「HTMLの追加」で追加される位置は「設定したブロックエリアのDOM内の末尾」になります。

例えば、下記のようなHTMLをブロックエリアで指定するとします。

<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
</div>

その場合、HTMLの追加で追加されるのは下記になります。

<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
  <p class="item">F</p> /* ここにBlocksで設定したHTMLが追加される */
</div>

変更後

ブロックタイプ「前にコードを追加」、「後ろにコードを追加」が新しく追加されました。
下記のようにブロックエリアで設定したCSSセレクタに該当するHTMLの前後に追加することが可能です。

ブロックエリアの前に追加

<p class="item">F</p> /* ここにBlocksで設定したHTMLが追加される */
<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
</div>

ブロックエリアの後ろに追加

<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
</div>
<p class="item">F</p> /* ここにBlocksで設定したHTMLが追加される */

仕様変更の対象は?

既に設定しているブロックについては、原則変更前の仕様のままとなります。

「置き換えブロックの追加」から新規でブロックを作成し、ブロックタイプで「前にコードを追加」、「後ろにコードを追加」を選択した場合に変更後の仕様が適用されます。