New Block: Description List

[ellatrix]

Description

Fixes #4880

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

This is a block that I think would have been more difficult to implement without the use of light blocks. With light blocks, we're able to use proper semantic tags in the editor, which also allow it to be styled more easily.

To do: it might be could to handle enter/delete from rich text.

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[Soean]

Fixes #4880

[mcsf]

Definitely cool to see how neatly we can build this now.

Now, can we make this more ergonomic? Suggestions:

• dd: Enter twice to start a new dt (not too different from
• dt: Space (like List blocks) to convert to dd
• dd: (not sure about this one) Backspace to to convert to dt
• Add transforms between those two types
• Because DLs are visually so clean, I wonder if we need visual cues to let the user know that they are starting a new dt or dd — but what?

[ellatrix]

Yes, I left that as a to do :D

To do: it might be could to handle enter/delete from rich text.

I think we should also take into account that you can have multiple dt elements (terms) and multiple dd elements (details). In other words, you could have multiple entries explaining a term, and you can have multiple terms for one explanation. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#Multiple_terms_single_description.

Maybe we could have Enter once create a block of the same type, and Enter twice create a block of the other type. This will require more context of surrounding blocks though.

[mcsf]

I think we should also take into account that you can have multiple dt elements (terms) and multiple dd elements (details).

Good reminder. Additionally, this to me reinforces the need for us to somehow address: "Because DLs are visually so clean, I wonder if we need visual cues to let the user know that they are starting a new dt or dd"

Maybe we could have Enter once create a block of the same type, and Enter twice create a block of the other type. This will require more context of surrounding blocks though.

Might work, yeah.

[ZebulanStanphill]

Why is this set to false?

For consistency, I think we should add color controls to this block if we add them to the List block.

[ZebulanStanphill]

I don't think list is a necessary keyword when the title already includes that word. Maybe glossary would be a better keyword to use here?

[ZebulanStanphill]

Suggested change

	description: __( 'List groups of terms and descriptions.' ),
	description: __( 'List of terms and their descriptions.' ),

[ZebulanStanphill]

This, the name, and the category should be moved to a block.json. (Same with other blocks being added in this PR.)

[paaljoachim]

Quite some time has passed since there was any movement here.
What can do to help move this PR forward?

[peroyomas]

Currently both the WHATWG and the W3C HTML5 standards support grouping dt and dd tags using the div element (link to the issue were it was first discussed), which is useful on several cases where a single concept uses more than one dt or dd tag and stuff like CSS and semantics becomes tricky. I think that would be nice to automatically wrap groups of x number of dt followed by x number of dd in div tags, even if in a list the dt and dd elements aren't directly followed by dt or dd slibings respectively.

[ellatrix]

Wrapping in divs is tricky, because then we somehow need to ensure that inside that div dt elements come first and the dd elements follow. If these are mixed, then there's no point to group them.

[tomdevisser]

@ellatrix Are you still working on this? And could you summarize anything that's left to be done before this can be merged?

[hans2103]

Quite some time has passed since there was any movement here.
What can do to help move this PR forward?

Link to the first website ever
https://info.cern.ch/hypertext/WWW/TheProject.html
See source code... even a description list over there!