Our new Gutenberg Block for faster editing

We wanted to use a description list more and more frequently for our current projects. We noticed two things:

  • WordPress doesn’t yet provide support for all HTML elements such as the description list.
  • Working between HTML view in the Classic block, preview and CSS editing disrupted the entire project work with slow tasks.

With our increased project knowledge, we wanted to tackle the two tasks before we want to get in contact with our customers again.

We didn’t make it easy for ourselves either and initially pursued three other different concepts to implement a description list, from which we could learn a lot but had to discard it again.

  • InnerBlocks / Nested Blocks initially seemed to be the appropriate solution, but didn’t bring enough advantages and could not increase the clarity or the efficient work that we criticized.
  • One approach would have been to transform between InnerBlocks. But even in this way, the work would be characterized by later converting the blocks to the desired HTML structure, as the actual creation of an always uniform HTML structure.
  • The last previous version no longer dealt with the approach of InnerBlocks / Nested Blocks, but didn’t give up the idea of arranging the generated HTML elements, but this could end up in frequent invalid HTML and the avoidance of HTML structure errors didn’t lead to any better service.

After the fourth draft, it was clear how the implementation should look or, better still, how it should not look. The concepts that were considered at the beginning did not change much for the time being: Faster work with shortcuts and easy editing in the same view and changing the appearance via CSS.

Description List Block lets you work more productively

Description List Block Shortcuts
Shortcuts

In the editing view it is basically still possible to insert HTML code and to change the HTML of blocks, but this is only possible by switching the block view, which doesn’t lead to faster work. The edit view since Gutenberg shows all added CSS selectors and at the same time can add and change HTML elements with text.

The Description List Block provides buttons for this in the Block Toolbar or via Shortcuts.

More Styles

Description List Block grid style
Description List Block with Grid Style

Description lists are small atoms of an entire website and the total number of design options isn’t the same as that of complex molecules organism groups. Two styles should be supported: Default and Grid. The latter is a little more space-saving and offers larger lists the necessary overview, whereby a small fallback for mobile support is beneficial for distribution.

Description List Block reduces your project working time

To sum up, creating a Description List without block support is not wrong, but it does create some work that can grow in size to the point of not being used. Since a description list is the right choice in many places.

Frontend

However, we want to offer the HTML and the required CSS selectors for the Gutenberg editor.

HTML

With enough potential to eliminate the many little time wasters and to create the description lists in one go according to all required needs.