Add block: Freeform

[jasmussen]

There's been a lot of confusion around what the freeform block is, so here's a new ticket to discuss it from the top, with what we know today.

In short: The freeform block is the old editor, in block form. It's basically this:

but without the visual/text tabs, and with a few changes to the UI. Here's a mockup of how it could look in Gutenberg drapes:

Items that previously went into the "kitchen sink" button, live in the ellipsis menu as a dropdown.

This freeform block supports most of what the old editor does:

• Paragraph dropdown
• bold
• italic
• lists
• quote
• aligns
• links
• strikethrough
• indent/outdent

Undo/redo aren't part of this block, as they are global to Gutenberg. Separators and "Read More" are separate blocks.

The freeform block can be inserted manually. It will also be loaded as a container for everything when you open an old post in the new editor. When you scroll down, the toolbar sticks to the top same as every other Gutenberg block toolbar. If you prefer to write in this block, we should look at fixing #798.

CC: @annaephox @EphoxJames @iseulde

[BoardJames]

Do you have any mockups of what you want the ellipsis/kitchen-sink button to do?

[BoardJames]

Do you want the full screen mode?

[anna-harrison]

@jasmussen thanks for this mockup - looks really good! I think the solution with the ellipsis is really nice

Couple of questions

• will this block allow insertion of things like images and tables?
• if yes, will those toolbars float or replace the block-level toolbar on selection?

[jasmussen]

Do you have any mockups of what you want the ellipsis/kitchen-sink button to do?

Here's one I just put together. The popout stays open until you manually close it:

Do you want the full screen mode?

No, I think being able to dismiss the post settings sidebar and collapse the left navigation sidebar can count as immersive/fullscreen.

will this block allow insertion of things like images and tables?
if yes, will those toolbars float or replace the block-level toolbar on selection?

Really really solid questions.

Insertion maybe not (more on that in a bit), but it should support absolutely support rendering any content that you've inserted in an old post. It seems like we might be able to leverage any floating/inline toolbars that TinyMCE can provide here. I know that's a bit of a non answer but that is intentional so as to leave it a little open ended as to what you might recommend. Thinking of it as "the old editor in block form", the behavior that currently is in WordPress for images and tables and shortcodes — it'd be fine to port that 1:1. CC: @iseulde

So to be clear: the block docked toolbars as shown in these mockups don't change. But it's okay to have popup toolbars for some blocks inside, like the old gallery shortcode, or an image.

That leads me to: should you be able to insert an image in this block?

The answer is probably yes, but I don't yet have a great UI to do this. Ideally we'd be able to leverage the very same inserter we use for the rest of the editor, only when the text caret is inside the freeform block, that's where an image or gallery gets inserted. But obviously you can't insert every block we have here, so the UI is not solid. Perhaps the inserter is limited to a few blocks, in that case? Like Image, Gallery, Separator, Read More? This is something we would probably want to finetune a bit as we go.

[jasmussen]

To be clear, it's probably best to keep the first version of the freeform block as minimal as possible and merge it in. Then we can add more buttons and features in subsequent pull requests.

The kitchen sink should probably not be in V1, for example.

[BoardJames]

I've merged a version 1.

It is currently rather basic and is missing the format dropdown, the link button and the kitchen-sink.

[youknowriad]

@EphoxJames See here for the format toolbar #923 (comment)

[BoardJames]

@youknowriad for the freeform block I've decided to link the buttons more directly to TinyMCE so I can't use editables' format toolbar (and the mockups require something different anyway). On the upside it does make it very easy to add new buttons.

[BoardJames]

I have submitted a pull request to add the format selector (#1030):

[mtias]

Can we close as done and open specific issues for next tasks?

[jasmussen]

Closing this as fixed (🎉) in favor of #1037 and #1038.