Freeform Block: Add "Kitchen Sink"

[jasmussen]

Let's not actually call it "kitchen sink", let's call the ellipsis button "More".

The ellipsis opens an expanded palette, which holds more formatting buttons, that are perhaps less commonly used:

The expanded palette, is a toggle. You open it and have access to the buttons inside until you close it with the ellipsis button again.

[BoardJames]

@jasmussen What is the name of the ellipsis icon in dashicons? I can't seem to find it.

[jasmussen]

What is the name of the ellipsis icon in dashicons? I can't seem to find it.

Good call. There isn't one. But I'm making one for you that will be named ellipsis.

Gutenberg PR here: #1070 (merging asap) Edit: merged.

Upstream PR here: WordPress/dashicons#196

[BoardJames]

I have a basic implementation here:
#1153

[jasmussen]

Nice!

[BoardJames]

@jasmussen Can you identify the buttons in the kitchen sink for me?

It looks like:

1. Indent
2. Outdent
3. Text colour
4. ???
5. Insert Symbol
6. Clear format?

[jasmussen]

I apologize for the belated reply, the wordcamp has taken all of my time.

Here are the kitchen sink buttons in order (and by the way let's never call it "kitchen sink" anywhere ;) ). From the left:

• Indent
• Outdent
• Text color
• Paste as text
• Insert symbol
• Clear formatting

Text color may be difficult, and totally okay to try and approach in a separate PR if need be.

[BoardJames]

Text colour may be challenging but I can control they way it renders the html that TinyMCE outputs fairly easily. The insert symbol button will probably be more problematic (same with insert link) because they go through the modal dialog code that TinyMCE uses. They work fine but it's completely different to the rest of gutenberg so I'd have to reimplement them to match.

[BoardJames]

I am working on adding the buttons in the branch update/1038-more-draw-add-buttons . It is very much a work in progress as quite a few parts don't work properly but this is what is looks like so far:

The current problems are:

1. The text color button requires a lot of UI work to implement.
2. The insert symbol dialog always inserts the symbol at the document start (probably because of a bad interation with the focus code)
3. The link dialog has no obvious way of removing a link (and it's obviously using a completely different UI to the rest of Gutenberg.
4. Anything showing a popup probably won't work (or at least work well) on mobile.

[jasmussen]

The text color button requires a lot of UI work to implement.

Then let's open a separate ticket for this, and work on it separately. That's no problem.

I tried running the branch, and I know it's very much a work in progress so it's probably on the radar, but got these JS errors:

The insert symbol dialog always inserts the symbol at the document start (probably because of a bad interation with the focus code)

Is this fixable? If not we should probably remove the button.

The link dialog has no obvious way of removing a link (and it's obviously using a completely different UI to the rest of Gutenberg.

It would be nice if we could use the same link component as the Editable does. I think there's also a PR for removing a link there #1146.

In general it's totally fine for this block to use a couple of other tricks than the rest of the interface. So it's okay with a few tinymce specific popups here and there, no worries. Can I help with making it mobile friendly btw? Feel free to send me instructions to test.

[BoardJames]

Is this fixable?

I hope that all the problems I listed are fixable - I just listed them so you wouldn't expect a finished product yet.

Still the Javascript errors you are getting are a worry - I am not getting any errors on Linux.

It would be nice if we could use the same link component as the Editable does.

I will look into it. If at all possible I want to avoid writing any HTML manipulation code - that should be delegated to TinyMCE. This UI should be a thin layer, not a reimplementation.

[BoardJames]

@jasmussen After coming back from a short holiday and seeing the great work that Ella has done ( #1394 ) which to me looks like the best solution I've seen so far, should I be continuing to work on the freeform block? Where can I be of use?

[jasmussen]

If you think Ella's approach is a more scalable approach to this block type, then I would consider this particular branch successful in exploring the other approach. I really appreciate you working on this, it will be a valuable showcase to look at as we continue to refine the block API.

I think if you could bring the Table block branch home, we'd be in the home stretch.

Ella also had a question about TinyMCE more in general here: #1247 (comment)

There's also a few tasks here that I don't know if are relevant anymore, but please feel free to have a look: https://github.com/WordPress/gutenberg/projects/3

Thanks James, great work here!

[jasmussen]

This is fixed recently!