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

公開

PowerCMS Xのカスタム編集タイプでコンポーネントをベースにしたブロックエディタ(設計済のHTML/CSSコンポーネントに対応した入力フィールドを用意するブロックエディタ)を実装する個人プロジェクトです。これまでの記事はタグ「ComponentBlocks」一覧」でご覧いただけます。

10月に入りVue.jsの学習も兼ねてまた少し制作した結果、いくつかの大きな改良ができました。

  • Vue.jsコンポーネントのdataに保存していたorderに頼らずブロックやフィールドを操作できるようになり、CMSに保存するJSONもより簡素になりました
  • マルチブロックが複数定義できるようになりました(フロントエンドへの出力時に2カラム・3カラム等の出し分けが容易になります)
  • マルチブロック内でdlやtableのように入力フィールドを追加するタイプのブロックが利用できるようになりました
  • マルチブロックで利用可能なブロックが指定可能になりました
  • ブロックやフィールドにあるハンドルでドラッグしてブロックやフィールドの順序を変更した場合、フォーカスはドラッグ操作をした要素に残るようにしました
  • フィールドの追加・削除・上下操作の処理を別ファイルに書き出しました

また、30近くのブロックを使ってコンテンツを制作してみたところ、現時点ではパフォーマンスに問題はないと感じています。

フォーカス制御についての補足

  • ブロックやフィールドの上下ボタンを押すと、フォーカスは押したボタンに残ります
    • 最上位のブロック・フィールドになり上ボタンが非表示になった時は下ボタンにフォーカスが移ります(最下位になった場合はその逆)
  • ブロックやフィールドを削除した場合、1つ前のブロックやフィールドにフォーカスが移ります
  • ブロックやフィールドにあるハンドルでドラッグしてブロックやフィールドの順序を変更した場合、フォーカスはドラッグ操作をした要素に残ります