Lektor: No Admin for flow fields - lektor

Question

I can not figure out how to get the flow field working in admin,
I would like example shown at shown https://raw.githubusercontent.com/lektor/lektor-assets/master/screenshots/admin.png When I then click through to localhost:5000/admin/root/edit and get the http://i.imgur.com/EPCrBRC.png
Got I feel I am doing something simple wrong. But cutting it down to basic here is what I tried:-
$ cd /tmp/
$ lektor quickstart
Lektor Quickstart
=================
This wizard will generate a new basic project with some sensible defaults for
getting started quickly. We jsut need to go through a few questions so that
the project is set up correctly for you.
Step 1:
| A project needs a name. The name is primarily used for the admin UI and
| some other places to refer to your project to not get confused if multiple
| projects exist. You can change this at any later point.
> Project Name: flow-example
Step 2:
| This is the path where the project will be located. You can move a
| project around later if you do not like the path. If you provide a
| relative path it will be relative to the working directory.
> Project Path [/tmp/flow-example]:
Step 3:
| Do you want to generate a basic blog module? If you enable this the
| models for a very basic blog will be generated.
> Add Basic Blog [Y/n]: n
Step 4:
| Your name. This is used in a few places in the default template to refer
| to in the default copyright messages.
> Author Name [Brendan M. Sleight,,,]:
That's all. Create project? [Y/n] Y
$ cd flow-example/
$ echo "[fields.extra]
> label = Extra
> type = flow
> flow_blocks = text" >>./models/page.ini
$ cat ./models/page.ini
[model]
name = Page
label = {{ this.title }}
[fields.title]
label = Title
type = string
[fields.body]
label = Body
type = markdown
[fields.extra]
label = Extra
type = flow
flow_blocks = text
$ lektor server
* Project path: /tmp/flow-example/flow-example.lektorproject
* Output path: /home/bms/.cache/lektor/builds/76682e6a8f99116f0da91bcf96203e94
Started source info update
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Finished source info update in 0.05 sec
Started build
U index.html
U about/index.html
U projects/index.html
Finished build in 0.12 sec
Started prune
Finished prune in 0.00 sec
```

Answer 1

It takes a bit of careful documentation reading to find out what needs to go where to make flow blocks work.
You need to create a folder flowblocks at the same level where your content and models folders are.
Put your flowblock model files in this folder (example: image-paragraph.ini)
Create a blocks folder inside your templates folder.
Put your HTML templates for your flowblock in the blocks folder (example: image-paragraph.html)
Directory structure should look like this:
my-lektor-project
assets
content
flowblocks
image-paragraph.ini (your model)
models
templates
blocks
image-paragraph.html (your template for the block)

Answer 2

Currently the admin responds really badly to misconfiguration. Usually it just dies with an error you can see in the console window. Most likely the flow block itself does not exist or has a bug in it. Just open the console window and look at the error message printed. That might give an indication.

Answer 3

See https://www.getlektor.com/docs/models/flow/
To use Flow you need to define flow block models. If you are not familiar with Flow yet, you should read the Introduction Documentation to Flow first
Defining Models
Flow block models work pretty much exactly the same as Regular Models. The differences are mostly minor and of cosmetic nature. They are stored in the flowblocks/ folder and are ini files just like models.

Answer 4

Best explained with an example.
First, create a model containing a field with type set to flow and put it into models/flow_page.ini.
[model]
name = FlowPage
label = {{ this.title }}
[fields.title]
label = Title
type = string
[fields.body]
label = Body
type = flow
Create a new template in templates/flow_page.html. You can just copy page.html if you want.
Then write the following flow block config to flowblocks/colored_text.ini:
[block]
name = Text Block
button_label = Text
[fields.text]
label = Text
type = markdown
[fields.color]
label = Class
type = select
choices = red, blue, green
choice_labels = Red, Blue, Green
default = red
Now you need a template for the flow block. Add it to templates/blocks/colored_text.html.
<span style="color: {{ this.color }}">{{ this.text }}</span>
Finally, create a new subpage, choose FlowPage under model.
Now you can add the block we defined earlier to the body.