We use a description list appreciably often in our projects. With the successful use of description lists, we immediately looked, but in vain, for a suitable Gutenberg block. We know we can’t cover everything with a description list, but the CSS structure is often similar we add to tables, unsorted lists, or description lists. And a description list can be very fancy if it fits.
Since we are also in love with statistics and there isn’t any implementation of a description list in the Gutenberg Core Blocks, we don’t want to hold back the fun and look at the HTML elements used for an average website and what role a description list actually plays. A search specifically for the description list turned out to be rather small and just one statistic for HTML on average websites (“The Average Web Page“) list the DL, DT and DD elements in the #Text Content section. The searched elements are far behind DIV, P and LI. Even HR and FIGURE can be found further up the front. From then on, at the latest, we knew that big things could be changed in a non-existent small niche. (:
The requirement for our projects is to develop a suitable Gutenberg block for a quick set-up, changes, and adjustments in the project also with the customer (“Our new Gutenberg Block for fast editing“).
What count for us is that we benefit for our projects with the HTML description list
and a suitable Gutenberg block do the rest.
Create a wine-“description list”
Some fewer steps should do the framework with the CSS :nth-child() selector so we don’t get complicated like before:
- Do a three-column structure with the Gutenberg core Block: Columns
- Use the Gutenberg core Block: Heading
- Special wine list design will do the Description List Block
- The open-out :nth-child() CSS selectors give the appropriate design
A full responsive tree columns layout with the core Design Block “Columns”
The Columns Block is in the Gutenberg Block Design category. We use three columns of equal widths. The unique thing here is that the Columns Block is responsive and not only arranges the three columns next to one another but also below one another if there is not enough space on small screens.
The Gutenberg List View shows our next two steps which are to add headings and content.
The core Text Block “Heading” gives A11y performance and SEO power
Also, accessibility aka a11y as SEO depends on clear structures. And clear structures depend on using structure HTML elements. Here we add H2 headlines to each column. The content is thus divided into speaking subsections.
The Gutenberg Heading Block comes with the Gutenberg core and all we have to do is place the block. No installation or extensive configuration.
The wine list content does the Description List Block
Now we have arrived at the goal of the wine list, the content. For that, we use the Description List Block. It displays our drinks in definition form with pairs of terms and their descriptions. What we use is the Grid style in the Styles panel.
For fast adding and editing the drinks the Block defines some shortcuts for adding term and description pairs before (Cmd(⌘)+E (Mac) or Shift+E (Window)) and after selection (Cmd(⌘)+D (Mac) or Shift+D (Window)), delete the selected pair (Cmd(⌘)+Y (Mac) or Shift+Y (Window)) or do standard line break (Shift+ENTER).
If we want to use the same element several times in a row, we can proceed like this and add pairs and simply leave the corresponding unused element empty.
We’ll add CSS selectors for the fine-tuning
To give the whole thing the appropriate design, we decide to use the CSS :nth-child() selector.
Using the key elements even and add, we can select the columns in different colors and equip them with background colors and corresponding font colors.
You can find the code here: