PowerCMS Xのカスタム編集タイプでコンポーネントをベースにしたブロックエディタ（設計済のHTML/CSSコンポーネントに対応した入力フィールドを用意するブロックエディタ）を実装する個人プロジェクトです。これまでの記事はタグ「ComponentBlocks」一覧」でご覧いただけます。
10月に入りVue.jsの学習も兼ねてまた少し制作した結果、いくつかの大きな改良ができました。
- Vue.jsコンポーネントのdataに保存していたorderに頼らずブロックやフィールドを操作できるようになり、CMSに保存するJSONもより簡素になりました
- マルチブロックが複数定義できるようになりました（フロントエンドへの出力時に2カラム・3カラム等の出し分けが容易になります）
- マルチブロック内でdlやtableのように入力フィールドを追加するタイプのブロックが利用できるようになりました
- マルチブロックで利用可能なブロックが指定可能になりました
- ブロックやフィールドにあるハンドルでドラッグしてブロックやフィールドの順序を変更した場合、フォーカスはドラッグ操作をした要素に残るようにしました
- フィールドの追加・削除・上下操作の処理を別ファイルに書き出しました
また、30近くのブロックを使ってコンテンツを制作してみたところ、現時点ではパフォーマンスに問題はないと感じています。
フォーカス制御についての補足
- ブロックやフィールドの上下ボタンを押すと、フォーカスは押したボタンに残ります
- 最上位のブロック・フィールドになり上ボタンが非表示になった時は下ボタンにフォーカスが移ります（最下位になった場合はその逆）
- ブロックやフィールドを削除した場合、1つ前のブロックやフィールドにフォーカスが移ります
- ブロックやフィールドにあるハンドルでドラッグしてブロックやフィールドの順序を変更した場合、フォーカスはドラッグ操作をした要素に残ります