HTML mode per block

[mtias]

Instead of offering the full text mode so prominently as the way to edit HTML, what if we add a mechanism to every block (in the advanced settings of the inspector) to "edit as HTML"? I'd imagine it would convert the block to an HTML block, which supports preview. This also solves the issue of switching and not knowing which HTML applies to what.

The text mode would still exist for different reasons, but perhaps we can make it way less prominent.

cc @jasmussen @karmatosed @folletto

[jasmussen]

I kind of love this idea. It seems like it would make any "document surgery" way more convenient, while still actually behaving like a traditional text mode for any old posts being edited in the Classic Text block. We could potentially put the full-on text mode inside the ellipsis menu mocked up in #2460

[mtias]

We could potentially put the full-on text mode inside the ellipsis menu mocked up in

Indeed.

[folletto]

I think it's worth an exploration! :)

And I agree making it less prominent makes sense. In that case I'd consider a keyboard shortcut to switch between the two, because, y'know, power users :)

[karmatosed]

I like this idea. Would it be the case that only that block would get messed up if they edited wrongly? My thinking there is that avoids them wrecking by accident the entire document. Some way to just delete per block could be nice.

It also avoids the 'sea' of text that text mode presents. Being able to just go into the one you want as a huge benefit. I would +1 to a keyboard shortcut but also have a non keyboard option, just not that obvious. Obviousness is where this option creates a trap.

[folletto]

Yep, sorry if I wasn't clear: the keyboard shortcut should be on top of existing UI as above, not replacing it as the unique way to access it.

[mtias]

Would it be the case that only that block would get messed up if they edited wrongly? My thinking there is that avoids them wrecking by accident the entire document.

Yes, exactly. And it isolates the HTML comments too, so you don't see them.

[jwold]

Wanting to clarify if my understanding of what this ticket is trying to accomplish is correct. Added some annotations to the design to validate.

[mtias]

@jwold that's correct. Though the "Edit as HTML" might make more sense below the trash icon on the block instead of in the inspector. Something to play with.

[jwold]

@jwold that's correct. Though the "Edit as HTML" might make more sense below the trash icon on the block instead of in the inspector. Something to play with.

That could work. I'm guessing this icon could make sense:

[mtias]

There's a special HTML code icon that we use for the HTML block.

[jasmussen]

I mistakenly posted mockups on the PR for this (#2797 (comment)) as opposed to here. But @iseulde raises a great concern on that post too (#2797 (comment)) so this is a good opportunity to refresh the mockups a bit. CC: @jwold

Ella's comment:

@jasmussen Honestly my first thought with the ellipsis (both at block level and document level) was... not another hidden area. We already have the inspector, which kind of acts as a place were all the advanced stuff goes. Also for the one at the top next to publish, is that not staff that could go in the document inspector? The generic cog and ellipsis next to each other feel quite strange. What doe those even mean? What's the difference? I understand the need for something at the inline block level, where we need a solution for overflow, I'm still wondering though if we can't just put an ellipsis there that would open up the inspector (and get rid of the other one).

Solid points.

The inspector is where "advanced stuff" goes, so why do we need an ellipsis on the quick toolbar?

My answer to this is to suggest that items in the ellipsis aren't necessarily advanced, but rather overflow — items from the quick toolbar that didn't fit. These two mockups did not help convey that message, pretend they don't exist.

Here are better mockups. This is the desktop, there's room for all items in the quick toolbar:

On mobile, the items pop off the right as the screen gets smaller. First, the HTML editor mode and footnote (example button) pop off, then if the screen grows smaller, the strikethrough also:

Does that make sense?

[ellatrix]

@jasmussen Yes, as noted in my comment, I understand that this is for overflow, whereas the other is for advanced items, but I still wonder if we can't blur that boundary and overflow into the "inspector", whatever the form is (mobile/desktop)? I also'd like to rephrase that the issue with the block toolbar/inspector is relevant for the document toolbar/inspector as well. There we even have a cog and an ellipsis right next to each other, which I personally find confusing. When I need something, and I don't know where it is, I'll need to look under two icons which just both tell me "here is general stuff".

[jasmussen]

It's a solid argument. I'll keep thinking about what the best approach is, here. As it is right now, it's very much emulating mobile patterns.

[afercia]

Just as a reminder: a "text mode" with a simple textarea is a must-have for accessibility.

[mtias]

Done in #2797. Nice work @youknowriad !