Vue.jsで実装しているブロックエディタの汎用化に向けた考察(2)

公開

ブロック定義の編集画面

2月26日の記事「Vue.jsで実装しているブロックエディタの汎用化に向けた考察」において「ブロックのデータを保存するモデルを用意してUIやデータ構造を入力してもらう」という案を書きました。これを具現化すると以下の画像のようにブロック名と入力UIのテンプレート、そしてVue.jsのデータ構造を入力できる編集画面になりました。(データ定義部分はまだまだ作り込みが必要です。)
見出しブロックの情報を入力する画面のサンプル

入れ子のブロック

入れ子のブロック…つまり2カラムや3カラム構成で好きなブロックを使用したいケースを考えてみましたが、どうもロジック・データ・UIが複雑になりそうです。2カラムの中に増減するフィールドを備えたブロックが入る場合はさらに複雑そうです。

マルチカラムの始まり・マルチカラムの区切り・マルチカラムの終わりをブロックの間に挿入するとするとロジック・データ・UIはシンプルになりそう(スマートフォンやタブレットでも編集できそう)ですが、編集のしやすさ・完成イメージのしやすさが気になります。編集画面とプレビューが簡単に切り替え可能になれば解決するのかもしれませんが、フロントのビューをどのようにして反映するかという問題が出てきます。Craft CMSは編集とプレビューが同時にできて、割と瞬時にテキストが反映されますよね。