Details Block

[georgeh]

No description provided.

[georgeh]

@jasmussen I added the styles that I've been working on for flip book and modal. They aren't great yet and I really need to figure out the editor interactions for the modal style, but if you have time to look at the flip book animations that'd be helpful.

[jasmussen]

This is cool! I promise I'll take a look as soon as I can, another task just landed for me today :)

[jasmussen]

Took a quick look today. I think this is cool! If the open source citizen who currently has a details block in the plugin directory is uninterested in a PR for the work we've done to remove div wrappers, then I think there will still be a place for a details block that does pare it down to just the basic syntax.

Especially if we can get the flipcard 3D folding style to work — I'll take a quick look and see what isn't working. This is what I saw:

Even just the default style, and that folding card, would make for a nice offering!

Can you talk a little about the modal style? I wasn't quite sure where to edit and how it worked. How does the tabbing work?

[jasmussen]

I took a look at the code, and I believe I can get the flip card working! I'll let you get back with thoughts (perhaps a rebase pretty please?) and then I'll push some CSS stuff tomorrow to get the flipping to work.

[georgeh]

@jasmussen The modal stuff is still very much in the concept stage; the interactions will need work to get right. I'll ping you on that when I'm happy with how editing feels. I don't want to ship this until WordPress/gutenberg#24558 goes out, but I might wind up pulling the modal style until it's more solid.

I'm happy to hear that the flipcard animation should work, thanks!

[jasmussen]

I rebased, pushed some polish, and got basic flipping working. Especially in the editor, that's the good news:

However upon adding a variety of content inside the block, I realized a limitation of this approach. Here's the bad news, and a GIF showcasing it:

It's all about the markup, which is this:

<details>
	<summary>Summary title</summary>
	<p>Paragraph</p>
	<img />
	<ul>...</ul>
	<p>Another paragraph</p>
</details>

The problem here is that there is no single element that constitutes the "back-side" of the folding card. There are multiple elements, as many as you'd like to add. The reason it works in the editor, is that there's a div wrapper which we can fold with all contents inside, as opposed to (and as amusingly shown in the frontend GIF), multiple cards folding and breaking the 3D effect.

The following markup change would work on the frontend also:

<details>
	<summary>Summary title</summary>
	<div>
		<p>Paragraph</p>
		<img />
		<ul>...</ul>
		<p>Another paragraph</p>
	</div>
</details>

Because then we could fold the div, as opposed to individually folding each child element. However that does detract from the simplicity of the details block itself, even if it would be valid markup.

What do you think?