Create a wine list

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.

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 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“).

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 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
Wine list with the Description List Block
The final wine list that we built and the customer will maintain.

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.

We need three columns for all drinks including the wine list.

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.

Adding headlines gives the page HTML structure and the side appearance is preserved.

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.

The Grid style can be easy changed 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.

With the Customizer a alternating background- and font-color can be added and that very clearly and maintainable, if something should be changed.

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:


Leave a Reply

Your email address will not be published. Required fields are marked *