PowerCMS Xのカスタム編集タイプでコンポーネントをベースにしたブロックエディタ（設計済のHTML/CSSコンポーネントに対応した入力フィールドを用意するブロックエディタ）を実装する個人プロジェクトです。これまでの記事はタグ「ComponentBlocks」一覧」でご覧いただけます。
さて、一昨日「入れ子のブロック」の実装方法について書いたのですが、結論としては頭の中で描いていた別案で編集画面を実装してみました。既にベータ版や画面キャプチャが出ていますし、「ブロックエディタではサブブロックが定義できる。」というツイートがあるのでご覧いただければと思いますが、PowerCMS 6の新しいエディタに似たものにしました。マルチブロック内でも画像ブロックやインラインのTinyMCEを備えたテキストブロックは利用できます。
まず、複数のブロックを含めることができるブロックであることから「マルチブロック」と命名しました。マルチブロックの中にブロックを追加できるのですが、2カラム・3カラムなどを実現するために「コンテナ」で1つ以上のブロックをグルーピングするようにしました。貨物列車に例えると貨車がマルチブロック、荷物がブロック、1つ以上の荷物（ブロック）をまとめて収納しているのがコンテナです。
入れ子のブロックで何が大変かといえばやはり見た目だと感じます。どうしてもゴチャゴチャした感じがするので余白・ボーダー・背景色を使い、要素をしっかりグルーピングすることを意識しています。ブロックの上下・削除ボタンはスマートフォンでも押すことができるサイズの共通コンポーネントを流用しています。
