回頭看之前跳過的教材
https://twillcms.com/guides/page-builder-with-blade/configuring-the-page-module.html
我先跳過圖片設定的段落，直接在 PageController 加入以下內容
試試看會不會壞掉？
$form->add(
BlockEditor::make()
);
打開 Pages 的編輯頁面，會看到下面出現 Add content 以及 Open in editor 按鈕
不論選哪種，都是 Image 跟 Body text 兩種 block 可以加入
我先使用 Add content 按鈕，新增了一個文字、一個圖片、再一個文字、再一個圖片
直接按下 Update，會發現儲存成功！
來觀察一下資料庫，觀察一下這種資料是怎麼存的
（我只記錄主要欄位 額外欄位我先省略）
twill_blocks
| id | blockable_id | blockable_type | position | content | type |
|---|---|---|---|---|---|
| 1 | 1 | App\Models\Page | 1 | json with html attr | text |
| 2 | 1 | App\Models\Page | 2 | {} | image |
| 3 | 1 | App\Models\Page | 3 | json with html attr | text |
| 4 | 1 | App\Models\Page | 4 | {} | image |
這邊看起來很單純，就是 Laravel 原生 Many to Many (Polymorphic) 功能的結構
只不過 laravel 官方慣例會叫 blockables 而這邊命名為 blocks 而已
比較奇怪的是圖片那兩行都是 {}，那圖片的資料存在哪呢？
twill_medias
| id | uuid | filename |
|---|---|---|
| 1 | 30463fbb-aaef-43cb-936a-2deb53bd9973/01-doge.jpeg | 01-doge.jpeg |
| 2 | b1ea0fb5-6f57-45fb-9903-d22049c5eb60/02-shiba.png | 02-shiba.png |
找到圖片的資訊了，這邊的 uuid 欄位我不太喜歡，因為 / 後面的部份跟 filename 重複了，不知這樣設計的考量是？
接著來找檔案在哪裡
➜ twill-play git:(main) ✗ tree storage/app/public/
storage/app/public/
└── uploads
├── 30463fbb-aaef-43cb-936a-2deb53bd9973
│ └── 01-doge.jpeg
└── b1ea0fb5-6f57-45fb-9903-d22049c5eb60
└── 02-shiba.png
還滿讚的，既保留了檔案名稱，也用 uuid 資料夾保證了檔案路徑的唯一性！
但是 twill_blocks 跟 twill_medias 的資料又是怎麼對應的？
twill_mediables
| id | mediable_id | mediable_type | media_id |
|---|---|---|---|
| 1 | 2 | blocks | 1 |
| 2 | 2 | blocks | 1 |
| 3 | 2 | blocks | 1 |
| 4 | 4 | blocks | 2 |
| 5 | 4 | blocks | 2 |
| 6 | 4 | blocks | 2 |
原來在這裡，又用到了 Laravel 原生 Many to Many (Polymorphic) 功能的結構
而且這次就是按照慣例叫做 mediables 囉，我這邊省略了一些欄位，是有關圖片寬度、高度的
每張圖片分別 crop 成 Desktop Tablet Mobile 三種尺寸
現在知道 Block Editor 背後資料怎麼存的 感覺安心不少 也學到很多
來試試看 GUI 吧，也就是點擊 Open in editor 按鈕
呵呵悲劇囉，看來還缺少 site.blocks.text 以及 site.blocks.image 兩種 view 模板
乖乖繼續跑下一章節吧
https://twillcms.com/guides/page-builder-with-blade/creating-a-block.html
先按照說明 Disable default blocks
然後開始輸入指令
php artisan twill:make:block text
會出現兩個檔案，按照教材把內容放入
resources/views/twill/blocks/text.blade.php 這個是 editor 內的 input UI
resources/views/site/blocks/text.blade.php 這個是實際顯示的模板檔案
php artisan twill:make:block image
一樣出現兩個檔案，把教材內容放入
resources/views/twill/blocks/image.blade.php
resources/views/site/blocks/image.blade.php
這樣就可以了！Open in editor 就不會看到錯誤訊息了
但是，剛剛輸入的文字跟圖片，都沒有顯示
估計是因為資料結構有變吧！
通通刪掉，重新輸入一次
然後更新 config/twill.php 放進教材提供的 crops 內容
這樣就可以了！Block editor 就可以使用了！
ref commit: https://github.com/howtomakeaturn/twill-play/commit/3dbac8d2b78fdf5da06ffd12039ffb7245bb0a46
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式