New option for Spacing and Indent
We are happy to use the Description List Block. A number of possible areas of application on our customer’s Internet sites have been already come together. We have updated for our customer websites: CVs and Vitas, wine-, beverage- and menu-cards for cafes and restaurants and concept explanations for organizations and groups. We are even surprised how often we have used our Description List Block.
At first we just knew that we would need a block implementation for the Gutenberg editor, in order to be able to create Description List’s elements <dl>, <dd> and <dt> faster and better. And right here was the first difficulty, there were three HTML elements that allowed different variations. Since the first version several drafts were needed until a basic framework was clear and a few very simple options were implemented.
Within Gutenberg it was already possible to quickly and easily create, modify, expand and maintain description lists, which is very important for some of our customers. But options for the design also play a decisive role in the Gutenberg Editor, which we would like to support for the individual configuration of description lists.
With the two new options “Spacing” and “Indent”, the spacing and the division can be set for one of the two styles.
How to improve the mobile view
Funnily enough, the margin attribute is used here by many themes and so we only overwrite the margin with the Description List Block and we can ignore padding.
The term elements (dt) are explicitly assigned margin-bottom: 0 and the description elements (dd) a margin-bottom: 20px.
Many layouts can be implemented using the settings for the margin. This means that if the two lists are assigned different sizes to elements, this has an effect on the structure in the mobile view.
We are always excited about suggestions and project experiences like you would like to use the Description List Block. You can send us a pull request on GitHub or ask us something in the support forum on wordpress.org.