CodeLightsのインタラクティブテキストをみたときに、とっさにやりたいと思ったのは、縦書きで、です。縦書きにするスタイルwrithing-modeというのがあることを知り、早速やってみました。
2018年12月17日追記：
CodeLightsがWordPress5.0で未検証であり、ブロックエディタ編集画面でのダッシュアイコンが文字化け原因がCodeLightsプラグインのようなので、プラグインを停止しました。それに伴い、以下のコードは当サイトでは動きません。
インタラクティブテキストの要素をpで定義しているのですが、それに対して、親要素のdivを設けてflexboxのスタイルを指定しました（display:flex;、align-items:center;←垂直方向の揃えをセンターに）。
また、インタラクティブテキストは元々text-align:centerになっているのですが、縦書きの場合には書き出しの位置を揃えたかったので、インタラクティブテキストの要素pに独自のスタイルを付与しました（text-align:left !important;）。
[cl-itext texts=”猫は 動く もの が好き
猫は 動く 虫 が好き
猫は 動く 指し棒 が好き
猫は 動く しっぽ が好き
猫は 動く マウスカーソル が好き” dynamic_bold=”” animation_type=”zoomInChars” font_size=”30px” dynamic_color=”#1e73be” tag=”p” el_class=”tategaki”]
猫は 動く 虫 が好き
猫は 動く 指し棒 が好き
猫は 動く しっぽ が好き
猫は 動く マウスカーソル が好き” dynamic_bold=”” animation_type=”zoomInChars” font_size=”30px” dynamic_color=”#1e73be” tag=”p” el_class=”tategaki”]
縦書きのコードは以下。
<div style="width: 100%; height: 500px; display: flex; align-items: center; border: solid 1px #f0f0f0; writing-mode: vertical-rl; -ms-writing-mode: tb-rl;">
[[cl-itext texts="猫は 動く もの が好き
猫は 動く 虫 が好き
猫は 動く 指し棒 が好き
猫は 動く しっぽ が好き
猫は 動く マウスカーソル が好き" dynamic_bold="" animation_type="zoomInChars" font_size="30px" dynamic_color="#1e73be" tag="p" el_class="tategaki"]]
</div>上記インタラクティブテキスト部分（ショートコードのcl-itext部分）に付与したクラスel_classのスタイルtategakiは以下。
/* 縦書き用 */
.tategaki {
text-align:left !important;
}