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 each and 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.
The requirement for our projects are 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“).
Create a wine-“description list”
Some less steps should do the framework with the CSS :nth-child() selector 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 special 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 add headings and the 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 do 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
In order to give the whole thing the appropriate design, we decide to use the CSS :nth-child() selector.
Using the key elements
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: