【WordPress】自作のタブやタイムラインにはショートコードを使う

なるべくプラグインを使うことなく、タブやタイムラインやアコーデオンなどの機能をHTML+CSS（+JavaScript）で使おうとしています。ただ、その場合の例として

<div class="tab-wrap">
<div class="tab-group">
<div class="tab is-active">1st</div>
<div class="tab">2nd</div>
<div class="tab">3rd</div>
<div class="tab">4th</div>
</div>
<div class="panel-group">
<div class="panel is-show">
～タブ１の記事本文～
</div>
<div class="panel">
～タブ２の記事本文～
</div>
<div class="panel">
～タブ３の記事本文～
</div>
<div class="panel">
～タブ４の記事本文～
</div>
</div>

という感じではないでしょうか。この時記事本文以外を「カスタムHTML」ブロックとし、記事本文を「段落」のブロックとして記載すると「カスタムHTML」ブロックがエラーとなり「ブロックのリカバリー」が表示されます。どうも「カスタムHTML」が＜div＞で終わったり＜/div＞で始まったりするのはいけないらしいです。

: ブロックのリカバリー

ここでブロックのリカバリーが表示されないようにできないかと、以下のように考えました。（タブ１の記事本文までのカスタムHTML）

<!-- wp:html -->
<div class="tab-wrap">
<div class="tab-group">
<div class="tab is-active">1st</div>
<div class="tab">2nd</div>
<div class="tab">3rd</div>
<div class="tab">4th</div>
</div>
<div class="panel-group">
<div class="panel is-show">
<!-- /wp:html -->

＜!-- wp:html --＞と＜!-- /wp:html --＞で囲んでみますと「ブロックのリカバリー」は表示されなくなりました。しかし、次に記事を編集しようと開いてよく見ますと「カスタムHTML」ブロックの中身が消えているのです。そのまま「更新」をしてプレビューを確認しますとタブがありませんでした。

まさか、記事本文を「段落」ブロックで書き、HTMLに変換してコピーし、「カスタムHTML」ブロック内にペーストするようなことにはしたくありません。